sgxt_web/src/components/addPerson/index.vue

<template>
  <el-dialog v-model="modelValue" :destroy-on-close="true" :title="title+'人员'" @close="close" :close-on-click-modal="false">
    <FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
        <template #bqList>
            <div class="marks pointer" @click="chooseMarksVisible = true">
                <span style="color: rgb(175 178 184);padding-left: 10px;" v-if="!listQuery.bqList || listQuery.bqList.length == 0 ">请选择标签</span>
                <span v-else >
                    <el-tag @close.stop="closeTag(idx)" type="success" closable v-for="(it,idx) in listQuery.bqList" :key="idx">{{ it.bqMc }}</el-tag >
                </span>
            </div>
        </template>
    </FormMessage>
    <template #footer>
        <div class="flex just-center">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
    </template>
  </el-dialog>
  <ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />

</template>

<script setup>
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { reactive, ref } from 'vue';
const props = defineProps({
    dic:{
        type:Object,
        default:{}
    },
    modelValue:{
        type:Boolean,
        default:false
    }
})
const chooseMarksVisible = ref(false)
const roleIds = ref([])
const elform = ref()
const emit = defineEmits(['change'])
const listQuery = ref({})
const formData = ref([
    { label: "姓名", prop: "xm", type: "input" ,width:'48%'},
    { label: "性别", prop: "xb", type: "select",options:props.dic.D_BZ_XB ,width:'48%'},
    { label: "身份证号", prop: "sfzh", type: "input" ,width:'48%'},
    { label: "户籍地", prop: "hjdz", type: "input",width:'48%' },
    { label: "户籍地派出所", prop: "hjdpcsdm",depMc:'hjdpcs', type: "department" ,width:'48%'},
    { label: "标签", prop: "bqList", type: "slot",width:'100%' },
    { label: "是否挑头人", prop: "sfttr", type: "select",options:props.dic.D_BZ_SF ,width:'48%'},
    { label: "是否响应人", prop: "sfxyr", type: "select" ,options:props.dic.D_BZ_SF,width:'48%' },
    { label: "所属群体", prop: "ssqt", type: "input" ,width:'48%'},
    { label: "微信号", prop: "wx", type: "input" ,width:'48%'},
    { label: "QQ", prop: "qq", type: "input" ,width:'48%'},
])
const rules = reactive({
    xm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    xb: [{ required: true, message: "请选择性别", trigger: "change" }],
    sfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
    hjd: [{ required: true, message: "请输入户籍地", trigger: "blur" }],
})
const title = ref('')
const order = ref(null)
const init = (type,row,index) =>{
    title.value = type == 'add' ? '新增' :'编辑';
    order.value = index;
    if(row) listQuery.value = {...row};
}

// 选择标签
const choosed = (val) => {
    listQuery.value.bqList = val.map(v=>{
        return { bqDm:v.bqDm, bqId:v.id, bqLb:v.bqLb, bqLx:v.bqLx, bqMc:v.bqMc }
    });
    roleIds.value = val.map(v=>v.id)
}

// 删除数据
const closeTag = (idx) =>{
    listQuery.value.bqList.splice(idx,1)
    roleIds.value.splice(idx,1)
}

const submitForm = () =>{
    elform.value.submit((val)=>{
        let obj = { data:val,type:title.value ,index:order.value}
        emit('change',obj)
        emit('update:modelValue',false)
    })
}

const close = () =>{
    elform.value.reset();
    emit('update:modelValue',false)
}

defineExpose({init})
</script>

<style lang="scss" scoped>

.marks{
    width: 100%;
    width: 100%;
    min-height: 32px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
}
</style>