更新页面
This commit is contained in:
@ -1,199 +1,102 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">情报信息流转{{ title }}</span>
|
||||
<span class="title">{{ title }}情报信息流转</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="130" label-position="right">
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
<div class="form-row">
|
||||
<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.xszt" placeholder="请输入所属专题" />
|
||||
</el-form-item>
|
||||
<!-- <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.xsdj" placeholder="请选择线索等级">
|
||||
<el-option label="一级" value="1"/>
|
||||
<el-option label="二级" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<div class="form_cnt">
|
||||
<FormMessage v-model="listQuery" :formList="formData" ref="elform" :rules="rules">
|
||||
<template #gapdive>
|
||||
<div style="width: 100%;height: 10px;" class="mb20">
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
</div>
|
||||
</template>
|
||||
<template #gapline>
|
||||
<div style="width: 100%;height: 10px;" class="mb20">
|
||||
<el-divider content-position="left">线索内容</el-divider>
|
||||
</div>
|
||||
</template>
|
||||
<template #scfj>
|
||||
<div style="width: 100%;padding-left: 50px;">
|
||||
<div>上传附件:<span class="f12">（可附电子表格、Word文档、图像、音视频文件）</span> </div>
|
||||
<div><MOSTY.Upload :showBtn="true" :limit="10" v-model="listQuery.tps" /> </div>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<el-divider content-position="left"><span class="mr20">相关人员</span> <el-button type="primary" size="small" @click="addEdit('add',null)">添加人员</el-button></el-divider>
|
||||
<MyTable
|
||||
:tableData="pageForm.tableData"
|
||||
:tableColumn="pageForm.tableColumn"
|
||||
:tableHeight="pageForm.tableHeight"
|
||||
:key="pageForm.keyCount"
|
||||
:tableConfiger="pageForm.tableConfiger"
|
||||
:controlsWidth="pageForm.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #xb="{row}">
|
||||
<DictTag :value="row.xb" :tag="false" :options="props.dic.D_BZ_XB" />
|
||||
</template>
|
||||
<template #bqList="{row}">
|
||||
<div v-if="row.bqList">
|
||||
<el-tag type="success" v-for="(it,idx) in row.bqList" :key="idx">{{ it.bqMc }}</el-tag >
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">线索描述</el-divider>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索内容" class="full-width">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.xsnr"
|
||||
:rows="4"
|
||||
placeholder="请输入线索内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索标签大类">
|
||||
<el-select
|
||||
v-model="listQuery.bqdl"
|
||||
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.bqxl"
|
||||
placeholder="请选择线索标签细类"
|
||||
>
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索标签二级系类">
|
||||
<el-select
|
||||
v-model="listQuery.bqxl"
|
||||
placeholder="请选择线索标签二级系类"
|
||||
>
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-select v-model="listQuery.xsly" placeholder="请选择线线索来源">
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<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.fxdj"
|
||||
placeholder="请选择线索风险等级"
|
||||
>
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指向地点">
|
||||
<el-select v-model="listQuery.zxdd" placeholder="请选择指向地点">
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">相关人员</el-divider>
|
||||
<div class="mt10 mb10">
|
||||
<el-button type="primary" size="small">添加人员</el-button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<MyTable
|
||||
:tableData="pageForm.tableData"
|
||||
:tableColumn="pageForm.tableColumn"
|
||||
:tableHeight="pageForm.tableHeight"
|
||||
:key="pageForm.keyCount"
|
||||
:tableConfiger="pageForm.tableConfiger"
|
||||
:controlsWidth="pageForm.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="addEdit('detail', row)"
|
||||
>详情</el-link
|
||||
>
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)"
|
||||
>编辑</el-link
|
||||
>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">申请人</el-divider>
|
||||
<div class="form-row">
|
||||
<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>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<!-- 人员 -->
|
||||
<AddPeo ref="showAdd" :dic="props.dic" :title="peoTitle" @change="getPeo"></AddPeo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import AddPeo from './addPeo.vue'
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref,reactive } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("");
|
||||
const listQuery = ref({
|
||||
xgry: []
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, nextTick } from "vue";
|
||||
const emit = defineEmits(["change"]);
|
||||
const props = defineProps({
|
||||
dic: Object
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const rules = reactive({
|
||||
xsMc: [{ required: true, message: "请输入线索名称", trigger: "blur" }],
|
||||
xlLx: [{ required: true, message: "请选择线索类型", trigger: "change" }],
|
||||
qbLy: [{ required: true, message: "请选择情报来源", trigger: "change" }],
|
||||
});
|
||||
const formData = ref([
|
||||
{ prop: "gapdive", type: "slot",width:'100%' },
|
||||
{ label: "线索名称", prop: "xsMc", type: "input" },
|
||||
{ label: "线索类型", prop: "xlLx", type: "select", options:props.dic.D_GS_XS_LX },
|
||||
{ label: "情报来源", prop: "qbLy", type: "select", options:props.dic.D_GS_XS_LY},
|
||||
{ label: "指向开始时间", prop: "zxkssj", type: "datetime"},
|
||||
{ label: "指向结束时间", prop: "zxjssj", type: "datetime"},
|
||||
{ label: "指向地点", prop: "zxdz", type: "input"},
|
||||
{ label: "所属专题", prop: "sszt", type: "select",options:props.dic.D_BZ_SSZT},
|
||||
{ prop: "gapline", type: "slot",width:'100%' },
|
||||
{ prop: "scfj", type: "slot",width:'100%'},
|
||||
{ label: "线索内容", prop: "xs_nr", type: "textarea",width:'100%'},
|
||||
{ label: "群体类型", prop: "qtlx", type: "select",options:props.dic.D_GS_XS_QTLX },
|
||||
{ label: "群体名称", prop: "qtmc", type: "input"},
|
||||
{ label: "涉及人数", prop: "sjrs", type: "inputNumber"},
|
||||
{ label: "线索报送单位", prop: "xsbsdwdm", type: "department"},
|
||||
]);
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("");
|
||||
const pageForm = reactive({
|
||||
tableData: [
|
||||
{
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "51018319969699999",
|
||||
hjd: "",
|
||||
hjdpcs: "",
|
||||
bq: "重点人员"
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
@ -203,81 +106,103 @@ const pageForm = reactive({
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "性别", prop: "xb" },
|
||||
{ label: "性别", prop: "xb",showSolt:true },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "户籍地", prop: "hjd" },
|
||||
{ label: "户籍地", prop: "hjdz" },
|
||||
{ label: "户籍地派出所", prop: "hjdpcs" },
|
||||
{ label: "标签", prop: "bq" }
|
||||
{ label: "标签", prop: "bqList",showSolt:true }
|
||||
]
|
||||
});
|
||||
const showAdd = ref()
|
||||
onMounted(()=>{
|
||||
tabHeightFn()
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
tabHeightFn()
|
||||
dialogForm.value = true;
|
||||
title.value = type === "add" ? "新增" : "编辑";
|
||||
if (type === "edit" && row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {
|
||||
xgry: []
|
||||
};
|
||||
}
|
||||
title.value = type == "add" ? "新增" : type == "info" ? "详情" : "编辑";
|
||||
// 初始化表单数据，并根据详情页设置禁用状态
|
||||
// if (row) getDataById(row.id);
|
||||
};
|
||||
// 根据id查询详情
|
||||
const getDataById = (id) => {
|
||||
// qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/" + id).then((res) => {
|
||||
// listQuery.value = res;
|
||||
// });
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
// 打开弹窗
|
||||
const addEdit = (type,row) =>{
|
||||
showAdd.value.init(type,row)
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
listQuery.value.xgry.push({
|
||||
xm: "",
|
||||
zjhm: "",
|
||||
lxdh: ""
|
||||
// 新增人员
|
||||
const getPeo = (val) =>{
|
||||
pageForm.tableData.push(val);
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.submit((data) => {
|
||||
let url = title.value == "新增" ? "/mosty-gsxt/qbcj/add" : "/mosty-gsxt/qbcj/update";
|
||||
let params = { ...data ,ryList:pageForm.tableData};
|
||||
loading.value = true;
|
||||
qcckPost(params, url).then((res) => {
|
||||
loading.value = false;
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("change");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
listQuery.value.xgry.splice(index, 1);
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageForm.tableHeight = window.innerHeight - 720;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
color: #0072ff;
|
||||
background: rgba(0, 114, 255, 0.3);
|
||||
}
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
height: 225px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
::v-deep .avatar-uploader{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
margin-right: 20px;
|
||||
|
||||
&.full-width {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
::v-deep .el-upload-list{
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .el-upload-list__item-name .el-icon{
|
||||
top: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<el-dialog v-model="showDialog" :destroy-on-close="true" :title="props.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/MyComponents/ChooseMarks/index.vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { reactive, ref } from 'vue';
|
||||
const props = defineProps({
|
||||
dic:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
title:{
|
||||
type:String,
|
||||
default:'新增人员'
|
||||
}
|
||||
})
|
||||
const chooseMarksVisible = ref(false)
|
||||
const roleIds = ref([])
|
||||
const elform = ref()
|
||||
const showDialog = ref(false)
|
||||
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: "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 init = (type,row) =>{
|
||||
showDialog.value = true;
|
||||
elform.value.reset();
|
||||
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)=>{
|
||||
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>
|
||||
Reference in New Issue
Block a user