[BD]完整的弹窗导入执行操作-转让为例

1.添加操作弹窗按钮, 引入组件

<el-button @click="isOpen = true">发起转让</el-button>  
<AddTransfer/>

<script setup lang="ts">
import AddTransfer from './AddTransfer.vue'

const isOpen = ref(false)
provide('isOpen', isOpen)
<script/>

2.弹窗组件代码

<template>
    <div>
        <el-dialog v-model="isOpen" title="发起转让">
            <el-form :model="form">
                <el-form-item label="备注">
                    <el-input v-model="form.remark" autocomplete="off" placeholder="备注" class="remark" />
                </el-form-item>
                <el-form-item label="用户" prop="uid">
                    <el-select v-model="form.uid" placeholder="用户">
                        <el-option :label="item.title" :value="item.id" :key="item.id" v-for="item in userList" />
                    </el-select>
                </el-form-item>
                <el-form-item label="文件">
                    <el-upload ref="upload" class="upload-demo"
                        :action="url" :auto-upload="false"
                        :headers="headerObj" :data="form" :on-success="onSuccess">
                        <template #trigger>
                            <el-button type="primary">选择文件</el-button>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isOpen = false">取消</el-button>
                    <el-button type="primary"  @click="submitUpload"> 确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
    import { useAdminInfo } from '/@/stores/adminInfo'
    import { reactive, ref, watchEffect, inject } from 'vue'

    import type { UploadInstance} from 'element-plus'
    import { ElNotification} from 'element-plus'
    import { addTransferUrl,getUserList } from '/@/api/backend/adminapi'

    const upload = ref < UploadInstance > ()
    const submitUpload = () => {
        upload.value!.submit()
    }

    // el-upload中的属性data, 用来传值, 这里名称要对应
    const form = reactive({
        remark: '',
        uid:''
    })
    
    // 弹窗
    const isOpen = inject('isOpen')

    const headerObj = {
        batoken: useAdminInfo().getToken()
    }
    let url = addTransferUrl(); //上传链接
    const userList = ref([])

    // 打开弹窗时加载用户列表
    watchEffect(() => {
        if (isOpen.value) {
            getUserList().then((res) => {
                userList.value  = res.data
            })
        }
    });

    // 上传成功的回调
    const onSuccess = (res) => {
        console.log(res)
        if (res.code === 1) {
            ElNotification({
                message: "导入成功"
            })
        } else {
            ElNotification({
                message: res.msg
            })
        }
    }
</script>
<style>
.remark {
    width: 200px;
}
</style>

3.封装URL

export function getUserList() {
    let url = getUrl() + '/admin/AdminUser/getUserList' + '?server=1'
    return createAxios({
        url:url,
        method: 'get',
    })
}


// 转让卡
export const addTransferUrl = (): string => {
    let url = getUrl() + '/admin/transferLog/addTransfer' + '?server=1'
    return url;
}

4.后端导入代码

public function addTransfer()
{
    $list = $this->import_excel();
    $uid    = request()->post('uid');
    $remark = request()->post('remark');

    $data = [];
    $err = [];

    foreach ($list as $item) {
        if (!isset($item[0]) || ! $item[0]) {
            continue;
        }
        $sss_id = str_replace('.0', '', $item[0]);
        if (strlen($sss_id) !== $this->length) {
            $err[] = $sss_id;
        }
        if (! is_numeric($sss_id)) {
            $err[] = $sss_id;
        }
        $data[] = $sss_id;
    }

    if ($err) {
        $errCount = count($err);
        $this->error("格式错误, 数量{$errCount}");
    }

    Db::startTrans(); //记得开启事务
    $time = date('Y-m-d H:i:s');
    try {

        // 变更用户
        $simModel = new \app\admin\model\SSS();
        $res = $simModel->whereIn('sss_id', $data)->update(['uid'=>$uid]);
        if (! $res) {
            throw new \Exception("转让失败");
        }

        // 添加记录
        $log = [
            'uid'        =>  $uid,
            'count'      => count($data),
            'list'       => implode(',', $data),
            'created_at'    => $time,
            'remark'        => $remark,
        ];
        $res = $this->model->create($log);
        if (! $res) {
            throw new \Exception("添加日志失败");
        }

        // 提交事务
        Db::commit();
    } catch (\Exception $e) {
        // 回滚事务
        Db::rollback();
        $this->error($e->getMessage());
        exit;
    }
    $this->success('操作成功');
}

5.后端用户列表代码

// app/admin/controller/AdminUser.php
/**
 * 获取可见用户列表
 * @return void
 */
public function getUserList()
{
    $uid = $this->auth->getUid();
    $list = $this->model->getUserList($uid);
    $this->success('', $list);
}

// app/admin/model/AdminUser.php
// 获取可见用户列表
public function getUserList($uid)
{
    $id_arr = $this->getChildArr($uid);
    $id_arr[] = $uid;
    $list = $this->field(['id','nickname as title'])->whereIn('id', $id_arr)->select()->toArray();
    return $list;
}