更新代码
This commit is contained in:
@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">情报信息流转{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="130" label-position="right">
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索标题">
|
||||
<el-input v-model="listQuery.xsbt" placeholder="请输入线索标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索编号">
|
||||
<el-input v-model="listQuery.xsbh" 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-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker v-model="listQuery.kssj" type="datetime" placeholder="请选择开始时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker v-model="listQuery.jssj" type="datetime" placeholder="请选择结束时间" />
|
||||
</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.qtmc" placeholder="请输入群体名称" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="群体类型">
|
||||
<el-input v-model="listQuery.qtlx" placeholder="请输入群体类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索细类">
|
||||
<el-input v-model="listQuery.xslx" placeholder="请输入线索细类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="风险等级">
|
||||
<el-input v-model="listQuery.fxdj" placeholder="请输入风险等级" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否初报">
|
||||
<el-input v-model="listQuery.qtmc" placeholder="请输入是否初报" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<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-input v-model="listQuery.bsbh" placeholder="请输入报送编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编制单位">
|
||||
<el-input v-model="listQuery.bzdw" placeholder="请输入编制单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上报单位">
|
||||
<el-input v-model="listQuery.sbdw" placeholder="请输入上报单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="抄送单位">
|
||||
<el-input v-model="listQuery.csdw" placeholder="请输入抄送单位" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="承办人">
|
||||
<el-input v-model="listQuery.cbr" 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.qfr" placeholder="请输入签发人" />
|
||||
</el-form-item>
|
||||
<el-form-item label=""></el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref,reactive } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("");
|
||||
const listQuery = ref({
|
||||
xgry: []
|
||||
});
|
||||
const pageForm = reactive({
|
||||
tableData: [
|
||||
{
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "51018319969699999",
|
||||
hjd: "",
|
||||
hjdpcs: "",
|
||||
bq: "重点人员"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "性别", prop: "xb" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "户籍地", prop: "hjd" },
|
||||
{ label: "户籍地派出所", prop: "hjdpcs" },
|
||||
{ label: "标签", prop: "bq" }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type === "add" ? "新增" : "编辑";
|
||||
if (type === "edit" && row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {
|
||||
xgry: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
listQuery.value.xgry.push({
|
||||
xm: "",
|
||||
zjhm: "",
|
||||
lxdh: ""
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
listQuery.value.xgry.splice(index, 1);
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人力情报信息采集流转">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button type="danger" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><Dete /></el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link size="small" type="primary">处置</el-link>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
|
||||
<el-link size="small" type="warning" @click="transferClue(row)">采纳</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/addForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "线索名称", prop: 'clueTitle', placeholder: "请输入线索名称", showType: "input" },
|
||||
{ label: "线索内容", prop: 'semanticKeywords', placeholder: "请输入线索内容", showType: "input" },
|
||||
{ label: "线索大类", prop: 'clueType', placeholder: "请选择线索大型", showType: "select" },
|
||||
{ label: "线索细类", prop: 'xsxl', placeholder: "请选择线索细类", showType: "select" },
|
||||
{ label: "线索来源", prop: 'xsly', placeholder: "请选择线索来源", showType: "select" },
|
||||
{ label: "线索风险等级", prop: 'xsfxdj', placeholder: "请选择线索风险等级", showType: "select" },
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
clueNo: "GBJD01",
|
||||
clueTitle: "工布江达重点人",
|
||||
clueType: "涉稳",
|
||||
clueSource: "系统新增",
|
||||
riskLevel: "高级",
|
||||
startTime: "2025/05/05",
|
||||
endTime: "2025/05/05",
|
||||
targetLocation: "林芝",
|
||||
clueContent: "涉稳",
|
||||
attachmentType: "重点人群",
|
||||
attachmentName: "林芝公安局",
|
||||
reportUnit: "林芝公安局",
|
||||
reportTime: "2025/05/05",
|
||||
involvedCount: 2,
|
||||
status: "未处置"
|
||||
},
|
||||
{
|
||||
clueNo: "GBJD01",
|
||||
clueTitle: "工布江达重点人",
|
||||
clueType: "涉稳",
|
||||
clueSource: "系统新增",
|
||||
riskLevel: "中级",
|
||||
startTime: "2025/05/05",
|
||||
endTime: "2025/05/05",
|
||||
targetLocation: "林芝",
|
||||
clueContent: "涉稳",
|
||||
attachmentType: "重点人群",
|
||||
attachmentName: "林芝公安局",
|
||||
reportUnit: "林芝公安局",
|
||||
reportTime: "2025/05/05",
|
||||
involvedCount: 2,
|
||||
status: "处置中"
|
||||
},
|
||||
{
|
||||
clueNo: "GBJD01",
|
||||
clueTitle: "工布江达重点人",
|
||||
clueType: "涉稳",
|
||||
clueSource: "系统新增",
|
||||
riskLevel: "低级",
|
||||
startTime: "2025/05/05",
|
||||
endTime: "2025/05/05",
|
||||
targetLocation: "林芝",
|
||||
clueContent: "涉稳",
|
||||
attachmentType: "重点人群",
|
||||
attachmentName: "林芝公安局",
|
||||
reportUnit: "林芝公安局",
|
||||
reportTime: "2025/05/05",
|
||||
involvedCount: 2,
|
||||
status: "已处置"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "线索编号", prop: "clueNo" },
|
||||
{ label: "线索名称", prop: "clueTitle" },
|
||||
{ label: "线索类型", prop: "clueType" },
|
||||
{ label: "线索来源", prop: "clueSource" },
|
||||
{ label: "风险等级", prop: "riskLevel" },
|
||||
{ label: "开始时间", prop: "startTime" },
|
||||
{ label: "结束时间", prop: "endTime" },
|
||||
{ label: "指向地点", prop: "targetLocation" },
|
||||
{ label: "线索内容", prop: "clueContent", width: 200 },
|
||||
{ label: "群体类型", prop: "attachmentType" },
|
||||
{ label: "群题名称", prop: "attachmentName" },
|
||||
{ label: "上报单位", prop: "reportUnit" },
|
||||
{ label: "上报时间", prop: "reportTime" },
|
||||
{ label: "涉及人数", prop: "involvedCount" },
|
||||
{ label: "附件", prop: "involvedCount" },
|
||||
{ label: "处置状态", prop: "status" },
|
||||
{ label: "状态", prop: "status" }
|
||||
]
|
||||
})
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
// 下载附件
|
||||
const downloadAttachment = (row) => {
|
||||
// TODO: 实现附件下载逻辑
|
||||
};
|
||||
|
||||
// 预览附件
|
||||
const previewAttachment = (row) => {
|
||||
// TODO: 实现附件预览逻辑
|
||||
};
|
||||
|
||||
// 删除行
|
||||
const deleteRow = (row) => {
|
||||
// TODO: 实现删除逻辑
|
||||
};
|
||||
|
||||
// 流转线索
|
||||
const transferClue = (row) => {
|
||||
// TODO: 实现线索流转逻辑
|
||||
};
|
||||
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">社会信息人员建设管理{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="130" label-position="right">
|
||||
<div class="form-row">
|
||||
<el-form-item label="管线部门">
|
||||
<el-input v-model="listQuery.gxbm" placeholder="请输入管线部门" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="请输入所属辖区" />
|
||||
</el-form-item>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="listQuery.xb" 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.age" 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.kgdf" placeholder="请输入考核得分" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref,reactive } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("");
|
||||
const listQuery = ref({
|
||||
xgry: []
|
||||
});
|
||||
const pageForm = reactive({
|
||||
tableData: [
|
||||
{
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "51018319969699999",
|
||||
hjd: "",
|
||||
hjdpcs: "",
|
||||
bq: "重点人员"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "性别", prop: "xb" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "户籍地", prop: "hjd" },
|
||||
{ label: "户籍地派出所", prop: "hjdpcs" },
|
||||
{ label: "标签", prop: "bq" }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type === "add" ? "新增" : "编辑";
|
||||
if (type === "edit" && row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {
|
||||
xgry: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
listQuery.value.xgry.push({
|
||||
xm: "",
|
||||
zjhm: "",
|
||||
lxdh: ""
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
listQuery.value.xgry.splice(index, 1);
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="废旧金属回收业务管理"/>
|
||||
<PageTitle title="社会信息人员建设管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="importData">
|
||||
<el-icon style="vertical-align: middle"><Upload /></el-icon>
|
||||
<span style="vertical-align: middle">导入</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="exportData">
|
||||
<el-icon style="vertical-align: middle"><Download /></el-icon>
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" @reset="onReset" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
@ -27,7 +32,9 @@
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
|
||||
<el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@ -50,33 +57,29 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import DetailForm from "./components/addForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
import { CirclePlus, Upload, Download } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "出售人姓名", prop: 'csrxm', placeholder: "请输入出售人姓名", showType: "input" },
|
||||
{ label: "出售人证件号码", prop: 'csrzjhm', placeholder: "请输入出售人证件号码", showType: "input" },
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
{ label: "管辖部门", prop: 'department', placeholder: "请选择管辖部门", showType: "select" },
|
||||
{ label: "所属辖区", prop: 'area', placeholder: "请选择所属辖区", showType: "select" },
|
||||
{ label: "姓名", prop: 'name', placeholder: "请输入姓名", showType: "input" },
|
||||
{ label: "身份证号", prop: 'idCard', placeholder: "请输入身份证号", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
],
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
showIndex: true
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
@ -85,17 +88,26 @@ const pageData = reactive({
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "出售人姓名", prop: "csrxm" },
|
||||
{ label: "出售人证件号码", prop: "csrzjhm" },
|
||||
{ label: "回收人姓名", prop: "hsrxm" },
|
||||
{ label: "回收人证件号码", prop: "hsrzjhm" },
|
||||
{ label: "回收物品", prop: "hswp" },
|
||||
{ label: "序号", type: "index", width: 60 },
|
||||
{ label: "所属辖区", prop: "area" },
|
||||
{ label: "信息员姓名", prop: "name" },
|
||||
{ label: "身份证号", prop: "idCard" },
|
||||
{ label: "性别", prop: "gender" },
|
||||
{ label: "年龄", prop: "age" },
|
||||
{ label: "民族", prop: "nation" },
|
||||
{ label: "居住地址", prop: "address", width: 200 },
|
||||
{ label: "居住地派出所", prop: "policeStation" },
|
||||
{ label: "联系方式", prop: "contact" },
|
||||
{ label: "考核得分", prop: "khdf" },
|
||||
{ label: "奖惩说明", prop: "jcsm" },
|
||||
{ label: "审批状态", prop: "spzt" },
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
// getList()
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
@ -112,6 +124,12 @@ const onSearch = (val) =>{
|
||||
getList()
|
||||
}
|
||||
|
||||
const onReset = () => {
|
||||
queryFrom.value = {}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
@ -138,7 +156,6 @@ const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="statistical-analysis">
|
||||
<!-- 左侧树形菜单 -->
|
||||
<div class="left-menu">
|
||||
<!-- 这个部分用的是组件-后期替换 -->
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
default-expand-all
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="right-content">
|
||||
<!-- 顶部筛选 -->
|
||||
<div class="filter-section">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="it.value" v-for="it in timeList" :key="it.value">{{
|
||||
it.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
<el-button type="primary" @click="handleExport">查询</el-button>
|
||||
<el-button type="primary" @click="handleExport">重置</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 统计图表区域 -->
|
||||
<div class="charts-container">
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>报送情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<PieEcharts
|
||||
echartsId="bsqkEpieChart"
|
||||
color="#333"
|
||||
:data="obj.bsqkList"
|
||||
></PieEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>采纳情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<DbarEcharts
|
||||
echartsId="bar3DChart"
|
||||
:data="obj.cnList"
|
||||
></DbarEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>战果情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<ul class="chart mt8">
|
||||
<li v-for="(it, idx) in obj.zgList" :key="idx" class="mb6">
|
||||
<div style="color: #333">{{ it.label }}</div>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
>
|
||||
<span
|
||||
><span style="color: #e37233">{{ it.value }}</span> 个</span
|
||||
>
|
||||
</el-progress>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>奖惩情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<lineEcharts
|
||||
color="#333"
|
||||
echartsId="areaChart"
|
||||
:data="obj.jcList"
|
||||
></lineEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
|
||||
import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
|
||||
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const radio = ref("日");
|
||||
const timeList = ref([
|
||||
{ label: "日", value: "0" },
|
||||
{ label: "月", value: "1" },
|
||||
{ label: "季", value: "2" },
|
||||
{ label: "年", value: "3" }
|
||||
]);
|
||||
const obj = reactive({
|
||||
listQuery: {},
|
||||
bsqkList: [
|
||||
{ label: "待上报", value: 18 },
|
||||
{ label: "已上报", value: 20 },
|
||||
{ label: "已流转指令", value: 50 },
|
||||
{ label: "已办结", value: 40 },
|
||||
{ label: "已归档", value: 30 }
|
||||
],
|
||||
//
|
||||
jcList: [
|
||||
{ label: "表彰奖励", value: 10 },
|
||||
{ label: "物质奖励", value: 20 },
|
||||
{ label: "其他奖励", value: 50 },
|
||||
{ label: "责任追究", value: 40 },
|
||||
{ label: "通报批评", value: 40 },
|
||||
{ label: "其他惩罚", value: 30 }
|
||||
],
|
||||
zgList: [
|
||||
{ label: "已处置", value: 10 },
|
||||
{ label: "转指令", value: 20 },
|
||||
{ label: "转协同", value: 50 },
|
||||
{ label: "转督办", value: 40 },
|
||||
{ label: "转移交", value: 40 },
|
||||
{ label: "警种变更", value: 40 }
|
||||
],
|
||||
cnList: {
|
||||
list: [
|
||||
{ label: "已采纳", val: 50 },
|
||||
{ label: "未采纳", val: 40 },
|
||||
{ label: "已合并", val: 10 },
|
||||
{ label: "已流转", val: 30 },
|
||||
{ label: "退回", val: 40 },
|
||||
],
|
||||
topColor:'#1bd6c2',
|
||||
colors: ["#28EEBF","#0DBAC5"],
|
||||
}
|
||||
});
|
||||
|
||||
// 树形菜单数据
|
||||
const treeData = ref([
|
||||
{
|
||||
label: "林芝市公安局（200）",
|
||||
children: [
|
||||
{ label: "工布江达县公安局（100）" },
|
||||
{ label: "工布江达城区派出所（10）" },
|
||||
{ label: "某某某派出所（10）" },
|
||||
{ label: "某某某公安局（100）" }
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "label"
|
||||
};
|
||||
|
||||
// 日期范围
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 事件处理函数
|
||||
const handleNodeClick = (data) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const handleDateChange = () => {
|
||||
// 处理日期变化
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// 处理导出
|
||||
};
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistical-analysis {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.left-menu {
|
||||
width: 280px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
.filter-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.charts-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 50px);
|
||||
.chart-item {
|
||||
width: 49.5%;
|
||||
height: calc(50% - 5px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chart {
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
color: #333;
|
||||
}
|
||||
::v-deep .el-radio__inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .el-progress-bar__innerText {
|
||||
color: #333;
|
||||
margin: 0 -40px;
|
||||
}
|
||||
::v-deep .el-progress.is-exception .el-progress-bar__inner {
|
||||
background: linear-gradient(90deg, #fe5d00 0%, #face35 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">人力情报信息搜索任务调度{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="130" label-position="right">
|
||||
<div class="form-row">
|
||||
<el-form-item label="任务编号">
|
||||
<el-input v-model="listQuery.rwbh" placeholder="请输入任务编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务标题">
|
||||
<el-input v-model="listQuery.rwbt" placeholder="请输入任务标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型">
|
||||
<el-select v-model="listQuery.rwlx" 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.rwly" placeholder="请输入任务来源" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="反馈截止时间">
|
||||
<el-date-picker v-model="listQuery.fkjzsj" type="datetime" placeholder="请选择反馈截止时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="严重程度">
|
||||
<el-select v-model="listQuery.yzcd" placeholder="请选择严重程度">
|
||||
<el-option label="一般" value="1" />
|
||||
<el-option label="严重" value="2" />
|
||||
<el-option label="特别严重" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型细类">
|
||||
<el-select v-model="listQuery.rwlxxl" 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.cpcd" 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="任务内容" class="full-width">
|
||||
<el-input type="textarea" v-model="listQuery.rwnr" :rows="4" placeholder="请输入任务内容" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="备注" class="full-width">
|
||||
<el-input type="textarea" v-model="listQuery.bz" :rows="2" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref,reactive } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("");
|
||||
const listQuery = ref({
|
||||
xgry: []
|
||||
});
|
||||
const pageForm = reactive({
|
||||
tableData: [
|
||||
{
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "51018319969699999",
|
||||
hjd: "",
|
||||
hjdpcs: "",
|
||||
bq: "重点人员"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "性别", prop: "xb" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "户籍地", prop: "hjd" },
|
||||
{ label: "户籍地派出所", prop: "hjdpcs" },
|
||||
{ label: "标签", prop: "bq" }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type === "add" ? "新增" : "编辑";
|
||||
if (type === "edit" && row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {
|
||||
xgry: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
listQuery.value.xgry.push({
|
||||
xm: "",
|
||||
zjhm: "",
|
||||
lxdh: ""
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
listQuery.value.xgry.splice(index, 1);
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="废旧金属回收场所管理"/>
|
||||
<PageTitle title="人力情报信息搜索任务调度">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button type="danger" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><Dete /></el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
@ -27,9 +31,10 @@
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small">从业人员</el-button>
|
||||
<el-button size="small">转区域</el-button>
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link size="small" type="primary">处置</el-link>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
|
||||
<el-link size="small" type="warning" @click="transferClue(row)">采纳</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@ -52,53 +57,54 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import DetailForm from "./components/addForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "场所电话", prop: 'phone', placeholder: "请输入场所电话", showType: "input" },
|
||||
{ label: "法人姓名", prop: 'frxm', placeholder: "请输入法人姓名", showType: "input" },
|
||||
{ label: "法人证件号码", prop: 'frzjhm', placeholder: "请输入法人证件号码", showType: "input" },
|
||||
{ label: "法人联系电话", prop: 'frlxdh', placeholder: "请输入法人联系电话", showType: "input" },
|
||||
{ label: "经营状况", prop: 'jyzt', placeholder: "请选择经营状况", showType: "select", options: [{ label: '在业', value: '在业' }]},
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
{ label: "所属单位", prop: 'belongUnit', placeholder: "请选择所属单位", showType: "select" },
|
||||
{ label: "任务标题", prop: 'taskTitle', placeholder: "请输入任务标题", showType: "input" },
|
||||
{ label: "任务编号", prop: 'taskNo', placeholder: "请输入任务编号", showType: "input" },
|
||||
{ label: "任务内容", prop: 'taskContent', placeholder: "请输入任务内容", showType: "input" },
|
||||
{ label: "任务来源", prop: 'taskSource', placeholder: "请选择任务来源", showType: "select" },
|
||||
{ label: "严重程度", prop: 'severity', placeholder: "请选择严重程度", showType: "select" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
], //表格数据
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "经营状态", prop: "jyzt" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "法人姓名", prop: "frxm" },
|
||||
{ label: "法人证件号码", prop: "frzjhm" },
|
||||
{ label: "任务编号", prop: "taskNo" },
|
||||
{ label: "任务标题", prop: "taskTitle" },
|
||||
{ label: "任务内容", prop: "taskContent", width: 200 },
|
||||
{ label: "任务来源", prop: "taskSource" },
|
||||
{ label: "严重程度", prop: "severity" },
|
||||
{ label: "处理情况", prop: "processStatus" },
|
||||
{ label: "上报时间", prop: "reportTime" },
|
||||
{ label: "采集状态", prop: "collectStatus" },
|
||||
{ label: "填充部门", prop: "fillDepartment" },
|
||||
{ label: "状态", prop: "status" }
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
// getList()
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
@ -141,7 +147,6 @@ const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
@ -156,3 +161,23 @@ const tabHeightFn = () => {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
// 下载附件
|
||||
const downloadAttachment = (row) => {
|
||||
// TODO: 实现附件下载逻辑
|
||||
};
|
||||
|
||||
// 预览附件
|
||||
const previewAttachment = (row) => {
|
||||
// TODO: 实现附件预览逻辑
|
||||
};
|
||||
|
||||
// 删除行
|
||||
const deleteRow = (row) => {
|
||||
// TODO: 实现删除逻辑
|
||||
};
|
||||
|
||||
// 流转线索
|
||||
const transferClue = (row) => {
|
||||
// TODO: 实现线索流转逻辑
|
||||
};
|
||||
@ -66,7 +66,7 @@
|
||||
<span>线索类型统计</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<ul class="chart">
|
||||
<ul class="chart mt8">
|
||||
<li v-for="(it, idx) in obj.jjList" :key="idx" class="mb6">
|
||||
<div style="color: #333">{{ it.label }}</div>
|
||||
<el-progress
|
||||
@ -226,10 +226,12 @@ onMounted(() => {});
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -237,6 +239,8 @@ onMounted(() => {});
|
||||
}
|
||||
.chart {
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="场所信息" name="basic">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称（营业执照登记名称）">
|
||||
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所联系电话">
|
||||
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="经营状况">
|
||||
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所面积">
|
||||
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="开业日期">
|
||||
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所地址">
|
||||
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人">
|
||||
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人证件号码">
|
||||
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人联系电话">
|
||||
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人居住地址">
|
||||
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人">
|
||||
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人身份证号">
|
||||
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人联系方式">
|
||||
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人居住地址">
|
||||
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机修场所备案编号">
|
||||
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所备案机构名称">
|
||||
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="备案登记日期">
|
||||
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="责任民警">
|
||||
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号">
|
||||
<el-input v-model="listQuery.jh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('废旧金属回收场所详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">废旧金属回收业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="老王废旧金属回收"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="回收人员姓名">
|
||||
<el-input v-model="listQuery.hsryxm" placeholder="王五"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="回收人证件号码">
|
||||
<el-input v-model="listQuery.hsrzjhm" placeholder="511111111111111111"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="出售人员姓名">
|
||||
<el-input v-model="listQuery.csryxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="出售人证件号码">
|
||||
<el-input v-model="listQuery.csrzjhm" placeholder="511222222222222222"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="回收物品照片">
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="回收物品清单描述">
|
||||
<el-input type="textarea" v-model="listQuery.wpqdms" :rows="4" placeholder="请输入回收物品清单描述"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user