更新页面

2025-07-10 20:53:34 +08:00
parent a903362712
commit f8559da65b
4 changed files with 2 additions and 2 deletions
--- a/src/components/ChooseList/ChooseZdr/addPeo.vue
+++ b/src/components/ChooseList/ChooseZdr/addPeo.vue
@ -0,0 +1,100 @@
+<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 #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,getCurrentInstance } from 'vue';
+const { proxy } = getCurrentInstance();
+const { D_BZ_XB } = proxy.$dict("D_BZ_XB"); // 获取字典数据
+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: "ryXm", type: "input" ,width:'45%'},
+    { label: "性别", prop: "ryXb", type: "select" ,width:'45%',options:D_BZ_XB},
+    { label: "身份证号", prop: "rySfzh", type: "input" ,width:'45%'},
+    { label: "手机号码", prop: "ryLxdh", type: "input",width:'45%' },
+    { label: "户籍地址", prop: "hjdXz", type: "input",width:'100%'},
+    { label: "现居住地址", prop: "xzdXz", type: "input",width:'100%'},
+    { label: "特征描述", prop: "qtTzms", type: "input" ,width:'100%'},
+    { label: "人员标签", prop: "bqList", type: "slot" ,width:'100%'},
+    { label: "车牌号", prop: "clCph", type: "input" ,width:'45%'},
+    { label: "车架号", prop: "clCjh", type: "input" ,width:'45%'},
+    { label: "人员照片", prop: "fjZp", type: "upload" ,width:'100%'},
+])
+const rules = reactive({
+    ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+    rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
+    ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
+    ryLxdh: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
+    hjdXz: [{ required: true, message: "请输入户籍地", trigger: "blur" }],
+    xzdXz: [{ required: true, message: "请输入现居住地址", trigger: "blur" }],
+})
+const init = () =>{
+    showDialog.value = true;
+}
+
+// 选择标签
+const choosed = (val) => {
+    listQuery.value.bqList = val.map(v=>{
+        return { bqZl:v.bqLb , bqId:v.id, bqLx:v.bqLx, bqLb:v.bqLb, bqMc:v.bqMc, bqDm:v.bqDm }
+    });
+    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)=>{
+        val.id = new Date().getTime()
+        emit('change',val)
+        showDialog.value = false;
+    })
+}
+
+const close = () =>{
+    elform.value.reset();
+    listQuery.value.bqList = []
+    roleIds.value = []
+    showDialog.value = false;
+}
+
+defineExpose({init})
+</script>
+
+<style lang="scss" scoped>
+
+.marks{
+    width: 100%;
+    min-height: 32px;
+    border: 1px solid #e9e9e9;
+    border-radius: 4px;
+}
+</style>