ba_web/src/views/Training/trainingCompanyNjsp/components/addForm.vue

<template>
    <el-dialog :title="'年检签到'+title" v-model="visible" width="80%" :destroy-on-close="true" @close="close">
        <div class="cntinfo">
            <FormMessage ref="FormRef" :disabled="disabled" v-model="formData" :rules="rules" :formList="formList" :labelWidth='120'>
            </FormMessage>
            <el-divider border-style="dashed"><span class="pointer f16" @click="openPeoList">培训人员<el-icon size="22" color="#409eff" class="ml5" style="top: 4px;"><CirclePlus /></el-icon></span></el-divider>
            <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
                :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
                @chooseData="chooseData">
                <template #whcd="{ row }">
                    <DictTag :value="row.whcd" :tag="false" :options="props.dic.D_BZ_WHCD" />
                </template>
                <template #qdztdm="{ row }">
                    <span>{{ row.qdztdm === '1' ? '已签到' : '未签到' }}</span>
                </template>
                <!-- 操作 -->
                <template #controls="{ row }">
                    <el-link type="primary" link @click="deleteItem(row)">删除</el-link>
                </template>
            </MyTable>
            <div class="mt10 flex just-center">
                <el-button @click="close">关闭</el-button>
                <el-button @click="save" type="primary" :loading="loading">保存</el-button>
            </div>
         </div>
    </el-dialog>
    <!-- 选择保安员 -->
    <ChooseList v-model="shoewList" :data="chooseType" @choosed="choosedList"></ChooseList>
</template>
<script setup>
    import { ElMessage } from "element-plus";
    import { qcckPost } from "@/api/qcckApi";
    import ChooseList from "@/components/ChooseList/index.vue";
    import MyTable from "@/components/aboutTable/MyTable.vue";
    import FormMessage from '@/components/aboutTable/FormMessage.vue'
    import { ref,reactive,defineEmits } from 'vue'
    const emit = defineEmits(['refresh'])
    const props = defineProps({
        dic: {
            type: Object,
            default: () => ({})
        }
    })
    const chooseType = reactive({
        title: '选择保安员',
        type: 'Bay',//选择类型
        Single: false,//是否单选
        roleIds: [],//回显的数据
    });
    const disabled = ref(false)
    const title = ref('')
    const formData = ref({})
    const FormRef = ref()
    const shoewList = ref(false)
    const visible = ref(false)
    const loading = ref(false)
    const formList = reactive([
        [
            { label: "培训项目名称", prop: "pxxmmc", type: "input" },
            { label: "培训地址", prop: "pxdz", type: "input"},
        ],
        [
            { label: "培训开始时间", prop: "pxkssj", type: "date",lx:'datetime' },
            { label: "培训结束时间", prop: "pxjssj", type: "date" ,lx:'datetime' },
        ],
        [
            { label: "组织单位", prop: "zzdw", type: "input" },
            { label: "培训内容", prop: "pxnr", type: "input" },
        ]
    ])
    const rules = ref({
        pxxmmc: [{ required: true, message: '请输入培训项目名称', trigger: ['blur'] }],
        pxdz: [{ required: true, message: '请输入培训地址', trigger: ['blur'] }],
        pxkssj: [{ required: true, message: '请选择培训开始时间', trigger: ['change'] }],
        pxjssj: [{ required: true, message: '请选择培训结束时间', trigger: ['change'] }],
        zzdw: [{ required: true, message: '请输入组织单位', trigger: ['blur'] }],
        pxnr: [{ required: true, message: '请输入培训内容', trigger: ['blur'] }],
    })
    const pageData = reactive({
        tableData: [],
        keyCount: 0,
        tableConfiger: {
            rowHieght: 61,
            showSelectType: "checkBox",
            loading: false,
            // haveControls: false
        },
        tableHeight: 320,
        tableColumn: [
            { label: "保安公司名称", prop: "ssbakk",showOverflowTooltip: true },
            { label: "年审年份", prop: "njnf"},
            { label: "姓名", prop: "xm" },
            { label: "身份证号码", prop: "sfzhm",showOverflowTooltip: true },
            { label: "电话", prop: "dh" },
            { label: "文化程度", prop: "whcd" ,showSolt: true},
            { label: "证书编号", prop: "zsbh", showOverflowTooltip: true },
            { label: "服务行业", prop: "fwxymc" },
            { label: "入职时间", prop: "rzsj" },
            { label: "上岗证号码", prop: "sgxkhm", showOverflowTooltip: true },
            { label: "签到状态", prop: "qdztdm",showSolt: true },
            { label: "签到时间", prop: "qdsj" },
        ]
});

const init = (type, row) => {
    visible.value = true
    pageData.keyCount++
    title.value = type == 'add' ? '新增' : '详情';
    disabled.value = title.value == '详情' ? true : false;
    if(title.value == '详情'){
        qcckPost({},'/mosty-base/bans/pxqd-item/getDetailInfo/'+row.id).then(res=>{
            formData.value = { ...res }
            delete formData.value.personAndNjxxList;
          pageData.tableData = res.personAndNjxxList.map(item => {
              return {
                ...item,
                ssbakkId: item.bakkid,
                ssbakk: item.bakkmc,
              }
            }) || [];
        })
    }
}

const openPeoList = () => {
    if(disabled.value) return;
    shoewList.value = true;
}
// 删除
const deleteItem = (row) => {
    pageData.tableData = pageData.tableData.filter(it=>it.id != row.id);
    chooseType.roleIds = chooseType.roleIds.filter(id=>id != row.id);
}
// 选择的数据
const choosedList = (list) => {
    pageData.tableData = list || [];
    chooseType.roleIds = list.map(it=>it.id);
}

const save = () => {
  FormRef.value.submit((val) => {
    const tableData = pageData.tableData.map(item => {
      return {
        ...item,
        bakkid: item.ssbakkId,
        bakkmc: item.ssbakk,
      }
    })
    let data = { pxqdItem: { ...val }, pxqdPersons: tableData }
        qcckPost(data,'/mosty-base/bans/pxqd-item/addWithPersons').then(res=>{
            ElMessage.success('保存成功');
            emit('refresh')
            loading.value = false;
            close()
        })
    })

}
const close = () => {
    FormRef.value?.reset();
    pageData.tableData = [];
    disabled.value = false;
    visible.value = false
}
defineExpose({
    init
})
</script>
<style lang="scss" scoped>
.cntinfo{
    padding: 20px 10px;
    box-sizing: border-box;
}
</style>