修改
This commit is contained in:
@ -3,194 +3,378 @@
|
||||
<div class="head_box">
|
||||
<span class="title">新增</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
:model="listQuery"
|
||||
:label-width="130"
|
||||
inline
|
||||
label-position="right"
|
||||
|
||||
<div class="form_cnt">
|
||||
<FormMessage
|
||||
v-model="listQuery"
|
||||
:formList="formData"
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
<el-form-item label="线索名称">
|
||||
<el-input v-model="listQuery.xsmc" placeholder="请输入线索名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索编号">
|
||||
<el-input v-model="listQuery.xsbh" placeholder="请输入线索编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属专题">
|
||||
<el-input v-model="listQuery.sszt" placeholder="请输入所属专题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="群体名称">
|
||||
<el-input v-model="listQuery.qtmc" placeholder="请输入群体名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="群体类型">
|
||||
<el-input v-model="listQuery.qtlx" placeholder="请输入群体类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上报单位">
|
||||
<el-input v-model="listQuery.sbdw" placeholder="请输入上报单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上报时间">
|
||||
<el-date-picker
|
||||
style="width:100%"
|
||||
v-model="listQuery.sbsj"
|
||||
type="datetime"
|
||||
placeholder="请选择上报时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索内容" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.xsnr"
|
||||
type="textarea"
|
||||
style="width: 100%"
|
||||
:rows="3"
|
||||
placeholder="请输入线索内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">标签信息</el-divider>
|
||||
<el-form-item label="线索类型">
|
||||
<el-select v-model="listQuery.xslx" placeholder="请选择线索类型">
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索类型标签大类">
|
||||
<el-select
|
||||
v-model="listQuery.xsbqdl"
|
||||
placeholder="请选择线索类型标签大类"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索类型标签细类">
|
||||
<el-select
|
||||
v-model="listQuery.xsbqxl"
|
||||
placeholder="请选择线索类型标签细类"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索风险等级">
|
||||
<el-select
|
||||
v-model="listQuery.xsfxdj"
|
||||
placeholder="请选择线索风险等级"
|
||||
>
|
||||
<el-option label="状态1" value="1" />
|
||||
<el-option label="状态2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索备注">
|
||||
<el-input v-model="listQuery.xsbz" placeholder="请输入线索备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="市内外">
|
||||
<el-input v-model="listQuery.snw" placeholder="请输入市内外" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否设计外地">
|
||||
<el-select
|
||||
v-model="listQuery.xsfxdj"
|
||||
placeholder="请选择是否设计外地"
|
||||
>
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指向地点">
|
||||
<el-input v-model="listQuery.zxdd" placeholder="请输入指向地点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="具体部位">
|
||||
<el-input v-model="listQuery.jtbw" placeholder="请输入具体部位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="指向时间类型">
|
||||
<el-input v-model="listQuery.sjlx" placeholder="请输入指向时间类型" />
|
||||
</el-form-item>
|
||||
<template #basic>
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
</template>
|
||||
<template #sbRy>
|
||||
<el-divider content-position="left">涉及人员</el-divider>
|
||||
</template>
|
||||
<template #jurisdiction>
|
||||
<el-divider content-position="left">审批信息</el-divider>
|
||||
</template>
|
||||
<template #bqInfo>
|
||||
<el-divider content-position="left">标签信息</el-divider>
|
||||
</template>
|
||||
<!-- 人员标签模型-->
|
||||
<template #bqList>
|
||||
<el-button @click="openDialog('01', 'bq')">选择</el-button>
|
||||
<div class="boxlist">
|
||||
<MyTable
|
||||
:tableData="tableDate.bqList"
|
||||
:tableColumn="tableDate.tableColumn"
|
||||
:tableHeight="tableDate.tableHeight"
|
||||
:key="tableDate.keyCount"
|
||||
:tableConfiger="tableDate.tableConfiger"
|
||||
:controlsWidth="tableDate.controlsWidth"
|
||||
>
|
||||
<template #bqLb="{ row }">
|
||||
<DictTag :value="row.bqLb" :tag="false" :options="D_GS_BQ_LB" />
|
||||
</template>
|
||||
<template #bqLx="{ row }">
|
||||
<DictTag :value="row.bqLx" :tag="false" :options="D_GS_BQ_LX" />
|
||||
</template>
|
||||
<template #bqZl="{ row }">
|
||||
<DictTag :value="row.bqZl" :tag="false" :options="D_GS_BQ_ZL" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.bqId)"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 上报人员-->
|
||||
<template #sbRyId>
|
||||
<el-button @click="openDialog('01', 'ry')">选择</el-button>
|
||||
<div class="boxlist">
|
||||
<MyTable
|
||||
:tableData="tableDate.ryList"
|
||||
:tableColumn="tableDate.tableColumnRy"
|
||||
:tableHeight="tableDate.tableHeight"
|
||||
:key="tableDate.keyCountRy"
|
||||
:tableConfiger="tableDate.tableConfiger"
|
||||
:controlsWidth="tableDate.controlsWidth"
|
||||
>
|
||||
<template #ryMz="{ row }">
|
||||
<DictTag :tag="false" :value="row.ryMz" :options="D_BZ_MZ" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="delDict(row.id)"
|
||||
v-if="typeOf == 'edit' || typeOf == 'add'"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form-item label="指向时间段">
|
||||
<el-date-picker
|
||||
v-model="listQuery.sjd"
|
||||
type="daterange"
|
||||
placeholder="请选择指向时间段"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 管辖单位 -->
|
||||
<template #gxSsbmdm>
|
||||
<el-select
|
||||
v-model="listQuery.gxSsbmdm"
|
||||
placeholder="请选择管辖单位"
|
||||
style="width: 240px"
|
||||
@change="handleDeptChange('gxSsbmmc', $event)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value.toString()"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- 现住地派出所 -->
|
||||
<template #xzdPcsdm>
|
||||
<el-select
|
||||
v-model="listQuery.xzdPcsdm"
|
||||
placeholder="请选择现住地派出所"
|
||||
style="width: 240px"
|
||||
@change="handleDeptChange('xzdPcsmc', $event)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value.toString()"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- 线索正文 -->
|
||||
<template #xsZw>
|
||||
<div style="border: 1px solid #ccc">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
mode="default"
|
||||
/>
|
||||
<Editor
|
||||
style="height: 500px; overflow-y: hidden"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
mode="default"
|
||||
@onCreated="handleCreated"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
|
||||
<el-divider content-position="left">涉及人员</el-divider>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input v-model="listQuery.lxfs" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="住址">
|
||||
<el-input v-model="listQuery.zz" placeholder="请输入住址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">审批信息</el-divider>
|
||||
<el-form-item label="申请单位">
|
||||
<el-input v-model="listQuery.sqdw" placeholder="请输入申请单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人">
|
||||
<el-input v-model="listQuery.sqr" placeholder="请输入申请人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核单位">
|
||||
<el-input v-model="listQuery.shdw" placeholder="请输入审核单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核人">
|
||||
<el-input v-model="listQuery.shr" placeholder="请输入审核人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批单位">
|
||||
<el-input v-model="listQuery.spdw" placeholder="请输入审批单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人">
|
||||
<el-input v-model="listQuery.spr" placeholder="请输入审批人" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="申请原因" style="width: 100%">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="listQuery.sqyy"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入申请原因"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 列表弹窗 -->
|
||||
<TagSelectorDialog
|
||||
v-model="chooseShow"
|
||||
ref="tagDialog"
|
||||
@chooseDate="handleTagSelect"
|
||||
:dic="{ D_GS_BQ_ZL, D_GS_BQ_LB, D_GS_BQ_LX }"
|
||||
/>
|
||||
<!-- 上报人员列表弹窗 -->
|
||||
<DialogList
|
||||
v-if="ryDialog"
|
||||
:Single="true"
|
||||
:roleIds="roleIds"
|
||||
@chooseDate="chooseDate"
|
||||
:titleValue="chooseTitle"
|
||||
v-model="ryDialog"
|
||||
bqDl="02"
|
||||
:dic="{ D_BZ_MZ }"
|
||||
></DialogList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
reactive,
|
||||
onMounted,
|
||||
defineEmits,
|
||||
getCurrentInstance,
|
||||
nextTick,
|
||||
shallowRef,
|
||||
onBeforeUnmount,
|
||||
watch
|
||||
} from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import TagSelectorDialog from "@/components/aboutTable/TagSelectorDialog.vue";
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import DialogList from "./dialogList.vue";
|
||||
import store from "@/store";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const {
|
||||
D_GS_BQ_LB,
|
||||
D_GS_BQ_ZL,
|
||||
D_GS_BQ_LX,
|
||||
D_GS_XS_SBRYLX,
|
||||
D_GS_ZDQT_LB,
|
||||
D_GS_XS_FXDJ,
|
||||
D_BZ_MZ,
|
||||
D_GS_XS_LX,
|
||||
D_GS_RLQB_BJSB_BSZT,
|
||||
D_BZ_SF
|
||||
} = proxy.$dict(
|
||||
"D_GS_BQ_LB",
|
||||
"D_GS_BQ_ZL",
|
||||
"D_GS_BQ_LX",
|
||||
"D_GS_XS_SBRYLX",
|
||||
"D_GS_ZDQT_LB",
|
||||
"D_GS_XS_FXDJ",
|
||||
"D_BZ_MZ",
|
||||
"D_GS_XS_LX",
|
||||
"D_GS_RLQB_BJSB_BSZT",
|
||||
"D_BZ_SF"
|
||||
); //获取字典数据
|
||||
const elform = ref();
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
xsmc: "", // 线索名称
|
||||
xsly: "", // 线索来源
|
||||
xsbh: "", // 线索编号
|
||||
sbsj: "", // 上报时间
|
||||
xslx: "", // 线索类型
|
||||
xszt: "", // 线索状态
|
||||
xsnr: "", // 线索内容
|
||||
xm: "", // 姓名
|
||||
sfzh: "", // 身份证号
|
||||
lxfs: "", // 联系方式
|
||||
zz: "", // 住址
|
||||
sqr: "", // 申请人
|
||||
sqsj: "", // 申请时间
|
||||
sqyy: "" // 申请原因
|
||||
});
|
||||
const chooseShow = ref(false); //选择弹窗
|
||||
const tagDialog = ref();
|
||||
const ryDialog = ref(false); //选择弹窗
|
||||
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef();
|
||||
const editorConfig = ref({
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: false,
|
||||
MENU_CONF: {
|
||||
// 图片上传配置
|
||||
uploadImage: {
|
||||
server: "http://your-server.com/api/upload-image", // 替换为你的图片上传接口
|
||||
fieldName: "file", // 上传文件的字段名（根据后端接口调整）
|
||||
maxFileSize: 10 * 1024 * 1024, // 10M
|
||||
allowedFileTypes: ["image/*"], // 允许的图片类型
|
||||
// 自定义上传参数（如 token）
|
||||
meta: {
|
||||
token: store.getters.token // 如果需要认证
|
||||
},
|
||||
// 自定义文件名
|
||||
metaWithUrl: false,
|
||||
// 跨域携带 Cookie
|
||||
withCredentials: true
|
||||
},
|
||||
// 视频上传配置（类似）
|
||||
uploadVideo: {
|
||||
server: "http://your-server.com/api/upload-video",
|
||||
fieldName: "file",
|
||||
maxFileSize: 50 * 1024 * 1024 // 50M
|
||||
}
|
||||
}
|
||||
});
|
||||
const toolbarConfig = {};
|
||||
const loading = ref(false);
|
||||
// 内容 HTML
|
||||
const valueHtml = ref("<p>hello</p>");
|
||||
const tableDate = reactive({
|
||||
bqList: [], //表格数据
|
||||
ryList: [], //上报人员列表
|
||||
keyCount: 0,
|
||||
rykeyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
tableHeight: 225,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 90, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "标签代码", prop: "bqDm" },
|
||||
{ label: "标签类别", prop: "bqLb", showSolt: true },
|
||||
{ label: "标签类型", prop: "bqLx", showSolt: true },
|
||||
{ label: "标签名称", prop: "bqMc" },
|
||||
{ label: "标签种类", prop: "bqZl", showSolt: true }
|
||||
],
|
||||
tableColumnRy: [
|
||||
{ label: "姓名", prop: "ryXm" },
|
||||
{ label: "联系电话", prop: "ryLxdh" },
|
||||
{ label: "身份证号", prop: "rySfzh" },
|
||||
{ label: "民族", prop: "ryMz", showSolt: true },
|
||||
{ label: "居住地址", prop: "jzdDz" }
|
||||
]
|
||||
});
|
||||
const formData = ref([
|
||||
{ label: "", prop: "basic", type: "slot", width: "100%" },
|
||||
{ label: "线索名称", prop: "xsMc", type: "input" },
|
||||
{ label: "线索来源", prop: "ryXb", type: "select" },
|
||||
{ label: "线索编号", prop: "ryMz", type: "input" },
|
||||
{ label: "线索类型", prop: "ryLxdh", type: "select" },
|
||||
{ label: "线索状态", prop: "ryCsrq", type: "select" },
|
||||
{ label: "所属专题", prop: "ryMz", type: "input" },
|
||||
{ label: "群体名称", prop: "ryMz", type: "input" },
|
||||
{ label: "群体类型", prop: "ryMz", type: "select" },
|
||||
{ label: "上报单位", prop: "ryMz", type: "select" },
|
||||
{ label: "上报时间", prop: "rySfzh", type: "date" },
|
||||
{ label: "线索内容", prop: "xsZw", type: "slot", width: "100%" },
|
||||
{ label: "线索备注", prop: "ryJg", type: "textarea", width: "100%" },
|
||||
{ label: "", prop: "bqInfo", type: "slot", width: "100%" },
|
||||
{ label: "标签列表", prop: "bqList", type: "slot", width: "80%" },
|
||||
{
|
||||
label: "市内外",
|
||||
prop: "snw",
|
||||
type: "radio",
|
||||
options: [
|
||||
{ value: "1", label: "市内" },
|
||||
{ value: "0", label: "市外" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "是否设计外地",
|
||||
prop: "xsfxdj",
|
||||
type: "radio",
|
||||
options: [
|
||||
{ value: "1", label: "是" },
|
||||
{ value: "0", label: "否" }
|
||||
]
|
||||
},
|
||||
{ label: "指向地点", prop: "zxdd", type: "input" },
|
||||
{ label: "具体部位", prop: "jtbw", type: "input" },
|
||||
{ label: "指向时间类型", prop: "sjlx", type: "select" },
|
||||
{ label: "指向时间段", prop: "sjd", type: "datetimerange" },
|
||||
{ label: "", prop: "sbRy", type: "slot", width: "100%" },
|
||||
{
|
||||
label: "上报人员",
|
||||
prop: "sbRyId",
|
||||
type: "slot",
|
||||
width: "80%"
|
||||
},
|
||||
// {
|
||||
// label: "姓名",
|
||||
// prop: "zdrRyjb",
|
||||
// type: "input"
|
||||
// },
|
||||
// {
|
||||
// label: "身份证号",
|
||||
// prop: "zdrYjdj",
|
||||
// type: "input"
|
||||
// },
|
||||
// { label: "住址", prop: "hjdQh", type: "select" },
|
||||
{ label: "", prop: "jurisdiction", type: "slot", width: "100%" },
|
||||
|
||||
{ label: "申请人", prop: "hjdXz", type: "input" },
|
||||
{
|
||||
label: "申请时间",
|
||||
prop: "hjdPcsdm",
|
||||
type: "date"
|
||||
},
|
||||
{ label: "申请原因", prop: "xzdQh", type: "textarea", width: "100%" }
|
||||
]);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type, value) => {
|
||||
nextTick(() => {
|
||||
if (value == "ry") {
|
||||
ryDialog.value = true;
|
||||
} else if (value == "bq") {
|
||||
chooseShow.value = true;
|
||||
tagDialog.value.setValues(listQuery.value.bqList);
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleTagSelect = (selectedTags) => {
|
||||
tableDate.bqList = selectedTags.map((item) => ({
|
||||
bqDm: item.bqDm || "",
|
||||
bqId: item.bqId || "",
|
||||
bqLb: item.bqLb || "",
|
||||
bqLx: item.bqLx || "",
|
||||
bqMc: item.bqMc || "",
|
||||
bqZl: item.bqZl || ""
|
||||
}));
|
||||
listQuery.value.bqList = tableDate.bqList;
|
||||
// 每个标签包含: bqDm, bqId, bqLb, bqLx, bqMc, bqZl 属性
|
||||
};
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
@ -198,8 +382,107 @@ const init = (type, row) => {
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
tableDate.bqList = [];
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
};
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.submit((data) => {
|
||||
// 定义仅在 report 模式下需要的字段
|
||||
const reportFields = [
|
||||
"bsBh",
|
||||
"bsNr",
|
||||
"bsRq",
|
||||
"bsSfCb",
|
||||
"bsZt",
|
||||
"sbDwDm",
|
||||
"sbDwMc",
|
||||
"csDwMc",
|
||||
"csDwDm",
|
||||
"bzDwMc",
|
||||
"bzDwDm",
|
||||
"cbrXm",
|
||||
"cbrSfzh",
|
||||
"shrXm",
|
||||
"shrSfzh",
|
||||
"qfrXm",
|
||||
"qfrSfzh",
|
||||
"hbBk",
|
||||
"xsId" // 新增 xsId
|
||||
];
|
||||
|
||||
// 准备最终提交数据
|
||||
let submitData;
|
||||
|
||||
if (typeOf.value === "report") {
|
||||
// report 模式：只提交 reportFields 里的字段 + hbBk（富文本）
|
||||
submitData = {
|
||||
...Object.fromEntries(
|
||||
Object.entries(data).filter(([key]) => reportFields.includes(key))
|
||||
),
|
||||
hbBk: valueHtml.value, // 强制覆盖富文本字段
|
||||
xsId: listQuery.value.id // 强制添加 xsId
|
||||
};
|
||||
} else {
|
||||
// 非 report 模式：提交除 reportFields 外的所有字段
|
||||
submitData = {
|
||||
...Object.fromEntries(
|
||||
Object.entries(data).filter(([key]) => !reportFields.includes(key))
|
||||
),
|
||||
xsNr: clueHtml.value // 强制覆盖线索内容字段
|
||||
};
|
||||
}
|
||||
|
||||
// 根据 title 决定请求 URL
|
||||
let url =
|
||||
title.value == "新增"
|
||||
? "/mosty-gsxt/tbGsxtXs/save"
|
||||
: title.value == "上报"
|
||||
? "/mosty-gsxt/tbGsxtRlqbBjsb/save"
|
||||
: "/mosty-gsxt/tbGsxtXs/update";
|
||||
|
||||
// 发起请求
|
||||
qcckPost(submitData, url)
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("getList");
|
||||
close();
|
||||
})
|
||||
.catch(() => {});
|
||||
});
|
||||
};
|
||||
// 根据id查询详情
|
||||
const getDataRyId = (id) => {
|
||||
qcckGet({}, "/mosty-gsxt/tbGsxtJwry/" + id).then((res) => {
|
||||
tableDate.ryList = [res];
|
||||
listQuery.value.sbRyId = res.id;
|
||||
});
|
||||
};
|
||||
// 删除
|
||||
const delDictItem = (bqId) => {
|
||||
tableDate.bqList = tableDate.bqList.filter((item) => item.bqId !== bqId);
|
||||
listQuery.value.bqList = tableDate.bqList;
|
||||
};
|
||||
// 删除
|
||||
const delDict = (id) => {
|
||||
tableDate.ryList = tableDate.ryList.filter((item) => item.id !== id);
|
||||
listQuery.value.ryList = tableDate.ryList;
|
||||
};
|
||||
// 选择数据
|
||||
const chooseDate = (data) => {
|
||||
console.log(data[0].id);
|
||||
tableDate.ryList = data;
|
||||
listQuery.value.sbRyId = data[0].id;
|
||||
};
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
editor.destroy();
|
||||
});
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
@ -219,4 +502,10 @@ defineExpose({ init });
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
height: 225px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="titleValue"
|
||||
width="900px"
|
||||
:model-value="modelValue"
|
||||
append-to-body
|
||||
@close="closed"
|
||||
>
|
||||
<div>
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="人员姓名">
|
||||
<el-input
|
||||
placeholder="请输入人员姓名"
|
||||
v-model="listQuery.ryXm"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
class="tabBox"
|
||||
:class="props.Single ? 'tabBoxRadio' : ''"
|
||||
style="margin-top: 0px"
|
||||
>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleUserRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
:row-key="keyid"
|
||||
style="width: 100%"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
:reserve-selection="true"
|
||||
/>
|
||||
<el-table-column prop="ryXm" align="center" label="姓名" />
|
||||
<el-table-column prop="ryLxdh" align="center" label="联系电话" />
|
||||
<el-table-column prop="rySfzh" align="center" label="身份证号">
|
||||
</el-table-column>
|
||||
<el-table-column prop="bqYs" align="center" label="民族">
|
||||
<template #default="{ row }">
|
||||
<DictTag
|
||||
:value="row.ryMz"
|
||||
:tag="false"
|
||||
:options="props.dic.D_BZ_MZ"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jzdDz" align="center" label="居住地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, onMounted } from "vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
bqDl: {
|
||||
type: String,
|
||||
default: "01"
|
||||
},
|
||||
bqLx: {
|
||||
type: String,
|
||||
default: "01"
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择大类"
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
current: 1,
|
||||
size: 20
|
||||
});
|
||||
const loading = ref(false);
|
||||
const tableData = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "chooseDate"]);
|
||||
onMounted(() => {
|
||||
handleFilter();
|
||||
});
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = { current: 1, size: 20 };
|
||||
getDataList();
|
||||
};
|
||||
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = multipleSelectionUser.value;
|
||||
let list = [];
|
||||
let listId = [];
|
||||
userList.forEach((val) => {
|
||||
if (listId.indexOf(val.id) == -1) {
|
||||
list.push(val);
|
||||
listId.push(val.id);
|
||||
}
|
||||
});
|
||||
emits("chooseDate", list);
|
||||
closed();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getDataList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.current = currentPage;
|
||||
getDataList();
|
||||
};
|
||||
|
||||
// 查询标签组合列表
|
||||
const getDataList = () => {
|
||||
const data = listQuery.value;
|
||||
loading.value = true;
|
||||
qcckGet(data, "/mosty-gsxt/tbGsxtJwry/selectPage").then((res) => {
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
loading.value = false;
|
||||
multipleUser();
|
||||
});
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach((item) => {
|
||||
if (props.roleIds.some((id) => id == item.id)) {
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.current = 1;
|
||||
getDataList();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
if (props.Single) {
|
||||
if (val.length > 1) {
|
||||
let del_row = val.shift();
|
||||
multipleUserRef.value.toggleRowSelection(del_row, false);
|
||||
}
|
||||
multipleSelectionUser.value = val;
|
||||
} else {
|
||||
multipleSelectionUser.value = val;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-dialog) {
|
||||
background: #fff !important;
|
||||
border-radius: 8px !important;
|
||||
/* 其他样式 */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user