97 lines
3.5 KiB
Vue
97 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<el-dialog v-model="showDialog" :destroy-on-close="true" title="新增人员" @close="close" :close-on-click-modal="false">
|
||
|
|
<FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
|
||
|
|
<template #rybq>
|
||
|
|
<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/MyComponents/ChooseMarks/index.vue";
|
||
|
|
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||
|
|
import { reactive, ref,getCurrentInstance } from 'vue';
|
||
|
|
const { proxy } = getCurrentInstance();
|
||
|
|
const { D_BZ_MZ } = proxy.$dict("D_BZ_MZ"); // 获取字典数据
|
||
|
|
const elform = ref()
|
||
|
|
const roleIds = ref([])
|
||
|
|
const showDialog = ref(false)
|
||
|
|
const chooseMarksVisible = ref(false)
|
||
|
|
const emit = defineEmits(['change'])
|
||
|
|
const listQuery = ref({})
|
||
|
|
const formData = ref([
|
||
|
|
{ label: "人员姓名", prop: "xm", type: "input" ,width:'45%'},
|
||
|
|
{ label: "身份证号", prop: "sfzh", type: "input" ,width:'45%'},
|
||
|
|
{ label: "手机号码", prop: "hjdz", type: "input",width:'45%' },
|
||
|
|
{ label: "人员民族", prop: "hjdpcsdm", type: "select" ,options:D_BZ_MZ,width:'45%'},
|
||
|
|
{ label: "户籍地址", prop: "bqList", type: "input",width:'100%',disabled:true },
|
||
|
|
{ label: "现居住地址", prop: "sfttr", type: "input",width:'100%'},
|
||
|
|
{ label: "特征描述", prop: "sfxyr", type: "input" ,width:'100%'},
|
||
|
|
{ label: "人员标签", prop: "rybq", type: "slot" ,width:'45%'},
|
||
|
|
{ label: "车牌号", prop: "wx", type: "input" ,width:'45%'},
|
||
|
|
{ label: "人员照片", prop: "qq", type: "upload" ,width:'45%'},
|
||
|
|
])
|
||
|
|
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 = () =>{
|
||
|
|
showDialog.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 选择标签
|
||
|
|
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)=>{
|
||
|
|
emit('change',[val])
|
||
|
|
showDialog.value = false;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const close = () =>{
|
||
|
|
elform.value.reset();
|
||
|
|
showDialog.value = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({init})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
.marks{
|
||
|
|
width: 100%;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 32px;
|
||
|
|
border: 1px solid #e9e9e9;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
</style>
|