lcw
This commit is contained in:
@ -3,35 +3,60 @@
|
||||
<div class="headClass">
|
||||
<h3>人员信息</h3>
|
||||
<!-- @click="gettbGsxtZdqtUpdate" -->
|
||||
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="submit">保存</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="showBut"
|
||||
:disabled="disabled"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<FormMessage :disabled="disabled" v-model="listQuery" :formList="formData" labelWidth="130px" ref="elform"
|
||||
:rules="rules">
|
||||
<FormMessage
|
||||
:disabled="disabled"
|
||||
v-model="listQuery"
|
||||
:formList="formData"
|
||||
labelWidth="130px"
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
>
|
||||
<template #ryzp>
|
||||
<div style="width: 100%; padding-left: 50px">
|
||||
<MOSTY.Upload :showBtn="false" :limit="1" v-model="listQuery.ryzp" />
|
||||
<MOSTY.Upload
|
||||
:showBtn="false"
|
||||
:limit="1"
|
||||
v-model="listQuery.ryzp"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #gkMjXm>
|
||||
<div>
|
||||
<el-input v-model="listQuery.gkMjXm" class="group" placeholder="请输入管控民警姓名" readonly
|
||||
@click="chooseMarksVisible = true" />
|
||||
<el-input
|
||||
v-model="listQuery.gkMjXm"
|
||||
class="group"
|
||||
placeholder="请输入管控民警姓名"
|
||||
readonly
|
||||
@click="chooseMarksVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <template #gkmjsfzh>
|
||||
<!-- <template #gkMjSfzh>
|
||||
<div>
|
||||
<el-input v-model="listQuery.gkmjsfzh" class="group" placeholder="请输入管控民警身份证号" readonly
|
||||
<el-input v-model="listQuery.gkMjSfzh" class="group" placeholder="请输入管控民警身份证号" readonly
|
||||
@click="chooseMarksVisible = true" />
|
||||
</div>
|
||||
</template> -->
|
||||
<!-- { label: "管控民警", prop: "gkMjXm", type: "slot" }, -->
|
||||
<!-- { label: "管控民警身份证号", prop: "gkmjsfzh", type: "slot" }, -->
|
||||
<!-- { label: "管控民警身份证号", prop: "gkMjSfzh", type: "slot" }, -->
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" /> -->
|
||||
<ChooseUser v-model="chooseMarksVisible" @choosedUsers="choosed" :roleIds="roleIds" />
|
||||
<ChooseUser
|
||||
v-model="chooseMarksVisible"
|
||||
@choosedUsers="choosed"
|
||||
:roleIds="roleIds"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -43,24 +68,52 @@ import ChooseUser from "@/components/ChooseList/ChooseUser/index.vue";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, watch } from "vue";
|
||||
import { tbGsxtZdryUpdate } from "@/api/zdr.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB, D_BZ_ZZMM, D_BZ_HYZK, D_BZ_MZ, D_BZ_XZQHDM, D_ZDRY_RYLX, D_BZ_RCBKZT, D_GS_ZDR_RYJB, D_GS_ZDR_YJDJ, D_GS_BK_SSJZ, D_GS_ZDR_CZZT, D_BZ_WHCD, D_ZDRY_ZYLB } =
|
||||
proxy.$dict('D_BZ_XB', 'D_BZ_ZZMM', 'D_BZ_HYZK', 'D_BZ_MZ', "D_ZDRY_RYLX", 'D_BZ_XZQHDM', 'D_BZ_RCBKZT', 'D_GS_ZDR_RYJB', 'D_GS_ZDR_YJDJ', 'D_GS_BK_SSJZ', 'D_GS_ZDR_CZZT', 'D_BZ_WHCD', 'D_ZDRY_ZYLB')
|
||||
const {
|
||||
D_BZ_XB,
|
||||
D_BZ_ZZMM,
|
||||
D_BZ_HYZK,
|
||||
D_BZ_MZ,
|
||||
D_BZ_XZQHDM,
|
||||
D_ZDRY_RYLX,
|
||||
D_BZ_RCBKZT,
|
||||
D_GS_ZDR_RYJB,
|
||||
D_GS_ZDR_YJDJ,
|
||||
D_GS_BK_SSJZ,
|
||||
D_GS_ZDR_CZZT,
|
||||
D_BZ_WHCD,
|
||||
D_ZDRY_ZYLB
|
||||
} = proxy.$dict(
|
||||
"D_BZ_XB",
|
||||
"D_BZ_ZZMM",
|
||||
"D_BZ_HYZK",
|
||||
"D_BZ_MZ",
|
||||
"D_ZDRY_RYLX",
|
||||
"D_BZ_XZQHDM",
|
||||
"D_BZ_RCBKZT",
|
||||
"D_GS_ZDR_RYJB",
|
||||
"D_GS_ZDR_YJDJ",
|
||||
"D_GS_BK_SSJZ",
|
||||
"D_GS_ZDR_CZZT",
|
||||
"D_BZ_WHCD",
|
||||
"D_ZDRY_ZYLB"
|
||||
);
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
default: () => {}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||||
...rule.identityCardRule({ validator: true }, 'rySfzh'), //身份证校验
|
||||
...rule.identityCardRule({ validator: true }, "rySfzh"), //身份证校验
|
||||
...rule.phoneRule({ validator: true }, "gkMjLxfs"), // 是否必填 是否进行校验,
|
||||
rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
|
||||
ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
|
||||
@ -68,11 +121,15 @@ const rules = reactive({
|
||||
ryCsrq: [{ required: true, message: "请选择出生日期", trigger: "change" }],
|
||||
zdrYjdj: [{ required: true, message: "请选择预警等级", trigger: "change" }],
|
||||
gxSsbmdm: [{ required: true, message: "请选择协管单位", trigger: "change" }],
|
||||
zdrRkkssj: [{ required: true, message: "请选择入库开始时间", trigger: "change" }],
|
||||
zdrRkjssj: [{ required: true, message: "请选择入库结束时间", trigger: "change" }],
|
||||
gkMjLxfs: [{ required: true, message: "请输入民警联系方式", trigger: "blur" }],
|
||||
zdrRkkssj: [
|
||||
{ required: true, message: "请选择入库开始时间", trigger: "change" }
|
||||
],
|
||||
zdrRkjssj: [
|
||||
{ required: true, message: "请选择入库结束时间", trigger: "change" }
|
||||
],
|
||||
gkMjLxfs: [{ required: true, message: "请输入民警联系方式", trigger: "blur" }]
|
||||
// gkMjXm: [{ required: true, message: "请选择管控民警", trigger: "change" }],
|
||||
// gkmjsfzh: [{ required: true, message: "请选择管控民警身份证号", trigger: "change" }],
|
||||
// gkMjSfzh: [{ required: true, message: "请选择管控民警身份证号", trigger: "change" }],
|
||||
// rylx: [{ required: true, message: "请选择人员类型", trigger: "change" }]
|
||||
});
|
||||
const listQuery = ref({}); //表单
|
||||
@ -82,11 +139,35 @@ const formData = ref([
|
||||
{ label: "人员照片", prop: "ryzp", type: "slot", width: "100%" },
|
||||
{ label: "姓名", prop: "ryXm", type: "input", width: "30%" },
|
||||
{ label: "身份证号", prop: "rySfzh", type: "input", width: "30%" },
|
||||
{ label: "性别", prop: "ryXb", type: "select", options: D_BZ_XB, width: "30%" },
|
||||
{
|
||||
label: "性别",
|
||||
prop: "ryXb",
|
||||
type: "select",
|
||||
options: D_BZ_XB,
|
||||
width: "30%"
|
||||
},
|
||||
{ label: "出生日期", prop: "ryCsrq", type: "date", width: "30%" },
|
||||
{ label: "民族", prop: "ryMz", type: "select", options: D_BZ_MZ, width: "30%" },
|
||||
{ label: "协管单位", prop: "gxSsbmdm", depMc: 'gxSsbmmc', type: "department", width: "30%" },
|
||||
{ label: "预警等级", prop: "zdrYjdj", type: "select", options: D_GS_ZDR_YJDJ, width: "30%" },
|
||||
{
|
||||
label: "民族",
|
||||
prop: "ryMz",
|
||||
type: "select",
|
||||
options: D_BZ_MZ,
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
label: "协管单位",
|
||||
prop: "gxSsbmdm",
|
||||
depMc: "gxSsbmmc",
|
||||
type: "department",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
label: "预警等级",
|
||||
prop: "zdrYjdj",
|
||||
type: "select",
|
||||
options: D_GS_ZDR_YJDJ,
|
||||
width: "30%"
|
||||
},
|
||||
{ label: "管控民警", prop: "gkMjXm", type: "slot", width: "30%" },
|
||||
{ label: "民警联系方式", prop: "gkMjLxfs", type: "input", width: "30%" },
|
||||
{ label: "入库开始时间", prop: "zdrRkkssj", type: "datetime", width: "30%" },
|
||||
@ -94,30 +175,85 @@ const formData = ref([
|
||||
{ label: "重点人联系电话", prop: "ryLxdh", type: "input", width: "30%" },
|
||||
{ label: "籍贯", prop: "ryJg", type: "input", width: "30%" },
|
||||
{ label: "曾用名", prop: "cym", type: "input", width: "30%" },
|
||||
{ label: "文化程度", prop: "whcdBm", type: "select", options: D_BZ_WHCD, width: "30%" },
|
||||
{ label: "政治面貌", prop: "zzmm", type: "select", options: D_BZ_ZZMM, width: "30%" },
|
||||
{
|
||||
label: "文化程度",
|
||||
prop: "whcdBm",
|
||||
type: "select",
|
||||
options: D_BZ_WHCD,
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
label: "政治面貌",
|
||||
prop: "zzmm",
|
||||
type: "select",
|
||||
options: D_BZ_ZZMM,
|
||||
width: "30%"
|
||||
},
|
||||
{ label: "职业", prop: "zyBm", type: "input", width: "30%" },
|
||||
{ label: "人员级别", prop: "zdrRyjb", type: "select", options: D_GS_ZDR_RYJB, width: "30%" },
|
||||
{
|
||||
label: "人员级别",
|
||||
prop: "zdrRyjb",
|
||||
type: "select",
|
||||
options: D_GS_ZDR_RYJB,
|
||||
width: "30%"
|
||||
},
|
||||
{ label: "户籍地区划", prop: "hjdQh", type: "input", width: "30%" },
|
||||
{ label: "户籍地详址", prop: "hjdXz", type: "input", width: "30%" },
|
||||
{ label: "户籍地派出所", prop: "hjdPcsmc", type: "input", width: "30%" },
|
||||
{ label: "现住地区划", prop: "xzdQh", type: "input", width: "30%" },
|
||||
{ label: "现住地详址", prop: "xzdXz", type: "input", width: "30%" },
|
||||
{ label: "现住地派出所", prop: "xzdPcsdm", depMc: "xzdPcsmc", type: "department", width: "30%" },
|
||||
{
|
||||
label: "现住地派出所",
|
||||
prop: "xzdPcsdm",
|
||||
depMc: "xzdPcsmc",
|
||||
type: "department",
|
||||
width: "30%"
|
||||
},
|
||||
|
||||
// { label: "民警身份证", prop: "gkmjsfzh", type: "slot" },
|
||||
// { label: "民警身份证", prop: "gkMjSfzh", type: "slot" },
|
||||
{ label: "诉求单位", prop: "sqSsbmmc", type: "input", width: "30%" },
|
||||
{ label: "责任单位", prop: "zrSsbmmc", type: "input", width: "30%" },
|
||||
{ label: "所属警种", prop: "zdrSsjz", type: "select", options: D_GS_BK_SSJZ, width: "30%" },
|
||||
{ label: "涉及警种", prop: "zdrSjjz", type: "select", options: D_GS_BK_SSJZ, multiple: true, width: "30%" },
|
||||
{ label: "婚姻状态", prop: "hyzk", type: "select", options: D_BZ_HYZK, width: "30%" },
|
||||
{ label: "处置状态", prop: "zdrCzzt", type: "select", options: D_GS_ZDR_CZZT, width: "30%" },
|
||||
{ label: "布控状态", prop: "zdrBkZt", type: "select", options: D_BZ_RCBKZT, width: "30%" },
|
||||
{
|
||||
label: "所属警种",
|
||||
prop: "zdrSsjz",
|
||||
type: "select",
|
||||
options: D_GS_BK_SSJZ,
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
label: "涉及警种",
|
||||
prop: "zdrSjjz",
|
||||
type: "select",
|
||||
options: D_GS_BK_SSJZ,
|
||||
multiple: true,
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
label: "婚姻状态",
|
||||
prop: "hyzk",
|
||||
type: "select",
|
||||
options: D_BZ_HYZK,
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
label: "处置状态",
|
||||
prop: "zdrCzzt",
|
||||
type: "select",
|
||||
options: D_GS_ZDR_CZZT,
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
label: "布控状态",
|
||||
prop: "zdrBkZt",
|
||||
type: "select",
|
||||
options: D_BZ_RCBKZT,
|
||||
width: "30%"
|
||||
},
|
||||
// { label: "人员类型", prop: "rylx", type: "select", options: D_ZDRY_RYLX },
|
||||
|
||||
{ label: "Mac地址", prop: "macDz", type: "input", width: "30%" },
|
||||
// { label: "标签选择", prop: "tags", type: "slot", width: "100%" },
|
||||
{ label: "管控原因", prop: "zdrLkyy", type: "textarea", width: "100%" },
|
||||
{ label: "管控原因", prop: "zdrLkyy", type: "textarea", width: "100%" }
|
||||
]);
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
@ -125,14 +261,14 @@ const disabled = ref(false);
|
||||
// phoneList已重构为listQuery.value.ryLxdh
|
||||
// 创建一个工具函数进行深拷贝
|
||||
const deepClone = (obj) => {
|
||||
if (obj === null || typeof obj !== 'object') {
|
||||
if (obj === null || typeof obj !== "object") {
|
||||
return obj;
|
||||
}
|
||||
if (obj instanceof Date) {
|
||||
return new Date(obj.getTime());
|
||||
}
|
||||
if (obj instanceof Array) {
|
||||
return obj.map(item => deepClone(item));
|
||||
return obj.map((item) => deepClone(item));
|
||||
}
|
||||
const clonedObj = {};
|
||||
for (const key in obj) {
|
||||
@ -143,64 +279,79 @@ const deepClone = (obj) => {
|
||||
return clonedObj;
|
||||
};
|
||||
// 监听身份证号变化,自动填充性别、出生日期和民族
|
||||
watch(() => listQuery.value.rySfzh, (val) => {
|
||||
if (val && val.length === 18) {
|
||||
// 使用IdCard方法提取出生日期
|
||||
listQuery.value.ryCsrq = IdCard(val, 1);
|
||||
// 使用IdCard方法提取性别
|
||||
const genderText = IdCard(val, 2);
|
||||
listQuery.value.ryXb = D_BZ_XB.value.find(item => item.zdmc === genderText).dm;
|
||||
}
|
||||
});
|
||||
|
||||
// 监听props.dataList变化,处理初始化数据
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
console.log(val);
|
||||
|
||||
// 使用深拷贝避免直接引用同一个对象
|
||||
listQuery.value = deepClone(val);
|
||||
// 处理照片数据
|
||||
listQuery.value.ryzp = val.ryzp == null || val.ryzp == '' ? [] : [val.ryzp];
|
||||
listQuery.value.zdrSjjz = val.zdrSjjz == null || val.zdrSjjz == '' ? [] : JSON.parse(val.zdrSjjz);
|
||||
// 处理标签ID数据,确保数据回显
|
||||
if (val.tagIds && Array.isArray(val.tagIds) && val.tagIds.length > 0) {
|
||||
roleIds.value = [...val.tagIds];
|
||||
} else if (val.bqIds && Array.isArray(val.bqIds) && val.bqIds.length > 0) {
|
||||
roleIds.value = [...val.bqIds];
|
||||
} else {
|
||||
roleIds.value = [];
|
||||
watch(
|
||||
() => listQuery.value.rySfzh,
|
||||
(val) => {
|
||||
if (val && val.length === 18) {
|
||||
// 使用IdCard方法提取出生日期
|
||||
listQuery.value.ryCsrq = IdCard(val, 1);
|
||||
// 使用IdCard方法提取性别
|
||||
const genderText = IdCard(val, 2);
|
||||
listQuery.value.ryXb = D_BZ_XB.value.find(
|
||||
(item) => item.zdmc === genderText
|
||||
).dm;
|
||||
}
|
||||
}
|
||||
}, { deep: true })
|
||||
);
|
||||
|
||||
// 监听props.dataList变化,处理初始化数据
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
console.log(val);
|
||||
|
||||
// 使用深拷贝避免直接引用同一个对象
|
||||
listQuery.value = deepClone(val);
|
||||
// 处理照片数据
|
||||
listQuery.value.ryzp =
|
||||
val.ryzp == null || val.ryzp == "" ? [] : [val.ryzp];
|
||||
listQuery.value.zdrSjjz =
|
||||
val.zdrSjjz == null || val.zdrSjjz == "" ? [] : JSON.parse(val.zdrSjjz);
|
||||
// 处理标签ID数据,确保数据回显
|
||||
if (val.tagIds && Array.isArray(val.tagIds) && val.tagIds.length > 0) {
|
||||
roleIds.value = [...val.tagIds];
|
||||
} else if (
|
||||
val.bqIds &&
|
||||
Array.isArray(val.bqIds) &&
|
||||
val.bqIds.length > 0
|
||||
) {
|
||||
roleIds.value = [...val.bqIds];
|
||||
} else {
|
||||
roleIds.value = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 提交
|
||||
const submit = () => {
|
||||
loading.value = true
|
||||
gettbGsxtZdryUpdate()
|
||||
loading.value = true;
|
||||
gettbGsxtZdryUpdate();
|
||||
};
|
||||
//
|
||||
const gettbGsxtZdryUpdate = () => {
|
||||
const promes = {
|
||||
...listQuery.value,
|
||||
ryzp: listQuery.value.ryzp.length > 0 ? listQuery.value.ryzp.toString() : "",
|
||||
zdrSjjz: JSON.stringify(listQuery.value.zdrSjjz),
|
||||
|
||||
}
|
||||
ryzp:
|
||||
listQuery.value.ryzp.length > 0 ? listQuery.value.ryzp.toString() : "",
|
||||
zdrSjjz: JSON.stringify(listQuery.value.zdrSjjz)
|
||||
};
|
||||
elform.value.submit((data) => {
|
||||
tbGsxtZdryUpdate(promes).then((res) => {
|
||||
listQuery.value.ryzp = []
|
||||
proxy.$message({
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
tbGsxtZdryUpdate(promes)
|
||||
.then((res) => {
|
||||
listQuery.value.ryzp = [];
|
||||
proxy.$message({
|
||||
message: "更新成功",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const throwData = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -209,37 +360,40 @@ const throwData = () => {
|
||||
// 过滤掉空的电话号码
|
||||
resolve({
|
||||
...listQuery.value,
|
||||
ryzp: listQuery.value.ryzp && listQuery.value.ryzp.length > 0 ? listQuery.value.ryzp.toString() : '',
|
||||
zdrSjjz: JSON.stringify(listQuery.value.zdrSjjz),
|
||||
ryzp:
|
||||
listQuery.value.ryzp && listQuery.value.ryzp.length > 0
|
||||
? listQuery.value.ryzp.toString()
|
||||
: "",
|
||||
zdrSjjz: JSON.stringify(listQuery.value.zdrSjjz)
|
||||
});
|
||||
})
|
||||
});
|
||||
} else {
|
||||
elform.value.submit((data) => {
|
||||
// 如果没有验证方法,直接返回数据
|
||||
|
||||
resolve({
|
||||
...listQuery.value,
|
||||
ryzp: listQuery.value.ryzp && listQuery.value.ryzp.length > 0 ? listQuery.value.ryzp.toString() : '',
|
||||
zdrSjjz: JSON.stringify(listQuery.value.zdrSjjz),
|
||||
ryzp:
|
||||
listQuery.value.ryzp && listQuery.value.ryzp.length > 0
|
||||
? listQuery.value.ryzp.toString()
|
||||
: "",
|
||||
zdrSjjz: JSON.stringify(listQuery.value.zdrSjjz)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const choosed = (val) => {
|
||||
roleIds.value = [val[0].id]
|
||||
listQuery.value.gkMjXm = val[0].userName
|
||||
listQuery.value.gkmjsfzh = val[0].idEntityCard
|
||||
listQuery.value.gkMjLxfs = val[0].mobile
|
||||
roleIds.value = [val[0].id];
|
||||
listQuery.value.gkMjXm = val[0].userName;
|
||||
listQuery.value.gkMjSfzh = val[0].idEntityCard;
|
||||
listQuery.value.gkMjLxfs = val[0].mobile;
|
||||
listQuery.value.gkMjJh = val[0].inDustRialId;
|
||||
console.log(listQuery.value);
|
||||
|
||||
};
|
||||
defineExpose({
|
||||
throwData,
|
||||
throwData
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -283,7 +437,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
|
||||
@ -2,10 +2,21 @@
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>人员标签</h3>
|
||||
<el-button type="primary" :disabled="disabled" @click="chooseMarksVisible = true">选择</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="disabled"
|
||||
@click="chooseMarksVisible = true"
|
||||
>选择</el-button
|
||||
>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
<template #bqLx="{ row }">
|
||||
<DictTag :tag="false" :value="row.bqLx" :options="D_GS_BQ_DJ" />
|
||||
</template>
|
||||
@ -18,143 +29,181 @@
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<ChooseMarks v-model="chooseMarksVisible" @choosed="addMarks" :roleIds="roleIds" />
|
||||
<ChooseMarks
|
||||
v-model="chooseMarksVisible"
|
||||
@choosed="addMarks"
|
||||
:roleIds="roleIds"
|
||||
:bqLx="defaultBqLx"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
toRaw,
|
||||
computed,
|
||||
getCurrentInstance,
|
||||
onMounted,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
|
||||
import { tbGsxtZdryUpdate } from '@/api/zdr.js'
|
||||
import { tbGsxtZdryUpdate } from "@/api/zdr.js";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_BQ_DJ, D_GS_SSYJ } = proxy.$dict("D_GS_BQ_DJ", "D_GS_SSYJ"); //获取字典数据
|
||||
const chooseMarksVisible = ref(false)
|
||||
const chooseMarksVisible = ref(false);
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
default: () => {}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData = ref({})
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
pageData.tableData = val.bqList
|
||||
roleIds.value = val.bqList.map(v => v.bqId)
|
||||
console.log(roleIds.value);
|
||||
|
||||
}
|
||||
}, { deep: true })
|
||||
const roleIds = ref([])
|
||||
});
|
||||
|
||||
const listData = ref({});
|
||||
const roleIds = ref([]);
|
||||
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
listData.value = val;
|
||||
pageData.tableData = val.bqList;
|
||||
roleIds.value = val.bqList.map((v) => v.bqId);
|
||||
console.log(roleIds.value);
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 表格数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'bqMc',
|
||||
label: '标签名称',
|
||||
showOverflowTooltip: true
|
||||
}, {
|
||||
prop: 'bqDm',
|
||||
label: '标签代码',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'bqLx',
|
||||
label: '标签类型',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'bqLb',
|
||||
label: '标签类别',
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
tableColumn: [
|
||||
{
|
||||
prop: "bqMc",
|
||||
label: "标签名称",
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
prop: "bqDm",
|
||||
label: "标签代码"
|
||||
},
|
||||
{
|
||||
showSolt: true,
|
||||
prop: "bqLx",
|
||||
label: "标签类型"
|
||||
},
|
||||
{
|
||||
showSolt: true,
|
||||
prop: "bqLb",
|
||||
label: "标签类别"
|
||||
}
|
||||
],
|
||||
tableHeight: "200px",
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexLabel: "序号",
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
align: "center",
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 200,
|
||||
})
|
||||
controlsWidth: 200
|
||||
});
|
||||
|
||||
// 计算默认的标签类型:如果已选数据中有身份标签则默认显示身份标签,否则默认显示行为标签
|
||||
const defaultBqLx = computed(() => {
|
||||
if (roleIds.value && roleIds.value.length > 0) {
|
||||
const selectedItem = pageData.tableData.find((item) => roleIds.value.includes(item.bqId));
|
||||
if (selectedItem && selectedItem.bqLx) {
|
||||
return selectedItem.bqLx;
|
||||
}
|
||||
}
|
||||
return "02";
|
||||
});
|
||||
// 修改数据接口
|
||||
const zdqtUpdate = (val) => {
|
||||
const params = {
|
||||
id: listData.value.id,
|
||||
bqList: pageData.tableData,
|
||||
rySfzh: listData.value.rySfzh,
|
||||
}
|
||||
tbGsxtZdryUpdate(params).then(res => {
|
||||
rySfzh: listData.value.rySfzh
|
||||
};
|
||||
tbGsxtZdryUpdate(params).then((res) => {
|
||||
proxy.$message({
|
||||
message: val,
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
type: "success"
|
||||
});
|
||||
});
|
||||
};
|
||||
// 新增标签
|
||||
const addMarks = (val) => {
|
||||
pageData.tableData = val.map(v => {
|
||||
return { bqDm: v.bqDm, bqId: v.id, bqLb: v.bqLb, bqLx: v.bqLx, bqMc: v.bqMc }
|
||||
pageData.tableData = val.map((v) => {
|
||||
return {
|
||||
bqDm: v.bqDm,
|
||||
bqId: v.id,
|
||||
bqLb: v.bqLb,
|
||||
bqLx: v.bqLx,
|
||||
bqMc: v.bqMc,
|
||||
bqYs: v.bqYs
|
||||
};
|
||||
});
|
||||
roleIds.value = val.map(v => v.id)
|
||||
roleIds.value = val.map((v) => v.id);
|
||||
if (!props.disabled && props.showBut) {
|
||||
zdqtUpdate("标签添加成功")
|
||||
zdqtUpdate("标签添加成功");
|
||||
}
|
||||
}
|
||||
};
|
||||
// 删除标签
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除标签',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.bqId != val)
|
||||
roleIds.value = roleIds.value.filter(v => v != val)
|
||||
zdqtUpdate("标签删除成功")
|
||||
ElMessageBox.confirm("是否删除标签", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
.then(() => {
|
||||
pageData.tableData = pageData.tableData.filter((v) => v.bqId != val);
|
||||
roleIds.value = roleIds.value.filter((v) => v != val);
|
||||
zdqtUpdate("标签删除成功");
|
||||
})
|
||||
})
|
||||
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: "info",
|
||||
message: "取消删除"
|
||||
});
|
||||
});
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.bqId != val)
|
||||
roleIds.value = roleIds.value.filter(v => v != val)
|
||||
pageData.tableData = pageData.tableData.filter((v) => v.bqId != val);
|
||||
roleIds.value = roleIds.value.filter((v) => v != val);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
// 抛出数据并验证标签列表不为空
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// 验证:确保标签列表不为空
|
||||
if (!pageData.tableData || pageData.tableData.length === 0) {
|
||||
throw new Error('请选择群体标签');
|
||||
throw new Error("请选择群体标签");
|
||||
}
|
||||
resolve(pageData.tableData);
|
||||
});
|
||||
}
|
||||
};
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -196,7 +245,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
|
||||
Reference in New Issue
Block a user