Compare commits
3 Commits
345021957d
...
2464797fb2
| Author | SHA1 | Date | |
|---|---|---|---|
| 2464797fb2 | |||
| bec1d6f6ba | |||
| c2ac4845c4 |
@ -28,9 +28,6 @@ router.beforeEach(async (to, from, next) => {
|
||||
// 处理用户权限，筛选出需要添加的权限
|
||||
if (store.state.permission.routes == 0) {
|
||||
const filterRoutes = await store.dispatch('permission/filterRoutes', afterMenuList)
|
||||
|
||||
console.log(filterRoutes);
|
||||
|
||||
filterRoutes.forEach(item => {
|
||||
router.addRoute(item)
|
||||
})
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="Count-Cnt flex">
|
||||
<div class="left">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"> </MyTable>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BarHatEcharts echartsId="counrtEchars" :data="obj"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
|
||||
const searchConfiger = ref([{ label: "时间段", prop: "time", showType: "daterange" }]);
|
||||
const obj = ref({
|
||||
xDate: ["波密", "墨脱", "米林", "朗县", "察隅", "林芝", "公布江达"],
|
||||
list: [
|
||||
{ name: "值守点数量", value: [100, 200, 355, 444, 325, 256, 247], hatColor: "#087df9", color: ["rgba(0,244,255,1)", "rgba(0,77,167,1)"] },
|
||||
{ name: "值守人员数量", value: [100, 200, 355, 444, 325, 256, 247], hatColor: "#059f59", color: ["#92f9de", "#0c9973"] }
|
||||
]
|
||||
});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
zsdsl: "20",
|
||||
zsrsl: "20",
|
||||
dz: "巴宜区"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
zsdsl: "20",
|
||||
zsrsl: "20",
|
||||
dz: "巴宜区"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
zsdsl: "20",
|
||||
zsrsl: "20",
|
||||
dz: "巴宜区"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableHeight: 620,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
showIndex: false
|
||||
},
|
||||
controlsWidth: 100, // No controls needed based on prototype
|
||||
tableColumn: [
|
||||
{ label: "", prop: "dz" },
|
||||
{ label: "值守点数量", prop: "zsdsl" },
|
||||
{ label: "值守人员数量", prop: "zsrsl" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
const onSearch = params => {
|
||||
console.log("Search params:", params);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Count-Cnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 267px); /* Adjust height as needed */
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
.right {
|
||||
flex: 1 0 0;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<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>
|
||||
</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 #accidentPhoto="{ row }">
|
||||
<el-image style="width: 50px; height: 50px" :src="row.accidentPhoto" :preview-src-list="[row.accidentPhoto]"> </el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', 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 MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./detailForm.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 current = ref("list");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "报警时间",
|
||||
prop: "bjsj",
|
||||
placeholder: "人员姓名",
|
||||
showType: "input"
|
||||
},
|
||||
|
||||
{
|
||||
label: "管辖部门",
|
||||
prop: "jurisdiction",
|
||||
placeholder: "管辖部门",
|
||||
showType: "cascader"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
gxbm: "123",
|
||||
bjr: "123",
|
||||
bjrxb: "123",
|
||||
bjrdh: "123",
|
||||
bjsj: "123",
|
||||
jjybh: "123",
|
||||
xtba: "123"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
|
||||
tableColumn: [
|
||||
{ label: "管辖部门", prop: "gxbm" },
|
||||
{ label: "报警人", prop: "bjr" },
|
||||
{ label: "报警人性别", prop: "bjrxb" },
|
||||
{ label: "报警人电话", prop: "bjrdh" },
|
||||
{ label: "报警时间", prop: "bjsj" },
|
||||
{ label: "接警员编号", prop: "jjybh" },
|
||||
{ label: "协调保安", prop: "xtba" }
|
||||
]
|
||||
});
|
||||
|
||||
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-ylth/system/dyy/ywxx/list";
|
||||
// qcckPost(data, url)
|
||||
// .then((res) => {
|
||||
// pageData.tableData = res.rows || [];
|
||||
// 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>
|
||||
@ -1,84 +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">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList" @change="handleChange">
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
csdm: "",
|
||||
xm: "",
|
||||
lxdh: "",
|
||||
ssxq: ""
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择管辖部门", trigger: "change" }],
|
||||
jqlx: [{ required: true, message: "请选择警情类型", trigger: "change" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "管辖部门", prop: "ssbmdm", type: "department" },
|
||||
{ label: "警情类型", prop: "jqlx", type: "select",options:[] },
|
||||
{ label: "报警人", prop: "bjrxm", type: "input" },
|
||||
{ label: "报警人性别", prop: "xb", type: "select",options:[] },
|
||||
],
|
||||
[
|
||||
{ label: "报警人电话", prop: "bjdh", type: "input" },
|
||||
{ label: "报警时间", prop: "bjsj", type: "date" },
|
||||
{ label: "接警员编号", prop: "jjydh", type: "input" },
|
||||
{ label: "接警员姓名", prop: "jjyxm", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "协调保安", prop: "xdba", type: "input",width:'23%' },
|
||||
{ label: "处置民警", prop: "czmj", type: "date",width:'23%' },
|
||||
],
|
||||
[
|
||||
{ label: "警情描述", prop: "jjydh", type: "input" ,lx:'textarea'},
|
||||
]
|
||||
])
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
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;
|
||||
padding: 0 12rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="敬请协调情况统计" />
|
||||
<el-button :type="current == 'list' ? 'primary' : ''" @click="current = 'list'">列 表</el-button>
|
||||
<el-button :type="current != 'list' ? 'primary' : ''" @click="current = 'echart'">统计图表</el-button>
|
||||
</div>
|
||||
<AlarmList v-if="current == 'list'"></AlarmList>
|
||||
<AlarmEchats v-else></AlarmEchats>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import AlarmList from "./components/alarmList.vue";
|
||||
import AlarmEchats from "./components/alarmEchats.vue";
|
||||
// import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const current = ref("list");
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="bonx">
|
||||
<div class="titleBox">
|
||||
<PageTitle title="勤务打卡统计"></PageTitle>
|
||||
</div>
|
||||
<div class="lineEchartsBox">
|
||||
<moreLineEcharts echartsId="qwdkLine" :data="obj"></moreLineEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import moreLineEcharts from "@/components/echarts/moreLineEcharts.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
const obj = reactive({
|
||||
color: ['#EB00FF', '#F57100'], //['#EB00FF','#F57100']
|
||||
list: [], //[{label:'总数',val:[80,70,60,50]}, {label:'已处置',val:[70,40,30,80]}, ]
|
||||
xData: [],//['09-01','09-02','09-03','09-04']
|
||||
})
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
const getData = () => {
|
||||
qcckGet({}, "/mosty-jbld/jblddk/queryDktj").then(res => {
|
||||
if (res && res.length > 0) {
|
||||
obj.list = res[0]?.list.map((el) => {
|
||||
return { label: el.bxxmc, val: [], hatColor: '#087df9', color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'] }
|
||||
})
|
||||
obj.list?.forEach((w) => {
|
||||
res.forEach((el) => {
|
||||
el.list.forEach((item) => {
|
||||
if (w.label == item.bxxmc) {
|
||||
w.val.push(item.num)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
obj.xData = res.map((el) => el.ssbm)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bonx {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.lineEchartsBox {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,247 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">固定勤务{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList" @change="handleChange">
|
||||
<div class="listBox">
|
||||
<el-row class="el-row-title">
|
||||
<el-col class="tc border1" :span="4">班次</el-col>
|
||||
<el-col class="tc" :span="4">时间</el-col>
|
||||
<el-col class="tc border" :span="8">带队民警</el-col>
|
||||
<el-col class="tc" :span="8">巡逻保安</el-col>
|
||||
</el-row>
|
||||
<el-row v-for="(item, index) in listQuery.qwglRyDtos" :key="index">
|
||||
<el-col class="tc border1" :span="4"> {{ item.bcmc }} </el-col>
|
||||
<el-col class="tc" :span="4">{{ item.qwsj }}</el-col>
|
||||
<el-col class="tc border" :span="8">
|
||||
<el-tag closable v-for="(it, idx) in item.mjList" :key="idx" @close="item.mjList.splice(idx, 1)">
|
||||
{{ it.xm }}
|
||||
</el-tag>
|
||||
<span class="btns" @click="addUser('mj', index, item.mjList)">新增</span>
|
||||
</el-col>
|
||||
<el-col class="tc" :span="8">
|
||||
<el-tag closable v-for="(it, idx) in item.baList" :key="idx" @close="item.baList.splice(idx, 1)">
|
||||
{{ it.xm }}
|
||||
</el-tag>
|
||||
<span class="btns" @click="addUser('ab', index, item.baList)">新增</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</FormMessage>
|
||||
</div>
|
||||
<!-- 选择民警 -->
|
||||
<ChooseUser :roleIds="roleIds" v-model="chooseUserVisible" :Single="false" @choosedUsers="saveUsers"></ChooseUser>
|
||||
<!-- 选择保安 -->
|
||||
<AbIndex :roleIds="roleIds" v-model="chooseAbVisible" @choosedUsers="saveUsers"></AbIndex>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import AbIndex from "@/components/MyComponents/ChooseUser/AbIndex.vue";
|
||||
import { getTime } from "@/utils/time.js";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
import { ref, defineProps, reactive, defineEmits, getCurrentInstance } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const roleIds = ref([]);
|
||||
const chooseType = ref('');
|
||||
const chooseIndex = ref()
|
||||
const chooseAbVisible = ref(false)
|
||||
const chooseUserVisible = ref(false);
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({
|
||||
xhzq: 0,
|
||||
kssj: timeValidate(new Date(), 'ymd'),
|
||||
qwglRyDtos: []
|
||||
});
|
||||
const rules = reactive({
|
||||
qwmc: [{ required: true, message: "请输入勤务名称", trigger: "blur" }],
|
||||
bxxid: [{ required: true, message: "请选择巡逻路线", trigger: "change" }],
|
||||
kssj: [{ required: true, message: "请选择开始时间", trigger: "change" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "勤务名称", prop: "qwmc", type: "input" },
|
||||
{ label: "巡逻路线", prop: "bxxid", type: "select", options: props.dic.bxxlist },
|
||||
],
|
||||
[
|
||||
{ label: "开始时间", prop: "kssj", type: "date" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
],
|
||||
{ label: "勤务循环周期", prop: "xhzq", type: "number", width: '50%', placeholder: "请输入勤务循环周期" },
|
||||
{ label: "", prop: "", type: "slot" }
|
||||
])
|
||||
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if (id) getDateById(id);
|
||||
};
|
||||
|
||||
// 更根据id获取数据
|
||||
const getDateById = (id) => {
|
||||
qcckGet({ id }, `/mosty-jbld/gdqwgl/selectByid`).then((res) => {
|
||||
let arr1 = handleZz(res.baList, 'baList')
|
||||
let arr2 = handleZz(res.mjList, 'mjList')
|
||||
let list = [...arr1, ...arr2];
|
||||
res.qwglRyDtos = list.reduce((result, obj) => {
|
||||
var target = result.find((item) => item.bcmc === obj.bcmc);
|
||||
target ? Object.assign(target, obj) : result.push(obj);
|
||||
return result;
|
||||
}, []);
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
// 去重组装数据
|
||||
const handleZz = (val, type) => {
|
||||
let newData = [];
|
||||
val.forEach(item => {
|
||||
let index = newData.findIndex(obj => obj.bcmc === item.bcmc);
|
||||
if (index !== -1) {
|
||||
newData[index][type].push({ id: item.ryid, xm: item.xm });
|
||||
} else {
|
||||
let obj = { bcmc: item.bcmc, qwsj: item.qwsj }
|
||||
obj[type] = [{ id: item.ryid, xm: item.xm }];
|
||||
newData.push(obj);
|
||||
}
|
||||
});
|
||||
return newData;
|
||||
}
|
||||
|
||||
// 选择的用户
|
||||
const addUser = (type, index, arr) => {
|
||||
chooseType.value = type;
|
||||
chooseIndex.value = index;
|
||||
roleIds.value = arr ? arr.map(item => item.id) : [];
|
||||
type == 'mj' ? chooseUserVisible.value = true : chooseAbVisible.value = true;
|
||||
};
|
||||
|
||||
//批量添加用户
|
||||
const saveUsers = (users) => {
|
||||
switch (chooseType.value) {
|
||||
case 'mj':
|
||||
listQuery.value.qwglRyDtos[chooseIndex.value].mjList = users.map(item => {
|
||||
return { id: item.id, xm: item.userName }
|
||||
});
|
||||
break;
|
||||
case 'ab':
|
||||
listQuery.value.qwglRyDtos[chooseIndex.value].baList = users.map(item => {
|
||||
return { id: item.id, xm: item.xm }
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 处理表单数据变化
|
||||
const handleChange = (data) => {
|
||||
listQuery.value.qwglRyDtos = []
|
||||
if (data.xhzq > 0) {
|
||||
if (!listQuery.value.kssj) return proxy.$message.warning("请选择开始时间");
|
||||
for (let i = 0; i < data.xhzq; i++) {
|
||||
listQuery.value.qwglRyDtos.push({ bcmc: `第${i + 1}班`, qwsj: getTime(i, listQuery.value.kssj), mjList: [], xlba: [] })
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 保存
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
loading.value = true;
|
||||
let data = { ...listQuery.value }
|
||||
data.qwglRyDtos = data.qwglRyDtos.map(item => {
|
||||
return {
|
||||
bcmc: item.bcmc,
|
||||
qwsj: item.qwsj,
|
||||
mjIds: item.mjList.map(mj => mj.id),
|
||||
baIds: item.baList.map(ba => ba.id)
|
||||
}
|
||||
});
|
||||
let url = title.value == '新增' ? `/mosty-jbld/gdqwgl/add` : `/mosty-jbld/gdqwgl/update`;
|
||||
qcckPost(data, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value.qwglRyDtos = [];
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
|
||||
.listBox {
|
||||
width: 100%;
|
||||
height: 536px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-row {
|
||||
border: 1px solid #e3e7ed;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
::v-deep .el-row-title {
|
||||
border-top: 1px solid #e3e7ed;
|
||||
background: #e3eeff;
|
||||
}
|
||||
|
||||
::v-deep .border {
|
||||
border-left: 1px solid #e3e7ed;
|
||||
border-right: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
::v-deep .border1 {
|
||||
border-right: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
::v-deep .el-col {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #0072ff;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="固定勤务管理" />
|
||||
<el-button type="primary" @click="addEdit('add', row)">新增</el-button>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row.id)">编辑</el-link>
|
||||
<el-link type="danger" @click="deleteItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" v-if="show" :dic="{bxxlist}" @refresh="getList" />
|
||||
</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/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const bxxlist = ref([])
|
||||
const show = ref(false);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "勤务名称",
|
||||
prop: "qwmc",
|
||||
placeholder: "勤务名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department",
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 160,
|
||||
tableColumn: [
|
||||
{ label: "勤务名称", prop: "qwmc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "巡逻路线名称", prop: "bxxmc" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getBxxList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
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 = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/gdqwgl/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, id) => {
|
||||
show.value = true;
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, id);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const getBxxList = () => {
|
||||
// 获取巡逻路线列表
|
||||
qcckGet({}, `/mosty-jbld/jbldBxx/selecList`).then((res) => {
|
||||
bxxlist.value = res.map(item => ({ label: item.bxxMc, value: item.id }));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 删除
|
||||
const deleteItem = (id) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"}).then(() => {
|
||||
qcckPost({id}, "/mosty-jbld/gdqwgl/delete").then((res) => {
|
||||
proxy.$message({ type: "success", message: "删除成功!" });
|
||||
getList();
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
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>
|
||||
@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">巡逻路线{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
||||
<template #jwd>
|
||||
<div class="flex align-center ww100">
|
||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度"/>
|
||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度"/>
|
||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<div class="mapBox relative">
|
||||
<GdMap></GdMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
||||
import { color } from "echarts";
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({});
|
||||
const openType = ref("")
|
||||
const rules = reactive({
|
||||
zsdMc: [{ required: true, message: "请输入值守点名称", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "值守点名称", prop: "zsdMc", type: "input" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
],
|
||||
[
|
||||
{ label: "地址", prop: "xxdz", type: "input"},
|
||||
],
|
||||
[
|
||||
{ label: "选择点位", prop: "jwd", type: "slot"},
|
||||
],
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res => {
|
||||
if(res.type == 'point') {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id,) => {
|
||||
dialogForm.value = true;
|
||||
openType.value = type;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if(id) getDateById(id)
|
||||
};
|
||||
|
||||
// 根据id获取数据
|
||||
const getDateById = (id) =>{
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
if(res.jd && res.wd){
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.jd,wd:res.wd}], icon, flag: 'bxd'});
|
||||
emitter.emit("setMapCenter", { location: [res.jd,res.wd], zoomLevel:12});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
const changePoint = () =>{
|
||||
listQuery.value.jd = ''
|
||||
listQuery.value.wd = ''
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(()=>{
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
.mapBox{
|
||||
width: calc(100% - 24rem);
|
||||
height:500px;
|
||||
overflow: hidden;
|
||||
margin: 0 12rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,159 +0,0 @@
|
||||
<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>
|
||||
</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 #ewm="{ row }">
|
||||
<el-image style="width: 70px;" :src="`${baseUrl}${row.ewm}`" preview-teleported>
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit('edit', row.id)">编辑</el-link>
|
||||
<el-link type="danger" link @click="handleDelete(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @refresh="getList" />
|
||||
</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/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const baseUrl = 'data:image/jpeg;base64,'
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "值守点名称",
|
||||
prop: "zsdMc",
|
||||
placeholder: "请输入值守点名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 180,
|
||||
tableColumn: [
|
||||
{ label: "值守点名称", prop: "zsdMc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "二维码", prop: "ewm" ,showSolt:true},
|
||||
{ label: "地址", prop: "xxdz" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
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 = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/jbldzsd/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 删除
|
||||
const handleDelete = (id) => {
|
||||
proxy.$modal.confirm("是否确认删除该值守点？").then(() => {
|
||||
qcckPost({ id }, "/mosty-jbld/jbldzsd/delete").then(() => {
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
getList();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, id) => {
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, id);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
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>
|
||||
@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">巡逻路线详情</span>
|
||||
<div>
|
||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
||||
<template #jwd>
|
||||
<div class="flex align-center ww100">
|
||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度"/>
|
||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度"/>
|
||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<div class="mapBox relative">
|
||||
<GdMap></GdMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
||||
import { color } from "echarts";
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({});
|
||||
const openType = ref("")
|
||||
const rules = reactive({
|
||||
zsdMc: [{ required: true, message: "请输入值守点名称", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "值守点名称", prop: "zsdMc", type: "input" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
],
|
||||
[
|
||||
{ label: "地址", prop: "xxdz", type: "input"},
|
||||
],
|
||||
[
|
||||
{ label: "选择点位", prop: "jwd", type: "slot"},
|
||||
],
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res => {
|
||||
if(res.type == 'point') {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id,) => {
|
||||
dialogForm.value = true;
|
||||
openType.value = type;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if(id) getDateById(id)
|
||||
};
|
||||
|
||||
// 根据id获取数据
|
||||
const getDateById = (id) =>{
|
||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
const changePoint = () =>{
|
||||
listQuery.value.jd = ''
|
||||
listQuery.value.wd = ''
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(()=>{
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height:500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="Count-Cnt flex">
|
||||
<div class="left">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
</MyTable>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BarHatEcharts echartsId="counrtEchars" :key="echartsBar" :data='obj'></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { ref, defineExpose, reactive } from "vue";
|
||||
const echartsBar = ref(1)
|
||||
const searchConfiger = ref([
|
||||
{ label: "时间段", prop: "time", showType: "daterange" },
|
||||
]);
|
||||
const obj = ref({
|
||||
xDate: [],
|
||||
list:[
|
||||
{name:'值守点数量',value:[],hatColor:'#087df9',color:['rgba(0,244,255,1)','rgba(0,77,167,1)']},
|
||||
{name:'打卡数',value:[],hatColor:'#059f59',color:['#92f9de','#0c9973']},]
|
||||
})
|
||||
const searchDate = ref({})
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableHeight: 620,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:false,
|
||||
showIndex:false
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "", prop: "ssbm" },
|
||||
{ label: "值守点数量", prop: "zsdNum" },
|
||||
{ label: "打卡数", prop: "dkNum" },
|
||||
]
|
||||
});
|
||||
|
||||
const onSearch = (params) => {
|
||||
searchDate.value.kssj = params.time ? params.time[0] : '';
|
||||
searchDate.value.jssj = params.time ? params.time[1] : '';
|
||||
getList()
|
||||
};
|
||||
|
||||
const init = () =>{
|
||||
searchDate.value.kssj = ''
|
||||
searchDate.value.jssj = ''
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
let data = { ...searchDate.value };
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckGet(data, "/mosty-jbld/jbldzsd/getZsdTj").then((res) => {
|
||||
pageData.tableData = res || [];
|
||||
obj.value.xDate = pageData.tableData.map(v=> v.ssbm);
|
||||
obj.value.list[0].value = pageData.tableData.map(v=> v.zsdNum);//值守人员数量
|
||||
obj.value.list[1].value = pageData.tableData.map(v=> v.dkNum); //值守点数量
|
||||
echartsBar.value++
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Count-Cnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 267px); /* Adjust height as needed */
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.left{
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
.right{
|
||||
flex: 1 0 0;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="值守点值守统计">
|
||||
<el-button @click="handleBtn('列表')" :type="activeName == '列表' ? 'primary':''">列表</el-button>
|
||||
<el-button @click="handleBtn('统计图表')" :type="activeName == '统计图表' ? 'primary':''">统计图表</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<Count v-if="activeName == '统计图表'" ref="countPage"></Count>
|
||||
<ListTable @lookDetail="lookDetail" ref="listPage" v-if="activeName == '列表'"></ListTable>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetailForm from "@/views/backOfficeSystem/AlarmLinkage/GuardPoint/components/detailForm.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import ListTable from "./listTable.vue";
|
||||
import Count from "./count.vue";
|
||||
import { nextTick, ref } from "vue";
|
||||
const countPage = ref()
|
||||
const listPage = ref()
|
||||
const activeName = ref("列表");
|
||||
const detailDiloag = ref();
|
||||
const lookDetail = (row) => {
|
||||
detailDiloag.value.init('detail',row.id);
|
||||
};
|
||||
function handleBtn(type){
|
||||
activeName.value = type;
|
||||
nextTick(()=>{
|
||||
type == '列表'? listPage.value.init() : countPage.value.init()
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<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 type="primary" link @click="addEdit(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, defineEmits,defineExpose, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["lookDetail"]);
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "值守点名称",
|
||||
prop: "zsdMc",
|
||||
placeholder: "请输入值守点名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "值守点名称", prop: "zsdMc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "打卡人数", prop: "num" },
|
||||
{ label: "地址", prop: "xxdz" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
const init = () =>{
|
||||
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 };
|
||||
qcckGet(data, "/mosty-jbld/jbldzsd/selectPageTj").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情 (Removed as per prototype)
|
||||
const addEdit = (row) => {
|
||||
emit("lookDetail", row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">安全人员管理详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList">
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref, reactive, defineEmits, getCurrentInstance } from 'vue';
|
||||
const emit = defineEmits(["updateData"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogForm = ref(false);
|
||||
const FormRef = ref();
|
||||
const listQuery = ref({});
|
||||
const title = ref('')
|
||||
const loading = ref(false)
|
||||
const rules = reactive({
|
||||
code: [{ required: true, message: "请输入场所代码", trigger: "blur" }],
|
||||
csmc: [{ required: true, message: "请输入场所名称", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "场所代码", prop: "csdm", type: "input" },
|
||||
{ label: "场所名称", prop: "csmc", type: "input" },
|
||||
{ label: "姓名", prop: "xm", type: "input" },
|
||||
{ label: "证件号码", prop: "zjhm", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "联系电话", prop: "lxdh", type: "input" },
|
||||
{ label: "居住地址", prop: "jzdz", type: "input" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
{ label: "外派单位", prop: "wpdw", type: "input" },
|
||||
],
|
||||
])
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
if (id) {
|
||||
title.value = '修改'
|
||||
qcckGet({ id }, `/mosty-jbld/tbbary/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
} else {
|
||||
title.value = "新增"
|
||||
}
|
||||
};
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/tbbary/add` : `/mosty-jbld/tbbary/update`;
|
||||
console.log(url, 'url');
|
||||
qcckPost(listQuery.value, url).then((res) => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("updateData");
|
||||
close();
|
||||
}).catch(() => {
|
||||
debugger
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
const close = () => {
|
||||
console.log(22222);
|
||||
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
</style>
|
||||
@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="保安人员管理">
|
||||
<el-button type="primary" @click="addEdit('add', null)">
|
||||
<el-icon>
|
||||
<CirclePlus />
|
||||
</el-icon><span>新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @updateData="getList" />
|
||||
</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/detailForm.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: "xm",
|
||||
placeholder: "人员姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "sfzh",
|
||||
placeholder: "证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "联系电话",
|
||||
prop: "lxdh",
|
||||
placeholder: "联系电话",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "证件号码", prop: "zjhm" },
|
||||
{ label: "联系方式", prop: "lxdh" },
|
||||
{ label: "外派单位", prop: "wpdw" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
})
|
||||
// 搜索
|
||||
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 delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").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>
|
||||
@ -1,95 +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-position="right">
|
||||
<el-form-item label="任务名称">
|
||||
<el-input v-model="listQuery.rwmc" placeholder="请输入任务名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssbm" placeholder="请输入所属辖区" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务地点">
|
||||
<el-input v-model="listQuery.rwdz" placeholder="请输入任务地点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务时间">
|
||||
<el-input v-model="listQuery.rwsj" placeholder="请输入任务时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型">
|
||||
<el-select :disabled="true" v-model="listQuery.rwlx" placeholder="请选择任务类型">
|
||||
<el-option v-for="item in dic.D_BZ_JBLDRWLX" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态">
|
||||
<el-select :disabled="true" v-model="listQuery.rwzt" placeholder="请选择任务状态">
|
||||
<el-option v-for="item in dic.JBLDRWZT" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述" style="width:100%">
|
||||
<el-input type="textarea" style="width:100%" v-model="listQuery.rwms" placeholder="请输入任务描述" :rows="4" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { ref, reactive } from 'vue';
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
qcckGet({ id: row.id }, "/mosty-jbld/rw/selectByid").then(res => {
|
||||
listQuery.value = res;
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
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;
|
||||
}
|
||||
::v-deep .el-form{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 12rem;
|
||||
.el-form-item--default{
|
||||
width: 23%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="Count-Cnt flex">
|
||||
<div class="left">
|
||||
<MyTable :tableData="pageData.tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
:tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger">
|
||||
</MyTable>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BarHatEcharts echartsId="counrtEchars" :data='obj'></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet} from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
const searchConfiger = ref([
|
||||
{ label: "时间段", prop: "time", showType: "daterange" },
|
||||
]);
|
||||
const obj = ref({
|
||||
xDate: [],
|
||||
list: []
|
||||
})
|
||||
const paramsObj = ref({})
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableHeight: 620,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
showIndex: false,
|
||||
rowKey: 'ssbmdm',
|
||||
lazy: false
|
||||
},
|
||||
controlsWidth: 100, // No controls needed based on prototype
|
||||
tableColumn: [
|
||||
{ label: "", prop: "mc" },
|
||||
{ label: "跟踪侦察", prop: "xlzsl" },
|
||||
{ label: "人员线索", prop: "xlrs" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
});
|
||||
const getData = () => {
|
||||
qcckGet(paramsObj.value, "/mosty-jbld/rw/getRwtj").then(res => {
|
||||
if (res && res.length > 0) {
|
||||
pageData.tableColumn = res[0].list.map((el) => {
|
||||
return { label: el.zdmc, prop: el.py }
|
||||
})
|
||||
pageData.tableColumn.unshift({ label: "", prop: "mc" })
|
||||
pageData.tableData = res.map((item) => {
|
||||
let big = {};
|
||||
big.mc = item.ssbm;
|
||||
big.ssbmdm = item.ssbmdm;
|
||||
item.list.forEach((el) => {
|
||||
big[el.py] = el.count
|
||||
})
|
||||
return big
|
||||
})
|
||||
obj.value.list = res[0]?.list.map((el) => {
|
||||
return { name: el.zdmc, value: [], hatColor: '#087df9', color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'] }
|
||||
})
|
||||
obj.value.list?.forEach((w) => {
|
||||
res.forEach((el) => {
|
||||
el.list.forEach((item) => {
|
||||
if (w.name == item.zdmc) {
|
||||
w.value.push(item.count)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
obj.value.xDate = res.map((el) => el.ssbm)
|
||||
}
|
||||
})
|
||||
}
|
||||
const onSearch = (params) => {
|
||||
if (params.time.length > 0) {
|
||||
paramsObj.value.kssj = params.time[0]
|
||||
paramsObj.value.jssj = params.time[1]
|
||||
}
|
||||
getData()
|
||||
};
|
||||
|
||||
// 获取统计数据
|
||||
const getCount = () =>{
|
||||
qcckGet({},'/mosty-jbld/rw/getRwtj').then(res=>{
|
||||
console.log(res,'============00');
|
||||
let arr = res || [];
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Count-Cnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 267px);
|
||||
/* Adjust height as needed */
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1 0 0;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="临时任务管理">
|
||||
<el-button @click="activeName = '列表'">列表</el-button>
|
||||
<el-button @click="activeName = '统计图表'">统计图表</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<Count v-if="activeName == '统计图表'"></Count>
|
||||
<ListTable @lookDetail="lookDetail" v-if="activeName == '列表'" :dic="{ D_BZ_JBLDRWLX, JBLDRWZT }"></ListTable>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" :dic="{ D_BZ_JBLDRWLX, JBLDRWZT }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import { reactive, ref, defineEmits, onMounted, getCurrentInstance } from "vue";
|
||||
import ListTable from "./listTable.vue";
|
||||
import Count from "./count.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JBLDRWLX, JBLDRWZT } = proxy.$dict("D_BZ_JBLDRWLX", "JBLDRWZT");
|
||||
const activeName = ref("列表");
|
||||
const detailDiloag = ref();
|
||||
const lookDetail = (row) => {
|
||||
detailDiloag.value.init(row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<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 #rwlx="{ row }">
|
||||
<dict-tag :options="dic.D_BZ_JBLDRWLX" :value="row.rwlx" :tag="false" />
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js"; // Temporarily comment out as API logic might change
|
||||
import { reactive, ref, defineEmits, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(["lookDetail"]);
|
||||
const queryFrom = ref({})
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "任务名称",
|
||||
prop: "rwmc",
|
||||
placeholder: "请输入任务名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department"
|
||||
},
|
||||
{
|
||||
label: "任务类型",
|
||||
prop: "rwlx",
|
||||
placeholder: "请选择任务类型",
|
||||
showType: "select",
|
||||
options:props.dic.D_BZ_JBLDRWLX
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
showIndex: true
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "任务名称", prop: "rwmc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "任务地点", prop: "rwdz" },
|
||||
{ label: "任务时间", prop: "rwsj" },
|
||||
{ label: "任务类型", prop: "rwlx", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
// 搜索
|
||||
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) => {
|
||||
// Mock data is used for now, uncomment and adapt API call when needed
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
let url = "/mosty-jbld/rw/selectPage"; // Example API endpoint
|
||||
qcckGet(data, url)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const addEdit = (row) => {
|
||||
emit("lookDetail", row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
const evaluate = (row) => {
|
||||
emit("evaluate", row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,160 +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">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :formList="formList">
|
||||
<template #Personnel>
|
||||
<div class="bar">巡逻人员</div>
|
||||
<div class="flex tableRow" v-for="(item,index) in zDList" :key="index">
|
||||
<div class="content-left">{{ item.label }}</div>
|
||||
<div class="content-right">{{ listQuery[item.key] }}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<template #punchCardTime>
|
||||
<div style="width: calc(100% - 1px);;">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref, defineProps, reactive, defineEmits, getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const listQuery = ref({});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "任务名称", prop: "rwbt", type: "input" },
|
||||
{ label: "巡逻线路", prop: "xlmc", type: "input"},
|
||||
],
|
||||
[
|
||||
{ label: "所属辖区", prop: "ssbm", type: "input" },
|
||||
{ label: "任务时间", prop: "rwkssj", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "", prop: "Personnel", type: "slot" },
|
||||
],
|
||||
[
|
||||
{ label: "", prop: "punchCardTime", type: "slot" },
|
||||
],
|
||||
])
|
||||
const pageData = reactive({
|
||||
tableData:[],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
haveControls: false,
|
||||
showIndex:false
|
||||
},
|
||||
tableHeight: 400,
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "巡逻点位", prop: "bxdMc" },
|
||||
{ label: "打卡时间", prop: "" },
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
title.value = type == "add" ? "新增" : "详情";
|
||||
dialogForm.value = true;
|
||||
if (row) getDateById(row.id);
|
||||
};
|
||||
const zDList = reactive([
|
||||
{
|
||||
label: "民警",
|
||||
key: "fjxm"
|
||||
}, {
|
||||
label: "民警",
|
||||
key: "mjxm"
|
||||
}, {
|
||||
label: "保安",
|
||||
key:'baxm'
|
||||
}, {
|
||||
label: "网格员",
|
||||
key: 'wgyxm'
|
||||
}, {
|
||||
label: "群防群治",
|
||||
key: 'qfqz'
|
||||
}
|
||||
])
|
||||
// 获取详情
|
||||
const getDateById = (id) => {
|
||||
qcckGet({id:id}, `/mosty-jmxf/bxxRwxx/selectByid`).then((res) => {
|
||||
listQuery.value = res
|
||||
pageData.tableData=res.bxx.bxds
|
||||
})
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};
|
||||
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cntinfo {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: 1px solid #ececec;
|
||||
background-color: rgb(224, 224, 224);
|
||||
}
|
||||
|
||||
.tableRow {
|
||||
border: 1px solid #ececec;
|
||||
border-top: none;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.content-left {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,234 +0,0 @@
|
||||
<template>
|
||||
<div class="patrol-line-dialog">
|
||||
<el-dialog v-model="isShow" title="下发指令" width="800px" :show-close="true" :center="true"
|
||||
:before-close="handleClose">
|
||||
<div class="uplodBox">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="rwbt" label="任务名称">
|
||||
<el-input v-model="formData.rwbt" placeholder="请输入任务名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="rwsj" label="任务时间">
|
||||
<el-date-picker @change="handleChangeTime" v-model="formData.rwsj" type="datetimerange" unlink-panels range-separator="至"
|
||||
:start-placeholder="'开始时间'" :end-placeholder="'结束时间'" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider> 巡逻人员 </el-divider>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="fzrxm" label="负责人">
|
||||
<el-input v-model="formData.fzrxm" readonly placeholder="请选择负责人" @click="handleClick('fzr','选择负责人')"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="mjlist" label="民警">
|
||||
<div class="tagBox" @click="handleClick('mj','选择民警','mjlist')">
|
||||
<span class="txet" v-if="!formData.mjlist || formData.mjlist.length == 0">请选择民警</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.mjlist" :key="item.id" closable @close.stop="removeTag(item, 'mjlist')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="fjlist" label="辅警">
|
||||
<div class="tagBox" @click="handleClick('fj','选择辅警','fjlist')">
|
||||
<span class="txet" v-if="!formData.fjlist || formData.fjlist.length == 0">请选择辅警</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.fjlist" :key="item.id" closable @close.stop="removeTag(item, 'fjlist')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="baryList" label="保安">
|
||||
<div class="tagBox" @click="handleClick('ba','选择保安','baryList')">
|
||||
<span class="txet" v-if="!formData.baryList || formData.baryList.length == 0">请选择保安</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.baryList" :key="item.id" closable @close.stop="removeTag(item, 'baryList')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="wgyjson" label="网格员">
|
||||
<div class="tagBox" @click="handleClick('wgy','选择网格员','wgyjson')">
|
||||
<span class="txet" v-if="!formData.wgyjson || formData.wgyjson.length == 0">请选择网格员</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.wgyjson" :key="item.id" closable @close.stop="removeTag(item, 'wgyjson')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="qfqzjson" label="群防群治">
|
||||
<div class="tagBox" @click="handleClick('qfqz','选择群防群治','qfqzjson')">
|
||||
<span class="txet" v-if="!formData.qfqzjson || formData.qfqzjson.length == 0">请选择群防群治</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.qfqzjson" :key="item.id" closable @close.stop="removeTag(item, 'qfqzjson')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="foot tc">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 选择人员列表 -->
|
||||
<ChooseList :data="chooseType" v-model="showDialog" @choosed="choosedList"></ChooseList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import ChooseList from "@/components/ChooseList/index.vue";
|
||||
import { reactive, ref, defineEmits } from "vue";
|
||||
const emits = defineEmits(['refresh']);
|
||||
const isShow = ref(false);
|
||||
const formData = ref({});
|
||||
const rules = reactive({
|
||||
rwbt: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
|
||||
rwsj: [{ required: true, message: "请选择任务时间", trigger: "change" }],
|
||||
fzrxm: [{ required: true, message: "请选择负责人", trigger: "change" }],
|
||||
mjlist: [{ required: true, message: "请选择民警", trigger: "change" }],
|
||||
fjlist: [{ required: true, message: "请选择辅警", trigger: "change" }],
|
||||
});
|
||||
const loading = ref(false)
|
||||
const showDialog = ref(false);
|
||||
const chooseType = reactive({
|
||||
title:'选择列表',
|
||||
type:'user',//选择类型
|
||||
Single:false,//是否单选
|
||||
roleIds:[],//回显的数据
|
||||
});
|
||||
const formRef = ref()
|
||||
// 点击选择数据
|
||||
function handleClick (type,title,val){
|
||||
chooseType.type = type;
|
||||
chooseType.title = title;
|
||||
chooseType.roleIds = [];
|
||||
chooseType.Single = type == 'fzr' ? true : false;
|
||||
if (!formData.value[val]) formData.value[val] = [];
|
||||
chooseType.roleIds = formData.value[val].map(item => item.id);
|
||||
showDialog.value = true;
|
||||
}
|
||||
|
||||
// 选择数据
|
||||
function choosedList(data) {
|
||||
switch (chooseType.type) {
|
||||
case 'fzr':
|
||||
formData.value.fzrxm = data[0].xm;
|
||||
formData.value.fzrsfzh = data[0].sfzh;
|
||||
break;
|
||||
case 'mj':
|
||||
formData.value.mjlist = data;
|
||||
break;
|
||||
case 'fj':
|
||||
formData.value.fjlist = data;
|
||||
break;
|
||||
case 'ba':
|
||||
formData.value.baryList = data;
|
||||
break;
|
||||
case 'wgy':
|
||||
formData.value.wgyjson = data;
|
||||
break;
|
||||
case 'qfqz':
|
||||
formData.value.qfqzjson = data;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 删除数据
|
||||
function removeTag(item, type) {
|
||||
formData.value[type] = formData.value[type].filter((i) => i.id !== item.id);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function handleClose() {
|
||||
isShow.value = false;
|
||||
formData.value = {};
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
function handleChangeTime(val){
|
||||
formData.value.rwkssj = val ? val[0] :'';
|
||||
formData.value.rwjssj = val ? val[1] :'';
|
||||
}
|
||||
|
||||
// 提交
|
||||
function onComfirm (){
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
let params = { ...formData.value }
|
||||
params.basl = params.baryList ? params.baryList.length : 0 ;
|
||||
params.baxm = params.baryList ? params.baryList.map(item => item.xm).join(',') : '';
|
||||
params.jlryList = [...params.mjlist, ...params.fjlist];
|
||||
params.mjsl = params.mjlist ? params.mjlist.length : 0;
|
||||
params.fjsl = params.fjlist ? params.fjlist.length : 0;
|
||||
params.mjxm = params.mjlist ? params.mjlist.map(item => item.xm).join(',') : '';
|
||||
params.fjxm = params.fjlist ? params.fjlist.map(item => item.xm).join(',') : '';
|
||||
params.wgyxm = params.wgyjson ? params.wgyjson.map(item => item.xm).join(',') : '';
|
||||
params.wgyjson = params.wgyjson ? JSON.stringify(params.wgyjson) : '';
|
||||
params.qfqz = params.qfqzjson ? params.qfqzjson.map(item => item.xm).join(',') : '';
|
||||
params.qfqzjson = params.qfqzjson ? JSON.stringify(params.qfqzjson) : '';
|
||||
qcckPost(params, "/mosty-jmxf/bxxRwxx/uodateEntity").then((res) => {
|
||||
emits('refresh');
|
||||
ElMessage({ message: "保存成功", type: "success", });
|
||||
loading.value = false;
|
||||
handleClose();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const init = (type,row) => {
|
||||
qcckGet({id:row.id}, "/mosty-jmxf/bxxRwxx/selectByid").then((res) => {
|
||||
let jlList = res.jlryList || []
|
||||
res.mjlist = jlList.filter(item => item.fl == '01');
|
||||
res.fjlist = jlList.filter(item => item.fl == '02');
|
||||
res.qfqzjson = res.qfqzjson ? JSON.parse(res.qfqzjson) : [];
|
||||
res.wgyjson = res.wgyjson ? JSON.parse(res.wgyjson) : [];
|
||||
res.rwsj = [res.rwkssj,res.rwjssj]
|
||||
formData.value = res;
|
||||
isShow.value = true;
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({init})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tagBox {
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 2px 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.txet {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.patrol-line-dialog {
|
||||
.el-date-editor .el-range-separator {
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="任务中心" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<!-- <el-link type="primary" @click="addEdit('edit', row)">详情</el-link> -->
|
||||
<el-link type="primary" @click="openDetail( row)">详情</el-link>
|
||||
<!-- <el-link type="danger" @click="handleDelete([row.id])">删除</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 下发任务 -->
|
||||
<XfrwDialog ref="xfDiloag" @refresh="getList"></XfrwDialog>
|
||||
</div>
|
||||
<AddForm ref="addForm"/>
|
||||
</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 XfrwDialog from "./components/xfrwDialog.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import AddForm from "./components/addForm.vue";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const xfDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "任务标题",
|
||||
prop: "rwbt",
|
||||
placeholder: "请输入任务标题",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "任务时间",
|
||||
prop: "datetime",
|
||||
showType: "datetimerange"
|
||||
},
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 180,
|
||||
tableColumn: [
|
||||
{ label: "任务标题", prop: "rwbt" },
|
||||
{ label: "任务开始时间", prop: "rwkssj" },
|
||||
{ label: "任务结束时间", prop: "rwjssj" },
|
||||
{ label: "巡逻线名称", prop: "xlmc" },
|
||||
{ label: "负责人姓名", prop: "fzrxm" },
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
queryFrom.value.startTime = val.datetime ? val.datetime[0] : '';
|
||||
queryFrom.value.endTime = val.datetime ? val.datetime[1] : '';
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
delete data.datetime;
|
||||
qcckGet(data, "/mosty-jmxf/bxxRwxx/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
nextTick(() => {
|
||||
xfDiloag.value.init(type, row);
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (ids) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"}).then(() => {
|
||||
qcckPost({ids}, "/mosty-jmxf/bxxRwxx/delete").then((res) => {
|
||||
proxy.$message({ type: "success", message: "删除成功!" });
|
||||
getList();
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
// 查看详情
|
||||
const addForm = ref()
|
||||
// 打开详情
|
||||
const openDetail = (row) => {
|
||||
addForm.value.init("detail", row);
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,155 +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.qwmc"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻路线名称">
|
||||
<el-input v-model="listQuery.bxxmc"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssbm"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻时间">
|
||||
<el-input v-model="listQuery.kssj"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">打卡情况</el-divider>
|
||||
<div class="mb10">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
<template #rylx="{row}">
|
||||
<!-- 人员类型 01民警 02保安") -->
|
||||
<span>{{ row.rylx == '01' ? '民警' :'保安' }}</span>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableHeight: 500,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:false
|
||||
},
|
||||
controlsWidth: 100, // No controls needed based on prototype
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "身份证", prop: "sfzh" },
|
||||
{ label: "人员类型", prop: "rylx",showSolt:true },
|
||||
{ label: "所属单位", prop: "ssbm" },
|
||||
{ label: "巡逻扫码时间", prop: "qwsj" }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (row) => {
|
||||
dialogForm.value = true;
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckGet({id:row.qwid, qwsj:row.qwsj},'/mosty-jbld/gdqwgl/selectByid').then(res=>{
|
||||
listQuery.value = res || [];
|
||||
pageData.tableConfiger.loading = false;
|
||||
pageData.tableData = [...res.mjList,...res.baList]
|
||||
}).catch(()=>{
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="巡逻情况统计"></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"
|
||||
>
|
||||
<template #ddmjList="{ row }">
|
||||
<span>{{ row.ddmjList.length }}</span>
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const searchBox = ref(); //搜索框
|
||||
const detailDiloag = ref();
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "勤务名称",
|
||||
prop: "qwmc",
|
||||
placeholder: "请输入勤务名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
showIndex: true
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "勤务名称", prop: "qwmc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "巡逻路线名称", prop: "bxxmc" },
|
||||
{ label: "带队民警", prop: "ddmjList", showSolt: true },
|
||||
{ label: "打卡人数", prop: "dkrs" },
|
||||
{ label: "巡逻时间", prop: "qwsj" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/gdqwgl/getXljltj")
|
||||
.then((res) => {
|
||||
pageData.tableData = res || [];
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
const addEdit = (row) => {
|
||||
detailDiloag.value.init(row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 230;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,149 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">旅店业场所附加信息管理{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="close" v-if="title != '详情'">保存</el-button>
|
||||
<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="场所代码" prop="csdm">
|
||||
<el-input v-model="listQuery.csdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="业务流水号码" prop="sblsh">
|
||||
<el-input v-model="listQuery.sblsh" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="旅客代码" prop="lxrdm">
|
||||
<el-input v-model="listQuery.lxrdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="旅客常用证件代码" prop="cyzjdm">
|
||||
<el-input v-model="listQuery.cyzjdm" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="签发机关" prop="qfjg">
|
||||
<el-input v-model="listQuery.qfjg" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入证日期">
|
||||
<el-date-picker v-model="listQuery.rzrq" type="datetime" style="width:100%" placeholder="请选择入证日期"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="listQuery.xm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="房间号码" prop="fjhm">
|
||||
<el-input v-model="listQuery.fjhm" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="到店日期">
|
||||
<el-date-picker v-model="listQuery.ddrq" type="datetime" style="width:100%" placeholder="请选择到店日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="离店日期">
|
||||
<el-date-picker v-model="listQuery.ldrq" type="datetime" style="width:100%" placeholder="请选择离店日期"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="照片" prop="imageHeight">
|
||||
<MOSTY.Upload v-model="listQuery.imageUrl"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref("");
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === "edit" ? "编辑" : "详情";
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = "新增";
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,218 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #photo="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.zp"
|
||||
:preview-src-list="[row.zp]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "csdm",
|
||||
placeholder: "请输入场所代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "申办流水号码",
|
||||
prop: "sblsh",
|
||||
placeholder: "请输入申办流水号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "zjhm",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
csdm: "123456789",
|
||||
sblsh: "SB202403150001",
|
||||
lxrdm: "LXR001",
|
||||
lxr: "张三",
|
||||
cyzjdm: "111",
|
||||
zjhm: "510183199609233352",
|
||||
xm: "张三",
|
||||
fjhm: "1001",
|
||||
zp: "",
|
||||
ddrq: "2024-03-15",
|
||||
ldrq: "2024-03-16"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "场所代码", prop: "csdm" },
|
||||
{ label: "业务流水号码", prop: "sblsh" },
|
||||
{ label: "旅客代码", prop: "lxrdm" },
|
||||
{ label: "旅客常用证件代码", prop: "cyzjdm" },
|
||||
{ label: "旅客证件号码", prop: "zjhm" },
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "房间号码", prop: "fjhm" },
|
||||
{ label: "照片", prop: "zp", slot: "photo" },
|
||||
{ label: "到店日期", prop: "ddrq" },
|
||||
{ label: "离店日期", prop: "ldrq" },
|
||||
{ label: "签发机关", prop: "qfjg" },
|
||||
{ label: "入证日期", prop: "rzrq" },
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">旅店业场所附加信息管理{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="close" v-if="title != '详情'">保存</el-button>
|
||||
<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="场所代码" prop="csdm">
|
||||
<el-input v-model="listQuery.csdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="业务流水号码" prop="sblsh">
|
||||
<el-input v-model="listQuery.sblsh" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="旅客代码" prop="lxrdm">
|
||||
<el-input v-model="listQuery.lxrdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="旅客常用证件代码" prop="cyzjdm">
|
||||
<el-input v-model="listQuery.cyzjdm" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="listQuery.xm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="房间号码" prop="fjhm">
|
||||
<el-input v-model="listQuery.fjhm" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="到店日期">
|
||||
<el-date-picker v-model="listQuery.ddrq" type="datetime" style="width:100%" placeholder="请选择到店日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="离店日期">
|
||||
<el-date-picker v-model="listQuery.ldrq" type="datetime" style="width:100%" placeholder="请选择离店日期"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="照片" prop="imageHeight">
|
||||
<MOSTY.Upload v-model="listQuery.imageUrl"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref("");
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === "edit" ? "编辑" : "详情";
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = "新增";
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,216 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #photo="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.zp"
|
||||
:preview-src-list="[row.zp]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "csdm",
|
||||
placeholder: "请输入场所代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "申办流水号码",
|
||||
prop: "sblsh",
|
||||
placeholder: "请输入申办流水号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "zjhm",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
csdm: "123456789",
|
||||
sblsh: "SB202403150001",
|
||||
lxrdm: "LXR001",
|
||||
lxr: "张三",
|
||||
cyzjdm: "111",
|
||||
zjhm: "510183199609233352",
|
||||
xm: "张三",
|
||||
fjhm: "1001",
|
||||
zp: "",
|
||||
ddrq: "2024-03-15",
|
||||
ldrq: "2024-03-16"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "场所代码", prop: "csdm" },
|
||||
{ label: "业务流水号码", prop: "sblsh" },
|
||||
{ label: "境外旅客代码", prop: "lxrdm" },
|
||||
{ label: "旅客常用证件代码", prop: "cyzjdm" },
|
||||
{ label: "旅客证件号码", prop: "zjhm" },
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "房间号码", prop: "fjhm" },
|
||||
{ label: "照片", prop: "zp", slot: "photo" },
|
||||
{ label: "到店日期", prop: "ddrq" },
|
||||
{ label: "离店日期", prop: "ldrq" }
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -1,127 +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-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码" prop="csdm">
|
||||
<el-input v-model="listQuery.csdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="房屋间数" prop="fwsl">
|
||||
<el-input-number style="width: 100%;" v-model="listQuery.fwsl" :min="0" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="楼层数" prop="lcs">
|
||||
<el-input-number style="width: 100%;" v-model="listQuery.lcs" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="床位数量" prop="cwsl">
|
||||
<el-input-number style="width: 100%;" v-model="listQuery.cwsl" :min="0" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="星级代码" prop="xjdm">
|
||||
<el-input v-model="listQuery.xjdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="等级代码" prop="djsm">
|
||||
<el-input v-model="listQuery.djsm" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,189 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "csdm",
|
||||
placeholder: "请输入场所代码",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
csdm: "123456789",
|
||||
fwsl: 'xxx',
|
||||
lcs: "121",
|
||||
cwsl: "25",
|
||||
xjdm: "510183199609233352",
|
||||
djsm:'155d'
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "场所代码", prop: "csdm" },
|
||||
{ label: "房屋间数", prop: "fwsl" },
|
||||
{ label: "楼层数", prop: "lcs" },
|
||||
{ label: "床位数量", prop: "cwsl" },
|
||||
{ label: "星级代码", prop: "xjdm" },
|
||||
{ label: "等级代码", prop: "djsm" },
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">旅店业场所附加信息管理{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="close" v-if="title != '详情'">保存</el-button>
|
||||
<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="场所代码" prop="csdm">
|
||||
<el-input v-model="listQuery.csdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称" prop="csmc">
|
||||
<el-input v-model="listQuery.csmc" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="访客编号" prop="fkbh">
|
||||
<el-input v-model="listQuery.fkbh" />
|
||||
</el-form-item>
|
||||
<el-form-item label="常用证件代码" prop="cyzjdm">
|
||||
<el-input v-model="listQuery.cyzjdm" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="证件号码" prop="zjhm">
|
||||
<el-input v-model="listQuery.zjhm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="listQuery.xm" />
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="联系电话" prop="lxdh">
|
||||
<el-input v-model="listQuery.lxdh" />
|
||||
</el-form-item>
|
||||
<el-form-item label="旅客代码" prop="lkdm">
|
||||
<el-input v-model="listQuery.fjhm" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="到访时间">
|
||||
<el-date-picker v-model="listQuery.dfsj" type="datetime" style="width:100%" placeholder="请选择到访时间"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="离访时间">
|
||||
<el-date-picker v-model="listQuery.lfsj" type="datetime" style="width:100%" placeholder="请选择离访时间"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref("");
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === "edit" ? "编辑" : "详情";
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = "新增";
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,221 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #photo="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.zp"
|
||||
:preview-src-list="[row.zp]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "csdm",
|
||||
placeholder: "请输入场所代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "场所名称",
|
||||
prop: "csmc",
|
||||
placeholder: "请输入场所名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "访客编号",
|
||||
prop: "fkbh",
|
||||
placeholder: "请输入访客编号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "zjhm",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
csdm: "123456789",
|
||||
csmc: "XX酒店",
|
||||
fkbh: "FK202403150001",
|
||||
fk: "张三",
|
||||
cyzjdm: "111",
|
||||
zjhm: "510183199609233352",
|
||||
xm: "张三",
|
||||
lxdh: "13800138000",
|
||||
dfsj: "2024-03-15 09:00:00",
|
||||
lfsj: "2024-03-15 11:00:00"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "场所代码", prop: "csdm" },
|
||||
{ label: "场所名称", prop: "csmc" },
|
||||
{ label: "访客编号", prop: "fkbh" },
|
||||
{ label: "常用证件代码", prop: "cyzjdm" },
|
||||
{ label: "证件号码", prop: "zjhm" },
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "联系电话", prop: "lxdh" },
|
||||
{ label: "到访时间", prop: "dfsj" },
|
||||
{ label: "离访时间", prop: "lfsj" },
|
||||
{ label: "旅客代码", prop: "lkdm" },
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -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,248 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="废旧金属回收场所管理" />
|
||||
</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>
|
||||
</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 type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="primary">从业人员</el-link>
|
||||
<el-link type="primary">转辖区</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/detailForm.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"
|
||||
}
|
||||
]);
|
||||
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"
|
||||
}
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "经营状态", prop: "jyzt" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "法人姓名", prop: "frxm" },
|
||||
{ label: "法人证件号码", prop: "frzjhm" }
|
||||
]
|
||||
});
|
||||
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-ylth/system/fjjs/hscs/list";
|
||||
qcckPost(data, url)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.rows || [];
|
||||
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>
|
||||
@ -1,137 +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>
|
||||
@ -1,224 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="废旧金属回收业务管理" />
|
||||
</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>
|
||||
</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 type="primary" @click="addEdit('detail', 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/detailForm.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: "csrxm",
|
||||
placeholder: "请输入出售人姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "出售人证件号码",
|
||||
prop: "csrzjhm",
|
||||
placeholder: "请输入出售人证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssxq",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department"
|
||||
}
|
||||
]);
|
||||
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: "废铁"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
showIndex: true
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "出售人姓名", prop: "csrxm" },
|
||||
{ label: "出售人证件号码", prop: "csrzjhm" },
|
||||
{ label: "回收人姓名", prop: "hsrxm" },
|
||||
{ label: "回收人证件号码", prop: "hsrzjhm" },
|
||||
{ label: "回收物品", prop: "hswp" }
|
||||
]
|
||||
});
|
||||
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-ylth/system/fjjs/hsyw/list";
|
||||
qcckPost(data, url)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.rows || [];
|
||||
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>
|
||||
@ -1,145 +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-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码" prop="businessNo">
|
||||
<el-input v-model="listQuery.businessNo" />
|
||||
</el-form-item>
|
||||
<el-form-item label="印章代码" prop="sealCode">
|
||||
<el-input v-model="listQuery.sealCode" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="印章名称" prop="sealName">
|
||||
<el-input v-model="listQuery.sealName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="印章机关代码" prop="orgCode">
|
||||
<el-input v-model="listQuery.orgCode" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="印章类型代码" prop="sealTypeCode">
|
||||
<el-input v-model="listQuery.sealTypeCode" />
|
||||
</el-form-item>
|
||||
<el-form-item label="印章面材料代码" prop="materialCode">
|
||||
<el-input v-model="listQuery.materialCode" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="印油颜色情况" prop="inkColor">
|
||||
<el-input v-model="listQuery.inkColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图像宽度" prop="imageWidth">
|
||||
<el-input-number style="width: 100%;" v-model="listQuery.imageWidth" :min="0" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="图像高度" prop="imageHeight">
|
||||
<el-input-number style="width: 100%;" v-model="listQuery.imageHeight" :min="0" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="印章图像" prop="imageHeight">
|
||||
<MOSTY.Upload v-model="listQuery.imageUrl"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,191 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "yzmc",
|
||||
placeholder: "请输入印章名称",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
dwmc: "123456789",
|
||||
sydw: 'xxx',
|
||||
xm: "张三",
|
||||
lxdh: "15882344901",
|
||||
zjhm: "510183199609233352"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "业务流水号码", prop: "lshm" },
|
||||
{ label: "印章代码代码", prop: "yzdm" },
|
||||
{ label: "印章名称", prop: "yzmc" },
|
||||
{ label: "印章机关代码", prop: "orgCode" },
|
||||
{ label: "印章面材料代码", prop: "materialCode" },
|
||||
{ label: "印章印油颜色情况", prop: "inkColor" },
|
||||
{ label: "印章图像宽度", prop: "imageWidth" },
|
||||
{ label: "印章图像高度", prop: "imageHeight" },
|
||||
{ label: "印章图像", prop: "imageUrl" },
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -1,150 +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-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.lshm" placeholder="请输入业务流水号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="印章代码代码">
|
||||
<el-input v-model="listQuery.yzdm" placeholder="请输入印章代码代码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="使用单位代码">
|
||||
<el-input v-model="listQuery.sydwdm" placeholder="请输入使用单位代码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="公安机关机构代码">
|
||||
<el-input v-model="listQuery.gajgggdm" 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.jbrxm" placeholder="请输入经办人姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="经办人身份证号">
|
||||
<el-input v-model="listQuery.jbrsfzh" placeholder="请输入经办人身份证号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="承接日期">
|
||||
<el-date-picker v-model="listQuery.cjrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="制作日期">
|
||||
<el-date-picker style="width: 100%;" v-model="listQuery.zzrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="交付日期">
|
||||
<el-date-picker style="width: 100%;" v-model="listQuery.jfrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="报废日期">
|
||||
<el-date-picker style="width: 100%;" v-model="listQuery.bfrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="挂失日期">
|
||||
<el-date-picker style="width: 100%;" v-model="listQuery.ksrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,188 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "xm",
|
||||
placeholder: "请输入经办人姓名",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
dwmc: "123456789",
|
||||
sydw: 'xxx',
|
||||
xm: "张三",
|
||||
lxdh: "15882344901",
|
||||
zjhm: "510183199609233352"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "业务流水号码", prop: "lshm" },
|
||||
{ label: "印章代码代码", prop: "yzdm" },
|
||||
{ label: "经办人姓名", prop: "jbrxm" },
|
||||
{ label: "经办人身份证", prop: "jbrsfzh" },
|
||||
{ label: "承接日期", prop: "cjrq" },
|
||||
{ label: "制作日期", prop: "zzrq" },
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -1,139 +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-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="爆破事故登记业务流水号">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入业务流水号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发生时间">
|
||||
<el-date-picker v-model="listQuery.fssj" type="datetime" style="width:100%" placeholder="请选择发生时间"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="listQuery.dwmc" placeholder="请输入单位名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位类型">
|
||||
<el-input v-model="listQuery.dwlx" placeholder="请输入单位类型"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="使用单位">
|
||||
<el-input v-model="listQuery.sydw" placeholder="请输入使用单位"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用单位代码">
|
||||
<el-input v-model="listQuery.sydwdm" placeholder="请输入使用单位代码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<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.lxdh" placeholder="请输入联系电话"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,193 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "sydw",
|
||||
placeholder: "请输入使用单位",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "单位名称",
|
||||
prop: "dwmc",
|
||||
placeholder: "请输入单位名称",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
dwmc: "123456789",
|
||||
sydw: 'xxx',
|
||||
fddbr: "张三",
|
||||
lxdh: "15882344901",
|
||||
zjhm: "510183199609233352"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "单位名称", prop: "dwmc" },
|
||||
{ label: "使用单位", prop: "sydw" },
|
||||
{ label: "法定代表人", prop: "fddbr" },
|
||||
{ label: "联系电话", prop: "lxdh" },
|
||||
{ label: "证件号码", prop: "zjhm" },
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -1,127 +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-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.lshm" placeholder="请输入业务流水号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="承接车辆代码">
|
||||
<el-input v-model="listQuery.sydw" placeholder="请输入承接车辆代码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="送车人">
|
||||
<el-input v-model="listQuery.scr" placeholder="请输入送车人"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="listQuery.lxdh" placeholder="请输入联系电话"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
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>
|
||||
@ -1,188 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
</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 #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</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/detailForm.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: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
dwmc: "123456789",
|
||||
sydw: 'xxx',
|
||||
xm: "张三",
|
||||
lxdh: "15882344901",
|
||||
zjhm: "510183199609233352"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "业务流水号码", prop: "lshm" },
|
||||
{ label: "承接车辆代码", prop: "sydw" },
|
||||
{ label: "送车人", prop: "scr" },
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "联系电话", prop: "lxdh" },
|
||||
{ label: "证件号码", prop: "zjhm" },
|
||||
]
|
||||
});
|
||||
|
||||
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 delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
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>
|
||||
|
||||
@ -1,406 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">专家库管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="专家姓名">
|
||||
<el-input v-model="listQuery.zjxm" placeholder="请输入专家姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="专家级别">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="listQuery.zjjb"
|
||||
placeholder="请选择专家级别"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ZJJB"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家类型">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择专家类型"
|
||||
v-model="listQuery.zjlx"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ZJLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border row-key="id" :tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%" :key="keyCount" :height="tableHeight" v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center" width="60" />
|
||||
<el-table-column sortable label="专家姓名" prop="zjxm" align="center" width="180" />
|
||||
<el-table-column label="工作单位" prop="gzdw" align="center" />
|
||||
<el-table-column label="联系电话" prop="lxdh" align="center" />
|
||||
<el-table-column show-overflow-tooltip label="当前职位" prop="dqzw" align="center" />
|
||||
<el-table-column show-overflow-tooltip label="专家级别" prop="zjjb" align="center">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<dict-tag :options="D_ZDY_ZJJB" :value="row.zjjb" :tag="false"></dict-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip label="专家类型" prop="zjlx" align="center">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.zjlx">
|
||||
<dict-tag :options="D_ZDY_ZJLX" :value="JSON.parse(row.zjlx)" :tag="true"></dict-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" fixed="right" width="250px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog" v-if="dialogFormVisible">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button :loading="loading" type="primary" size="small" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item label="专家来源" prop="zjly">
|
||||
<el-select style="width: 100%" v-model="form.zjly" placeholder="请选择专家来源">
|
||||
<el-option v-for="dict in D_ZDY_ZJGL" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家姓名" prop="zjxm">
|
||||
<el-input @click="openUser" v-model="form.zjxm" placeholder="请输入专家姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家身份证号" prop="zjsfzh">
|
||||
<el-input @change="getBirthdayFromIdCard(form.zjsfzh)" v-model="form.zjsfzh" placeholder="请输入身份证号"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="csrq">
|
||||
<el-date-picker style="width: 100%" v-model="form.csrq" type="date" unlink-panels placeholder="请选择出生日期"
|
||||
format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
<el-form-item label="民族" prop="mzdm">
|
||||
<MOSTY.PackageSelect width="100%" v-model="form.mzdm" placeholder="请选择民族" dictEnum="NATION" clearable
|
||||
filterable />
|
||||
</el-form-item>
|
||||
<el-form-item label="籍贯" prop="jgdm">
|
||||
<el-input v-model="form.jg" placeholder="请输入籍贯"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="家庭住址" prop="jtzz">
|
||||
<el-input v-model="form.jtzz" placeholder="请输入家庭住址" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="lxdh">
|
||||
<el-input v-model="form.lxdh" placeholder="请输入联系电话" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作单位" prop="gzdw">
|
||||
<el-input v-model="form.gzdw" placeholder="请输入工作单位" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前职位" prop="dqzw">
|
||||
<el-input v-model="form.dqzw" placeholder="请输入当前职位" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家级别" prop="zjjb">
|
||||
<el-select style="width: 100%" v-model="form.zjjb" placeholder="请选择专家级别">
|
||||
<el-option v-for="dict in D_ZDY_ZJJB" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家类型" prop="zjlx">
|
||||
<el-select multiple style="width: 100%" placeholder="请选择专家类型" v-model="form.zjlx">
|
||||
<el-option v-for="dict in D_ZDY_ZJLX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="专家简介" prop="zjjc">
|
||||
<el-input v-model="form.zjjc" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="荣誉墙" prop="fjdz">
|
||||
<MOSTY.Upload width="100%" :limit="2" v-model="form.fjdz" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="bz" label="备注" style="width: 100%">
|
||||
<el-input v-model="form.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<ChooseUser v-model="chooseUserVisible" @choosedUsers="hanlderChoose"></ChooseUser>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 专家库管理 -->
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import {
|
||||
getTbJcglZjk,
|
||||
addTbJcglZjk,
|
||||
putTbJcglZjk,
|
||||
infoTbJcglZjk,
|
||||
delTbJcglZjk
|
||||
} from "@/api/basicsmanage/expertBase.js";
|
||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
||||
import { get } from "ol/proj";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDY_ZJGL, D_ZDY_ZJJB, D_ZDY_ZJLX } = proxy.$dict(
|
||||
"D_ZDY_ZJGL",
|
||||
"D_ZDY_ZJJB",
|
||||
"D_ZDY_ZJLX"
|
||||
);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const form = ref({}); //新增表单
|
||||
const tableData = ref([]); //表格数据
|
||||
const total = ref(0);
|
||||
const chackAdd = ref(false); //新增修改切换
|
||||
const loading = ref(false); //新增保存按钮截流
|
||||
const ids = ref([]); //表格选中id集合
|
||||
const searchBox = ref(null); //搜索盒子
|
||||
const loadingTable = ref(true); //表格加载状态
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const dialogFormVisible = ref(false);
|
||||
const title = ref("新增专家"); //弹窗标题
|
||||
const elform = ref(null); //新增表单容器
|
||||
const chooseUserVisible = ref(false); //用户弹窗
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
zjly: [{ required: true, message: "请选择专家来源", trigger: "change" }],
|
||||
zjxm: [{ required: true, message: "请输入专家姓名", trigger: "change" }],
|
||||
...rule.identityCardRule(
|
||||
{
|
||||
require: true,
|
||||
validator: true
|
||||
},
|
||||
"zjsfzh"
|
||||
) //身份证校验
|
||||
});
|
||||
//身份证号计算出生日期
|
||||
function getBirthdayFromIdCard(idCard) {
|
||||
var birthday = "";
|
||||
if (idCard != null && idCard != "") {
|
||||
if (idCard.length == 15) {
|
||||
birthday = "19" + idCard.substr(6, 6);
|
||||
} else if (idCard.length == 18) {
|
||||
birthday = idCard.substr(6, 8);
|
||||
}
|
||||
|
||||
birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
|
||||
}
|
||||
form.value.csrq = birthday;
|
||||
form.value.jgdm = idCard.substr(0, 6);
|
||||
// return birthday;
|
||||
}
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getTbJcglZjk(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//打开用户弹窗
|
||||
function openUser() {
|
||||
if (form.value.zjly == "1") {
|
||||
chooseUserVisible.value = true;
|
||||
}
|
||||
}
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.zjxm = user.userName;
|
||||
form.value.zjsfzh = user.idEntityCard;
|
||||
form.value.lxdh = user.mobile;
|
||||
form.value.gzdw = user.deptName;
|
||||
form.value.dqzw = user.positionName;
|
||||
form.value.mzdm = user.nation;
|
||||
getBirthdayFromIdCard(user.idEntityCard);
|
||||
};
|
||||
//打开新增弹窗
|
||||
function add() {
|
||||
title.value = '新增专家'
|
||||
chackAdd.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
form.value = {};
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
const params = JSON.parse(JSON.stringify(form.value));
|
||||
params.zjlx = JSON.stringify(params.zjlx);
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1500);
|
||||
if (chackAdd.value) {
|
||||
addTbJcglZjk(params).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
putTbJcglZjk(params).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
chackAdd.value = false;
|
||||
title.value = "修改专家信息";
|
||||
infoTbJcglZjk(row.id).then((res) => {
|
||||
form.value = res;
|
||||
form.value.zjlx = JSON.parse(res.zjlx);
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delTbJcglZjk([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delTbJcglZjk(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -1,506 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2023-05-17 21:33:29
|
||||
* @LastEditTime: 2023-05-31 09:39:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \mosty-qcck-new\src\views\basicsmanage\gudingjianchazhan\component\addGzyZ.vue
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="名称" style="width: 18%">
|
||||
<el-input
|
||||
v-model="listQuery.gzyzmc"
|
||||
placeholder="名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
<el-button type="primary" @click="addGzyEvent"> 新增 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<!-- <el-table-column align="center" type="selection" width="55" /> -->
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="gzyzmc"
|
||||
show-overflow-tooltip
|
||||
label="感知源组名称"
|
||||
width="250px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="jl"
|
||||
show-overflow-tooltip
|
||||
width="100px"
|
||||
label="距离（米）"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="jd"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
label="经度"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="wd"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
label="纬度"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="jczmc"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
label="所属检查站"
|
||||
></el-table-column>
|
||||
<el-table-column label="关联感知源">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
v-for="(item, index) in row.sxtList"
|
||||
:key="item"
|
||||
@close="onClickJczClose(index)"
|
||||
style="margin-bottom: 5px"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="onClickGzyz(row, 'info')">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button size="small" @click="onClickGzyz(row, 'update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="onClickGzyz(row, 'delete')"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNum"
|
||||
:page-sizes="[2, 5, 10, 20]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="dialogFormVisible"
|
||||
class="dialog"
|
||||
style="top: 0; left: 0; right: 0; overflow: hidden"
|
||||
>
|
||||
<div class="head_box" style="margin-bottom: 20px">
|
||||
<span class="title">感知源组</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="btnLoading"
|
||||
size="small"
|
||||
@click="submit"
|
||||
v-if="isShowBut"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="(dialogFormVisible = false), (form = {})"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
class="mosty-from-wrap"
|
||||
>
|
||||
<el-form-item style="width: 48%" prop="gzyzmc" label="名称">
|
||||
<el-input
|
||||
v-model="form.gzyzmc"
|
||||
placeholder="请输入名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jl" label="距离">
|
||||
<el-input
|
||||
v-model="form.jl"
|
||||
placeholder="请输入距离(米)"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 100%"
|
||||
prop="jczmc"
|
||||
label="关联感知源"
|
||||
@click="gzyModelValue = true"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.gz"
|
||||
placeholder="请选择感知源"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
suffix-icon="ArrowDown"
|
||||
readonly
|
||||
v-if="gzyList.length <= 0"
|
||||
>
|
||||
</el-input>
|
||||
<div style="text-align: left" e-else>
|
||||
<el-tag
|
||||
closable
|
||||
v-for="(item, index) in gzyList"
|
||||
:key="item"
|
||||
@close="onClickJczClose(index)"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input
|
||||
v-model="form.jd"
|
||||
clearable
|
||||
style="width: 45%; margin-right: 10px"
|
||||
/>
|
||||
<el-input
|
||||
v-model="form.wd"
|
||||
clearable
|
||||
style="width: 45%; margin-right: 10px"
|
||||
/>
|
||||
<el-button @click="seachLat">确定</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map" style="height: 520px">
|
||||
<GdMap v-if="dialogFormVisible" :isShowDraw="true" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<GzSource
|
||||
:gzyModelValue="gzyModelValue"
|
||||
@choosedGzy="choosedGzy"
|
||||
@close="gzyModelValue = false"
|
||||
:data="gzyList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GzSource from "@/components/MyComponents/GzSource/index.vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost, qcckPut, qcckDelete } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { useStore } from "vuex";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
defineProps,
|
||||
watch,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const total = ref(0);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const loadingTable = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const gzyModelValue = ref(false); //感知源组件弹窗
|
||||
const isShowBut = ref(true); //是否显示按钮 新增 修改显示
|
||||
const isUpdate = ref(false); //当前操作是否为修改操作
|
||||
const store = useStore();
|
||||
//搜索数据
|
||||
const props = defineProps({
|
||||
jczid: String,
|
||||
dict: Object //字典
|
||||
});
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczid: props.jczid
|
||||
});
|
||||
const gzyList = ref([]);
|
||||
const form = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
onMounted(() => {
|
||||
form.value = {};
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
emitter.on("coordString", (res) => {
|
||||
const coords = res.coord.split(",");
|
||||
form.value["jd"] = coords[0];
|
||||
form.value["wd"] = coords[1];
|
||||
});
|
||||
emitter.on("drawLngLat", (res) => {
|
||||
//如果点位存在 删除点位
|
||||
if (store.getters.points.length > 0) {
|
||||
for (let i = 0; i < store.getters.points.length; i++) {
|
||||
const item = store.getters.points[i];
|
||||
egis.removePlotFeature(item);
|
||||
}
|
||||
store.commit("map/setPoints", []);
|
||||
}
|
||||
if (res.properties.t == "Point") {
|
||||
store.commit("map/setPoints", [res.properties.id]);
|
||||
form.value.jd = res.properties.conteolPoint[0];
|
||||
form.value.wd = res.properties.conteolPoint[1];
|
||||
} else {
|
||||
proxy.$message.warning("请选择绘制点位");
|
||||
egis.removePlotFeature(res.properties.id);
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("coordString");
|
||||
emitter.off("drawLngLat");
|
||||
});
|
||||
//感知源组操作
|
||||
const onClickGzyz = (val, type) => {
|
||||
isShowBut.value = true;
|
||||
isUpdate.value = false;
|
||||
switch (type) {
|
||||
case "info":
|
||||
case "update":
|
||||
form.value = val;
|
||||
if (type == "info") {
|
||||
isShowBut.value = false;
|
||||
isUpdate.value = false;
|
||||
}
|
||||
if (type == "update") isUpdate.value = true;
|
||||
gzyList.value = val.sxtList;
|
||||
dialogFormVisible.value = true;
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [val],
|
||||
icon: require("@/assets/point/kk.png"),
|
||||
flag: "gzyz",
|
||||
isBounds: true
|
||||
});
|
||||
}, 1e3);
|
||||
break;
|
||||
case "delete":
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteGzyz(val.id);
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
};
|
||||
//删除
|
||||
const deleteGzyz = (id) => {
|
||||
qcckDelete({}, `/mosty-jmxf/gzyz/delGzyz/${id}`).then((res) => {
|
||||
proxy.$message.success("成功");
|
||||
reset();
|
||||
});
|
||||
};
|
||||
|
||||
// 新增感知源
|
||||
const addGzyEvent = () => {
|
||||
dialogFormVisible.value = true;
|
||||
gzyList.value = [];
|
||||
};
|
||||
//保存数据
|
||||
const submit = () => {
|
||||
let requestUrl;
|
||||
if (isUpdate.value) {
|
||||
//修改地址
|
||||
requestUrl = "/mosty-jmxf/gzyz/editGzyz";
|
||||
} else {
|
||||
//新增地址
|
||||
requestUrl = "/mosty-jmxf/gzyz/addGzyz";
|
||||
}
|
||||
form.value.sbbhList = gzyList.value.map((item) => item.id);
|
||||
form.value.jczid = props.jczid;
|
||||
qcckPost(form.value, requestUrl).then((res) => {
|
||||
proxy.$message.success("成功");
|
||||
dialogFormVisible.value = false;
|
||||
form.value = {};
|
||||
reset();
|
||||
});
|
||||
};
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//删除选中的感知源数据
|
||||
const onClickJczClose = (index) => {
|
||||
gzyList.value.splice(index, 1);
|
||||
};
|
||||
//选择感知源
|
||||
const choosedGzy = (val) => {
|
||||
gzyList.value = val;
|
||||
if (val.length > 0) {
|
||||
form.value.jd = val[0].jd;
|
||||
form.value.wd = val[0].wd;
|
||||
}
|
||||
};
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
listQuery.value.pageNo = 1;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczid: props.jczid
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
|
||||
//重置新增表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/gzyz/getPageList").then((res) => {
|
||||
if (res) {
|
||||
tableData.value = res.records.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
btnLoading: false
|
||||
};
|
||||
});
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value =
|
||||
window.innerHeight - 57 - 37 - searchBox.value.offsetHeight - 130;
|
||||
tableHeight1.value = window.innerHeight - 57 - 20 - 130;
|
||||
};
|
||||
|
||||
// 搜索经纬度
|
||||
function seachLat() {
|
||||
emitter.emit("deletePointArea", "gzyz");
|
||||
if (form.value.jd && form.value.wd) {
|
||||
let item = {
|
||||
jd: form.value.jd,
|
||||
wd: form.value.wd
|
||||
};
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [item],
|
||||
icon: require("@/assets/point/kk.png"),
|
||||
flag: "gzyz"
|
||||
});
|
||||
} else {
|
||||
proxy.$message.info("经度,纬度不能未空");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.latlng {
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .el-form--inline {
|
||||
padding: 0.1rem 0 !important;
|
||||
}
|
||||
.updata {
|
||||
&::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
.twoh {
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,343 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="感知源名称" style="width: 18%">
|
||||
<el-input
|
||||
v-model="listQuery.sbmc"
|
||||
placeholder="请填写感知源名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" style="width: 18%">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号">
|
||||
<el-input
|
||||
v-model="listQuery.sbbh"
|
||||
placeholder="请填写设备编号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sblx" label="感知源类型" style="width: 16%">
|
||||
<el-select v-model="listQuery.sblx">
|
||||
<el-option
|
||||
v-for="item in props.dict.D_BZ_SBLX"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</el-option
|
||||
>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sblx" label="状态" style="width: 15%">
|
||||
<el-select v-model="listQuery.sfdy">
|
||||
<el-option label="已订阅" value="1">已订阅</el-option>
|
||||
<el-option label="未订阅" value="0">未订阅</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="dataTreeList"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sbmc"
|
||||
show-overflow-tooltip
|
||||
width="250px"
|
||||
label="感知源名称"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.sbmc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sbbh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="编号"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.sbbh }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dzmc"
|
||||
show-overflow-tooltip
|
||||
label="地址"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.dzmc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sblx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="感知源类型"
|
||||
width="120px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="props.dict.D_BZ_SBLX"
|
||||
:value="row.sblx"
|
||||
:tag="false"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sblxdm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="订阅类型"
|
||||
width="120px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.sblx != '07'">远端感知</span>
|
||||
<span v-else>视频天网</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssbm" show-overflow-tooltip label="所属部门">
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.ssbm }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dzmc"
|
||||
show-overflow-tooltip
|
||||
label="状态"
|
||||
width="100px"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag type="success" v-if="row.sfDy">已订阅</el-tag>
|
||||
<el-tag type="primary" v-else>未订阅</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
@click="_updateGayStaus(row, '02', '取消订阅成功')"
|
||||
v-if="row.sfDy"
|
||||
>
|
||||
取消订阅
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="_updateGayStaus(row, '01', '订阅成功')"
|
||||
v-else
|
||||
>
|
||||
添加订阅
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNum"
|
||||
:page-sizes="[2, 5, 10, 20]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost, qcckPut, qcckDelete } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
defineProps,
|
||||
watch,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const total = ref(0);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const loadingTable = ref(false);
|
||||
//搜索数据
|
||||
|
||||
const props = defineProps({
|
||||
jczid: String,
|
||||
dict: Object, //字典
|
||||
dyLx:String//视频和感知源类型
|
||||
});
|
||||
const listQuery = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
sbmc: "",
|
||||
ssbmdm: "",
|
||||
isChild: "1",
|
||||
sblx: "",
|
||||
sfdy: "1",
|
||||
jczid: props.jczid,
|
||||
dyLx:props.dyLx
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
listQuery.value.pageNo = 1;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
sbmc: "",
|
||||
ssbmdm: "",
|
||||
isChild: "1",
|
||||
sblx: "",
|
||||
sfdy: "1",
|
||||
jczid: props.jczid,
|
||||
dyLx:props.dyLx
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//更改订阅状态
|
||||
function _updateGayStaus(item, status, msg) {
|
||||
let data = {
|
||||
sxtid: item.id,
|
||||
lx: status,
|
||||
jczid: props.jczid,
|
||||
dyLx:props.dyLx
|
||||
};
|
||||
qcckPost(data, "/mosty-jmxf/tbYsSxt/jczDyGzy").then((res) => {
|
||||
proxy.$message.success(msg);
|
||||
reset();
|
||||
});
|
||||
}
|
||||
//重置新增表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
qcckPost(listQuery.value, "/mosty-jmxf/tbYsSxt/getPageJczSxt").then((res) => {
|
||||
if (res) {
|
||||
tableData.value = res.records.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
btnLoading: false
|
||||
};
|
||||
});
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value =
|
||||
window.innerHeight - 57 - 37 - searchBox.value.offsetHeight - 150;
|
||||
|
||||
tableHeight1.value = window.innerHeight - 57 - 20 - 130;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
::v-deep .el-form--inline {
|
||||
padding: 0.1rem 0 !important;
|
||||
}
|
||||
.updata {
|
||||
&::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
.twoh {
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,544 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">检查站管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addKfdList()">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="deletList" :disabled="multipleSelection.length == 0" typeof="danger" >
|
||||
<el-icon style="vertical-align: middle"><Delete /></el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form class="mosty-from-wrap" :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="检查站名称">
|
||||
<el-input v-model="listQuery.jczmc" placeholder="请输入检查站名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="执勤类型">
|
||||
<el-select clearable style="width: 100%" v-model="listQuery.zqlx" placeholder="请选择执勤类型" >
|
||||
<el-option v-for="dict in D_BZ_ZQLX" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="点位类型">
|
||||
<el-select clearable style="width: 100%" v-model="listQuery.jczlx" placeholder="请选择点位类型">
|
||||
<el-option v-for="dict in D_BZ_JCZLX" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属圈层">
|
||||
<el-select v-model="qcidList" collapse-tags multiple class="m-2" placeholder="请选择所属圈层">
|
||||
<el-option v-for="item in ssqcList" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table @selection-change="handleSelectionChange" :data="tableData" border row-key="kfdId" style="width: 100%" :height="tableHeight" :key="keyCount" v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。"> <el-table-column type="selection" align="center" width="55" />
|
||||
<el-table-column type="index" align="center" width="60px" label="序号"/>
|
||||
<el-table-column prop="ssbm" label="所属部门" show-overflow-tooltip align="center" />
|
||||
<el-table-column prop="jczmc" show-overflow-tooltip align="center" label="检查站名称"/>
|
||||
<el-table-column show-overflow-tooltip align="center" label="执勤类型">
|
||||
<template #default="{ row }">
|
||||
<DictTag :options="D_BZ_ZQLX" :value="row.zqlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="点位类型">
|
||||
<template #default="{ row }">
|
||||
<DictTag :options="D_BZ_JCZLX" :value="row.jczlx" :tag="false"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="所属圈层">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="item in row.qcList" :key="item.id">{{ item.qcmc }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="xxdz" show-overflow-tooltip align="center" label="检查站地址"/>
|
||||
<el-table-column label="感知源操作" align="center" width="250">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="onClickDygzy(row, 'gzyz')" type="primary" >配置感知源</el-button>
|
||||
<el-button type="success" size="small" @click="onClickDygzy(row, 'sp')" >配置现场天网</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="250">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" size="small">删除</el-button>
|
||||
<el-button @click="commonQC(row)" size="small">同步圈层</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination" :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ diaTitle }}</span>
|
||||
<div>
|
||||
<el-button type="primary" :loading="btnLoading" size="small" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="dialogFormVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top" class="mosty-from-wrap">
|
||||
<el-form-item style="width: 31%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department :placeholder="form.ssbm" style="width: 100%" ref="cascader" clearable filterable :options="depList" :props="props" v-model="form.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" prop="jczmc" label="检查站名称">
|
||||
<el-input v-model="form.jczmc" placeholder="请输入检查站名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="执勤类型" style="width: 31%" prop="zqlx">
|
||||
<el-select v-model="form.zqlx" placeholder="请选择执勤类型">
|
||||
<el-option v-for="item in D_BZ_ZQLX" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 32%" prop="jczlx" label="点位类型">
|
||||
<el-select v-model="form.jczlx" placeholder="请选择点位类型">
|
||||
<el-option v-for="item in D_BZ_JCZLX" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" label="站点负责人">
|
||||
<el-input v-model="form.fzr" placeholder="请输入站点负责人" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" label="联系电话">
|
||||
<el-input v-model="form.lxdh" placeholder="请输入联系电话" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="道路类型" style="width: 31%" prop="dllx">
|
||||
<el-select v-model="form.dllx" placeholder="请选择道路类型">
|
||||
<el-option v-for="item in D_BZ_DLLX" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 31%" prop="xxdz" label="检查站地址">
|
||||
<el-input v-model="form.xxdz" placeholder="请输入检查站地址" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item @click="showRichOnly = true" style="width: 31%" prop="ssqc" label="所属圈层" required>
|
||||
<MOSTY.RichOnly width="100%" :data="qcList" v-model="showRichOnly" @close="showRichOnly = false" @choosedQc="choosedQcData"/>
|
||||
<el-input v-model="form.ssqc" placeholder="所属圈层" style="width: 100%" clearable suffix-icon="ArrowDown" v-if="qcList.length === 0"/>
|
||||
<template v-else>
|
||||
<el-tag v-for="(item, index) in qcList" :key="item.id" closable @close="onCloseQc(index)">{{ item.qcmc }}</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="示意图(最多3张)" prop="fjid" style="width: 48%">
|
||||
<MOSTY.Upload :isImg="true" width="100%" :limit="3" v-model="form.fjid"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="全景图(正面、侧面、俯视共3张)" prop="qjfjid" style="width: 48%">
|
||||
<MOSTY.Upload width="100%" :isImg="true" :limit="3" v-model="form.qjfjid"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.jd" clearable style="width: 45%" />
|
||||
<el-input v-model="form.wd" clearable style="width: 45%" />
|
||||
<el-button @click="seachLat">确定</el-button>
|
||||
<el-button @click="zdyLat">自定义坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map"> <GdMap :isShowDraw="true" /> </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 订阅天网视频 -->
|
||||
<div v-if="dialogSpVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">选择现场视频</span>
|
||||
<div><el-button @click="(dialogSpVisible = false), (formGzy.radius = 2000)">关闭</el-button></div>
|
||||
</div>
|
||||
<Pzgzy :dyLx="'02'" :jczid="formGzy.jczid" :dict="{ D_BZ_GZSBLX, D_BZ_SBLX, D_BZ_SF }" v-if="formGzy.jczid"/>
|
||||
</div>
|
||||
<!-- 添加感知源组 -->
|
||||
<div v-if="dialogGzyzVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">感知源组管理</span>
|
||||
<div>
|
||||
<el-button @click="dialogGzyzVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<AddGzyZ :jczid="formGzy.jczid" :dict="{ D_BZ_GZSBLX, D_BZ_SBLX, D_BZ_SF }" :data="gzyList"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { getItem } from "@/utils/storage.js";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import AddGzyZ from "./component/addGzyZ.vue";
|
||||
import Pzgzy from "./component/pzgzy.vue";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, inject, watch, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const userId = getItem("USERID");
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const {D_BZ_KFDLX,D_BZ_DLLX,D_BZ_JCZJB,D_BZ_JCZLX,D_BZ_QCLX,D_BZ_ZQLX,D_BZ_GZSBLX,D_BZ_SBLX,D_BZ_SF} = proxy.$dict("D_BZ_KFDLX","D_BZ_DLLX","D_BZ_JCZJB","D_BZ_JCZLX","D_BZ_QCLX","D_BZ_ZQLX","D_BZ_GZSBLX","D_BZ_SBLX","D_BZ_SF");
|
||||
const showRichOnly = ref(false);
|
||||
const chackipt = ref(true);
|
||||
const cascader = ref(null);
|
||||
const depList = ref([]); //部门数据
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const diaTitle = ref("新增检查站");
|
||||
const loadingTable = ref(false);
|
||||
const checkList = ref([]);
|
||||
const reload = inject("reload");
|
||||
const isShow = ref(false); //是否是修改
|
||||
const qcidList = ref([]);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({
|
||||
jczmc: "",
|
||||
ssbmdm: "",
|
||||
jd: "",
|
||||
wd: "",
|
||||
qjfjid:[]
|
||||
});
|
||||
const gzyTotal = ref(0); //感知源总数
|
||||
const gzyFunction = ref("01"); //感知源功能选项
|
||||
const dialogSpVisible = ref(false); //显示视频弹窗
|
||||
const dialogGzyzVisible = ref(false); //显示感知源组弹窗
|
||||
const btnLoading = ref(false); //按钮加载
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const mapType = ref(""); //地图绘制对象
|
||||
const gzyMapList = ref([]); //感知源数据
|
||||
const selectJcz = ref(); //已选择感知源
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
jczmc: [{ required: true, message: "请输入检查站名称", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
jczlx: [{ required: true, message: "请选择点位类型", trigger: "change" }],
|
||||
zqlx: [{ required: true, message: "请选择执勤类型", trigger: "change" }],
|
||||
fzr: [{ required: true, message: "请输入站点负责人", trigger: "change" }],
|
||||
lxdh: [{ required: true, message: "请输入联系电话", trigger: "change" }],
|
||||
dllx: [{ required: true, message: "请选择道路类型", trigger: "change" }],
|
||||
xxdz: [{ required: true, message: "请输入检查站地址", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择快返点位置", trigger: "change" }],
|
||||
ssqc: [{ required: true, message: "请选择所属圈层", trigger: "change blur" }]
|
||||
});
|
||||
const elform = ref(null);
|
||||
const qcList = ref([]); //选中的圈层数据
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const formGzy = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
isChild: 1
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
//获取地图选点坐标
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
form.value.jd = res.coord[0];
|
||||
form.value.wd = res.coord[1];
|
||||
}
|
||||
});
|
||||
getListData();
|
||||
getQCListData();
|
||||
emitter.on("drawLngLat", (res) => {
|
||||
//如果点位存在 删除点位
|
||||
if (store.getters.points.length > 0) {
|
||||
for (let i = 0; i < store.getters.points.length; i++) {
|
||||
const item = store.getters.points[i];
|
||||
egis.removePlotFeature(item);
|
||||
}
|
||||
store.commit("map/setPoints", []);
|
||||
}
|
||||
if (res.properties.t == "Point") {
|
||||
store.commit("map/setPoints", [res.properties.id]);
|
||||
form.value.jd = res.properties.conteolPoint[0];
|
||||
form.value.wd = res.properties.conteolPoint[1];
|
||||
} else {
|
||||
proxy.$message.warning("请选择绘制点位");
|
||||
egis.removePlotFeature(res.properties.id);
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
const ssqcList = ref([]);
|
||||
//圈层数据
|
||||
const getQCListData = async () => {
|
||||
let params = { pageCurrent: 1, pageSize: 100 };
|
||||
qcckGet(params, "/mosty-jmxf/qc/selectQcList").then((res) => {
|
||||
let arr = res.records || []
|
||||
ssqcList.value = arr.map((item, index) => {
|
||||
return { label: item.qcmc, value: item.id };
|
||||
});
|
||||
});
|
||||
};
|
||||
// 同步圈层
|
||||
const commonQC = (val) =>{
|
||||
proxy.$confirm("确定要同步该数据到检查站", "警告", {type: "warning"}).then(() => {
|
||||
qcckGet({}, "/mosty-jmxf/jcz/sysQcck?jczId="+val.id).then(res=>{
|
||||
proxy.$message.success(res);
|
||||
getListData();
|
||||
})
|
||||
}).catch(() => {});
|
||||
}
|
||||
onUnmounted(() => {
|
||||
emitter.off("coordString");
|
||||
emitter.off("showJczDygzy");
|
||||
emitter.off("drawLngLat");
|
||||
});
|
||||
//选中的圈层数据
|
||||
const choosedQcData = (val) => {
|
||||
qcList.value = val;
|
||||
form.value.ssqc = "111";
|
||||
};
|
||||
const onCloseQc = (index) => {
|
||||
qcList.value.splice(index, 1);
|
||||
if (qcList.value.length == 0) {
|
||||
form.value.ssqc = "";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//显示订阅感知源
|
||||
function onClickDygzy(row, type) {
|
||||
switch (type) {
|
||||
case "gzyz":
|
||||
dialogGzyzVisible.value = true;
|
||||
break;
|
||||
case "sp":
|
||||
dialogSpVisible.value = true;
|
||||
break;
|
||||
}
|
||||
formGzy.value = {
|
||||
...formGzy.value,
|
||||
jczid: row.id
|
||||
};
|
||||
}
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
listQuery.value.qcidList = qcidList.value.join(",");
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/jcz/selectJczList")
|
||||
.then((res) => {
|
||||
loadingTable.value = false;
|
||||
if (res && res.records) {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20, };
|
||||
form.value = {fjid:'',qjfjid:''};
|
||||
qcidList.value = [];
|
||||
getListData();
|
||||
};
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
multipleSelection.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//新增
|
||||
function addKfdList() {
|
||||
qcList.value = [];
|
||||
diaTitle.value = "新增检查站";
|
||||
nextTick(()=>{ dialogFormVisible.value = true; })
|
||||
form.value = {
|
||||
fjid:'',qjfjid:''
|
||||
};
|
||||
isShow.value = false;
|
||||
}
|
||||
//删除
|
||||
const delDictItem = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
const ids = [id];
|
||||
qcckPost(ids, "/mosty-jmxf/jcz/deleteById").then(() => {
|
||||
proxy.$message.success("删除成功");
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//批量删除
|
||||
const deletList = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
const ids = multipleSelection.value;
|
||||
qcckPost(ids, "/mosty-jmxf/jcz/deleteById").then(() => {
|
||||
proxy.$message.success("删除成功");
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
//修改
|
||||
const update = (row) => {
|
||||
nextTick(()=>{
|
||||
dialogFormVisible.value = true;
|
||||
|
||||
let obj = JSON.parse(JSON.stringify(row));
|
||||
if(obj.qjfjid) obj.qjfjid = obj.qjfjid.split(',')
|
||||
if(obj.fjid) obj.fjid = obj.fjid.split(',')
|
||||
|
||||
form.value = obj
|
||||
|
||||
isShow.value = true;
|
||||
diaTitle.value = "修改检查站";
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", { coords: [row], icon: require("@/assets/point/jwz.png"), flag: "zqd", isBounds: true });
|
||||
emitter.emit("setMapCenter", { location: [row.jd, row.wd], zoomLevel: 10 });
|
||||
}, 1e3);
|
||||
qcList.value = [];
|
||||
if (row.qcList) {
|
||||
qcList.value = row.qcList;
|
||||
form.value.ssqc = "111";
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
function changeStatus(row) {
|
||||
let params = { id: row.id, sfqd: row.sfqd };
|
||||
qcckPost(params, "/mosty-jmxf/jcz/updateJcz").then((res) => {
|
||||
let text = row.sfqd == 0 ? "关闭成功" : "启动成功";
|
||||
proxy.$message.success(text);
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
|
||||
function zdyLat(){
|
||||
form.value.jd = '';
|
||||
form.value.wd = ''
|
||||
emitter.emit("drawShape", { type: "point", flag: "zqd" ,isclear:true});
|
||||
}
|
||||
|
||||
// 搜索经纬度
|
||||
function seachLat() {
|
||||
emitter.emit("deletePointArea","zqd");
|
||||
if (form.value.jd && form.value.wd) {
|
||||
let item = { jd: form.value.jd, wd: form.value.wd };
|
||||
emitter.emit("addPointArea", { coords: [item], icon: require("@/assets/point/jwz.png"), flag: "zqd"});
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 10
|
||||
});
|
||||
} else {
|
||||
proxy.$message.info("经度,纬度不能未空");
|
||||
}
|
||||
}
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.qcidList = qcList.value.map((item) => item.id);
|
||||
let prams = { ...form.value}
|
||||
if(prams.fjid && Array.isArray(prams.fjid)) prams.fjid = prams.fjid.join(',')
|
||||
if(prams.qjfjid && Array.isArray(prams.qjfjid)) prams.qjfjid = prams.qjfjid.join(',')
|
||||
if (!isShow.value) {
|
||||
qcckPost(prams, "/mosty-jmxf/jcz/addJcz").then((res) => {
|
||||
proxy.$message.success("新增成功");
|
||||
dialogFormVisible.value = false;
|
||||
reset();
|
||||
});
|
||||
} else {
|
||||
qcckPost(prams, "/mosty-jmxf/jcz/updateJcz").then((res) => {
|
||||
proxy.$message.success("编辑成功");
|
||||
dialogFormVisible.value = false;
|
||||
reset();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 238;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dygzy {
|
||||
padding: 20px;
|
||||
.function_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,517 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防区管理</div>
|
||||
<div class="btnBox">
|
||||
<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 @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="巡防区名称">
|
||||
<el-input
|
||||
v-model="listQuery.xfqMc"
|
||||
placeholder="请输入巡防区名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xfqLx" label="巡防区类型">
|
||||
<el-select v-model="listQuery.xfqLx" placeholder="请选择巡防区类型">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_XQLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
@selection-change="handleSelectionChange"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xfqMc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="巡防区名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssbm"
|
||||
show-overflow-tooltip
|
||||
label="所属部门"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="xfqDj"
|
||||
label="巡防区等级"
|
||||
align="center"
|
||||
show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XFQDJ" :value="row.xfqDj" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xfqLx"
|
||||
label="巡防区类型"
|
||||
align="center"
|
||||
show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XQLX" :value="row.xfqLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="addEdit('edit',row.id)" size="small">编辑</el-button>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
:placeholder="form.ssbm"
|
||||
filterable
|
||||
v-model="form.ssbmdm"
|
||||
@getDepValue="getDepValue"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqMc" label="巡防区名称">
|
||||
<el-input
|
||||
v-model="form.xfqMc"
|
||||
placeholder="请输入巡防区名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqLx" label="巡防区类型">
|
||||
<el-select v-model="form.xfqLx" placeholder="请选择巡防区类型">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_XQLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqDJ" label="巡防区等级">
|
||||
<el-select v-model="form.xfqDj" placeholder="请选择巡防区等级">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_XFQDJ"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqFzr" label="巡防区负责人">
|
||||
<el-input
|
||||
@click="choosePoliceVisible = true"
|
||||
v-model="form.xfqFzr"
|
||||
placeholder="请选择巡防区负责人"
|
||||
style="width: 100%"
|
||||
:suffix-icon="ArrowDown"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 48%"
|
||||
prop="xfqFzrSfz"
|
||||
label="负责人身份证号"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.xfqFzrSfz"
|
||||
placeholder="请输入负责人身份证号"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="pgis" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.pgis" @change="xfqChange" clearable style="width: 90%" />
|
||||
<el-button @click="chackLat">绘制区域</el-button>
|
||||
<el-color-picker v-model="form.color"></el-color-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<ChoosePolice
|
||||
v-model="choosePoliceVisible"
|
||||
PoliceType="MJ"
|
||||
:Single="true"
|
||||
@choosedPolice="choosedPolice"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {choseRbgb} from '@/utils/tools.js'
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
import { ArrowDown } from "@element-plus/icons-vue";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick } from "vue";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { getXfqy, addXfqy, putXfqy, infoXfqy, delXfqy } from "@/api/basicsmanage/patrolArea.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { spliceArray, spliceString } from '@/utils/auth.js'
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ChoosePolice from "@/components/MyComponents/choosePolice";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XFQDJ, D_BZ_XQLX } = proxy.$dict("D_BZ_XFQDJ", "D_BZ_XQLX");
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
ssbmdm:'',
|
||||
xfqMc:''
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const loadingTable = ref(true);
|
||||
const choosePoliceVisible = ref(false); //民警辅警弹窗
|
||||
const loading = ref(false);
|
||||
const title = ref("新增巡防区");
|
||||
const drawData = reactive({
|
||||
pgis: null
|
||||
});
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const formDefault = ref({})
|
||||
//表单数据
|
||||
const form = ref({
|
||||
xfqMc: "",
|
||||
gljg: "",
|
||||
jd: "",
|
||||
wd: "",
|
||||
hzfw: "",
|
||||
color:'#409eff'
|
||||
});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
xfqMc: [{ required: true, message: "请输入巡防区名称", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }]
|
||||
});
|
||||
const elform = ref(null);
|
||||
const listQueryDefault = ref({})
|
||||
|
||||
onMounted(() => {
|
||||
listQueryDefault.value = JSON.parse(JSON.stringify(listQuery.value))
|
||||
formDefault.value = JSON.parse(JSON.stringify(form.value))
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "polygon") form.value.pgis = res.coord[0];
|
||||
if (res.type === "geoJson") form.value.pgis = res.coord[0];
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString")
|
||||
});
|
||||
|
||||
// 查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
getXfqy(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
function handleall(id){
|
||||
qcckPost({xfbmlx: "02"},'/mosty-jmxf/tbJcglXfqy/queryListNew').then((res) => {
|
||||
let arr = res ? res : [];
|
||||
let color = { stops:[] ,property: 'FID'} //颜色
|
||||
let arrNew = arr.filter(t=>{
|
||||
return t.id != form.value.id
|
||||
})
|
||||
let list = arrNew.map((item,idx)=>{
|
||||
item.identification = 'xfq';
|
||||
// let ys = choseRbgb(item.color,0.8)
|
||||
let ys = 'rgba(0,0,0,0.1)'
|
||||
color.stops.push([idx+1,ys]) //颜色
|
||||
return { position:[item.pgis],FID:idx+1, text:item.xfqMc, id: item.id }
|
||||
})
|
||||
let params = { coords: list, color, type:'polygon', flag:'xfq',linecolor:'#1f2d3d',fontColor:'#ffff00',fontSize:'16px'}
|
||||
if(params.coords.length > 0) emitter.emit("echoPlane", params); //有数据就撒点
|
||||
setTimeout(()=>{
|
||||
infoXfqy(id).then((res) => {
|
||||
form.value = res;
|
||||
if (res.pgis.length > 0) {
|
||||
let ys = choseRbgb(res.color,0.6)
|
||||
let linecolor = res.color
|
||||
emitter.emit("drawShape", { coords: [res.pgis], flag: "qclk", type:'geoJson' ,isclear:true,color:ys,linecolor });
|
||||
emitter.emit("setMapCenter", { location: res.pgis[0], zoomLevel: 12 });
|
||||
}
|
||||
});
|
||||
},2000)
|
||||
})
|
||||
}
|
||||
|
||||
// 新增巡防区域 - 编辑
|
||||
function addEdit(type,id) {
|
||||
dialogFormVisible.value = true;
|
||||
if(id){
|
||||
title.value = "修改巡防区";
|
||||
drawData.pgis = [];
|
||||
handleall(id)
|
||||
}else{
|
||||
title.value = "新增巡防区";
|
||||
drawData.pgis = null;
|
||||
form.value = {color:'#409eff'}
|
||||
}
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = val.map(v=>{ return v.id });
|
||||
};
|
||||
|
||||
// 获取部门类型
|
||||
function getDepValue(val){
|
||||
form.value.xfbmlx = val ? val.orgBizType : ''
|
||||
}
|
||||
|
||||
// 单个删除
|
||||
function delDictItem(id) {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
delXfqy([id]).then((res) => {
|
||||
proxy.$message({ message: "删除成功", type: "success" });
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
delXfqy(ids.value).then((res) => {
|
||||
proxy.$message({ message: "删除成功",type: "success"});
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false
|
||||
loading.value = true;
|
||||
if (title.value == "新增巡防区") {
|
||||
addXfqy(form.value).then(() => {
|
||||
proxy.$message({type: "success",message: "新增成功"});
|
||||
close()
|
||||
loading.value = false;
|
||||
getListData();
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
} else {
|
||||
putXfqy(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
close()
|
||||
loading.value = false;
|
||||
getListData();
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
form.value = JSON.parse(JSON.stringify(formDefault.value))
|
||||
}
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value))
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//负责人
|
||||
function choosedPolice(police) {
|
||||
form.value.xfqFzrId = police[0].ryid;
|
||||
form.value.xfqFzrSfz = police[0].sfzh;
|
||||
form.value.xfqFzr = police[0].xm;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//获取经纬度
|
||||
function chackLat() {
|
||||
emitter.emit("deletePointArea", 'qclk');
|
||||
emitter.emit("removeEara", 'qclk');
|
||||
let ys = choseRbgb(form.value.color,0.5)
|
||||
let linecolor = form.value.color
|
||||
emitter.emit("drawShape", { type: "polygon", flag: "qc",isclear:true ,color:ys,linecolor});
|
||||
form.value.pgis = "";
|
||||
}
|
||||
// 输入框地图回显
|
||||
function xfqChange(){
|
||||
if (form.value.pgis) {
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
let arr = form.value.pgis.split(",");
|
||||
form.value.pgis = spliceArray(arr);
|
||||
let xfq = spliceString(form.value.pgis);
|
||||
setTimeout(() => {
|
||||
emitter.emit("polygonFigure", {
|
||||
coords: [xfq],
|
||||
flag: "xfq",
|
||||
isclear: true
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: form.value.pgis[0],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
// height: 400px;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,211 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-01-25 16:21:46
|
||||
* @LastEditTime: 2024-01-26 10:10:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ 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>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="qcmc" label="圈层名称">
|
||||
<el-input v-model="listQuery.qcmc" placeholder="请输入圈层名称" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="qclx" label="圈层类型">
|
||||
<el-select v-model="listQuery.qclx" placeholder="请选择圈层类型">
|
||||
<el-option v-for="dict in props.dic.D_BZ_QCLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="qcjb" label="圈层级别">
|
||||
<el-select v-model="listQuery.qcjb" placeholder="请选择圈层级别">
|
||||
<el-option v-for="dict in props.dic.D_BZ_QCDJ" :key="dict.value" :value="dict.value" :label="dict.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input v-model="listQuery.bz" placeholder="请输入备注" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联检查站" style="width: 100%" @click="jczVisible = true">
|
||||
<el-input
|
||||
v-model="listQuery.jczList"
|
||||
placeholder="请选择关联检查站"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
readonly
|
||||
suffix-icon="ArrowDown"
|
||||
v-if="listQuery.jczList == null || listQuery.jczList.length <= 0"
|
||||
/>
|
||||
<MOSTY.GljczTable v-model="listQuery.jczList" v-else/>
|
||||
</el-form-item>
|
||||
<el-form-item label="圈层颜色" style="width: 10%" prop="qcys">
|
||||
<el-color-picker v-model="listQuery.qcys"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 85%" prop="zbList" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.zbList" clearable style="width: 90%" @blur="handleBlur" />
|
||||
<el-button @click="chackLat">绘制区域</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="mapBox"><GdMap/></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<JczLoad v-model="jczVisible" titleValue="选择检查站" @choosedJcz="choosedJcz" :data="listQuery.jczList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {choseRbgb} from '@/utils/tools.js'
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import JczLoad from "@/components/MyComponents/ChooseJz/jczLoad.vue";
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import Person from "@/assets/images/default_male.png";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref,defineExpose, reactive, onMounted,defineEmits,getCurrentInstance } from 'vue';
|
||||
const props = defineProps({
|
||||
dic:Object
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const xfzy = ref([])
|
||||
const listQuery = ref({qcys:'#409eff'}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const title = ref('')
|
||||
const jczVisible = ref(false);
|
||||
const rules = reactive({
|
||||
qcmc: [{ required: true, message: "请输入巡防区名称", trigger: "change" }],
|
||||
})
|
||||
const mapType = ref(""); //地图绘制对象
|
||||
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "polygon") listQuery.value.zbList = res.coord[0];
|
||||
});
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row)=> {
|
||||
dialogForm.value = true
|
||||
title.value = row ? '编辑圈层':'新增圈层'
|
||||
if(row) getDataById(row)
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (row)=>{
|
||||
qcckGet({ id: row.id }, "/mosty-jmxf/qc/selectById").then(async (res) => {
|
||||
listQuery.value = res;
|
||||
if (res.jczList) {
|
||||
listQuery.value.jczidList = res.jczList.map((item) => { return item.id; });
|
||||
listQuery.value.jczList = res.jczList;
|
||||
}
|
||||
//如果是自定义绘制的圈层
|
||||
if (res.zbList && res.zbList.length > 0) {
|
||||
setTimeout(()=>{
|
||||
let obj = { position:[res.zbList], text:res.xfqMc, id:res.id }
|
||||
let ys = res.qcys ? choseRbgb(res.qcys,0.5) : 'rgba(29,237,245,0.6)' //全部按照类型区分颜色 , 二机撒随机颜色
|
||||
emitter.emit("echoPlane", { coords: [obj],color:ys,linecolor:ys, flag: "qc", type:'polygon' });
|
||||
emitter.emit("setMapCenter", { location: res.zbList[0], zoomLevel: 10 });
|
||||
},500)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 失去焦點會先
|
||||
const handleBlur = () =>{
|
||||
if(listQuery.value.zbList && !Array.isArray(listQuery.value.zbList)){
|
||||
let att = listQuery.value.zbList.split(',')
|
||||
let coods = [],newAtt = []
|
||||
att.forEach((iv,idx)=>{
|
||||
newAtt.push(iv)
|
||||
let index = idx + 1
|
||||
if(index%2 == 0){
|
||||
coods.push(newAtt)
|
||||
newAtt = []
|
||||
}
|
||||
})
|
||||
listQuery.value.zbList = coods
|
||||
let ys = listQuery.value.qcys ? choseRbgb(listQuery.value.qcys,0.3) : 'rgba(29,237,245,0.3)' //全部按照类型区分颜色 , 二机撒随机颜色
|
||||
let obj = { position:[coods], text:'', id:'' }
|
||||
emitter.emit("echoPlane", { coords: [obj],color:ys,linecolor:ys, flag: "qc", type:'polygon' });
|
||||
emitter.emit("setMapCenter", { location: coods[0], zoomLevel: 10 });
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//获取经纬度
|
||||
const chackLat = (type) => {
|
||||
let ys = choseRbgb(listQuery.value.qcys,0.5)
|
||||
let linecolor = listQuery.value.qcys
|
||||
emitter.emit("drawShape", { type: "polygon", flag: "qc",color:ys,linecolor,isclear:true });
|
||||
listQuery.value.zbList = "";
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
let url = title.value == '新增圈层'? '/mosty-jmxf/qc/addQc':'/mosty-jmxf/qc/updateQc'
|
||||
let text =title.value == '新增圈层'? '新增成功':'编辑成功'
|
||||
qcckPost(listQuery.value,url).then(() => {
|
||||
proxy.$message({ type: "success", message: text });
|
||||
close()
|
||||
emit("updateDate");
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { qcys :'#409eff'}
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
// 选择检查站
|
||||
const choosedJcz = (arr) => {
|
||||
listQuery.value.jczList = arr;
|
||||
listQuery.value.jczidList = arr.map((v) => {
|
||||
return v.id;
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="圈层管理">
|
||||
<el-button type="primary" @click="addEditForm('add','')">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="deletList(null)" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"/>
|
||||
</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 #qclx="{ row }">
|
||||
<dict-tag :value="row.qclx" :options="D_BZ_QCLX" :tag="false"/>
|
||||
</template>
|
||||
<template #qcjb="{ row }">
|
||||
<dict-tag :options="D_BZ_QCDJ" :value="row.qcjb" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button @click="addEditForm('eidt',row)" size="small">编辑</el-button>
|
||||
<el-button @click="deletList(row.id)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑-新增 -->
|
||||
<EditAddForm ref="editInfo" @updateDate="getDataList" :dic="{D_BZ_QCLX,D_BZ_QCDJ}"></EditAddForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import EditAddForm from './components/editAddForm.vue'
|
||||
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 { reactive, ref ,onMounted,getCurrentInstance, nextTick } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_QCLX ,D_BZ_QCDJ} = proxy.$dict("D_BZ_QCLX","D_BZ_QCDJ");
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const listQuery = ref({})
|
||||
const editInfo = ref()
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "input",
|
||||
prop: "qcmc",
|
||||
placeholder: "请输入圈层名称",
|
||||
label: "圈层名称",
|
||||
},
|
||||
{
|
||||
showType: "select",
|
||||
prop: "qclx",
|
||||
placeholder: "请选择圈层类型",
|
||||
label: "圈层类型",
|
||||
options:D_BZ_QCLX
|
||||
},
|
||||
])
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
showSelectType:'checkBox',
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm"},
|
||||
{ label: "圈层名称", prop: "qcmc"},
|
||||
{ label: "圈层类型", prop: "qclx", showSolt:true },
|
||||
{ label: "圈层等级", prop: "qcjb" ,showSolt:true}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
getDataList()
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
listQuery.value = {...listQuery.value,...val}
|
||||
if(val.cz) listQuery.value.ssbmdm = '';
|
||||
delete listQuery.value.cz;
|
||||
getDataList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取数据
|
||||
const getDataList = ()=>{
|
||||
let pramas = {
|
||||
pageSize:pageData.pageConfiger.pageSize,
|
||||
pageCurrent:pageData.pageConfiger.pageNum,
|
||||
...listQuery.value
|
||||
}
|
||||
delete pramas.daterange
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckGet(pramas,'/mosty-jmxf/qc/selectQcList').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getDataList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getDataList()
|
||||
}
|
||||
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(val instanceof Array) ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
//批量删除
|
||||
const deletList = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
let IDS = id ? [id] : ids.value
|
||||
qcckPost(IDS,'/mosty-jmxf/qc/deleteQc').then(() => {
|
||||
proxy.$message({ type: "success",message: "删除成功"});
|
||||
getDataList()
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增编辑表单
|
||||
const addEditForm = (type,row)=>{
|
||||
nextTick(()=>{
|
||||
editInfo.value.init(type,row)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,633 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡逻点位管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
@click="batchDelete"
|
||||
:disabled="ids.length == 0"
|
||||
typeof="danger"
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻点位名称">
|
||||
<el-input v-model="listQuery.bxdMc" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属巡防区域">
|
||||
<el-select style="width: 100%" v-model="listQuery.ssXfqyId">
|
||||
<el-option
|
||||
v-for="item in xfqyList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻点位类型">
|
||||
<el-select v-model="listQuery.bxdLx" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻点位来源">
|
||||
<el-select v-model="listQuery.bxdlydm" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLYDM"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据状态">
|
||||
<el-select v-model="listQuery.xtSjzt" placeholder="请选择" clearable>
|
||||
<el-option label="注销" value="0"></el-option>
|
||||
<el-option label="正常" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
@selection-change="handleSelectionChange"
|
||||
:height="tableHeight"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="bxdMc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="250px"
|
||||
label="巡逻点位名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bxdlydm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="巡逻点位来源"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXDLYDM" :value="row.bxdlydm" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="bxdLx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="巡逻点位类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXDLX" :value="row.bxdLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssXfqyId"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属巡防区域"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="xfqyList" :value="row.ssXfqyId" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xtSjzt"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="数据状态"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.xtSjzt == 0" style="background:red;padding:2px 4px;border-radius:2px;">注销</span>
|
||||
<span v-if="row.xtSjzt == 1" style="background:green;padding:2px 4px;border-radius:2px;">正常</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
:loading="btnLoading"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
:placeholder="form.ssbm"
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxdMc" label="巡逻点位名称">
|
||||
<el-input
|
||||
v-model="form.bxdMc"
|
||||
placeholder="请填写巡逻点位名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxdLx" label="巡逻点位类型">
|
||||
<el-select v-model="form.bxdLx" filterable style="width: 100%" placeholder="请选择巡逻点位类型">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxdLx" label="巡逻点位来源">
|
||||
<el-select v-model="form.bxdlydm" filterable style="width: 100%" placeholder="请选择巡逻点位来源">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLYDM"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 48%"
|
||||
prop="ssXfqyId"
|
||||
label="巡逻点位所属巡防区域"
|
||||
>
|
||||
<el-select style="width: 100%" v-model="form.ssXfqyId" placeholder="请选择巡逻点位所属巡防区域">
|
||||
<el-option
|
||||
v-for="item in xfqyList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jd" label="选择巡逻点位" style="width: 100%">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.jd" @change="jdChange" clearable style="width: 45%" placeholder="经度" />
|
||||
<el-input v-model="form.wd" @change="wdChange" clearable style="width: 45%" placeholder="纬度" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getBxd,
|
||||
addBxd,
|
||||
putBxd,
|
||||
infoBxd,
|
||||
delBxd
|
||||
} from "@/api/basicsmanage/mandatoryPatrol.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getJzList } from "@/api/basicsmanage/servicejz.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_BXDLX, D_BZ_PBLX,D_BZ_BXDLYDM } = proxy.$dict("D_BZ_BXDLX", "D_BZ_PBLX",'D_BZ_BXDLYDM');
|
||||
const cascader = ref(null);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const loadingTable = ref(true);
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const mapRef = ref(null);
|
||||
const depList = ref([]); //部门数据
|
||||
const xfqyList = ref([]);
|
||||
const checkAdd = ref(false);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增巡逻点位");
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bxdMc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输巡逻点位名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bxdLx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择巡逻点位类型",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所属部门",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择或填写巡逻点位",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//执勤时长验证
|
||||
function checkZqsc(rule, value, callback) {
|
||||
if (value <= 0 || value >= 1000) {
|
||||
return callback(new Error("请选择正确的时间范围"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
//获取经纬度
|
||||
function chackLat() {
|
||||
form.value.jd = "";
|
||||
form.value.wd = "";
|
||||
emitter.emit("drawShape", { type: "point", flag: "bxd_ht" ,isclear:true});
|
||||
}
|
||||
|
||||
function getLngLat(coordinates) {
|
||||
form.value.jd = coordinates[0];
|
||||
form.value.wd = coordinates[1];
|
||||
}
|
||||
// 经纬度变化回显
|
||||
function jdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/kfd.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
function wdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/kfd.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//计算执勤时长
|
||||
function setZqsc() {
|
||||
if (form.value.jssj && form.value.kssj) {
|
||||
let a = new Date(form.value.jssj).getTime();
|
||||
let b = new Date(form.value.kssj).getTime();
|
||||
form.value.zqsc = Math.floor((a - b) / 60000);
|
||||
}
|
||||
}
|
||||
//新增选择部门
|
||||
function addHandleChange(e) {
|
||||
const info = cascader.value.getCheckedNodes()[0];
|
||||
form.value.ssbm = info.label;
|
||||
form.value.ssbmdm = info.value;
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxd(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
resetForm();
|
||||
checkAdd.value = true;
|
||||
title.value = "新增巡逻点位";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
infoBxd(row.id).then((res) => {
|
||||
checkAdd.value = false;
|
||||
form.value = res;
|
||||
title.value = "修改巡逻点位";
|
||||
dialogFormVisible.value = true;
|
||||
if (row.jd && row.wd) {
|
||||
setTimeout(()=>{
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [res],
|
||||
icon: require("@/assets/point/xfq.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
emitter.emit("setMapCenter", { location: [res.jd,res.wd], zoomLevel: 13 });
|
||||
},1000)
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxd([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getBxd(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.ssbmid = form.value.ssbmdm
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
if (!checkAdd.value) {
|
||||
putBxd(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
let params = form.value;
|
||||
params.yxq = "2099-12-31";
|
||||
addBxd(params).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
|
||||
xfqyList.value = res.records.map((item) => {
|
||||
return { value: item.id, label: item.xfqMc };
|
||||
});
|
||||
});
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
form.value.jd = res.coord[0];
|
||||
form.value.wd = res.coord[1];
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.min {
|
||||
position: relative;
|
||||
}
|
||||
.min::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
content: "分钟";
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,488 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡逻路线管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻路线名称">
|
||||
<el-input v-model="listQuery.bxxMc" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属巡防区域">
|
||||
<el-select style="width: 100%" v-model="listQuery.ssXfqyId">
|
||||
<el-option v-for="item in xfqyList" :key="item.value" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻路线类型">
|
||||
<el-select v-model="listQuery.bxxLx" placeholder="请选择" clearable>
|
||||
<el-option v-for="dict in D_BZ_BXDLX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border row-key="id" @selection-change="handleSelectionChange"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }" style="width: 100%" :key="keyCount"
|
||||
:height="tableHeight" v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。">
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" show-overflow-tooltip align="center" width="60px" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssbm" show-overflow-tooltip align="center" label="所属部门">
|
||||
</el-table-column>
|
||||
<el-table-column prop="bxxMc" show-overflow-tooltip align="center" width="250px" label="巡逻路线名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="jzId" show-overflow-tooltip align="center" label="责任警组">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="jzList" :value="row.jzId" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssXfqyId" show-overflow-tooltip align="center" label="所属巡防区域">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="xfqyList" :value="row.ssXfqyId" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bxxLx" show-overflow-tooltip align="center" label="巡逻路线类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXDLX" :value="row.bxxLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="250px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" :loading="btnLoading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable :placeholder="form.ssbm" v-model="form.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxxMc" label="巡逻路线名称">
|
||||
<el-input v-model="form.bxxMc" placeholder="请填写巡逻路线名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxxLx" label="巡逻路线类型">
|
||||
<el-select v-model="form.bxxLx" filterable style="width: 100%" placeholder="请选择巡逻路线类型">
|
||||
<el-option v-for="dict in D_BZ_BXDLX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="jzId" label="巡逻路线责任警组">
|
||||
<el-select style="width: 100%" v-model="form.jzId" placeholder="请选择巡逻路线责任警组">
|
||||
<el-option v-for="item in jzList" :key="item.value" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ssXfqyId" label="巡逻路线所属巡防区域">
|
||||
<el-select style="width: 100%" v-model="form.ssXfqyId" placeholder="请选择巡逻路线所属巡防区域">
|
||||
<el-option v-for="item in xfqyList" :key="item.value" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zb" label="选择巡逻路线" style="width: 100%">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.zb" @change="bxxChange" clearable style="flex: 1" />
|
||||
<el-button @click="chackLat">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getBxx,addBxx,putBxx,infoBxx,delBxx } from "@/api/basicsmanage/patrolLine.js";
|
||||
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
|
||||
import { getJzList } from "@/api/basicsmanage/servicejz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {ref,reactive,onMounted,onUnmounted,getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_BXDLX, D_BZ_PBLX } = proxy.$dict("D_BZ_BXDLX", "D_BZ_PBLX");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const xfqyList = ref([]);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const depList = ref([]); //部门数据
|
||||
const tableData = ref([{ bcname: "123", kssj: "2022-05-22 18:00:00" }]); //表格数据
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const drawData = reactive({
|
||||
zb: null
|
||||
});
|
||||
const title = ref("新增巡逻路线");
|
||||
const loadingTable = ref(true);
|
||||
const jzList = ref([]); // 警组下拉数据
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const mapRef = ref(null);
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const checkAdd = ref(false);
|
||||
const cascader = ref(null);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
bcName: ""
|
||||
});
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bxxMc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输巡逻路线名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
jzId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择巡逻路线责任警组",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
ssXfqyId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择巡逻路线所属巡防区域",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
bxxLx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择巡逻路线类型",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所属部门",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
zb: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择或填写巡逻路线",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 巡逻路线回显
|
||||
function bxxChange() {
|
||||
if (form.value.zb) {
|
||||
let arr = form.value.zb.split(",");
|
||||
form.value.zb = spliceArray(arr);
|
||||
setTimeout(() => {
|
||||
let arrStr = form.value.zb.join(',')
|
||||
emitter.emit("drawLine", arrStr);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//执勤时长验证
|
||||
function checkZqsc(rule, value, callback) {
|
||||
if (value <= 0 || value >= 1000) {
|
||||
return callback(new Error("请选择正确的时间范围"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
function getLngLat(coordinates) {
|
||||
form.value.zb = coordinates.overlay.getPath().map((item) => {
|
||||
return [item.lng, item.lat];
|
||||
});
|
||||
}
|
||||
|
||||
//搜 索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
function chackLat() {
|
||||
emitter.emit("drawShape", { type: "line", flag: "xl-route", isclear: true });
|
||||
form.value.zb = "";
|
||||
}
|
||||
//计算执勤时长
|
||||
function setZqsc() {
|
||||
if (form.value.jssj && form.value.kssj) {
|
||||
let a = new Date(form.value.jssj).getTime();
|
||||
let b = new Date(form.value.kssj).getTime();
|
||||
form.value.zqsc = Math.floor((a - b) / 60000);
|
||||
}
|
||||
}
|
||||
//新增选择部门
|
||||
function addHandleChange(e) {
|
||||
const info = cascader.value.getCheckedNodes()[0];
|
||||
form.value.ssbm = info.label;
|
||||
form.value.ssbmdm = info.value;
|
||||
}
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxx(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
drawData.zb = null;
|
||||
resetForm();
|
||||
checkAdd.value = true;
|
||||
title.value = "新增巡逻路线";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
drawData.zb = [];
|
||||
infoBxx(row.id).then((res) => {
|
||||
form.value = res;
|
||||
checkAdd.value = false;
|
||||
title.value = "修改巡逻路线";
|
||||
dialogFormVisible.value = true;
|
||||
if (res.zb.length > 0) {
|
||||
setTimeout(() => {
|
||||
let obj = { coords: [res.zb], text: res.bxxMc }
|
||||
emitter.emit("echoLine", { coords: [obj], flag: "xl-route", type: 'solid', isclear: true });
|
||||
let len = parseInt(res.zb.length / 2)
|
||||
emitter.emit("setMapCenter", { location: res.zb[len], zoomLevel: 10 });
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxx([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getBxx(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
// formReset();
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.ssbmdm = form.value.ssbmdm;
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
if (!checkAdd.value) {
|
||||
putBxx(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
addBxx(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
onMounted(() => {
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
getJzList({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
|
||||
jzList.value = res.records.map((item) => {
|
||||
return { value: item.id, label: item.jzMc };
|
||||
});
|
||||
});
|
||||
getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
|
||||
xfqyList.value = res.records.map((item) => {
|
||||
return { value: item.id, label: item.xfqMc };
|
||||
});
|
||||
});
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type == 'line') form.value.zb = res.coord
|
||||
});
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.min {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.min::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
content: "分钟";
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,268 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡访管理</div>
|
||||
<div class="btnBox">
|
||||
<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 :disabled="ids.length == 0" @click="handleDelete('')" typeof="danger">
|
||||
<el-icon style="vertical-align: middle"> <Delete /> </el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="商户名">
|
||||
<el-input v-model="listQuery.shm" placeholder="请输入商户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡访人姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入巡访人姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡访部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
@selection-change="handleSelectionChange"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" align="center" width="60px" label="序号"/>
|
||||
<el-table-column prop="shm" align="center" label="商户名" />
|
||||
<el-table-column prop="xm" align="center" label="巡访人姓名" />
|
||||
<el-table-column prop="sfzh" align="center" label="巡访人身份证" />
|
||||
<el-table-column prop="ssbm" align="center" label="所属部门" />
|
||||
<el-table-column prop="type" align="center" label="巡访类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_BZ_XFLX"
|
||||
:value="row.type"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lxxl" align="center" label="商户细类">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_BZ_SHLX"
|
||||
:value="row.lxxl"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="addEdit('edit',row.id)" size="small">修改</el-button>
|
||||
<el-button @click="handleDelete(row.id)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" :loading="btnLoading" >保存</el-button>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="shm" label="商户名">
|
||||
<el-input v-model="form.shm" placeholder="请输入商户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="巡访部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="form.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xm" label="巡访人姓名">
|
||||
<el-input v-model="form.xm" placeholder="请输入巡访人姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfzh" label="巡访人身份证">
|
||||
<el-input v-model="form.sfzh" placeholder="请输入巡访人身份证"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="type" label="类型">
|
||||
<el-select v-model="form.type" placeholder="请选择类型" clearable>
|
||||
<el-option v-for="item in D_BZ_XFLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="lxxl" label="商户细类">
|
||||
<el-select v-model="form.lxxl" placeholder="请选择商户细类" clearable>
|
||||
<el-option v-for="item in D_BZ_SHLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" style="width: 94%">
|
||||
<el-input v-model="form.xxdz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet,qcckPut,qcckDelete } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SHLX, D_BZ_XFLX } = proxy.$dict("D_BZ_SHLX", "D_BZ_XFLX");
|
||||
const tableData = ref([]); //表格数据
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增巡逻路线");
|
||||
const loadingTable = ref(false);
|
||||
const listQuery = ref({ pageCurrent: 1, pageSize: 20 }); //搜索数据
|
||||
const elform = ref(null);
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const total = ref(0);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const form = ref({}); //表单数据
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
shm: [{ required: true, message: "请输请输入商户名", trigger: "blur" }],
|
||||
ssbmdm: [{ required: true, message: "请选择巡访部门", trigger: "change" }],
|
||||
xm: [{ required: true, message: "请输入巡访人姓名", trigger: "blur" }],
|
||||
type: [{ required: true, message: "请选择商户类型", trigger: "change" }],
|
||||
lxxl: [{ required: true, message: "请选择商户细类", trigger: "change" }],
|
||||
...rule.identityCardRule( {require: true,trigger: ['blur','change'], message: "请输入身份证号",validator: true},"sfzh"), //身份证校验
|
||||
});
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => { keyCount.value = data; });
|
||||
tabHeightFn();
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
});
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
}
|
||||
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value,'/mosty-jmxf/tbJcglXf').then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//新增
|
||||
function addEdit(type, id) {
|
||||
dialogFormVisible.value = true;
|
||||
if (type == "add") {
|
||||
title.value = "新增巡访管理";
|
||||
} else {
|
||||
title.value = "修改巡访管理";
|
||||
qcckGet({},'/mosty-jmxf//tbJcglXf/'+id).then((res) => {
|
||||
form.value = JSON.parse(JSON.stringify(res))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//批量数据选择的数据
|
||||
const handleSelectionChange = (val) => {
|
||||
let list = val || [];
|
||||
ids.value = list.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
};
|
||||
|
||||
//批量删除-单个删除
|
||||
function handleDelete(id) {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
let delIds = id ? [id] : ids.value;
|
||||
qcckDelete(delIds,'/mosty-jmxf/tbJcglXf/bacth').then(res=>{
|
||||
proxy.$message({ message: "删除成功", type: "success" });
|
||||
handleFilter();
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function closeDialog() {
|
||||
dialogFormVisible.value = false;
|
||||
btnLoading.value = false;
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
if (title.value == "修改巡访管理") {
|
||||
qcckPut(form.value,'/mosty-jmxf//tbJcglXf').then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
closeDialog()
|
||||
getListData();
|
||||
}).catch(()=>{ btnLoading.value = false; });
|
||||
} else {
|
||||
qcckPost(form.value,'/mosty-jmxf/tbJcglXf').then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
closeDialog()
|
||||
getListData();
|
||||
}).catch(()=>{ btnLoading.value = false; });;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// pageSize 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzLx" label="检查站类型">
|
||||
<el-select v-model="listQuery.jwzLx" placeholder="请选择检查站类型" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xjSj" label="建立时间">
|
||||
<el-date-picker v-model="listQuery.xjSj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzMc" label="检查站名称">
|
||||
<el-input v-model="listQuery.jwzMc" placeholder="请输入检查站名称" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzjgdm" label="检查站机构代码">
|
||||
<el-input v-model="listQuery.jwzjgdm" placeholder="请输入检查站机构代码" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzDz" label="检查站详细地址">
|
||||
<el-input v-model="listQuery.jwzDz" placeholder="请输入检查站详细地址" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrXm" label="负责人">
|
||||
<el-input @click="mjVisible = true" v-model="listQuery.fzrXm" placeholder="请选择负责人姓名" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrSfzh" label="负责人身份证号码">
|
||||
<el-input v-model="listQuery.fzrSfzh" placeholder="请输入负责人身份证号码" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="snwsp" label="室内外视频">
|
||||
<el-input v-model="listQuery.snwsp" placeholder="请输入" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="upload" label="图片上传">
|
||||
<MOSTY.Upload width="100%" :limit="2" v-model="listQuery.upload" ></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.jd" clearable style="width: 45%"/>
|
||||
<el-input v-model="listQuery.wd" clearable style="width: 45%"/>
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="one">
|
||||
<div class="map"><GdMap v-if="dialogFormVisible" /> </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<MjLoad :Single="true" v-model="mjVisible" titleValue="选择负责人" @choosedUsers="hanlderChooseMj"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import { ref,defineExpose, reactive,defineProps,getCurrentInstance ,defineEmits, onMounted} from 'vue';
|
||||
const props = defineProps({
|
||||
dic:{ type:Object, default:{} }
|
||||
})
|
||||
const emits = defineEmits(['updateDate'])
|
||||
const { proxy } = getCurrentInstance();
|
||||
const mjVisible = ref(false); //民警弹窗
|
||||
const validateIdentity = () => {
|
||||
return (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('身份证号不能为空'));
|
||||
} else if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
|
||||
callback(new Error("输入的身份证长度或格式错误"));
|
||||
}
|
||||
//身份证城市
|
||||
var aCity = {
|
||||
11: "北京",
|
||||
12: "天津",
|
||||
13: "河北",
|
||||
14: "山西",
|
||||
15: "内蒙古",
|
||||
21: "辽宁",
|
||||
22: "吉林",
|
||||
23: "黑龙江",
|
||||
31: "上海",
|
||||
32: "江苏",
|
||||
33: "浙江",
|
||||
34: "安徽",
|
||||
35: "福建",
|
||||
36: "江西",
|
||||
37: "山东",
|
||||
41: "河南",
|
||||
42: "湖北",
|
||||
43: "湖南",
|
||||
44: "广东",
|
||||
45: "广西",
|
||||
46: "海南",
|
||||
50: "重庆",
|
||||
51: "四川",
|
||||
52: "贵州",
|
||||
53: "云南",
|
||||
54: "西藏",
|
||||
61: "陕西",
|
||||
62: "甘肃",
|
||||
63: "青海",
|
||||
64: "宁夏",
|
||||
65: "新疆",
|
||||
71: "台湾",
|
||||
81: "香港",
|
||||
82: "澳门",
|
||||
91: "国外"
|
||||
};
|
||||
if (!aCity[parseInt(value?.substr(0, 2))]) {
|
||||
callback(new Error("身份证地区非法"));
|
||||
}
|
||||
// 出生日期验证
|
||||
var sBirthday = ( value.substr(6, 4) + "-" + Number(value.substr(10, 2)) + "-" + Number(value.substr(12, 2))).replace(/-/g, "-"),
|
||||
d = new Date(sBirthday);
|
||||
let yyyy = d.getFullYear();
|
||||
let mm = d.getMonth() + 1;
|
||||
let dd = d.getDate();
|
||||
if (sBirthday !== yyyy + "-" + mm + "-" + dd) {
|
||||
listQuery.value.csrq= "";
|
||||
callback(new Error("身份证上的出生日期非法"));
|
||||
} else {
|
||||
let month = mm < 10 ? "0" + mm : mm;
|
||||
listQuery.value.csrq= yyyy + "-" + month + "-" + dd;
|
||||
}
|
||||
// 身份证号码校验
|
||||
var sum = 0,
|
||||
weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
|
||||
codes = "10X98765432";
|
||||
for (var i = 0; i < value.length - 1; i++) {
|
||||
sum += value[i] * weights[i];
|
||||
}
|
||||
var last = codes[sum % 11]; //计算出来的最后一位身份证号码
|
||||
if (value[value.length - 1] !== last) {
|
||||
listQuery.value.xb = ''
|
||||
callback(new Error("输入的身份证号非法"));
|
||||
} else {
|
||||
listQuery.value.csrq= IdCard(listQuery.value.sfzh,1)
|
||||
if (parseInt(value.substr(16, 1)) % 2 === 1) {
|
||||
listQuery.value.xb = "1";
|
||||
} else {
|
||||
listQuery.value.xb = "2";
|
||||
}
|
||||
}
|
||||
callback();
|
||||
};
|
||||
};
|
||||
const title = ref('新增警务站管理');
|
||||
const disabledFoem = ref(false) //表单禁用
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const listQuery = ref({ fzrSfzh:''}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const rules = reactive({
|
||||
fzrSfzh: [
|
||||
{ required: true, message: "请输入身份证", trigger: "blur" },
|
||||
{ trigger: "change", validator: validateIdentity()}
|
||||
],
|
||||
fzrXm: [{required: true, message: "请输入负责人姓名"}],
|
||||
jwzLx: [{ required: true, message: "请选择检查站类型"}],
|
||||
ssbmdm: [{required: true, message: "请选择所属部门" }],
|
||||
xjSj: [{ required: true, message: "请选择建立时间" }],
|
||||
jwzMc: [{ required: true, message: "请输入检查站名称"}]
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,id)=> {
|
||||
dialogForm.value = true
|
||||
disabledFoem.value = type == 'detail' ? true :false
|
||||
if(id){
|
||||
title.value = type == 'edit'?'修改警务站管理':'警务站管理详情'
|
||||
getDataById(id) //根据id查询详情
|
||||
}else{
|
||||
title.value = '新增警务站管理'
|
||||
}
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (id)=>{
|
||||
qcckGet({},'/mosty-jmxf/tbJcglXfCyry/'+id).then(res=>{
|
||||
listQuery.value = JSON.parse(JSON.stringify(res))
|
||||
})
|
||||
}
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
if(title.value == '新增警务站管理'){
|
||||
qcckPost(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
close()
|
||||
loading.value = false;
|
||||
emits('updateDate')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { fzrSfzh :''}
|
||||
dialogForm.value = false
|
||||
}
|
||||
|
||||
//获取经纬度 - 圈层范围清空
|
||||
function chackLat(type) {
|
||||
listQuery.value.jd = "";
|
||||
listQuery.value.wd = "";
|
||||
emitter.emit("deletePointArea", "jcz_ht");
|
||||
emitter.emit("drawShape", { type: "point", flag: "jcz_ht" ,isclear:true});
|
||||
}
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
</style>
|
||||
@ -1,426 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">警务站管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="deletList" :disabled="multipleSelection.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true" class="mosty-from-wrap">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="警务站类型">
|
||||
<el-select filterable v-model="listQuery.jwzLx" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="listQuery.fzrXm" placeholder="请输入负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border ref="dataTreeList" row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }" style="width: 100%"
|
||||
@selection-change="handleSelectionChange" :height="tableHeight" :key="keyCount" v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
|
||||
<el-table-column type="selection" width="40" />
|
||||
<el-table-column type="index" align="center" width="60" label="序号" />
|
||||
<el-table-column prop="ssbm" show-overflow-tooltip label="所属部门" align="center" />
|
||||
<el-table-column prop="jwzLx" align="center" width="300" label="警务站类型" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_JWZLX" :value="row.jwzLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jwzMc" label="警务站名称" width="200" align="center" />
|
||||
<el-table-column prop="fzrXm" label="负责人" align="center" />
|
||||
<el-table-column prop="xjSj" label="建立时间" align="center" />
|
||||
<el-table-column label="操作" align="center" fixed="right" width="180">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-button @click="delDictItem(row.jwzId)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top" class="mosty-from-wrap">
|
||||
<el-form-item class="two" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department style="width: 100%" ref="cascader" clearable filterable
|
||||
:options="depList" :props="props" v-model="form.ssbmdm" :placeholder="form.ssbm"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzLx" label="警务站类型">
|
||||
<el-select v-model="form.jwzLx" placeholder="请选择警务站类型" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="xjSj" label="建立时间">
|
||||
<el-date-picker v-model="form.xjSj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||||
placeholder="请选择日期" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzMc" label="警务站名称">
|
||||
<el-input v-model="form.jwzMc" placeholder="请输入警务站名称" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzjgdm" label="警务站机构代码">
|
||||
<el-input v-model="form.jwzjgdm" placeholder="请输入警务站机构代码" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzDz" label="警务站详细地址">
|
||||
<el-input v-model="form.jwzDz" placeholder="请输入警务站详细地址" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="fzrXm" label="负责人">
|
||||
<el-input @click="mjVisible = true" v-model="form.fzrXm" placeholder="请选择负责人姓名" clearable
|
||||
style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="fzrSfzh" label="负责人身份证号码">
|
||||
<el-input v-model="form.fzrSfzh" placeholder="请输入负责人身份证号码" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="snwsp" label="室内外视频">
|
||||
<el-input v-model="form.snwsp" placeholder="请输入" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item style="width: 100%" prop="upload" label="图片上传">
|
||||
<MOSTY.Upload width="100%" :limit="2" v-model="form.upload"></MOSTY.Upload>
|
||||
</el-form-item> -->
|
||||
<el-form-item style="width: 100%" prop="jwzTp " label="警务站图片">
|
||||
<MOSTY.Upload width="100%" :limit="5" v-model="form.jwzTp"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input @change="jdChange" v-model="form.jd" clearable style="width: 45%" />
|
||||
<el-input @change="wdChange" v-model="form.wd" clearable style="width: 45%" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="one">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<MjLoad :Single="true" v-model="mjVisible" titleValue="选择负责人" @choosedUsers="hanlderChooseMj" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
import { getPoliceStationList, deletePoliceStation, addPoliceStation, updatePoliceStation } from "@/api/basicsmanage/policeStation.js";
|
||||
//获取字典数据
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JWZLX } = proxy.$dict("D_BZ_JWZLX");
|
||||
const mjVisible = ref(false); //民警弹窗
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const map = ref(null);
|
||||
const loadingTable = ref(true);
|
||||
const chackadd = ref(true); //切换新增修改
|
||||
const mapRef = ref(null); // 地图
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const chackipt = ref(true);
|
||||
const depList = ref([]); //部门数据
|
||||
const loading = ref(false); //按钮是否为加载状态
|
||||
const modalKey = ref(0);
|
||||
const title = ref("新增警务站");
|
||||
const ssbmIds = ref([]); //级联选择器回显ID
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const cascader = ref(null); //部门选择器
|
||||
//部门组件配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const listQuery = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
jwzLx: "",
|
||||
jwzMc: "",
|
||||
ssbmdm: "",
|
||||
fzrXm: ""
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({
|
||||
xjSj: "",
|
||||
jwzMc: "",
|
||||
jwzLx: "",
|
||||
jwzDz: "",
|
||||
jwzjgdm: "",
|
||||
fzrXm: "",
|
||||
fzrSfzh: "",
|
||||
hzfw: "",
|
||||
ssbmdm: ssbmIds.value[ssbmIds.value - 1],
|
||||
ssbm: ""
|
||||
});
|
||||
const elform = ref(null);
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
jd: [{ required: true, message: "请选择经纬度" }],
|
||||
fzrSfzh: [{ required: true, message: "请输入负责人身份证号码" }],
|
||||
fzrXm: [{ required: true, message: "请输入负责人姓名" }],
|
||||
jwzLx: [{ required: true, message: "请选择警务站类型" }],
|
||||
ssbmdm: [{ required: true, message: "请选择所属部门" }],
|
||||
xjSj: [{ required: true, message: "请选择建立时间" }],
|
||||
jwzMc: [{ required: true, message: "请输入警务站名称" }]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
//获取部门信息
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type == 'point') {
|
||||
form.value.jd = res.coord[0];
|
||||
form.value.wd = res.coord[1];
|
||||
};
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
|
||||
//获取经纬度
|
||||
function chackLat() {
|
||||
emitter.emit("drawShape", { type: "point", flag: "jcz_ht", isclear: true });
|
||||
form.value.jd = "";
|
||||
form.value.wd = "";
|
||||
}
|
||||
// 经纬度变化回显
|
||||
function jdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "jwz");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/jwz.png"),
|
||||
flag: "jwz"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
function wdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "jwz");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/jwz.png"),
|
||||
flag: "jwz"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
function add() {
|
||||
chackipt.value = false;
|
||||
title.value = "新增警务站";
|
||||
dialogFormVisible.value = true;
|
||||
form.value = {};
|
||||
// form.value.upload = [];
|
||||
// form.value.uploadNew = [];
|
||||
console.log(form.value, 'form.value');
|
||||
chackadd.value = false;
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageNo = 1;
|
||||
getListData();
|
||||
};
|
||||
//选择民警
|
||||
function hanlderChooseMj(arr) {
|
||||
const data = arr[0];
|
||||
form.value.fzrXm = data.xm;
|
||||
form.value.fzrSfzh = data.sfzh;
|
||||
}
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
getPoliceStationList(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
listQuery.value = { pageNo: 1, pageSize: 20 };
|
||||
getListData();
|
||||
};
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
multipleSelection.value.push(item.jwzId);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除
|
||||
const deletList = () => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
const ids = multipleSelection.value;
|
||||
deletePoliceStation(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => { proxy.$message.info("已取消"); });
|
||||
};
|
||||
//重置表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
formReset();
|
||||
}
|
||||
//详情
|
||||
const update = (row, view = "put") => {
|
||||
chackipt.value = true;
|
||||
chackadd.value = true;
|
||||
title.value = view == "view" ? "警务站详情" : '修改警务站';
|
||||
modalKey.value += 1;
|
||||
ssbmIds.value = [];
|
||||
proxy.$set(row.ssbmdm, depList.value, "childDeptList", (res) => { ssbmIds.value.push(res); });
|
||||
console.log(row);
|
||||
|
||||
form.value = {...row};
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
dialogFormVisible.value = true;
|
||||
if (row.jd && row.wd) {
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", { coords: [row], icon: require("@/assets/point/jwz.png"), flag: "jwz" });
|
||||
emitter.emit("setMapCenter", { location: [row.jd, row.wd], zoomLevel: 14 });
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//删除
|
||||
const delDictItem = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
const ids = [id];
|
||||
deletePoliceStation(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => { proxy.$message.info("已取消"); });
|
||||
};
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
let params = form.value;
|
||||
if (chackadd.value) {
|
||||
updatePoliceStation(params).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
close();
|
||||
getListData();
|
||||
}).catch(res => { loading.value = false; });
|
||||
} else {
|
||||
addPoliceStation(params).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
getListData();
|
||||
close();
|
||||
}).catch(() => { loading.value = false; });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 分页
|
||||
function handleCurrentChange(val) {
|
||||
listQuery.value.pageNo = 1
|
||||
getListData();
|
||||
|
||||
}
|
||||
|
||||
// 分页数
|
||||
function handleSizeChange(val) {
|
||||
listQuery.value.pageSize = 20
|
||||
getListData();
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
||||
<el-form-item style="width: 31%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department v-model="listQuery.ssbmdm" :placeholder="listQuery.ssbm" filterable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" prop="kfdMc" :label="handleLabel(listQuery.dwlx)">
|
||||
<el-input v-model="listQuery.kfdMc" placeholder="请输入快反点名称" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="dwlx" label="点位类型">
|
||||
<el-select v-model="listQuery.dwlx" placeholder="请选择点位类型">
|
||||
<el-option v-for="item in props.dic.D_BZ_KFDLX" :label="item.label" :key="item.value" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%" prop="kfdDz" label="快反点地址">
|
||||
<el-input v-model="listQuery.kfdDz" placeholder="请输入快反点地址" clearable/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input @change="jwdChange" v-model="listQuery.jd" clearable style="width: 45%" />
|
||||
<el-input @change="jwdChange" v-model="listQuery.wd" clearable style="width: 45%" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="yfzfw" label="一分钟范围" @change="yfzChange" style="width: 100%" >
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.yfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('yfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="sfzfw" @change="sfzChange" label="三分钟范围" style="width: 100%" >
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.sfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('sfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="wfzfw" label="五分钟范围" @change="wfzChange" style="width: 100%">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.wfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('wfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map"> <GdMap /> </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import { ref,defineExpose, reactive,defineProps,getCurrentInstance ,defineEmits, nextTick, onMounted} from 'vue';
|
||||
const props = defineProps({
|
||||
dic:{ type:Object, default:{} }
|
||||
})
|
||||
const emits = defineEmits(['updateDate'])
|
||||
const { proxy } = getCurrentInstance();
|
||||
const title = ref('新增快反点管理');
|
||||
const disabledFoem = ref(false) //表单禁用
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const listQuery = ref({ dwlx:'01'}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const rules = reactive({
|
||||
kfdMc: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
dwlx: [{ required: true, message: "请选择点位类型", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
kfdDz: [{ required: true, message: "请输入快反点地址", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择快反点位置", trigger: "change" }],
|
||||
yfzfw: [{ required: true, message: "请选择一分钟范围", trigger: "change" }],
|
||||
sfzfw: [{ required: true, message: "请选择三分钟范围", trigger: "change" }],
|
||||
wfzfw: [{ required: true, message: "请选择五分钟范围", trigger: "change" }],
|
||||
});
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
handleSd(res.coord[0],res.coord[1],listQuery.value.dwlx)
|
||||
}
|
||||
if (res.type === "polygon") listQuery.value[res.flag] = res.coord[0];
|
||||
});
|
||||
})
|
||||
|
||||
const handleLabel = (val) =>{
|
||||
switch(val){
|
||||
case '01':
|
||||
return '快反点名称'
|
||||
case '02':
|
||||
return '屯警点名称'
|
||||
case '03':
|
||||
return '驻守点名称'
|
||||
case '04':
|
||||
return '武警联动名称'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row)=> {
|
||||
dialogForm.value = true
|
||||
disabledFoem.value = type == 'detail' ? true :false
|
||||
if(row){
|
||||
title.value = type == 'edit'?'修改快反点管理':'快反点管理详情'
|
||||
getDataById(row) //根据id查询详情
|
||||
}else{
|
||||
title.value = '新增快反点管理'
|
||||
}
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (row)=>{
|
||||
listQuery.value = JSON.parse(JSON.stringify(row))
|
||||
nextTick(()=>{
|
||||
if (row.jd && row.wd) {
|
||||
handleSd(row.jd,row.wd,row.dwlx)
|
||||
emitter.emit("setMapCenter", { location: [row.jd, row.wd], zoomLevel: 10 });
|
||||
}
|
||||
if (row.yfzfw.length > 0) {
|
||||
emitter.emit("drawShape", { coords: [row.yfzfw], flag: "yfzfw", type:'geoJson', isclear: true });
|
||||
}
|
||||
if (row.sfzfw.length > 0) {
|
||||
emitter.emit("drawShape", { coords: [row.sfzfw], flag: "sfzfw", type:'geoJson', isclear: false });
|
||||
}
|
||||
if (row.wfzfw.length > 0) {
|
||||
emitter.emit("drawShape", { coords: [row.wfzfw], flag: "wfzfw", type:'geoJson', isclear: false });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取经纬度 - 圈层范围清空
|
||||
function chackLat(type) {
|
||||
listQuery.value.jd = "";
|
||||
listQuery.value.wd = "";
|
||||
listQuery.value.yfzfw = "";
|
||||
listQuery.value.sfzfw = "";
|
||||
listQuery.value.wfzfw = "";
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("removePlot", "yfzfw");
|
||||
emitter.emit("removePlot", "sfzfw");
|
||||
emitter.emit("removePlot", "wfzfw");
|
||||
emitter.emit("drawShape", { type: "point", flag: "kfd_ht" ,isclear:true});
|
||||
}
|
||||
// 经纬度变化回显
|
||||
function jwdChange() {
|
||||
if (listQuery.value.jd && listQuery.value.wd) {
|
||||
let icon = require("@/assets/point/kfd.png")
|
||||
handleSd(listQuery.value.jd,listQuery.value.wd,listQuery.value.dwlx)
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [listQuery.value.jd, listQuery.value.wd],
|
||||
zoomLevel: 10
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制一、三、五分钟圈陈
|
||||
function chackLatY(type) {
|
||||
emitter.emit("drawShape", { type: "polygon", flag: type, isclear:true});
|
||||
listQuery.value[type] = "";
|
||||
}
|
||||
|
||||
// 处理撒点
|
||||
function handleSd (jd,wd,dwlx) {
|
||||
let icon = require("@/assets/point/kfd.png")
|
||||
if(dwlx == '02') icon = require("@/assets/point/tjd.png")
|
||||
if(dwlx == '03') icon = require("@/assets/point/zsd.png")
|
||||
if(dwlx == '04') icon = require("@/assets/point/lqd.png")
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("addPointArea", { coords: [{jd, wd}], icon, flag: "kfd" });
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
if(title.value == '新增快反点管理'){
|
||||
qcckPost(listQuery.value,'/mosty-jmxf/tpJcglKfd/addKfd').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPost(listQuery.value,'/mosty-jmxf/tpJcglKfd/updateKfd').then(res=>{
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
close()
|
||||
loading.value = false;
|
||||
emits('updateDate')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { dwlx:'01'}
|
||||
dialogForm.value = false
|
||||
}
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,212 +0,0 @@
|
||||
<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 @click="delDictItem(ids)" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle"><Delete /> </el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</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 #dwlx="{ row }">
|
||||
<dict-tag :options="D_BZ_KFDLX " :value="row.dwlx" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('edit', row)">修改</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.kfdId])">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm ref="addEditDialog" :dic="{D_BZ_KFDLX }" @updateDate="getData"/>
|
||||
</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 EditAddForm from './components/editAddForm.vue'
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_KFDLX } = proxy.$dict("D_BZ_KFDLX");
|
||||
const addEditDialog = ref();
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请输入选择所属部门",
|
||||
label: "所属部门"
|
||||
},{
|
||||
showType: "input",
|
||||
prop: "kfdMc",
|
||||
placeholder: "请输入快反点名称",
|
||||
label: "快反点名称",
|
||||
},
|
||||
{
|
||||
showType: "select",
|
||||
prop: "dwlxs",
|
||||
placeholder: "请选择点位类型",
|
||||
label: "点位类型",
|
||||
options:D_BZ_KFDLX
|
||||
},
|
||||
])
|
||||
const queryFrom = ref({})
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType:'checkBox',
|
||||
loading:false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "ssbm",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "快反点名称",
|
||||
prop: "kfdMc",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
|
||||
{
|
||||
label: "点位类型",
|
||||
prop: "dwlx",
|
||||
showSolt :true,
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "快反点地址",
|
||||
prop: "kfdDz",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "经度",
|
||||
prop: "jd",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "纬度",
|
||||
prop: "wd",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getData() //获取数据
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageNum = 1
|
||||
getData() //获取数据
|
||||
}
|
||||
// 获取数据
|
||||
const getData = ()=>{
|
||||
let pramas = {
|
||||
pageSize:pageData.pageConfiger.pageSize,
|
||||
pageNum:pageData.pageConfiger.pageNum,
|
||||
...queryFrom.value
|
||||
}
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckGet(pramas,'/mosty-jmxf/tpJcglKfd/selectKfdList').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getData()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getData()
|
||||
}
|
||||
|
||||
// 新增
|
||||
const addEdit = (type,row)=>{
|
||||
addEditDialog.value.init(type,row)
|
||||
}
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(!Array.isArray(val)) return false;
|
||||
ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
// 批量删除
|
||||
function delDictItem(ids) {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
qcckPost(ids,'/mosty-jmxf/tpJcglKfd/deleteKfd').then(() => {
|
||||
proxy.$message({type: "success", message: "删除成功" });
|
||||
pageData.pageConfiger.pageNum = 1
|
||||
getData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
@ -1,183 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-01-25 16:21:46
|
||||
* @LastEditTime: 2024-01-26 10:10:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ 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>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sbmc" label="感知源名称">
|
||||
<el-input v-model="listQuery.sbmc" placeholder="请输入感知源名称" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sbbh" label="感知源编号">
|
||||
<el-input v-model="listQuery.sbbh" placeholder="请输入感知源编号" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="sblx" label="感知源类型">
|
||||
<el-select v-model="listQuery.sblx" placeholder="请选择感知源类型">
|
||||
<el-option v-for="dict in props.dic.D_BZ_SBLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sblxdm" label="摄像机类型">
|
||||
<el-select v-model="listQuery.sblxdm" placeholder="请选择摄像机类型">
|
||||
<el-option v-for="dict in props.dic.D_BZ_GZSBLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="csmc" label="来源厂商">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入来源厂商" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="dzmc" label="感知源地址">
|
||||
<el-input v-model="listQuery.dzmc" placeholder="请输入感知源地址" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.jd" clearable placeholder="请选择坐标" style="width: 42%"></el-input>
|
||||
<el-input v-model="listQuery.wd" clearable placeholder="请选择坐标" style="width: 42%; margin-left: 1%"></el-input>
|
||||
<el-button @click="chackLat" style="margin-left: 1%" v-if="listQuery.jd && listQuery.wd">确定</el-button>
|
||||
<el-button @click="selectLocation">选择定位</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="mapBox"><GdMap/></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {choseRbgb} from '@/utils/tools.js'
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import Person from "@/assets/images/default_male.png";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref,defineExpose, reactive, onMounted,defineEmits,getCurrentInstance } from 'vue';
|
||||
const props = defineProps({
|
||||
dic:Object
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const xfzy = ref([])
|
||||
const listQuery = ref({qcys:'#409eff'}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const title = ref('')
|
||||
const jczVisible = ref(false);
|
||||
const rules = reactive({
|
||||
sbbh: [{ required: true, message: "请输入巡防区名称", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
|
||||
sbmc: [{ required: true, message: "请输入感知源名称", trigger: "blur" }],
|
||||
sblx: [{ required: true, message: "请选择感知源类型", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择坐标", trigger: ['change','blur'] }],
|
||||
})
|
||||
const mapType = ref(""); //地图绘制对象
|
||||
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
chackLat();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row)=> {
|
||||
dialogForm.value = true
|
||||
title.value = row ? '编辑感知源':'新增感知源'
|
||||
if(row) getDataById(row)
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (row)=>{
|
||||
qcckGet({}, "/mosty-yszx/tbYsSxt/"+row.id).then(async (res) => {
|
||||
listQuery.value = res;
|
||||
if (res.jd && res.wd) emitter.emit("addPointArea", { coords: [res], icon: require("@/assets/point/sp.png"), flag: "jczGzy"});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//获取经纬度
|
||||
const chackLat = (type) => {
|
||||
const { jd, wd } = listQuery.value;
|
||||
emitter.emit("deletePointArea", "jczGzy");
|
||||
if (jd && wd) {
|
||||
emitter.emit("addPointArea", {coords: [{ jd, wd }],icon: require("@/assets/point/sp.png"),flag: "jczGzy" });
|
||||
}
|
||||
}
|
||||
|
||||
//选择定位
|
||||
const selectLocation = () => {
|
||||
emitter.emit("drawShape", { flag: "select_point", type: "point", isclear: true });
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
if(title.value == '新增感知源'){
|
||||
qcckPost(listQuery.value, "/mosty-yszx/tbYsSxt/add").then((res) => {
|
||||
proxy.$message({ type: "success", message: "新增成功"});
|
||||
close()
|
||||
emit("updateDate");
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
}else{
|
||||
qcckPut(listQuery.value, "/mosty-yszx/tbYsSxt/update").then((res) => {
|
||||
proxy.$message({ type: "success", message: "修改成功"});
|
||||
close()
|
||||
emit("updateDate");
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { qcys :'#409eff'}
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="感知源管理">
|
||||
<el-button type="primary" @click="addEditForm('add','')">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"/>
|
||||
</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 #sblx="{ row }">
|
||||
<dict-tag :value="row.sblx" :options="D_BZ_SBLX" :tag="false"/>
|
||||
</template>
|
||||
<template #sblxdm="{ row }">
|
||||
<dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button @click="addEditForm('eidt',row)" size="small">编辑</el-button>
|
||||
<el-button @click="deletList(row.id)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑-新增 -->
|
||||
<EditAddForm ref="editInfo" @updateDate="getDataList" :dic="{D_BZ_SBLX,D_BZ_GZSBLX}"></EditAddForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import EditAddForm from './components/editAddForm.vue'
|
||||
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 { reactive, ref ,onMounted,getCurrentInstance, nextTick } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SBLX ,D_BZ_GZSBLX} = proxy.$dict("D_BZ_SBLX","D_BZ_GZSBLX");
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const listQuery = ref({})
|
||||
const editInfo = ref()
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "input",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入感知源名称",
|
||||
label: "感知源名称",
|
||||
},
|
||||
{
|
||||
showType: "input",
|
||||
prop: "sbbh",
|
||||
placeholder: "请输入感知源编号",
|
||||
label: "感知源编号",
|
||||
},
|
||||
])
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
showSelectType:'checkBox',
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "感知源名称", prop: "sbmc",showOverflowTooltip:true},
|
||||
{ label: "编号", prop: "sbbh",showOverflowTooltip:true},
|
||||
{ label: "地址", prop: "dzmc" ,showOverflowTooltip:true},
|
||||
{ label: "感知源类型", prop: "sblx" ,showSolt:true,showOverflowTooltip:true},
|
||||
{ label: "摄像机类型", prop: "sblxdm" ,showSolt:true,showOverflowTooltip:true},
|
||||
{ label: "所属部门", prop: "ssbm",showOverflowTooltip:true},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
getDataList()
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
listQuery.value = {...listQuery.value,...val}
|
||||
if(val.cz) listQuery.value.ssbmdm = '';
|
||||
delete listQuery.value.cz;
|
||||
getDataList()
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getDataList = ()=>{
|
||||
let pramas = {
|
||||
pageSize:pageData.pageConfiger.pageSize,
|
||||
pageCurrent:pageData.pageConfiger.pageNum,
|
||||
...listQuery.value
|
||||
}
|
||||
delete pramas.daterange
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckPost(pramas,'/mosty-yszx/tbYsSxt/getPageList').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getDataList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getDataList()
|
||||
}
|
||||
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(val instanceof Array) ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
//批量删除
|
||||
const deletList = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
qcckDelete({},'/mosty-yszx/tbYsSxt/'+id).then(() => {
|
||||
proxy.$message({ type: "success",message: "删除成功"});
|
||||
getDataList()
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增编辑表单
|
||||
const addEditForm = (type,row)=>{
|
||||
nextTick(()=>{
|
||||
editInfo.value.init(type,row)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,835 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">执勤警组管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="警组名称">
|
||||
<el-input v-model="listQuery.jzMc" placeholder="请输入警组名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="listQuery.ddMjxm" placeholder="请输入负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="qwdj" label="是否包含下级">
|
||||
<el-select v-model="listQuery.isChild">
|
||||
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
|
||||
}}</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" @selection-change="handleSelectionChange" border row-key="id" style="width: 100%"
|
||||
:key="keyCount" :height="tableHeight" v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。">
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" align="center" width="60px" label="序号" />
|
||||
<el-table-column prop="ssbm" label="所属部门" />
|
||||
<el-table-column prop="jzMc" align="center" label="警组名称" />
|
||||
<el-table-column prop="ddMjxm" show-overflow-tooltip label="警组负责人" align="center" />
|
||||
<el-table-column prop="jzryList" show-overflow-tooltip align="center" label="警组成员">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.jzryList" :key="index + 'jz'" class="mx-1">
|
||||
{{ item.jlxm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="txzbList" show-overflow-tooltip label="智能装备">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.txzbList" :key="index + 'zb'" class="mx-1">
|
||||
{{ item.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="jyqxList" show-overflow-tooltip label="常用装备">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.jyqxList" :key="index + 'qx'" class="mx-1">
|
||||
{{ item.qxmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="clList" show-overflow-tooltip label="警组车辆">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.clList" :key="index + 'cl'" class="mx-1">
|
||||
{{ item.jdchphm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" :loading="btnLoading" size="small" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department @change="handleChange" v-model="form.ssbmdm" :placeholder="form.ssbm" style="width: 100%"
|
||||
ref="cascader" clearable filterable :options="depList" :props="props" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzMc" label="警组名称">
|
||||
<el-input v-model="form.jzMc" placeholder="请输入警组名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ddMjxm" label="警组负责人">
|
||||
<el-input @click="form.ssbmdm?chooseUserVisible = true:chooseUserVisible = false " v-model="form.ddMjxm" placeholder="请选择警组负责人" clearable
|
||||
@change="handelJzfzr" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ddMjsfzh" label="负责人身份证号">
|
||||
<el-input v-model="form.ddMjsfzh" clearable placeholder="请输入身份证号" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ddDh" label="负责人电话">
|
||||
<el-input v-model="form.ddDh" clearable placeholder="请输入负责人电话" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="mjjzcy" label="民警成员"
|
||||
@click.stop="form.ssbmdm?mjVisible = true:mjVisible = false"
|
||||
>
|
||||
<el-input v-model="form.mjData" placeholder="请选择民警成员" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="mjData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in mjData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'MJ')">
|
||||
{{ tag.jlxm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="fjjzcy" label="辅警成员" @click.stop="form.ssbmdm?fjVisible = true:fjVisible = false">
|
||||
<el-input v-model="form.fjData" placeholder="请选择辅警成员" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="fjData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in fjData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'FJ')">
|
||||
{{ tag.jlxm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="mjjzcy" label="群防群治人员" @click.stop="qfqzVisible = true">
|
||||
<el-input v-model="form.qfqz" placeholder="请选择群防群治人员" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="qfqzData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in qfqzData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'QFQZ')">
|
||||
{{ tag.qfqzmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzznzb" label="移动警务终端" @click.stop="(zblx = '81'), (form.ssbmdm?znzbVisible = true:znzbVisible = false)">
|
||||
<el-input v-model="form.ydjwzdDate" placeholder="请选择移动警务终端" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="ydjwzdDate.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in ydjwzdDate" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'YDJWZD')">
|
||||
{{ tag.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzznzb" label="对讲机" @click.stop="(zblx = '86'), (form.ssbmdm?znzbVisible = true:znzbVisible = false)">
|
||||
<el-input v-model="form.scdjjDate" placeholder="请选择对讲机" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="scdjjDate.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in scdjjDate" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'DJJ')">
|
||||
{{ tag.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzznzb"
|
||||
label="执法记录仪" @click.stop="(zblx = '80'), (form.ssbmdm?znzbVisible = true:znzbVisible = false)">
|
||||
<el-input v-model="form.zfjlyDate" placeholder="请选择执法记录仪" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="zfjlyDate.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in zfjlyDate" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'ZFJLY')">
|
||||
{{ tag.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="clList" label="警组车辆" @click.stop="form.ssbmdm?jyclVisible = true:jyclVisible = false">
|
||||
<el-input v-model="form.jyclData" placeholder="请选择警组车辆" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="jyclData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in jyclData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'CAR')">
|
||||
{{ tag.jdchphm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bz" label="备注" style="width: 100%">
|
||||
<el-input v-model="form.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 选择负责人 -->
|
||||
<ChooseUser v-if="chooseUserVisible" v-model="chooseUserVisible" titleValue="选择负责人" :roleIds="hasChooseFzr"
|
||||
@choosedUsers="hanlderChoose" showBm="false" :ssbmdm="form.ssbmdm" />
|
||||
<!-- 选择民警 -->
|
||||
<MjLoad v-if="mjVisible" v-model="mjVisible" titleValue="选择民警" :roleIds="hasChooseMj" showBm="false" :ssbmdm="form.ssbmdm"
|
||||
@choosedUsers="hanlderChooseMj" />
|
||||
<!-- 选择辅警 -->
|
||||
<FjLoad v-if="fjVisible" v-model="fjVisible" :roleIds="hasChooseFj" @choosedUsers="hanlderChooseFj" :showBm="false" :ssbmdm="form.ssbmdm"/>
|
||||
<!-- 智能装备 -->
|
||||
<ZnzbLoad v-model="znzbVisible" v-if="znzbVisible" :roleIds="hasChooseZnzb" :zblx="zblx" :showBm="false" :ssbmdm="form.ssbmdm"
|
||||
@choosedUsers="hanlderChooseZnzb" />
|
||||
<!-- 车辆 -->
|
||||
<JyclLoad v-if="jyclVisible" :roleIds="hasChooseJycl" v-model="jyclVisible" @choosedUsers="hanlderChooseJycl"
|
||||
:showBm="false" :ssbmdm="form.ssbmdm" />
|
||||
<!-- 群防群治 -->
|
||||
<QfqzLoadCopy v-if="qfqzVisible" :roleIds="hasChooseQfqz" v-model="qfqzVisible" @choosedUsers="hanlderChooseQfqz"
|
||||
:showBm="false" :ssbmdm="form.ssbmdm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||||
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
|
||||
import QfqzLoadCopy from "@/components/MyComponents/ChooseJz/QfqzLoad.vue";
|
||||
import JyclLoad from "@/components/MyComponents/ChooseJz/JzclLoad.vue";
|
||||
import ZnzbLoad from "@/components/MyComponents/ChooseJz/ZnzbLoad.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const loadingTable = ref(true);
|
||||
const cascader = ref(null);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
|
||||
const btnLoading = ref(false);
|
||||
const mjVisible = ref(false); //民警弹窗
|
||||
const mjData = ref([]);
|
||||
const fjVisible = ref(false); //辅警弹窗
|
||||
const fjData = ref([]);
|
||||
const qfqzVisible=ref(false)
|
||||
const qfqzData=ref([])//群防群治理
|
||||
const jyqxVisible = ref(false); //常用装备弹窗
|
||||
const jyqxData = ref([]);
|
||||
const jyclVisible = ref(false); //警用车辆弹窗
|
||||
const jyclData = ref([]);
|
||||
const znzbVisible = ref(false); //智能装备弹窗
|
||||
const zblx = ref("null"); //智能装备类型
|
||||
const ydjwzdDate = ref([]); //移动警务终端
|
||||
const zfjlyDate = ref([]); //执法记录仪
|
||||
const scdjjDate = ref([]); //手持对讲机
|
||||
const jcData = ref([]);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const chooseUserVisible = ref(false);
|
||||
const totalzq = ref(0);
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const depList = ref([]); //部门数据
|
||||
const chackAdd = ref(false);
|
||||
const chackipt = ref(true);
|
||||
const mapActive = ref(false);
|
||||
const title = ref("新增勤务警组");
|
||||
const ids = ref([]); //批量删除的ID
|
||||
|
||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
||||
const hasChooseMj = ref([]); //已经选胡民警
|
||||
const hasChooseFj = ref([]); //已经选胡FU警
|
||||
const hasChooseZnzb = ref([]); //已经选胡智能装备
|
||||
const hasChooseJyqx = ref([]); //已经选常用装备
|
||||
const hasChooseJycl = ref([]); //已经选警用车辆
|
||||
const hasChooseQfqz = ref([]);//已经选择的群防群治
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
ssbmdm: "",
|
||||
ddMjxm: "",
|
||||
jzMc: "",
|
||||
isChild: "1",
|
||||
ddMjjh: ""
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
|
||||
//筛选条件参数执勤
|
||||
const listQueryzq = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
function focusF() {
|
||||
chackipt.value = false;
|
||||
}
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "orgCode",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
const tableData = ref([]); //列表数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 处理删除tag
|
||||
function handleClose(tag, type) {
|
||||
switch (type) {
|
||||
case "MJ":
|
||||
mjData.value.splice(mjData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseMj.value.splice(hasChooseMj.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseMj.value.splice(hasChooseMj.value.indexOf(tag.ryId), 1);
|
||||
}
|
||||
break;
|
||||
case "FJ":
|
||||
fjData.value.splice(fjData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseFj.value.splice(hasChooseFj.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseFj.value.splice(hasChooseFj.value.indexOf(tag.ryId), 1);
|
||||
}
|
||||
break;
|
||||
case "CAR":
|
||||
jyclData.value.splice(jyclData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseJycl.value.splice(hasChooseJycl.value.indexOf(tag.cid), 1);
|
||||
} else {
|
||||
hasChooseJycl.value.splice(hasChooseJycl.value.indexOf(tag.clId), 1);
|
||||
}
|
||||
|
||||
break;
|
||||
case "YDJWZD":
|
||||
ydjwzdDate.value.splice(ydjwzdDate.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.zbId), 1);
|
||||
}
|
||||
|
||||
break;
|
||||
case "DJJ":
|
||||
scdjjDate.value.splice(scdjjDate.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.zbId), 1);
|
||||
}
|
||||
break;
|
||||
case "ZFJLY":
|
||||
zfjlyDate.value.splice(zfjlyDate.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.zbId), 1);
|
||||
}
|
||||
break;
|
||||
case "JYQX":
|
||||
jyqxData.value.splice(jyqxData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseJyqx.value.splice(hasChooseJyqx.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseJyqx.value.splice(hasChooseJyqx.value.indexOf(tag.qxId), 1);
|
||||
}
|
||||
break;
|
||||
case "QFQZ":
|
||||
qfqzData.value.splice(qfqzData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseQfqz.value.splice(hasChooseQfqz.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseQfqz.value.splice(hasChooseQfqz.value.indexOf())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/tbJcglJz/queryList").then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = Number(res.total);
|
||||
loadingTable.value = false;
|
||||
}).catch(err=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
function handleChange(e) { }
|
||||
const addDict = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
//重置表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
formReset();
|
||||
}
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.ddMjxm = user.userName;
|
||||
form.value.ddMjsfzh = user.idEntityCard;
|
||||
form.value.ddDh = user.mobile;
|
||||
form.value.ddMjid = user.id;
|
||||
form.value.ddMjjh = user.inDustRialId;
|
||||
hasChooseFzr.value = [user.id];
|
||||
};
|
||||
//选择民警
|
||||
function hanlderChooseMj(arr) {
|
||||
hasChooseMj.value = arr.map((v) => {
|
||||
return v.ryid;
|
||||
});
|
||||
const jzryList = arr.map((item) => {
|
||||
return {
|
||||
ryId: item.ryid,
|
||||
jllx: item.fl,
|
||||
jlxm: item.xm,
|
||||
jh: item.jh,
|
||||
sfzh: item.sfzh,
|
||||
lxdh: item.lxdh,
|
||||
xbdm: item.xbdm
|
||||
};
|
||||
});
|
||||
mjData.value = jzryList;
|
||||
}
|
||||
|
||||
//选择辅警
|
||||
function hanlderChooseFj(arr) {
|
||||
hasChooseFj.value = arr.map((v) => {
|
||||
return v.id;
|
||||
});
|
||||
const jzryList = arr.map((item) => {
|
||||
return {
|
||||
ryId: item.id,
|
||||
jllx: item.fl,
|
||||
jlxm: item.xm,
|
||||
jh: item.jh,
|
||||
sfzh: item.sfzh,
|
||||
lxdh: item.lxdh,
|
||||
xbdm: item.xbdm
|
||||
};
|
||||
});
|
||||
fjData.value = jzryList;
|
||||
}
|
||||
//选择警用车辆
|
||||
function hanlderChooseJycl(arr) {
|
||||
let brr = [];
|
||||
const clList = arr.map((item) => {
|
||||
brr.push(item.cid);
|
||||
return {
|
||||
clId: item.cid,
|
||||
jdchphm: item.cph,
|
||||
jdchpzldm: item.cplx,
|
||||
gpsId: item.gpsId,
|
||||
};
|
||||
});
|
||||
hasChooseJycl.value = brr;
|
||||
jyclData.value = clList;
|
||||
}
|
||||
//选择群防群治
|
||||
function hanlderChooseQfqz(arr) {
|
||||
const qfqzList = arr.map((item) => {
|
||||
return {
|
||||
qfqzId: item.id,
|
||||
qfqzmc: item.xm,
|
||||
};
|
||||
});
|
||||
hasChooseQfqz.value = qfqzList.map((item) => { return item.id; });
|
||||
qfqzData.value = qfqzList;
|
||||
}
|
||||
//单个删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
qcckPost([row.id], "/mosty-jmxf/tbJcglJz/deleteJz").then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
qcckPost(ids.value, "/mosty-jmxf/tbJcglJz/deleteJz").then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//选择常用装备
|
||||
function hanlderChooseJyqx(arr) {
|
||||
let brr = [];
|
||||
const jyqxList = arr.map((item) => {
|
||||
brr.push(item.id);
|
||||
return { qxId: item.id, qxlx: item.scode, qxsl: item.sl, qxmc: item.qxMc };
|
||||
});
|
||||
jyqxData.value = jyqxList;
|
||||
hasChooseJyqx.value = brr;
|
||||
}
|
||||
//选择智能装备
|
||||
function hanlderChooseZnzb(arr) {
|
||||
hasChooseZnzb.value = arr.map((v) => {
|
||||
return v.id;
|
||||
});
|
||||
const txzbList = arr.map((item) => {
|
||||
return {
|
||||
txzblx: item.scode,
|
||||
zbId: item.id,
|
||||
sbmc: item.sbmc,
|
||||
hh: item.sbbh,
|
||||
sbbh: item.sbbh,
|
||||
sfrh: item.sfrh,
|
||||
sfzy: item.sfzy,
|
||||
sfxt: item.sfxt,
|
||||
};
|
||||
});
|
||||
switch (zblx.value) {
|
||||
case "81":
|
||||
// 移动警务终端
|
||||
ydjwzdDate.value = txzbList;
|
||||
break;
|
||||
case "86":
|
||||
// 对讲机
|
||||
scdjjDate.value = txzbList;
|
||||
break;
|
||||
case "80":
|
||||
// 执法记录仪
|
||||
zfjlyDate.value = txzbList;
|
||||
break;
|
||||
}
|
||||
//装备
|
||||
}
|
||||
//表单数据
|
||||
const form = ref({
|
||||
jzMc: "",
|
||||
ssbm: "",
|
||||
jzfzr: "",
|
||||
fzrsfzh: "",
|
||||
fzrdh: "",
|
||||
mjjzcy: "",
|
||||
fjjzcy: "",
|
||||
jzznzb: "",
|
||||
jyqx: "",
|
||||
jzcl: "",
|
||||
bz: "",
|
||||
jczmc: "",
|
||||
jczid: ""
|
||||
});
|
||||
//新增勤务警组
|
||||
function add() {
|
||||
jyclData.value = [];
|
||||
mjData.value = [];
|
||||
fjData.value = [];
|
||||
jyqxData.value = [];
|
||||
ydjwzdDate.value = [];
|
||||
zfjlyDate.value = [];
|
||||
scdjjDate.value = [];
|
||||
jcData.value = [];
|
||||
title.value = "新增勤务警组";
|
||||
chackAdd.value = true;
|
||||
chackipt.value = false;
|
||||
formReset();
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//修改勤务警组
|
||||
function update(row) {
|
||||
jyclData.value = [];
|
||||
mjData.value = [];
|
||||
fjData.value = [];
|
||||
jyqxData.value = [];
|
||||
ydjwzdDate.value = [];
|
||||
zfjlyDate.value = [];
|
||||
scdjjDate.value = [];
|
||||
jcData.value = [];
|
||||
qcckGet({ id: row.id }, "/mosty-jmxf/tbJcglJz/selectByid").then((res) => {
|
||||
form.value = res;
|
||||
jcData.value = [res.jczmc];
|
||||
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
|
||||
let arrCl = [];
|
||||
res.clList.forEach((v) => {
|
||||
arrCl.push(v.clId);
|
||||
jyclData.value.push(v);
|
||||
});
|
||||
|
||||
let arrJyqx = [];
|
||||
res.jyqxList.forEach((v) => {
|
||||
arrJyqx.push(v.qxId);
|
||||
jyqxData.value.push(v);
|
||||
});
|
||||
qfqzData.value=JSON.parse(res.qfqz)?JSON.parse(res.qfqz):[];
|
||||
let arrMJ = [];
|
||||
let arrFJ = [];
|
||||
res.jzryList.forEach((v) => {
|
||||
if (v.jllx == "01") {
|
||||
arrMJ.push(v.ryId);
|
||||
mjData.value.push(v);
|
||||
} else {
|
||||
arrFJ.push(v.ryId);
|
||||
fjData.value.push(v);
|
||||
}
|
||||
});
|
||||
|
||||
let arrZb = [];
|
||||
res.txzbList.forEach((v) => {
|
||||
arrZb.push(v.zbId);
|
||||
// 装备
|
||||
switch (v.txzblx) {
|
||||
case "81":
|
||||
//移动警务终端
|
||||
ydjwzdDate.value.push(v);
|
||||
break;
|
||||
case "86":
|
||||
//对讲机
|
||||
scdjjDate.value.push(v);
|
||||
break;
|
||||
case "80":
|
||||
//执法记录仪
|
||||
zfjlyDate.value.push(v);
|
||||
break;
|
||||
}
|
||||
});
|
||||
title.value = "修改勤务警组";
|
||||
chackAdd.value = false;
|
||||
chackipt.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
|
||||
// 表格回显
|
||||
hasChooseFzr.value = [res.ddMjid]; //负责人
|
||||
hasChooseMj.value = arrMJ; //民警
|
||||
hasChooseFj.value = arrFJ; //辅警
|
||||
hasChooseJyqx.value = arrJyqx; //常用装备
|
||||
hasChooseZnzb.value = arrZb; //智能装备
|
||||
hasChooseJycl.value = arrCl; //警用车辆
|
||||
});
|
||||
}
|
||||
|
||||
function handelJzfzr(val) {
|
||||
if (!val) hasChooseFzr.value = [];
|
||||
}
|
||||
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
jzMc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入警组名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择部门",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ddMjxm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入警组负责人",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ddMjsfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入负责人身份证号",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ddDh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入负责人电话",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const elform = ref(null);
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
const params = form.value;
|
||||
params.ssbmdm = form.value.ssbmdm;
|
||||
params.jczmc = form.value.jczmc;
|
||||
params.jczid = form.value.jczid;
|
||||
params.jzryList = [...fjData.value, ...mjData.value];
|
||||
params.txzbList = [
|
||||
...ydjwzdDate.value,
|
||||
...zfjlyDate.value,
|
||||
...scdjjDate.value
|
||||
];
|
||||
params.jyqxList = jyqxData.value;
|
||||
params.clList = jyclData.value;
|
||||
params.qfqz=JSON.stringify(qfqzData.value)
|
||||
if (chackAdd.value) {
|
||||
qcckPost(params, "/mosty-jmxf/tbJcglJz/addJz")
|
||||
.then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
btnLoading.value = false;
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
qcckPost(form.value, "/mosty-jmxf/tbJcglJz/updateJz")
|
||||
.then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
btnLoading.value = false;
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChangezq = (currentSize) => {
|
||||
listQueryzq.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChangezq = (currentPage) => {
|
||||
listQueryzq.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,466 +0,0 @@
|
||||
<!-- 社会安保力量 -->
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import {
|
||||
getTbJcglShabll,
|
||||
addTbJcglShabll,
|
||||
putTbJcglShabll,
|
||||
infoTbJcglShabll,
|
||||
delTbJcglShabll
|
||||
} from "@/api/basicsmanage/socialSecurity.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDY_ABLLLX } = proxy.$dict("D_ZDY_ABLLLX");
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const form = ref({}); //新增表单
|
||||
const tableData = ref([]); //表格数据
|
||||
const cascader = ref(null);
|
||||
const total = ref(0);
|
||||
const chackAdd = ref(false); //新增修改切换
|
||||
const loading = ref(false); //新增保存按钮截流
|
||||
const ids = ref([]); //表格选中id集合
|
||||
const searchBox = ref(null); //搜索盒子
|
||||
const loadingTable = ref(true); //表格加载状态
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const dialogFormVisible = ref(false);
|
||||
const title = ref("新增社会安保"); //弹窗标题
|
||||
const elform = ref(null); //新增表单容器
|
||||
const depList = ref([]); //部门数据
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
xm: [{ required: true, message: "请输入姓名", trigger: "change" }],
|
||||
lxdh: [{ required: true, message: "请输入联系电话", pattern: /^((0\d{2,3}-\d{7,8})|(1[345678]\d{9}))$/, trigger: "change" }],
|
||||
...rule.identityCardRule(
|
||||
{
|
||||
require: true,
|
||||
message: "请输入身份证号",
|
||||
validator: true
|
||||
},
|
||||
"sfzh"
|
||||
) //身份证校验
|
||||
});
|
||||
//查询条件选择部门
|
||||
function handleChange(e) {
|
||||
let data = cascader.value.getCheckedNodes();
|
||||
form.value.ssbm = data[0].text;
|
||||
const ids = JSON.parse(JSON.stringify(e));
|
||||
form.value.ssbmdm = ids;
|
||||
}
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getTbJcglShabll(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//打开新增弹窗
|
||||
function add() {
|
||||
chackAdd.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
form.value = {};
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.ssbmid = form.value.ssbmdm
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1500);
|
||||
if (chackAdd.value) {
|
||||
addTbJcglShabll(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
putTbJcglShabll(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
infoTbJcglShabll(row.id).then((res) => {
|
||||
chackAdd.value = false;
|
||||
title.value = "修改社会安保";
|
||||
dialogFormVisible.value = true;
|
||||
form.value = res;
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delTbJcglShabll([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delTbJcglShabll(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">社会安保力量</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="batchDelete"
|
||||
:disabled="ids.length == 0"
|
||||
typeof="danger"
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属辖区">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="安保人员">
|
||||
<el-input
|
||||
v-model="listQuery.xm"
|
||||
placeholder="请输入安保人员姓名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="安保力量类型" prop="ablllx">
|
||||
<el-select
|
||||
v-model="listQuery.ablllx"
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ABLLLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center" width="60" />
|
||||
<el-table-column
|
||||
sortable
|
||||
show-overflow-tooltip
|
||||
label="姓名"
|
||||
prop="xm"
|
||||
align="center"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="所属辖区"
|
||||
prop="ssbm"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="安保力量类型"
|
||||
prop="ablllx"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<dict-tag
|
||||
:options="D_ZDY_ABLLLX"
|
||||
:value="row.ablllx"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="工作单位" prop="gzdw" align="center" />
|
||||
<el-table-column label="联系电话" prop="lxdh" align="center" />
|
||||
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog" v-if="dialogFormVisible">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="所属辖区" prop="ssbmdm">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
:placeholder="form.ssbm"
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="form.xm" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="sfzh">
|
||||
<el-input v-model="form.sfzh" placeholder="请输入身份证号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="xbdm">
|
||||
<MOSTY.PackageSelect
|
||||
width="100%"
|
||||
v-model="form.xbdm"
|
||||
dictEnum="GENDER"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="安保力量类型" prop="ablllx">
|
||||
<el-select
|
||||
v-model="form.ablllx"
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ABLLLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="lxdh">
|
||||
<el-input v-model="form.lxdh" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族" prop="mzdm">
|
||||
<MOSTY.PackageSelect
|
||||
width="100%"
|
||||
v-model="form.mzdm"
|
||||
dictEnum="NATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="学历" prop="xldm">
|
||||
<MOSTY.PackageSelect
|
||||
width="100%"
|
||||
v-model:modelValue="form.xldm"
|
||||
dictEnum="EDUCATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="住址详址" prop="zzxz">
|
||||
<el-input v-model="form.zzxz" placeholder="请输入住址详址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="工作单位" prop="gzdw">
|
||||
<el-input v-model="form.gzdw" placeholder="请输入工作单位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="所在单位" prop="szdw">
|
||||
<el-input v-model="form.szdw" placeholder="请输入所在单位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="工作内容" prop="gznr">
|
||||
<el-input v-model="form.gznr" placeholder="请输入工作内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="掌握技能" prop="zwjn">
|
||||
<el-input v-model="form.zwjn" placeholder="请输入掌握技能"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bz" label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="form.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -1,432 +0,0 @@
|
||||
<!-- 增删改查基础模板 -->
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
||||
import {
|
||||
getDsfList,
|
||||
addDsf,
|
||||
putDsf,
|
||||
infoDsf,
|
||||
putDsfZt,
|
||||
delDsf
|
||||
} from "@/api/basicsmanage/thirdParty.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_DSFFWLX, D_BZ_DSFSYZT } = proxy.$dict(
|
||||
"D_BZ_DSFFWLX",
|
||||
"D_BZ_DSFSYZT"
|
||||
);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const form = ref({}); //新增表单
|
||||
const tableData = ref([]); //表格数据
|
||||
const total = ref(0);
|
||||
const chackAdd = ref(false); //新增修改切换
|
||||
const loading = ref(false); //新增保存按钮截流
|
||||
const ids = ref([]); //表格选中id集合
|
||||
const searchBox = ref(null); //搜索盒子
|
||||
const loadingTable = ref(true); //表格加载状态
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const dialogFormVisible = ref(false);
|
||||
const title = ref("新增"); //弹窗标题
|
||||
const elform = ref(null); //新增表单容器
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
xtmc: [{ required: true, message: "请填写系统名称", trigger: "change" }],
|
||||
fwlx: [{ required: true, message: "请选择服务类型", trigger: "change" }],
|
||||
zrrxm: [{ required: true, message: "请填写责任人姓名", trigger: "change" }]
|
||||
});
|
||||
function shFn(row) {
|
||||
proxy
|
||||
.$confirm("是否通过审核", "提示", {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: "通过",
|
||||
cancelButtonText: "不通过"
|
||||
})
|
||||
.then(() => {
|
||||
putDsfZt({ id: row.id, zt: "02" }).then(() => {
|
||||
proxy.$message({
|
||||
message: "审核已通过",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch((action) => {
|
||||
if(action === 'cancel'){
|
||||
putDsfZt({ id: row.id, zt: "03" }).then(() => {
|
||||
proxy.$message({
|
||||
message: "审核未通过",
|
||||
type: "warning"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
}else{
|
||||
proxy.$message.info("审核已取消");
|
||||
}
|
||||
});
|
||||
}
|
||||
function tyFn(row) {
|
||||
proxy
|
||||
.$confirm("确定要停用", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
putDsfZt({ id: row.id, zt: "04" }).then(() => {
|
||||
proxy.$message({
|
||||
message: "停用成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
tableData.value = [];
|
||||
loadingTable.value = true;
|
||||
getDsfList(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//打开新增弹窗
|
||||
function add() {
|
||||
chackAdd.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
form.value = {};
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1500);
|
||||
if (chackAdd.value) {
|
||||
addDsf(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
putDsf(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
infoDsf(row.id).then((res) => {
|
||||
form.value = res;
|
||||
chackAdd.value = false;
|
||||
form.value = row;
|
||||
title.value = "修改";
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delDsf([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delDsf(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">第三方服务</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="batchDelete"
|
||||
:disabled="ids.length == 0"
|
||||
typeof="danger"
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="系统名称">
|
||||
<el-input
|
||||
v-model="listQuery.xtmc"
|
||||
placeholder="请输入系统名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务类型">
|
||||
<el-select style="width: 100%" v-model="listQuery.fwlx">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_DSFFWLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人姓名">
|
||||
<el-input
|
||||
v-model="listQuery.zrrxm"
|
||||
placeholder="请输入责任人姓名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center" width="60" />
|
||||
<el-table-column label="系统名称" prop="xtmc" align="center" />
|
||||
<el-table-column label="服务类型" prop="fwlx" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_DSFFWLX" :value="row.fwlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="责任人" prop="zrrxm" align="center" />
|
||||
<el-table-column label="责任人联系电话" prop="zrrlxdh" align="center" />
|
||||
<el-table-column label="使用状态" prop="zt" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_DSFSYZT" :value="row.zt" :tag="true" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.zt === '01'">
|
||||
<el-button @click="shFn(row)" size="small">审核</el-button>
|
||||
</template>
|
||||
<template v-if="row.zt === '02'">
|
||||
<el-button @click="tyFn(row)" size="small">停用</el-button>
|
||||
</template>
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog" v-if="dialogFormVisible">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="系统名称" prop="xtmc">
|
||||
<el-input v-model="form.xtmc" placeholder="请填写系统名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务类型" prop="fwlx">
|
||||
<el-select style="width: 100%" v-model="form.fwlx">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_DSFFWLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人" prop="zrrxm">
|
||||
<el-input
|
||||
v-model="form.zrrxm"
|
||||
placeholder="请填写责任人姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="责任人联系电话" prop="zrrlxdh">
|
||||
<el-input
|
||||
v-model="form.zrrlxdh"
|
||||
placeholder="请填写责任人联系电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="过期时间" prop="gqsj">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.gqsj"
|
||||
unlink-panels
|
||||
type="date"
|
||||
placeholder="请选择过期时间"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="bz" label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="form.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -1,481 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">重点人员管理</div>
|
||||
<div class="btnBox" style="display: flex">
|
||||
<el-button type="primary" style="margin-left: 10px" @click="dialogFormVisible = true;">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="姓名">
|
||||
<el-input placeholder="请输入重点人员姓名" v-model="listQuery.xm" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker unlink-panels v-model="listQuery.gkkssj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任区">
|
||||
<el-select v-model="listQuery.xfqid" placeholder="请选择责任区" filterable>
|
||||
<el-option v-for="item in zrqList" :key="item.id" :label="item.xfqMc" :value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="管控状态">
|
||||
<el-select v-model="listQuery.gkzt" placeholder="请选择管控状态" >
|
||||
<el-option v-for="item in D_ZDRGK_GKZT" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签">
|
||||
<el-select v-model="listQuery.gkbq" placeholder="请选择管控状态" filterable>
|
||||
<el-option v-for="item in D_ZDRGK_GKBQ" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter">查询</el-button>
|
||||
<el-button @click="reset"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border row-key="orgCode" style="width: 100%" :key="keyCount" :height="tableHeight">
|
||||
<el-table-column prop="sfzh" label="身份证号码" show-overflow-tooltip align="center" width="200"/>
|
||||
<el-table-column prop="xm" label="姓名" show-overflow-tooltip width="120"/>
|
||||
<el-table-column label="性别" show-overflow-tooltip width="80">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XB" :value="row.xbdm" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="图片" align="center" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
style="width=80px;height:90px"
|
||||
:preview-src-list="[`/mosty-base/minio/image/download/${row.fjdz}`]"
|
||||
v-if="row.fjdz"
|
||||
hide-on-click-modal
|
||||
preview-teleported
|
||||
fit="cover"
|
||||
:src="`/mosty-base/minio/image/download/${row.fjdz}`"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="民族" align="center" width="80" >
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_MZ" :value="row.mz" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="jzdz" label="居住地" show-overflow-tooltip align="center" width="320"/>
|
||||
<el-table-column prop="lxfs" label="联系方式" show-overflow-tooltip align="center" width="180"/> -->
|
||||
<el-table-column label="紧急联系人及方式" show-overflow-tooltip align="center" width="180" >
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.jjlxr }}({{ row.jjlxrLxfs }})</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标签" show-overflow-tooltip align="center" width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="rybq_box">
|
||||
<dict-tag v-for="item in row.gkbq" :key="item" :options="D_ZDRGK_GKBQ" :value="item" :tag="true"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkMan" label="等级" show-overflow-tooltip align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_ZDRGK_GKDJ" :value="row.gkdj" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkMan" label="管控状态" show-overflow-tooltip align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_ZDRGK_GKZT" :value="row.gkzt" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="xtCjsj" label="创建时间" show-overflow-tooltip align="center" width="150"/>
|
||||
<!-- <el-table-column prop="gksj" label="最近管控时间" show-overflow-tooltip align="center" width="150"/>
|
||||
<el-table-column prop="linkMan" label="管控次数" show-overflow-tooltip align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.gkjlList?.length }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="gkyy" label="管控原因" show-overflow-tooltip align="center" width="200"/>
|
||||
<el-table-column prop="czfs" label="处置方式" show-overflow-tooltip align="center" width="100"/>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="230">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="lookGj(row)" size="small">预警轨迹</el-button>
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-popconfirm @confirm="delDictItem(row)" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?">
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ isUpdate ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button v-if="isUpdate" type="primary" size="small" @click="onSave" :loading="buttonLoading" >修改</el-button>
|
||||
<!-- 新增 -->
|
||||
<el-button v-else type="primary" size="small" @click="onAdd" :loading="buttonLoading" >保存</el-button>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form class="mosty-from-wrap" ref="editRef" label-width="140px" :rules="rules" :inline="true" label-position="top" :model="dialogForm">
|
||||
<el-form-item label="身份证号码" show-word-limit prop="sfzh" required >
|
||||
<el-input placeholder="请填写身份证号码" v-model="dialogForm.sfzh" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input placeholder="请填写重点人员姓名" v-model="dialogForm.xm" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" required>
|
||||
<el-select v-model="dialogForm.xbdm" placeholder="请选择性别">
|
||||
<el-option v-for="item in D_BZ_XB" :key="item" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族">
|
||||
<MOSTY.PackageSelect width="280px" v-model="dialogForm.mz" dictEnum="NATION" clearable filterable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="居住地" >
|
||||
<el-input show-word-limit placeholder="请填写详细居住地" v-model="dialogForm.jzdz" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" >
|
||||
<el-input placeholder="请填写联系方式" show-word-limit v-model="dialogForm.lxfs" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任社区民警" >
|
||||
<el-input placeholder="请填写责任社区民警" show-word-limit v-model="dialogForm.jjlxr" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任社区民警电话" >
|
||||
<el-input placeholder="请填写责任社区民警电话" show-word-limit v-model="dialogForm.jjlxrLxfs" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="gkbq" >
|
||||
<el-select v-model="dialogForm.gkbq" multiple placeholder="请选择标签">
|
||||
<el-option v-for="item in D_ZDRGK_GKBQ" :key="item" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="等级" prop="gkdj" >
|
||||
<el-select v-model="dialogForm.gkdj" placeholder="请选择等级">
|
||||
<el-option
|
||||
v-for="item in D_ZDRGK_GKDJ"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="管控状态" prop="gkzt">
|
||||
<el-select v-model="dialogForm.gkzt" placeholder="请选择管控状态">
|
||||
<el-option
|
||||
v-for="item in D_ZDRGK_GKZT"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="所属责任区" prop="xfqid" @click.stop="modelValue = true" >
|
||||
<el-input v-model="dialogForm.xfqid" placeholder="请选择所属责任区" style="width: 100%" clearable readonly suffix-icon="ArrowDown" v-if="dialogForm.xfqList.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag @close.stop="handleClose(tag, 'zrq')" v-for="tag in dialogForm.xfqList" :key="tag.id" class="mx-1" closable :type="tag.type">
|
||||
{{ tag.xfqMc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="管控原因" style="width: 100%">
|
||||
<el-input placeholder="请填写管控原因" type="textarea" show-word-limit v-model="dialogForm.gkyy" />
|
||||
</el-form-item>
|
||||
<el-form-item label="处置方式" style="width: 100%">
|
||||
<el-radio-group v-model="dialogForm.czfs">
|
||||
<el-radio label="留置盘问"></el-radio>
|
||||
<el-radio label="核实后放行"></el-radio>
|
||||
<el-radio label="不处理"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<MOSTY.Upload v-model="dialogForm.fjdz" :limit="1"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 请选择责任区 -->
|
||||
<ZrxLoad v-model="modelValue" v-if="modelValue" :roleIds="dialogForm.xfqid" @choosedUsers="hanlderChooseZrq" />
|
||||
<!-- 轨迹 -->
|
||||
<Route ref="dialogRout" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import ZrxLoad from "./zrxLoad.vue";
|
||||
import Route from "./route.vue";
|
||||
const store = useStore();
|
||||
const modelValue = ref(false)
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB, D_ZDRGK_GKZT, D_ZDRGK_GKBQ, D_ZDRGK_GKDJ, D_ZDRGK_GKLX ,D_BZ_MZ} = proxy.$dict( "D_BZ_XB", "D_ZDRGK_GKZT", "D_ZDRGK_GKBQ", "D_ZDRGK_GKDJ", "D_ZDRGK_GKLX","D_BZ_MZ");
|
||||
const zdryDetail = ref({});
|
||||
const dialogRout = ref();
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageSize: 20,
|
||||
pageCurrent: 1,
|
||||
});
|
||||
const buttonLoading = ref(false);
|
||||
const dialogFormDefault = ref({});
|
||||
const dialogForm = ref({
|
||||
xfqid: [],
|
||||
xfqList: [],
|
||||
});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const zrqList = ref([]); //责任区数据
|
||||
const isUpdate = ref(false);
|
||||
const rules = reactive({
|
||||
xm:[{ required: true, message: '请填写姓名' ,trigger:'blur'}],
|
||||
xbdm:[{ required: true, message: '请选择性别',trigger:'change' }],
|
||||
mz:[{ required: true, message: '请选择民族' ,trigger:'blur'}],
|
||||
jzdz:[{ required: true, message: '请填写详细居住地' ,trigger:'blur'}],
|
||||
lxfs:[{ required: true, message: '请填写联系方式' ,trigger:'blur'}],
|
||||
jjlxr:[{ required: true, message: '请填写责任社区民警' ,trigger:'blur'}],
|
||||
jjlxrLxfs:[{ required: true, message: '责任社区民警电话' ,trigger:'change'}],
|
||||
gkdj:[{ required: true, message: '请选择等级' ,trigger:'change'}],
|
||||
gkzt:[{ required: true, message: '请选择管控状态' ,trigger:'change'}],
|
||||
xfqid:[{ required: true, message: '请选择所属责任区' ,trigger:'change'}],
|
||||
})
|
||||
onMounted(() => {
|
||||
dialogFormDefault.value = JSON.parse(JSON.stringify(dialogForm.value));
|
||||
tabHeightFn();
|
||||
_getXfqData();
|
||||
getListData();
|
||||
});
|
||||
|
||||
//编辑
|
||||
const update = (item) => {
|
||||
item.fjdz = [item.fjdz];
|
||||
dialogForm.value = item;
|
||||
dialogForm.value.xfqid = dialogForm.value.xfqList.map(v=>{return v.xfqId})
|
||||
dialogFormVisible.value = true;
|
||||
isUpdate.value = true;
|
||||
};
|
||||
|
||||
// 查看轨迹
|
||||
|
||||
const lookGj = (row) => {
|
||||
dialogRout.value.innit(row)
|
||||
}
|
||||
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
// listQuery.value.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode;
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/tbJcglZdrgk/queryList").then((res) => {
|
||||
if (!res) return false;
|
||||
for (let i = 0; i < res.records.length; i++) {
|
||||
res.records[i].gkbq = res.records[i].gkbq.split(",");
|
||||
}
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
//获取巡防区并绘制
|
||||
const _getXfqData = () => {
|
||||
let data = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
ssbmdm: JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
|
||||
};
|
||||
qcckGet(data, "/mosty-jmxf/tbJcglXfqy/queryList").then((res) => {
|
||||
zrqList.value = res.records || [];
|
||||
});
|
||||
};
|
||||
|
||||
// 处理删除tag
|
||||
function handleClose(tag, type) {
|
||||
dialogForm.value.xfqList.splice(dialogForm.value.xfqList.indexOf(tag), 1);
|
||||
dialogForm.value.xfqid.splice(dialogForm.value.xfqid.indexOf(tag.id), 1);
|
||||
}
|
||||
const reset = () => {
|
||||
tableData.value = [];
|
||||
dialogForm.value = {};
|
||||
listQuery.value = { pageSize: 20, pageCurrent: 1, gkbq: "", gkzt: "" };
|
||||
getListData();
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.gkjssj = listQuery.value.gkkssj;
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//选择
|
||||
function hanlderChooseZrq(arr) {
|
||||
dialogForm.value.xfqid = arr.map((v) => { return v.id; });
|
||||
dialogForm.value.xfqList = arr.map(item=>{return {xfqId:item.id ,xfqMc:item.xfqMc}})
|
||||
}
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (!valid) return ElMessage.error("请填写完必填项!");
|
||||
buttonLoading.value = true;
|
||||
dialogForm.value.gkbq = dialogForm.value.gkbq.join(",");
|
||||
if (dialogForm.value.fjdz instanceof Array) dialogForm.value.fjdz = dialogForm.value.fjdz.join(",");
|
||||
qcckPost(dialogForm.value, "/mosty-jmxf/tbJcglZdrgk/updateZdr").then((res) => {
|
||||
ElMessage.success("修改成功");
|
||||
dialogFormVisible.value = false;
|
||||
buttonLoading.value = false;
|
||||
isUpdate.value = false;
|
||||
closeDialog();
|
||||
handleFilter();
|
||||
}).catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
const editRef = ref(null);
|
||||
//新增
|
||||
const onAdd = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (!valid) return ElMessage.error("请填写完必填项!");
|
||||
buttonLoading.value = true;
|
||||
let params = { ...dialogForm.value }
|
||||
params.xfqid = params.xfqid ? params.xfqid.join(',') :'';
|
||||
params.gkbq = params.gkbq ? params.gkbq.join(",") : ''
|
||||
params.fjdz = params.fjdz ? params.fjdz.join(",") : ''
|
||||
params.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
|
||||
qcckPost(params, "/mosty-jmxf/tbJcglZdrgk/saveZdr").then((res) => {
|
||||
ElMessage.success("新增成功");
|
||||
buttonLoading.value = false;
|
||||
dialogFormVisible.value = false;
|
||||
closeDialog();
|
||||
handleFilter();
|
||||
}).catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delDictItem = (row) => {
|
||||
qcckPost([row.id], "/mosty-jmxf/tbJcglZdrgk/deleteBatch").then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
reset();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogFormVisible.value = false;
|
||||
isUpdate.value = false;
|
||||
dialogForm.value = JSON.parse(JSON.stringify(dialogFormDefault.value));
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
<style >
|
||||
.el-input-group__prepend {
|
||||
background-color: #062a48;
|
||||
border: 1px solid #114260;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
.user-manage-container {
|
||||
.table-header-wrap {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
::v-deep .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.twoLine {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-flow: wrap;
|
||||
|
||||
.el-form-item {
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.zdy_tag {
|
||||
color: #999;
|
||||
border: 1px solid #999;
|
||||
display: inline-block;
|
||||
padding: 0px 10px;
|
||||
border-radius: 3px;
|
||||
line-height: 22px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.active_tag {
|
||||
color: #fff;
|
||||
border: 1px solid #409eff;
|
||||
background: #409eff;
|
||||
}
|
||||
.rybq_box {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">轨迹查看</span>
|
||||
<div>
|
||||
<el-button size="small" @click="dialogForm = false,dataList=[]">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gjMapBox">
|
||||
<div class="left">
|
||||
<el-form :model="dataForm" class="routeForm" label-width="150px" label-position="top">
|
||||
<el-form-item prop="yjRysfzh" label="预警人身份证">
|
||||
<el-input readonly v-model="dataForm.yjRysfzh"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="中心点-半径">
|
||||
<div class="jwdBox">
|
||||
<el-input readonly v-model="dataForm.jd"/>
|
||||
<el-input readonly v-model="dataForm.wd"/>
|
||||
<el-input readonly v-model="dataForm.radius"/>
|
||||
<el-button type="info" @click="selectLoop">圈选</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="timeRange" label="预警时间">
|
||||
<el-date-picker
|
||||
v-model="dataForm.timeRange"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="handleTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="foorbTN">
|
||||
<el-button @click="getDateList">搜索</el-button>
|
||||
<el-button @click="resetRoute">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<ul class="tableBox noScollLine" v-loading="loading">
|
||||
<li class="tableBoxItem" v-for="item in dataList" :key="item.id">
|
||||
<YjItem :data="item" />
|
||||
</li>
|
||||
<el-empty description="暂无数据" :image-size="0.1" v-if="!loading && dataList.length <= 0"/>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<GdMap/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import YjItem from "@/views/homeMy/components/yjItem.vue";
|
||||
import { getYjPointList } from "@/api/dpApi/home.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ref,onMounted , defineExpose} from 'vue';
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const loading = ref(false)
|
||||
const dataForm = ref({})
|
||||
const dataList = ref([])
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if(res.type == 'circle'){
|
||||
dataForm.value.jd = res.data.centerPoint[0];
|
||||
dataForm.value.wd = res.data.centerPoint[1];
|
||||
dataForm.value.radius = Number(res.data.radius)*1000;
|
||||
emitter.emit("addPointArea", { coords: [{jd:res.data.centerPoint[0],wd:res.data.centerPoint[1]}], icon: require("@/assets/point/zsdw.png"), flag: "centerpoint"});
|
||||
getDateList()
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const innit = (row) =>{
|
||||
dialogForm.value = true;
|
||||
dataForm.value = {yjRysfzh:row.sfzh}
|
||||
getDateList()
|
||||
}
|
||||
|
||||
|
||||
// 重置
|
||||
const resetRoute = () =>{
|
||||
dataForm.value = {yjRysfzh:dataForm.value.yjRysfzh}
|
||||
emitter.emit("removePlot", 'quan');
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
getDateList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取列表
|
||||
const getDateList = () =>{
|
||||
loading.value = true;
|
||||
emitter.emit("deletePointArea", 'yjHt');
|
||||
let data = { ...dataForm.value}
|
||||
for (let key in data){
|
||||
if(!data[key] || key == 'timeRange') delete data[key];
|
||||
}
|
||||
getYjPointList(data).then((res) => {
|
||||
loading.value = false;
|
||||
dataList.value = res || [];
|
||||
let zt = dataList.value.filter(v =>{ return v.yjbq == '在逃'})
|
||||
let ztIcon = require("@/assets/point/yj.png")
|
||||
handlePoint(zt,ztIcon,'yjHt')
|
||||
let qc = dataList.value.filter(v =>{ return v.yjbq == '侵财'})
|
||||
let qcIcon = require("@/assets/point/yj1.png")
|
||||
handlePoint(qc,qcIcon,'yjHt')
|
||||
let qt = dataList.value.filter(v =>{ return v.yjbq != '侵财' && v.yjbq != '在逃'})
|
||||
let qtIcon = require("@/assets/point/yj2.png")
|
||||
handlePoint(qt,qtIcon,'yjHt')
|
||||
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 处理撒点
|
||||
function handlePoint(arr,icon,flag,scale,fontColor){
|
||||
let list = arr.filter((item) => {
|
||||
item.identification = flag;
|
||||
return item.jd && item.wd;
|
||||
});
|
||||
if(list.length > 0) emitter.emit("addPoint", { coords: list, icon: icon, flag: flag ,scale,fontColor });
|
||||
}
|
||||
|
||||
|
||||
// 时间处理
|
||||
const handleTime = (val) =>{
|
||||
dataForm.value.startTime = val ? val[0] :''
|
||||
dataForm.value.endTime = val ? val[1] :''
|
||||
}
|
||||
|
||||
//地图圈选
|
||||
function selectLoop() {
|
||||
emitter.emit("deletePointArea", 'yuan');
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
emitter.emit("drawShape", { flag: "quan" ,type:'circle',isclear:true});
|
||||
}
|
||||
|
||||
|
||||
defineExpose({innit})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gjMapBox{
|
||||
display:flex;
|
||||
width:100%;
|
||||
height:calc(100% - 48px);
|
||||
.left{
|
||||
width:400px;
|
||||
height:100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tableBox{
|
||||
width:400px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y:auto;
|
||||
margin-right:2px;
|
||||
}
|
||||
.right{
|
||||
flex:1
|
||||
}
|
||||
|
||||
}
|
||||
.routeForm{
|
||||
width: 100%;
|
||||
}
|
||||
.jwdBox{
|
||||
display: flex;
|
||||
}
|
||||
.foorbTN{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog .routeForm .el-form-item--default{
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,224 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="选择所属责任区"
|
||||
width="1400px"
|
||||
v-model="modelValue"
|
||||
:append-to-body="true"
|
||||
@close="closed"
|
||||
>
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="巡防区域名称">
|
||||
<el-input
|
||||
v-model="listQuery.xfqMc"
|
||||
placeholder="巡防区域名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
/>
|
||||
</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
|
||||
ref="multipleUserRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
:row-key="keyid"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfqMc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="巡防区名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfqFzr"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="分责人"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfqFzrId"
|
||||
label="警号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ssbm"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" >
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
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 { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import { getTbJcglXfll } from "@/api/xfll";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},// 回显
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const form = ref({});
|
||||
const tableData = ref([]);
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
onMounted(()=>{
|
||||
handleFilter();
|
||||
})
|
||||
|
||||
// 分页
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
qcckGet(params, "/mosty-jmxf/tbJcglXfqy/queryList").then((res) => {
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser()
|
||||
});
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach(item=>{
|
||||
if(props.roleIds.some(id=>id == item.id)){
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
})
|
||||
}
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "02" };
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 为用户分配角色
|
||||
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("choosedUsers", list);
|
||||
closed();
|
||||
};
|
||||
// pageSize 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防辅警</div>
|
||||
<div class="btnBox">
|
||||
<!-- <el-button type="primary" @click="isShowPolice = false">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">分组管理</span>
|
||||
</el-button> -->
|
||||
|
||||
<el-button type="primary" @click="isShowPolice = true" v-if="!isShowPolice">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">返回</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="addPolice">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增 </span>
|
||||
</el-button>
|
||||
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="info" v-if="isShowPolice" plain icon="Upload" @click="isImport = true">
|
||||
<span style="vertical-align: middle">导入</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<PoliceF v-if="isShowPolice" ref="policeComponnet" @deleteMore="deleteMore" />
|
||||
<PoliceGroup ref="groupComponnet" v-else @deleteMore="deleteMore" />
|
||||
</div>
|
||||
|
||||
<!-- 导入 -->
|
||||
<Export :show="isImport" lx="policeF" @closeImport="isImport = false" @handleImport="handleImport" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Export from "@/components/export/index.vue";
|
||||
import PoliceF from "./policeF.vue";
|
||||
import PoliceGroup from "./policeGroup.vue";
|
||||
import { nextTick, ref } from "vue";
|
||||
const ids = ref([]);
|
||||
const policeComponnet = ref(null);
|
||||
const groupComponnet = ref(null);
|
||||
const isShowPolice = ref(true);
|
||||
const isImport = ref(false);
|
||||
// 新增
|
||||
function addPolice() {
|
||||
if (isShowPolice.value) {
|
||||
policeComponnet.value.add();
|
||||
} else {
|
||||
groupComponnet.value.init();
|
||||
}
|
||||
}
|
||||
function deleteMore(val) {
|
||||
ids.value = val;
|
||||
}
|
||||
// 批量删除
|
||||
function batchDelete() {
|
||||
if (isShowPolice.value) {
|
||||
policeComponnet.value.batchDelete();
|
||||
} else {
|
||||
groupComponnet.value.batchDelete();
|
||||
}
|
||||
}
|
||||
|
||||
// 确定上传
|
||||
function handleImport(val) {
|
||||
policeComponnet.value.handleFilter();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,357 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="分组名称">
|
||||
<el-input v-model="form.jzmc" placeholder="请输入姓名" clearable />
|
||||
</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>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
ref="dataTreeList"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center" width="80" />
|
||||
<el-table-column
|
||||
prop="jzmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="200"
|
||||
label="分组名称"
|
||||
/>
|
||||
<el-table-column label="分组成员" prop="jzry">
|
||||
<template #default="{ row }">
|
||||
<span class="xmTag" v-for="item in row.jzry" :key="item.id">{{
|
||||
item.xm
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="150px"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="onClickUpdate(row.id)" size="small"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="form.pageCurrent"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="openDialog" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
:loading="loading"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="openDialog = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="addForm"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="分组名称" prop="jzmc">
|
||||
<el-input
|
||||
v-model="addForm.jzmc"
|
||||
placeholder="请输入分组名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分组成员" prop="jzry" style="width: 100%">
|
||||
<div class="ipt" @click.stop="fjVisible = true">
|
||||
<el-tag
|
||||
v-for="tag in fjData"
|
||||
:key="tag.id"
|
||||
class="mx-1"
|
||||
closable
|
||||
:type="tag.type"
|
||||
@close="handleClosefj(tag)"
|
||||
>
|
||||
{{ tag.xm }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 辅警弹唱 -->
|
||||
<FjLoad
|
||||
v-model="fjVisible"
|
||||
:Single="false"
|
||||
@choosedUsers="hanlderChooseFj"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet, qcckPut } from "@/api/qcckApi.js";
|
||||
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
computed,
|
||||
defineExpose,
|
||||
defineEmits,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const emit = defineEmits(["deleteMore"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
//筛选条件参数
|
||||
const formDefault = ref({});
|
||||
const form = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表单数据
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const loadingTable = ref(false);
|
||||
const title = ref("新增分组");
|
||||
const openDialog = ref(false); //打开弹窗
|
||||
const total = ref(0); //总数据
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //按钮是否显示加载
|
||||
const ids = ref([]); //批量删除的ID
|
||||
//新增表单参数
|
||||
const elform = ref(null); //表单对象
|
||||
const addFormDefault = ref({});
|
||||
const addForm = ref({});
|
||||
//新增表单验证数据
|
||||
const rules = reactive({
|
||||
jzmc: [{ required: true, message: "请输入分组名称", trigger: "blur" }]
|
||||
});
|
||||
const fjData = ref([]); //选择的辅警数据
|
||||
const fjVisible = ref(false); //辅警弹窗
|
||||
|
||||
onMounted(() => {
|
||||
addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
|
||||
formDefault.value = JSON.parse(JSON.stringify(form.value));
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
handleFilter(); //查询数据
|
||||
});
|
||||
|
||||
function init() {
|
||||
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
|
||||
openDialog.value = true;
|
||||
}
|
||||
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
qcckGet(form.value, "/mosty-jmxf/tbJcglXfllFz")
|
||||
.then((res) => {
|
||||
loadingTable.value = false;
|
||||
res.records.forEach((element) => {
|
||||
element.jzry = JSON.parse(element.jzry);
|
||||
});
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
})
|
||||
.catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
//选择辅警
|
||||
function hanlderChooseFj(arr) {
|
||||
fjData.value = arr;
|
||||
addForm.value.jzry = JSON.stringify(fjData.value);
|
||||
}
|
||||
|
||||
// 删除辅警
|
||||
function handleClosefj(tag) {
|
||||
fjData.value.splice(fjData.value.indexOf(tag), 1);
|
||||
addForm.value.jzry = JSON.stringify(fjData.value);
|
||||
}
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = val.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
emit("deleteMore", ids.value);
|
||||
};
|
||||
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.pageSize = e;
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
form.value.pageCurrent = e;
|
||||
getListData();
|
||||
}
|
||||
|
||||
//新增提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
if (title.value == "编辑分组") {
|
||||
qcckPut(addForm.value, "/mosty-jmxf/tbJcglXfllFz")
|
||||
.then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
openDialog.value = false;
|
||||
loading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
addForm.value.jzry = JSON.stringify(fjData.value);
|
||||
qcckPost(addForm.value, "/mosty-jmxf/tbJcglXfllFz")
|
||||
.then((res) => {
|
||||
ElMessage({ message: "添加成功", type: "success" });
|
||||
openDialog.value = false;
|
||||
loading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//重置搜索
|
||||
function reset() {
|
||||
form.value = JSON.parse(JSON.stringify(formDefault.value));
|
||||
getListData();
|
||||
}
|
||||
|
||||
//点击修改打开弹窗
|
||||
function onClickUpdate(id) {
|
||||
title.value = "编辑分组";
|
||||
qcckGet({}, "/mosty-jmxf/tbJcglXfllFz/" + id).then((res) => {
|
||||
addForm.value = res;
|
||||
fjData.value = JSON.parse(res.jzry);
|
||||
openDialog.value = true;
|
||||
});
|
||||
}
|
||||
//删除人员
|
||||
function delDictItem(e) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deletEate(e.id);
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deletEate(ids.value);
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
function deletEate(data) {
|
||||
qcckPost(data, "/mosty-jmxf/tbJcglXfllFz/deleteList").then((res) => {
|
||||
ElMessage({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
batchDelete,
|
||||
init
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.xmTag {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
padding: 1px 6px;
|
||||
margin: 0 4px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div class="patrol-line-dialog">
|
||||
<el-dialog v-model="isShow" :title="title" width="800px" :show-close="true" :center="true"
|
||||
:before-close="handleClose">
|
||||
<div class="uplodBox">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
|
||||
<el-form-item prop="xm" label="姓名">
|
||||
<el-input v-model="formData.xm" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="lxdh" label="联系电话">
|
||||
<el-input v-model="formData.lxdh" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zjhm" label="身份证号">
|
||||
<el-input v-model="formData.zjhm" placeholder="请输入身份证号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jzdz" label="居住地址">
|
||||
<el-input v-model="formData.jzdz" placeholder="请输入居住地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="wpdw" label="外派单位">
|
||||
<el-input v-model="formData.wpdw" placeholder="请输入外派单位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="csmc" label="场所名称">
|
||||
<el-input v-model="formData.csmc" placeholder="请输入场所名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="csdm" label="场所代码">
|
||||
<el-input v-model="formData.csdm" placeholder="请输入场所代码"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="foot tc">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { reactive, ref } from "vue";
|
||||
const emit = defineEmits(['refresh'])
|
||||
const isShow = ref(false);
|
||||
const formData = ref({});
|
||||
const title = ref('')
|
||||
const rules = reactive({
|
||||
jzdz: [{ required: true, message: "请输入居住地址", trigger: "blur" }],
|
||||
wpdw: [{ required: true, message: "请输入外派单位", trigger: "blur" }],
|
||||
xm: [{ required: true, message: "请输入姓名", trigger: "blur"}],
|
||||
...rule.phoneRule({ validator: true,message: "请输入联系电话",require: true }, "lxdh"), // 是否必填 是否进行校验`
|
||||
...rule.identityCardRule({ validator: true,message: "请输入身份证号" ,require: true}, "zjhm"), // 是否必填 是否进行校验
|
||||
|
||||
});
|
||||
const loading = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
// 关闭弹窗
|
||||
function handleClose() {
|
||||
isShow.value = false;
|
||||
formData.value = {};
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 提交
|
||||
function onComfirm (){
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
let params = { ...formData.value }
|
||||
let url = title.value == '新增' ? '/mosty-jmxf/tbbary/add' : '/mosty-jmxf/tbbary/update';
|
||||
qcckPost(params, url).then((res) => {
|
||||
ElMessage({ message: "保存成功", type: "success", });
|
||||
loading.value = false;
|
||||
emit('refresh')
|
||||
handleClose();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const init = (type,row) => {
|
||||
title.value = type == 'add' ? '新增' : '编辑';
|
||||
isShow.value = true;
|
||||
if(row){
|
||||
qcckGet({id:row.id},'/mosty-jmxf/tbbary/selectByid').then((res) => {
|
||||
formData.value = res;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({init})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tagBox {
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 2px 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.txet {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.patrol-line-dialog {
|
||||
.el-date-editor .el-range-separator {
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="保安人员" />
|
||||
<el-button type="primary" @click="addEdit('add', null)">新增</el-button>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #gw="{ row }">
|
||||
<dict-tag :options="D_BAXX_GWLX" :value="row.gw" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="handleDelete(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 新增编辑 -->
|
||||
<AddDialog ref="addEditDialog" @refresh="getList"></AddDialog>
|
||||
|
||||
</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 AddDialog from "./components/addDialog.vue";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BAXX_GWLX } = proxy.$dict("D_BAXX_GWLX");
|
||||
const addEditDialog = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "sfzh",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:false,
|
||||
},
|
||||
haveControls: false,
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 180,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "联系电话", prop: "lxdh" },
|
||||
{ label: "证件号码", prop: "sfzh" },
|
||||
{ label: "场所名称", prop: "csmc" },
|
||||
{ label: "岗位", prop: "gw", showSolt: true },
|
||||
{ label: "入职时间", prop: "rzsj" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
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 = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jmxf/tbbary/cyryPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
addEditDialog.value.init(type, row);
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (id) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => {
|
||||
qcckPost({ id }, "/mosty-jmxf/tbbary/delete").then((res) => {
|
||||
proxy.$message({ type: "success", message: "删除成功!" });
|
||||
getList();
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 下发
|
||||
const handleXfrw = (row) => {
|
||||
addEditDialog.value.init(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>
|
||||
@ -1,569 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">经验管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addLoad">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="batchDelete"
|
||||
:disabled="ids.length == 0"
|
||||
typeof="danger"
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量注销</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="经验名称">
|
||||
<el-input
|
||||
v-model="form.bqmc"
|
||||
placeholder="请输入经验名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</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>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bqbh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="150px"
|
||||
label="经验编号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bqmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="350px"
|
||||
label="经验名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable label="经验人员" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="textBtn" @click="info(row)">{{ row.xfllSl }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150" label="数据状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" type="success" v-if="row.xtSjzt != 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else>注销</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="mxId" show-overflow-tooltip label="计算模型" align="center" width="200px">
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="200px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button size="small" @click="setInfo(row.id)">详情</el-button> -->
|
||||
<el-button @click="update(row.id)" size="small" v-if="row.xtSjzt != 0">修改</el-button>
|
||||
<el-button @click="delDictItem(row.id)" v-if="row.xtSjzt != 0" type="danger" size="small"
|
||||
>注销</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="form.pageCurrent"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ diaTitle }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
v-if="!isDisabled"
|
||||
:loading="loading"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="dialogFormVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
:model="addForm"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="经验编号" prop="bqbh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="addForm.bqbh"
|
||||
placeholder="请输入经验编号"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经验名称" prop="bqmc">
|
||||
<el-input
|
||||
v-model="addForm.bqmc"
|
||||
:readonly="disable"
|
||||
placeholder="请输入经验名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="width: 100%" v-if="xfllActive">
|
||||
<el-tabs
|
||||
style="width: 100%"
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="民警" name="mj"></el-tab-pane>
|
||||
<el-tab-pane label="辅警" name="fj"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-table
|
||||
:data="xfllDtata"
|
||||
border
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
height="400px"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
:label="activeName == 'mj' ? '民警姓名' : '辅警姓名'"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sfzh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="身份证号码"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ssbm"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jh"
|
||||
label="警号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChangexf"
|
||||
@current-change="handleCurrentChangexf"
|
||||
:current-page="xfllQuery.current"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="xfllQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="xfllTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getTbJcglBq,
|
||||
addTbJcglBq,
|
||||
putTbJcglBq,
|
||||
infoTbJcglBq,
|
||||
delTbJcglBq,
|
||||
deleteTbJcglBq
|
||||
} from "@/api/basicsmanage/experience";
|
||||
import { getTbJcglXfll } from "@/api/xfll";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const xfllActive = ref(false);
|
||||
const ids = ref([]); //批量注销的ID
|
||||
const activeName = ref("mj");
|
||||
//巡防力量数据
|
||||
const xfllDtata = ref([]);
|
||||
//巡防力量查询参数
|
||||
const xfllQuery = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
fl: "01"
|
||||
});
|
||||
const xfllTotal = ref(0);
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否显示新增弹窗
|
||||
const elform = ref({}); //表单对象
|
||||
const loadingTable = ref(true);
|
||||
const chackadd = ref(true); //切换新增修改
|
||||
const disable = ref(false);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const diaTitle = ref("新增经验管理");
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //按钮是否显示加载
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
//赛选条件参数
|
||||
const form = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({
|
||||
id: "",
|
||||
bqbh: "",
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
});
|
||||
|
||||
function addLoad() {
|
||||
xfllActive.value = false;
|
||||
addForm.value = {
|
||||
bqbh: "JY" + repairZero(total.value + 1),
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
};
|
||||
isDisabled.value = false;
|
||||
disable.value = false;
|
||||
chackadd.value = true;
|
||||
diaTitle.value = "新增经验管理";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bqmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经验名称"
|
||||
}
|
||||
]
|
||||
// mxId: [
|
||||
// {
|
||||
// required: true
|
||||
// }
|
||||
// ]
|
||||
});
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量注销数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "注销成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getListData();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
//补0函数
|
||||
function repairZero(num) {
|
||||
let data = num;
|
||||
if (1 <= num < 10) {
|
||||
data = "000" + num;
|
||||
} else if (10 <= num < 100) {
|
||||
data = "00" + num;
|
||||
} else if (100 <= num < 1000) {
|
||||
data = "0" + num;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
//获取巡防力量数据
|
||||
function getXfll() {
|
||||
let data = {
|
||||
fl: xfllQuery.value.fl,
|
||||
pageSize: xfllQuery.value.size,
|
||||
pageCurrent: xfllQuery.value.current,
|
||||
bqId: xfllQuery.value.bqId || ""
|
||||
};
|
||||
getTbJcglXfll(data).then((res) => {
|
||||
xfllDtata.value = res.records;
|
||||
xfllTotal.value = res.total;
|
||||
});
|
||||
}
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.pageSize = e;
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
function handleClick() {
|
||||
if (activeName.value == "mj") {
|
||||
xfllQuery.value.fl = "01";
|
||||
getXfll();
|
||||
} else {
|
||||
xfllQuery.value.fl = "02";
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
form.value.pageCurrent = e;
|
||||
getListData();
|
||||
}
|
||||
//查看详情
|
||||
function setInfo(id) {
|
||||
infoTbJcglBq(id).then((res) => {
|
||||
disable.value = true;
|
||||
diaTitle.value = res.bqmc + "经验详情";
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
isDisabled.value = true;
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(id) {
|
||||
infoTbJcglBq(id).then((res) => {
|
||||
disable.value = false;
|
||||
isDisabled.value = false;
|
||||
chackadd.value = false;
|
||||
diaTitle.value = res.bqmc + "经验修改";
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (e.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
function info(row) {
|
||||
infoTbJcglBq(row.id).then((res) => {
|
||||
disable.value = false;
|
||||
isDisabled.value = false;
|
||||
chackadd.value = false;
|
||||
diaTitle.value = res.bqmc + "经验修改";
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (row.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = row.id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//新增提交
|
||||
function submit() {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1.5e3);
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = addForm.value;
|
||||
if (!chackadd.value) {
|
||||
putTbJcglBq(data).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
addTbJcglBq(data).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(id) {
|
||||
// 删除数据用
|
||||
// delTbJcglBq(id).then((res) => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq([id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "注销成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//更改查询条数xfll
|
||||
function handleSizeChangexf(e) {
|
||||
activeName.size = e;
|
||||
xfllQuery.value.current = 1;
|
||||
getXfll();
|
||||
}
|
||||
//分页查询xfll
|
||||
function handleCurrentChangexf(e) {
|
||||
xfllQuery.value.current = e;
|
||||
getListData();
|
||||
getXfll();
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
const params = form.value;
|
||||
getTbJcglBq(params).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//重置查询条件
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
::v-deep .el-tabs--card > .el-tabs__header {
|
||||
border-bottom: 1px solid #03438b;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #03438b;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border: 1px solid #03438b;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
|
||||
border-left: 1px solid #234c9e;
|
||||
}
|
||||
.textBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.textBtn:hover {
|
||||
color: #2a5dc2;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,460 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 详情列表 -->
|
||||
<el-dialog
|
||||
title="人员档案管理"
|
||||
width="1400px"
|
||||
:model-value="peopleValue"
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="true"
|
||||
@close="closed"
|
||||
>
|
||||
<div class="cntBox">
|
||||
<div class="cntbox-title one-border">{{dataValue.xm }}个人综合档案</div>
|
||||
<div class="cntInfo">
|
||||
<div class="left">
|
||||
<div class="img">
|
||||
<img src="@\assets\images\default_male.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="right">
|
||||
<li class="rightItem">
|
||||
<div class="text">姓名</div>
|
||||
<div class="info">{{ dataValue.xm }}</div>
|
||||
<div class="text">性别</div>
|
||||
<div class="info">{{ dataValue.xbmc }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">身份证号</div>
|
||||
<div class="info">{{ dataValue.sfzh }}</div>
|
||||
<div class="text">年领</div>
|
||||
<div class="info">{{ dataValue.age }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">联系电话</div>
|
||||
<div class="info">{{ dataValue.lxdh }}</div>
|
||||
<div class="text">警号</div>
|
||||
<div class="info">{{ dataValue.jh }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">所属单位</div>
|
||||
<div class="info">{{ dataValue.ssbm }}</div>
|
||||
<div class="text">家庭地址</div>
|
||||
<div class="info">{{ dataValue.ssbm }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">入职时间</div>
|
||||
<div class="info"></div>
|
||||
<div class="text">籍贯</div>
|
||||
<div class="info">{{ dataValue.jgdm }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">民族</div>
|
||||
<div class="info">{{ dataValue.mzmc }}</div>
|
||||
<div class="text">学历</div>
|
||||
<div class="info"></div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">婚姻状况</div>
|
||||
<div class="info"></div>
|
||||
<div class="text">政治面貌</div>
|
||||
<div class="info"></div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">特殊技能</div>
|
||||
<div class="infoText"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cntbox-title two-border">训练档案</div>
|
||||
<div class="buns">
|
||||
<el-button @click="add_edit('', 'add')">新增</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
width="100%"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column label="训练日期" prop="xlrq" align="center" />
|
||||
<el-table-column label="训练类型" prop="xllx" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="props.D_BZ_XFXLLX"
|
||||
:value="row.xllx"
|
||||
:tag="false"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="训练时长(H)" prop="xlsc" align="center" />
|
||||
<el-table-column label="训练层级" prop="xlcj" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="props.D_BZ_XLCJ"
|
||||
:value="row.xlcj"
|
||||
:tag="false"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="bz" align="center" />
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="add_edit(row, 'edit')" size="small"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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>
|
||||
<!-- 添加-编辑- 训练记录 -->
|
||||
<el-dialog
|
||||
:title="titleValue"
|
||||
width="400px"
|
||||
:model-value="recordsValue"
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="addForm"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="right"
|
||||
:label-width="120"
|
||||
>
|
||||
<el-form-item label="训练日期" prop="xlrq">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="addForm.xlrq"
|
||||
unlink-panels
|
||||
placeholder="请选择"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="训练时长(h)" prop="xlsc">
|
||||
<el-input
|
||||
v-model="addForm.xlsc"
|
||||
placeholder="请输入训练时长(h)"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="训练类型 " prop="xllx">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="addForm.xllx"
|
||||
placeholder="请选择训练类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in D_BZ_XFXLLX"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="训练层级" prop="xlcj">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="addForm.xlcj"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in D_BZ_XLCJ"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeAdd">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="submit"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
reactive,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
|
||||
import {tbJcglXfAdd,tbJcglSelectPage,tbJcglDelete,tbJcglEdit} from '@/api/xfll.js'
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
D_BZ_XB: Array,
|
||||
D_BZ_MZ: Array,
|
||||
D_BZ_XLCJ: Array,
|
||||
D_BZ_XFXLLX: Array
|
||||
});
|
||||
const peopleValue = ref(false);
|
||||
const recordsValue = ref(false); //新增
|
||||
const dataValue = ref({});
|
||||
const elform = ref(null); //表单对象
|
||||
const loading = ref(false);
|
||||
const titleValue = ref("");
|
||||
const addFormDefault = ref({});
|
||||
const addForm = ref({
|
||||
xlrq: "",
|
||||
xlsc: "",
|
||||
xllx: "",
|
||||
xlcj: ""
|
||||
}); //训练档案表单
|
||||
const tableData = ref([]); //训练档案
|
||||
const rules = reactive({
|
||||
xlrq: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择训练日期"
|
||||
}
|
||||
],
|
||||
xlsc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入训练时长(h)"
|
||||
}
|
||||
],
|
||||
xllx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择训练类型"
|
||||
}
|
||||
],
|
||||
xlcj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择训练层级"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
|
||||
});
|
||||
|
||||
// 初始化
|
||||
function init(row) {
|
||||
peopleValue.value = true;
|
||||
row.age = IdCard(row.sfzh, 3);
|
||||
let sex = props.D_BZ_XB.find((v) => {
|
||||
return v.value == row.xbdm;
|
||||
});
|
||||
row.xbmc = sex ? sex.label : "";
|
||||
let origin = props.D_BZ_MZ.find((v) => {
|
||||
return v.value == row.mzdm;
|
||||
});
|
||||
row.mzmc = origin ? origin.label : "";
|
||||
dataValue.value = row;
|
||||
getDetail(dataValue.value.id);
|
||||
}
|
||||
|
||||
// 查询记录数据
|
||||
function getDetail(id) {
|
||||
tbJcglSelectPage({ ryid: id }).then((res) => {
|
||||
tableData.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
// 新增-编辑
|
||||
function add_edit(row, type) {
|
||||
recordsValue.value = true;
|
||||
if (type == "add") {
|
||||
titleValue.value = "新增";
|
||||
} else {
|
||||
titleValue.value = "编辑";
|
||||
addForm.value = Object.assign(row);
|
||||
}
|
||||
}
|
||||
|
||||
//新增提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
let params = {
|
||||
...addForm.value,
|
||||
ryid: dataValue.value.id
|
||||
};
|
||||
if (titleValue.value == "新增") {
|
||||
tbJcglXfAdd(params)
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
closeAdd();
|
||||
getDetail(dataValue.value.id);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (titleValue.value == "编辑") {
|
||||
tbJcglEdit(addForm.value)
|
||||
.then((res) => {
|
||||
ElMessage({ message: "编辑成功", type: "success" });
|
||||
closeAdd();
|
||||
getDetail(dataValue.value.id);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭新增弹窗
|
||||
function closeAdd() {
|
||||
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
|
||||
recordsValue.value = false;
|
||||
}
|
||||
|
||||
//删除人员
|
||||
function delDictItem(id) {
|
||||
let ids = [id];
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
tbJcglDelete(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
getDetail(dataValue.value.id);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closed() {
|
||||
peopleValue.value = false;
|
||||
dataValue.value = {};
|
||||
}
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin boderLine() {
|
||||
border: 1px solid #136bff;
|
||||
}
|
||||
.cntBox {
|
||||
width: 100%;
|
||||
height: 64vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
color: #fff;
|
||||
.cntbox-title {
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.one-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
.two-border {
|
||||
@include boderLine;
|
||||
border-top: none;
|
||||
}
|
||||
.cntInfo {
|
||||
display: flex;
|
||||
.left {
|
||||
width: 400px;
|
||||
@include boderLine;
|
||||
border-right: none;
|
||||
position: relative;
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 180px;
|
||||
height: 220px;
|
||||
background: #ccc;
|
||||
img {
|
||||
width: 180px;
|
||||
max-height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin boderc() {
|
||||
min-height: 40px;
|
||||
line-height: 26px;
|
||||
color: rgb(27, 189, 238);
|
||||
border-right: 1px solid #136bff;
|
||||
border-left: 1px solid #136bff;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
.rightItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include boderLine;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
div {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.text {
|
||||
width: 200px;
|
||||
color: #000;
|
||||
}
|
||||
.info {
|
||||
width: calc((100% - 400px) / 2);
|
||||
@include boderc;
|
||||
}
|
||||
.infoText {
|
||||
width: calc(100% - 200px);
|
||||
@include boderc;
|
||||
}
|
||||
}
|
||||
.rightItem:last-child {
|
||||
border-bottom: 1px solid #136bff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buns {
|
||||
text-align: right;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,305 +0,0 @@
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">群防群治人员</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.xm" placeholder="姓名" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border row-key="id" :tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%" :height="tableHeight" :key="keyCount"
|
||||
v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="xm" show-overflow-tooltip align="center" width="250px" label="姓名">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="sjh" show-overflow-tooltip align="center" width="350px" label="手机号码">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="sfzh" show-overflow-tooltip align="center" width="350px" label="人员身份证号">
|
||||
</el-table-column>
|
||||
<el-table-column label="人员类型" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="textBtn" v-if="row.rylx == '01'">群众</span>
|
||||
<span class="textBtn" v-if="row.rylx == '02'">党员</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="setInfo(row, 'edit')" size="small" >修改</el-button>
|
||||
<el-button @click="setInfo(row, 'detail')" size="small">详情</el-button>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" size="small">注销</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="form.current" :page-sizes="[10, 20, 50]" :page-size="form.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" v-if="!isDisabled" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close()">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="felform" :rules="rules" :model="addForm" :inline="true" :disabled="isDisabled" label-position="top">
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="addForm.xm" placeholder="请输入姓名" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人员类型" prop="rylx" >
|
||||
<el-select v-model="addForm.rylx" placeholder="请选择人员类型" clearable>
|
||||
<el-option label="群众" value="01"></el-option>
|
||||
<el-option label="党员" value="02"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="sjh">
|
||||
<el-input v-model="addForm.sjh" placeholder="请输入手机号码" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码" prop="sfzh">
|
||||
<el-input v-model="addForm.sfzh" placeholder="请输入身份证号码" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qfqzAdd, qfqzEdit,qfqzSelectPage,qfqzDelete } from '@/api/lz/backstage'
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const loadingTable = ref(true);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const title = ref("新增专业技能");
|
||||
|
||||
//查询参数
|
||||
const form = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
}
|
||||
],
|
||||
rylx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择人员类型"
|
||||
},
|
||||
],
|
||||
sjh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入手机号码"
|
||||
}
|
||||
],
|
||||
sfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号码"
|
||||
}
|
||||
],
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否打开新增弹窗
|
||||
const felform = ref({}); //表当对象
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //是否显示按钮加载
|
||||
const checkAdd = ref(false);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
|
||||
//查看详情
|
||||
function setInfo(e, type) {
|
||||
addForm.value = { ...e };
|
||||
dialogFormVisible.value = true;
|
||||
if (type == 'detail') {
|
||||
isDisabled.value = true;
|
||||
checkAdd.value =false
|
||||
title.value = "群防群治人员详情";
|
||||
} else {
|
||||
title.value = "修改群防群治人员";
|
||||
checkAdd.value =false
|
||||
isDisabled.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function add() {
|
||||
isDisabled.value = false;
|
||||
checkAdd.value = true;
|
||||
title.value = "新增群防群治人员";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//新增提交
|
||||
function submit() {
|
||||
loading.value = true;
|
||||
felform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = addForm.value;
|
||||
if (!checkAdd.value) {
|
||||
qfqzEdit(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "修改成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
qfqzAdd(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
let data = {
|
||||
pageSize: form.value.size,
|
||||
pageCurrent: form.value.current,
|
||||
xm: form.value.xm,
|
||||
};
|
||||
qfqzSelectPage(data)
|
||||
.then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//修改查询条件
|
||||
const delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qfqzDelete(id).then(() => {
|
||||
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
}) .catch(() => {console.log("报错");
|
||||
});
|
||||
})
|
||||
.catch((err) => {console.log(err);
|
||||
});
|
||||
}
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.size = e;
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
xfllQuery.value.current = e;
|
||||
}
|
||||
|
||||
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
textName: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const close = () => {
|
||||
|
||||
addForm.value = {};
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header {
|
||||
border-bottom: 1px solid #03438b;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #03438b;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
|
||||
border: 1px solid #03438b;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
|
||||
border-left: 1px solid #234c9e;
|
||||
}
|
||||
|
||||
.textBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.textBtn:hover {
|
||||
color: #2a5dc2;
|
||||
}
|
||||
</style> -->
|
||||
@ -1,444 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">专业技能管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量注销</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="技能名称">
|
||||
<el-input v-model="form.textName" placeholder="请输入技能名称" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border row-key="id" :tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%" @selection-change="handleSelectionChange" :height="tableHeight" :key="keyCount"
|
||||
v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="bqbh" show-overflow-tooltip align="center" width="250px" label="技能编号">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="bqmc" show-overflow-tooltip align="center" width="350px" label="技能名称">
|
||||
</el-table-column>
|
||||
<el-table-column label="技能人数" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="textBtn" @click="info(row)">{{ row.xfllSl }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150" label="数据状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" type="success" v-if="row.xtSjzt != 0">正常</el-tag>
|
||||
<el-tag size="small" type="danger" v-else>注销</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row, 'detail')" size="small">详情</el-button>
|
||||
<el-button @click="update(row, 'edit')" size="small" v-if="row.xtSjzt == 1">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" v-if="row.xtSjzt == 1" type="danger" size="small">注销</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="form.current" :page-sizes="[10, 20, 50]" :page-size="form.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" v-if="!isDisabled" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="dialogFormVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :rules="rules" :model="addForm" :inline="true" :disabled="isDisabled" label-position="top">
|
||||
<el-form-item label="技能编号" prop="bqbh">
|
||||
<el-input readonly v-model="addForm.bqbh" placeholder="请输入技能编号" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="技能名称" prop="bqmc">
|
||||
<el-input v-model="addForm.bqmc" placeholder="请输入技能名称" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<div style="width: 100%" v-if="xfllActive">
|
||||
<el-tabs style="width: 100%" v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="民警" name="mj"></el-tab-pane>
|
||||
<el-tab-pane label="辅警" name="fj"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-table :data="xfllDtata" border row-key="id" :tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%" height="400px" :key="keyCount">
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="xm" show-overflow-tooltip align="center"
|
||||
:label="activeName == 'mj' ? '民警姓名' : '辅警姓名'">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="sfzh" show-overflow-tooltip align="center" label="身份证号码">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="ssbm" label="所属部门" align="center"></el-table-column>
|
||||
<el-table-column sortable prop="jh" label="警号" align="center"></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination" @size-change="handleSizeChangexf" @current-change="handleCurrentChangexf"
|
||||
:current-page="xfllQuery.current" :page-sizes="[10, 20, 50]" :page-size="xfllQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="xfllTotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PEO from "@/assets/images/body-bg.png";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
getTbJcglBq,
|
||||
getTbJcglXfll,
|
||||
addTbJcglBq,
|
||||
deleteTbJcglBq,
|
||||
getTbJcglBqInfo,
|
||||
updateTbJcglBqInfo
|
||||
} from "@/api/xfll";
|
||||
import { delTbJcglBq } from "@/api/basicsmanage/experience";
|
||||
const xfllActive = ref(false);
|
||||
const activeName = ref("mj");
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const loadingTable = ref(true);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const ids = ref([]); //批量注销的ID
|
||||
const title = ref("新增专业技能");
|
||||
//巡防力量数据
|
||||
const xfllDtata = ref([]);
|
||||
//巡防力量查询参数
|
||||
const xfllQuery = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
fl: "01"
|
||||
});
|
||||
const xfllTotal = ref(0);
|
||||
//查询参数
|
||||
const form = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
textName: ""
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({
|
||||
id: "",
|
||||
bqbh: "",
|
||||
bqmc: ""
|
||||
});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bqmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入技能名称"
|
||||
}
|
||||
]
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否打开新增弹窗
|
||||
const elform = ref({}); //表当对象
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //是否显示按钮加载
|
||||
const checkAdd = ref(false);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
function handleClick() {
|
||||
if (activeName.value == "mj") {
|
||||
xfllQuery.value.fl = "01";
|
||||
getXfll();
|
||||
} else {
|
||||
xfllQuery.value.fl = "02";
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//获取巡防力量数据
|
||||
function getXfll() {
|
||||
let data = {
|
||||
fl: xfllQuery.value.fl,
|
||||
pageSize: xfllQuery.value.size,
|
||||
pageCurrent: xfllQuery.value.current,
|
||||
bqId: xfllQuery.value.bqId || ""
|
||||
};
|
||||
getTbJcglXfll(data).then((res) => {
|
||||
xfllDtata.value = res.records;
|
||||
xfllTotal.value = res.total;
|
||||
});
|
||||
}
|
||||
//查看详情
|
||||
function setInfo(e) {
|
||||
title.value = "专业技能技能详情";
|
||||
getTbJcglBqInfo([e.id]).then((res) => {
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
isDisabled.value = true;
|
||||
});
|
||||
}
|
||||
//批量注销数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq(ids.value).then((res) => {
|
||||
ElMessage({
|
||||
message: "注销成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//补0函数
|
||||
function repairZero(num) {
|
||||
let data = num;
|
||||
if (1 <= num < 10) {
|
||||
data = "000" + num;
|
||||
} else if (10 <= num < 100) {
|
||||
data = "00" + num;
|
||||
} else if (100 <= num < 1000) {
|
||||
data = "0" + num;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
function add() {
|
||||
xfllActive.value = false;
|
||||
isDisabled.value = false;
|
||||
checkAdd.value = true;
|
||||
addForm.value = {
|
||||
bqbh: "JN" + repairZero(total.value + 1),
|
||||
bqmc: "",
|
||||
bqlx: "SKL"
|
||||
};
|
||||
title.value = "新增专业技能";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//新增提交
|
||||
function submit() {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1.5e3);
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = addForm.value;
|
||||
if (!checkAdd.value) {
|
||||
updateTbJcglBqInfo(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "修改成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
addTbJcglBq(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
let data = {
|
||||
pageSize: form.value.size,
|
||||
pageCurrent: form.value.current,
|
||||
bqmc: form.value.textName,
|
||||
bqlx: "SKL"
|
||||
};
|
||||
getTbJcglBq(data)
|
||||
.then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.size = e;
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
xfllQuery.value.current = e;
|
||||
}
|
||||
//更改查询条数xfll
|
||||
function handleSizeChangexf(e) {
|
||||
activeName.size = e;
|
||||
xfllQuery.value.current = 1;
|
||||
getXfll();
|
||||
}
|
||||
//分页查询xfll
|
||||
function handleCurrentChangexf(e) {
|
||||
xfllQuery.value.current = e;
|
||||
getListData();
|
||||
getXfll();
|
||||
}
|
||||
//修改技能
|
||||
function update(e, type) {
|
||||
isDisabled.value = type == "edit" ? false : true;
|
||||
getTbJcglBqInfo(e.id).then((res) => {
|
||||
addForm.value = res;
|
||||
activeName.value = "mj";
|
||||
xfllQuery.value.fl = "01";
|
||||
title.value = type == "edit" ? "专业技能修改" : "专业技能详情";
|
||||
checkAdd.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (e.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = e.id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
function info(row) {
|
||||
getTbJcglBqInfo(row.id).then((res) => {
|
||||
addForm.value = res;
|
||||
activeName.value = "mj";
|
||||
xfllQuery.value.fl = "01";
|
||||
|
||||
title.value = "专业技能详情";
|
||||
checkAdd.value = false;
|
||||
isDisabled.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (row.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = row.id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//注销技能
|
||||
function delDictItem(e) {
|
||||
// 注销数据用
|
||||
// delTbJcglBq(e.id).then((res) => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq([e.id]).then((res) => {
|
||||
ElMessage({
|
||||
message: "注销成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
textName: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header {
|
||||
border-bottom: 1px solid #03438b;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #03438b;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
|
||||
border: 1px solid #03438b;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
|
||||
border-left: 1px solid #234c9e;
|
||||
}
|
||||
|
||||
.textBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.textBtn:hover {
|
||||
color: #2a5dc2;
|
||||
}
|
||||
</style>
|
||||
@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">每日街面装备</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="dialogFormVisible = true">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量注销</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<el-select clearable v-model="form.ssbm" placeholder="请选择所属部门">
|
||||
<el-option label="警察局" value="1"></el-option>
|
||||
<el-option label="警务室" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备类型">
|
||||
<el-select clearable v-model="form.zblx" placeholder="请选择装备类型">
|
||||
<el-option label="枪支" value="1"></el-option>
|
||||
<el-option label="弹药" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="生产日期">
|
||||
<el-date-picker v-model="form.gzsj" unlink-panels type="date" placeholder="请选择日期" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border row-key="id" :tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%" :height="tableHeight" :key="keyCount">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="code" show-overflow-tooltip align="center" width="100px" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="type" show-overflow-tooltip align="center" width="350px" label="装备类型">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="department" label="所属部门" align="center" width="250px"></el-table-column>
|
||||
<el-table-column sortable prop="date" show-overflow-tooltip label="生产日期" align="center" width="200px">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="batch" align="center" show-overflow-tooltip label="录入批次"></el-table-column>
|
||||
<el-table-column sortable prop="coding" show-overflow-tooltip align="center" label="唯一编码"></el-table-column>
|
||||
<el-table-column sortable prop="status" show-overflow-tooltip label="状态" align="center"></el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要注销?"
|
||||
@confirm="delDictItem(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">注销</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="form.current" :page-sizes="[10, 20, 50, 100]" :page-size="form.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">新增装备</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="dialogFormVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :rules="rules" :model="addForm" :inline="true" label-position="top">
|
||||
<el-form-item label="装备类型" prop="zblx">
|
||||
<el-select v-model="addForm.zblx" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="枪支" value="1" />
|
||||
<el-option label="警务移动端" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" prop="ssbm">
|
||||
<el-select v-model="addForm.ssbm" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="部门一" value="1" />
|
||||
<el-option label="部门二" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="购置日期">
|
||||
<el-date-picker v-model="addForm.gzrq" type="date" placeholder="请选择日期" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="录入批次">
|
||||
<el-select v-model="addForm.lrpc" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="第一批次" value="1" />
|
||||
<el-option label="第二批次" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="唯一编码" prop="wybm">
|
||||
<el-input v-model="addForm.wybm" placeholder="请输入编码" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用年限" prop="synx">
|
||||
<el-date-picker v-model="addForm.synx" type="date" placeholder="请选择日期" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备名称">
|
||||
<el-input v-model="addForm.zbmc" placeholder="请输入装备名称" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备型号">
|
||||
<el-input v-model="addForm.sbxh" placeholder="请输入设备型号" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备厂商" prop="zbcs">
|
||||
<el-input v-model="addForm.zbcs" placeholder="请输入装备厂商" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input v-model="addForm.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
|
||||
//查询参数
|
||||
const form = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
zblx: "",
|
||||
ssbm: "",
|
||||
gzsj: ""
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({
|
||||
zblx: "1",
|
||||
ssbm: "1",
|
||||
gzrq: "",
|
||||
lrpc: "1",
|
||||
wybm: "",
|
||||
synx: "",
|
||||
zbmc: "",
|
||||
sbxh: "",
|
||||
zbcs: "",
|
||||
bz: ""
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否打开新增弹窗
|
||||
const elform = ref({}); //表单对象
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
zblx: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
],
|
||||
ssbm: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
],
|
||||
wybm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入唯一编码"
|
||||
}
|
||||
],
|
||||
synx: [
|
||||
{
|
||||
required: true,
|
||||
message: "选择使用年限"
|
||||
}
|
||||
],
|
||||
zbcs: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入装备厂商"
|
||||
}
|
||||
]
|
||||
});
|
||||
//新增提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
|
||||
if (valid) {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
const arr = [
|
||||
{
|
||||
code: 1,
|
||||
type: "移动警务终端",
|
||||
department: "xx部门",
|
||||
date: "2022-06-02",
|
||||
batch: "第二批次",
|
||||
coding: "NKJ89897",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
code: 2,
|
||||
type: "枪支",
|
||||
department: "xx部门",
|
||||
date: "2022-06-02",
|
||||
batch: "第二批次",
|
||||
coding: "NKJ89897",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
code: 3,
|
||||
type: "枪支",
|
||||
department: "xx部门",
|
||||
date: "2022-06-02",
|
||||
batch: "第二批次",
|
||||
coding: "NKJ89897",
|
||||
status: "正常"
|
||||
}
|
||||
];
|
||||
tableData.value = arr;
|
||||
total.value = arr.length;
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
zblx: "",
|
||||
ssbm: "",
|
||||
gzsj: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<div class="mm-box" v-if="modelValue">
|
||||
<div class="head_box_ii">
|
||||
<el-form v-model="form" inline>
|
||||
<el-form-item label="巡逻时间" prop="bksj">
|
||||
<el-date-picker
|
||||
size="small"
|
||||
v-model="playTime"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
start-placeholder="巡逻开始时间"
|
||||
end-placeholder="巡逻结束时间"
|
||||
range-separator="至"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择巡逻时间"
|
||||
@change="handletime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备号" prop="bksj">
|
||||
<el-input
|
||||
v-model="form.gpsId"
|
||||
placeholder="请输入设备号"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<span>里程：{{ lc }} km</span>
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="small" class="btn" @click="getClDare"
|
||||
>回放</el-button
|
||||
>
|
||||
<el-button size="small" @click="closeAddModel">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="map"><GdMap /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, watch, getCurrentInstance, reactive } from "vue";
|
||||
import { timeValidate } from "@/utils/time.js";
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const playTime = ref([]); //时间
|
||||
const detailFiles = ref([]); //时间范围
|
||||
const lc = ref(0); //时间范围
|
||||
const form = reactive({});
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
lxtype: String
|
||||
});
|
||||
|
||||
const isClearn = ref(true);
|
||||
const times = ref([1, 1]);
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
form.gpsId = val.sbbh;
|
||||
form.lc = 0;
|
||||
getClDare();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 处理时间
|
||||
function handletime(val) {
|
||||
form.kssj = val ? val[0] : "";
|
||||
form.jssj = val ? val[1] : "";
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", "clgjRoute");
|
||||
form.islx = "1";
|
||||
qcckPost(form, "/mosty-jmxf/tbWzXfwz/selectSbLswzMo").then((res) => {
|
||||
let arr = res.list || [];
|
||||
lc.value = res.lc / 1000;
|
||||
let brr = arr.map((item) => {
|
||||
return [item.jd, item.wd];
|
||||
});
|
||||
if (brr.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {
|
||||
coords: brr,
|
||||
isClear: true,
|
||||
flag: "clgjRoute"
|
||||
});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 取消新增模板
|
||||
const closeAddModel = () => {
|
||||
emits("update:modelValue", false);
|
||||
emitter.emit("deletePointArea", "clgjRoute");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mm-box {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
height: 100%;
|
||||
.head_box_ii {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 62vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,638 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">设备管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addLoad">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="deletList"
|
||||
:disabled="multipleSelection.length == 0"
|
||||
typeof="danger"
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
|
||||
<el-button @click="reback" >
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Aim />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">返回</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form class="mosty-from-wrap" :model="listQuery" :inline="true">
|
||||
<el-form-item label="设备编号">
|
||||
<el-input
|
||||
v-model="listQuery.sbbh"
|
||||
placeholder="请输入设备编号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备品牌">
|
||||
<el-select
|
||||
v-model="listQuery.sbPp"
|
||||
class="m-2"
|
||||
placeholder="请选择设备品牌"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SBPP"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="250px"
|
||||
label="设备名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbFl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="150px"
|
||||
label="设备分类"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_CLCS" :value="row.sbFl" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="azwz"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="150px"
|
||||
label="安装位置"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_AZWZ" :value="row.azwz" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbbh"
|
||||
label="设备编号"
|
||||
width="250px"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbPp"
|
||||
show-overflow-tooltip
|
||||
label="设备品牌"
|
||||
align="center"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_SBPP" :value="row.sbPp" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :value="row.xtSjzt" :options="D_BZ_SJZT"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row.id)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ diaTitle }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="btnLoading"
|
||||
size="small"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="dialogFormVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
|
||||
<el-form-item prop="sbmc" label="设备名称">
|
||||
<el-input
|
||||
v-model="form.sbmc"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbFl" label="设备分类">
|
||||
<el-select
|
||||
v-model="form.sbFl"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="azwz" label="安装位置">
|
||||
<el-select
|
||||
v-model="form.azwz"
|
||||
class="m-2"
|
||||
placeholder="请选择安装位置"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_AZWZ"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xtSjzt" label="设备状态">
|
||||
<el-select
|
||||
v-model="form.xtSjzt"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in D_BZ_SJZT"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbPp" label="设备品牌">
|
||||
<el-select
|
||||
v-model="form.sbPp"
|
||||
class="m-2"
|
||||
placeholder="请选择设备品牌"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SBPP"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否支持视频" prop="sfsp">
|
||||
<el-radio-group v-model="form.sfsp" class="ml-4">
|
||||
<el-radio
|
||||
v-for="(item, index) in D_BZ_SFSP"
|
||||
:label="item.value"
|
||||
:key="index"
|
||||
>{{ item.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbbh" label="设备编号" class="tiaos">
|
||||
<el-input
|
||||
v-model="form.sbbh"
|
||||
placeholder="请输入设备编号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-button @click="getTS" v-show="form.sfsp=='1'">调试</el-button>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="form.textarea"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getXfclsb,
|
||||
addXfclsb,
|
||||
upXfclsb,
|
||||
delXfclsb,
|
||||
infoXfsb
|
||||
} from "@/api/basicsmanage/watchmanCar";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, watch,onUnmounted } from "vue";
|
||||
import { number } from "echarts";
|
||||
import { getVideoUrl , getReplayUrl} from "@/api/dpApi/otherApi";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_SJZT,
|
||||
D_BZ_CLLX,
|
||||
D_BZ_CLPP,
|
||||
D_BZ_CLCS,
|
||||
D_BZ_AZWZ,
|
||||
D_BZ_SBPP,
|
||||
D_BZ_SFSP
|
||||
} = proxy.$dict(
|
||||
"D_BZ_CLLX",
|
||||
"D_BZ_CLCS",
|
||||
"D_BZ_SJZT",
|
||||
"D_BZ_CLPP",
|
||||
"D_BZ_AZWZ",
|
||||
"D_BZ_SBPP",
|
||||
"D_BZ_SFSP"
|
||||
);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
cid:props.id
|
||||
});
|
||||
const props = defineProps({
|
||||
id: String
|
||||
})
|
||||
const chackipt = ref(true);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const cascader = ref(null);
|
||||
const loadingTable = ref(true);
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const depList = ref([]); //部门数据
|
||||
|
||||
onMounted(() => {
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const cId=ref(props.id)
|
||||
const disable = ref(false);
|
||||
const chackadd = ref(false); //切换新增修改
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const diaTitle = ref("新增巡防设备");
|
||||
const dialogFormVisible = ref(false);
|
||||
const urls =ref ({
|
||||
realplay: '',
|
||||
talk: '',
|
||||
playback: ''
|
||||
})
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 返回
|
||||
function reback(){
|
||||
emitter.emit("reback")
|
||||
}
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
listQuery.value.cid=props.id
|
||||
const params = listQuery.value;
|
||||
form.value.cid=props.id
|
||||
getXfclsb(params).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//重置搜索
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
cid:props.id
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
//调试getTS
|
||||
function getTS() {
|
||||
if (form.value.sbbh == "" || form.value.sbbh == null) {
|
||||
proxy.$message({
|
||||
type: "warning",
|
||||
message: `请先输入设备编号`
|
||||
});
|
||||
} else if (form.value.sbPp == "" || form.value.sbPp == null) {
|
||||
proxy.$message({
|
||||
type: "warning",
|
||||
message: `请先选择设备品牌`
|
||||
});
|
||||
} else{
|
||||
//海能达(通过设备编号获取感知流)
|
||||
if(form.value.sbPp == "01"){
|
||||
const params = {
|
||||
cameraIndexCode: form.value.sbbh
|
||||
};
|
||||
getVideoUrl(params).then(res=>{
|
||||
if(res.data.data){
|
||||
urls.value.realplay = res.data.data.url
|
||||
realplay()
|
||||
}else{
|
||||
proxy.$message({
|
||||
message: "获取不到视频流，播放失败!!!",
|
||||
grouping:true,
|
||||
type: "info"
|
||||
});
|
||||
}
|
||||
})
|
||||
}else{
|
||||
//海康adas流
|
||||
const sbbh= '51050400991318001379'
|
||||
emitter.emit("openGzyVideo",sbbh)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//新增弹窗
|
||||
const addDict = (row) => {
|
||||
chackipt.value = false;
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
//新增表单对象
|
||||
const form = ref({
|
||||
cid:props.id,
|
||||
azwz: "",
|
||||
sbFl: "",
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
xtSjzt: "",
|
||||
sfsp: "0",
|
||||
bz: ""
|
||||
});
|
||||
const rules = reactive({
|
||||
sbFl: [{ required: true, message: "请选择设备种类", trigger: "change" }],
|
||||
azwz: [{ required: true, message: "请选择安装位置", trigger: "change" }],
|
||||
sbbh: [{ required: true, message: "请输入设备编号", trigger: "change" }],
|
||||
sbPp: [{ required: true, message: "请输入设备品牌", trigger: "change" }],
|
||||
sbmc: [{ required: true, message: "请输入设备名称", trigger: "change" }],
|
||||
sfsp: [{ required: true, trigger: "change" }]
|
||||
});
|
||||
//修改
|
||||
function update(id) {
|
||||
chackipt.value = true;
|
||||
infoXfsb(id).then((res) => {
|
||||
disable.value = false;
|
||||
chackadd.value = true;
|
||||
diaTitle.value = "设备修改";
|
||||
form.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//重置表单
|
||||
function formReset() {
|
||||
form.value = {
|
||||
cid:props.id,
|
||||
azwz: "",
|
||||
sbFl: "",
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
xtSjzt: "",
|
||||
sfsp: "0",
|
||||
bz: ""
|
||||
};
|
||||
}
|
||||
function addLoad() {
|
||||
chackipt.value = false;
|
||||
formReset();
|
||||
disable.value = false;
|
||||
chackadd.value = false;
|
||||
diaTitle.value = "新增设备";
|
||||
dialogFormVisible.value = true;
|
||||
|
||||
}
|
||||
const elform = ref(null);
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
let data = new FormData();
|
||||
const keys = Object.keys(form.value);
|
||||
keys.map((item) => {
|
||||
if (form.value[item] != null && item != "cid") {
|
||||
data.append(item, form.value[item]);
|
||||
} else if (item == "cid") {
|
||||
data.append("cid", form.value.cid);
|
||||
}
|
||||
});
|
||||
data.append("sbbh", form.value.sbbh);
|
||||
if (chackadd.value) {
|
||||
form.value.cid=props.id;
|
||||
upXfclsb(form.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
form.value.cid=props.id;
|
||||
addXfclsb(form.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
const ids = [row.id];
|
||||
delXfclsb(ids).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
multipleSelection.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除
|
||||
const deletList = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
const ids = multipleSelection.value;
|
||||
delXfclsb(ids).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.tiaos {
|
||||
position: relative;
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: -100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,556 +0,0 @@
|
||||
<template>
|
||||
<div v-if="showxfclgl">
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防车辆管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addLoad('add',id)">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="deletList('')" :disabled="multipleSelection.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle"><Delete /> </el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
<el-button type="info" plain icon="Upload" @click="isImport = true">
|
||||
<span style="vertical-align: middle">导入</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form class="mosty-from-wrap" :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号">
|
||||
<el-input v-model="listQuery.cph" clearable placeholder="请输入车牌号"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="车辆品牌">
|
||||
<el-select v-model="listQuery.clpp" placeholder="请选择车辆品牌" >
|
||||
<el-option v-for="dict in D_BZ_CLPP" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="cllx" label="车辆类型">
|
||||
<el-select v-model="listQuery.cllx" placeholder="请选择车辆类型" >
|
||||
<el-option v-for="dict in D_BZ_CLLX" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="cntBox-bb">
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column align="center" type="index" width="60px" label="序号"/>
|
||||
<el-table-column prop="ssbm" align="center" label="所属部门" show-overflow-tooltip />
|
||||
<el-table-column prop="cplx" align="center" label="号牌种类" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_HPZL" :value="row.cplx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cph" label="车牌号" align="center"></el-table-column>
|
||||
<el-table-column prop="clpp" label="车辆品牌" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_CLPP" :value="row.clpp" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="clnk" label="车辆年款" align="center" />
|
||||
<el-table-column prop="gpsId" label="GPS" align="center" />
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :value="row.zbzt" :options="D_ZDY_SBZT"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="350px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="lookGj(row,'clgj')" size="small">轨迹回放</el-button>
|
||||
<el-button @click="manage(row.cid)" size="small">设备管理</el-button>
|
||||
<el-button @click="addLoad('edit',row.cid)" size="small">修改</el-button>
|
||||
<el-button @click="deletList(row.cid)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mapbox" v-if="isShowMap" :style="{ height: tableHeight +50+ 'px' }">
|
||||
<!-- 轨迹回放 -->
|
||||
<MapDialog v-model:modelValue="isShowMap" lxtype="gjhf" :data="gJDate"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ diaTitle }}</span>
|
||||
<div>
|
||||
<el-button type="primary" :loading="btnLoading" size="small" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item prop="cph" label="车牌号">
|
||||
<el-input
|
||||
v-model="form.cph"
|
||||
placeholder="请输入车牌号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="form.ssbm"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
filterable
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cplx" label="号牌种类">
|
||||
<el-select
|
||||
v-model="form.cplx"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_HPZL"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbzt" label="车辆状态">
|
||||
<el-select
|
||||
v-model="form.zbzt"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in D_ZDY_SBZT"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="clpp" label="车辆品牌">
|
||||
<el-select
|
||||
v-model="form.clpp"
|
||||
class="m-2"
|
||||
filterable
|
||||
placeholder="请选择车辆品牌"
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLPP"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clxh" label="车辆型号">
|
||||
<el-input placeholder="请输入车辆型号" v-model="form.clxh"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clnk" label="车辆年款">
|
||||
<el-date-picker
|
||||
type="year"
|
||||
v-model="form.clnk"
|
||||
format="YYYY"
|
||||
value-format="YYYY"
|
||||
placeholder="请选择车辆年款"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="gmrq" label="车辆生产日期">
|
||||
<el-date-picker
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="form.gmrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
:disabledDate="disableCgrq"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bfrq" label="车辆报废日期">
|
||||
<el-date-picker
|
||||
@focus="cgrqTs"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="form.bfrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
:disabledDate="disableDqsj"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cllx" label="车辆类型">
|
||||
<el-select
|
||||
v-model="form.cllx"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clys" label="车辆颜色">
|
||||
<el-select
|
||||
v-model="form.clys"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLYS"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="GPS">
|
||||
<el-input v-model="form.gpsId" placeholder="请输入GPS" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<!-- 新增的电台和监控 -->
|
||||
<el-form-item label="车载电台">
|
||||
<el-input v-model="form.czdt" placeholder="请输入车载电台" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车载监控">
|
||||
<el-input v-model="form.czjk" placeholder="请输入车载监控" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jyqxList" label="常用装备" @click.stop="jyqxVisible = true">
|
||||
<el-input
|
||||
v-model="form.jyqx"
|
||||
placeholder="请选择常用装备"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
readonly
|
||||
suffix-icon="ArrowDown"
|
||||
v-if="jyqxData.length <= 0"/>
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in jyqxData" :key="tag.id" closable :type="tag.type" @close.stop="handleClose(tag)">
|
||||
{{ tag.qxMc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="器械数量" style="width: 100%" v-if="jyqxData.length >0">
|
||||
<span v-for="(item,idx) in jyqxData" :key="idx" style="margin:10px 0 10px 0;">
|
||||
{{item.qxMc}} <el-input-number :min="0" :max="1000" v-model="item.sl"></el-input-number>
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input v-model="form.textarea" placeholder="请输入关键字" show-word-limit type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备管理 -->
|
||||
<Carmanage v-if="sbgl" :id="sbid" />
|
||||
<JyqxLoad
|
||||
v-if="jyqxVisible"
|
||||
:roleIds="hasChooseJyqx"
|
||||
v-model="jyqxVisible"
|
||||
@choosedUsers="hanlderChooseJyqx"
|
||||
/>
|
||||
<!-- 导入 -->
|
||||
<Export
|
||||
:show="isImport"
|
||||
lx="car"
|
||||
@closeImport="isImport = false"
|
||||
@handleImport="handleFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MapDialog from './mapDialog.vue'
|
||||
import Export from "@/components/export/index.vue";
|
||||
import JyqxLoad from "@/components/MyComponents/ChooseJz/JyqxLoad.vue";
|
||||
import { getXfcl, addXfcl, upXfcl, delXfcl, infoXfcl, infoXfsb, getXfclsb } from "@/api/basicsmanage/watchmanCar";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import Carmanage from "./carmanage/index.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, getCurrentInstance,watch, onUnmounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_HPZL, D_ZDY_SBZT, D_BZ_CLLX, D_BZ_CLYS,D_BZ_CLPP } = proxy.$dict( "D_BZ_CLLX", "D_BZ_HPZL", "D_BZ_CLYS", "D_ZDY_SBZT", "D_BZ_CLPP");
|
||||
const showxfclgl = ref(true);//弹窗切换
|
||||
const isImport = ref(false);
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const listQuery = ref({ pageCurrent: 1, pageSize: 20 });
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表单数据
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const loadingTable = ref(true);
|
||||
const dialogFormVisible = ref(false);
|
||||
const total = ref(0); //总数据
|
||||
const diaTitle = ref("");
|
||||
const btnLoading = ref(false);
|
||||
const jyqxVisible = ref(false)
|
||||
const jyqxData = ref([]) //常用装备数据
|
||||
const hasChooseJyqx = ref([])//常用装备数据ids
|
||||
const sbgl = ref(false); //设备管理弹窗
|
||||
const sbid = ref(""); //设备id
|
||||
const elform = ref(null);
|
||||
const isShowMap = ref(false)
|
||||
const gJDate = ref({})
|
||||
//新增表单对象
|
||||
const formDefault = ref({})
|
||||
const form = ref({
|
||||
ssbmdm: "",
|
||||
cplx: "",
|
||||
cph: "",
|
||||
clpp: "",
|
||||
clnk: "",
|
||||
bfrq: "",
|
||||
bz: ""
|
||||
});
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
cplx: [{ required: true, message: "请选择号牌种类", trigger: "change" }],
|
||||
cph: [{ required: true, message: "请输入车牌号", trigger: "change" }],
|
||||
clpp: [{ required: true, message: "请输入车辆品牌", trigger: "change" }],
|
||||
clnk: [{ required: true, message: "请选择车辆年款", trigger: "change" }],
|
||||
bfrq: [{ required: true, message: "请选择车辆报废日期", trigger: "change" }],
|
||||
gmrq: [{ required: true, message: "请选择车辆生产日期", trigger: "change" }]
|
||||
});
|
||||
watch(()=>isShowMap.value,(val)=>{
|
||||
emitter.emit('closeMeun')
|
||||
})
|
||||
onMounted(() => {
|
||||
formDefault.value = JSON.parse(JSON.stringify(form.value))
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
emitter.on("reback", (res) => {
|
||||
sbgl.value = false;
|
||||
showxfclgl.value = true;
|
||||
sbid.value = "";
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
|
||||
// 轨迹回放
|
||||
function lookGj (row,type){
|
||||
if(row.gpsId){
|
||||
gJDate.value = row
|
||||
isShowMap.value = true;
|
||||
}else{
|
||||
proxy.$message({ type: "warning", message: "该数据无gpsId!" });
|
||||
isShowMap.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//重置搜索
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
getXfcl(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
// 新增-修改
|
||||
function addLoad(type,id) {
|
||||
dialogFormVisible.value = true;
|
||||
if(type == 'add'){
|
||||
diaTitle.value = "新增巡防车辆";
|
||||
}else{
|
||||
diaTitle.value ='编辑巡防车辆'
|
||||
getDetailInfo(id)
|
||||
}
|
||||
}
|
||||
//根据id查看详情
|
||||
function getDetailInfo(id) {
|
||||
infoXfcl(id).then((res) => {
|
||||
form.value = res;
|
||||
jyqxData.value = res.jyqx ? JSON.parse(res.jyqx) : []
|
||||
hasChooseJyqx.value = jyqxData.value.map(item=>{ return item.id})
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
form.value.jyqx = ''
|
||||
});
|
||||
}
|
||||
|
||||
//批量选择数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = val.map(item=>{
|
||||
return item.cid
|
||||
});
|
||||
};
|
||||
|
||||
//批量删除
|
||||
const deletList = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
const ids = id ? [id]: multipleSelection.value;
|
||||
delXfcl(ids).then(() => {
|
||||
proxy.$message({type: "success",message: "删除成功"});
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// size 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
|
||||
//设备管理
|
||||
function manage(id) {
|
||||
sbgl.value = true;
|
||||
showxfclgl.value = false;
|
||||
sbid.value = id;
|
||||
}
|
||||
|
||||
//选择常用装备
|
||||
function hanlderChooseJyqx(arr) {
|
||||
hasChooseJyqx.value = arr.map((item) => { return item.id; });
|
||||
jyqxData.value = arr;
|
||||
}
|
||||
|
||||
// 删除常用装备
|
||||
function handleClose(tag){
|
||||
jyqxData.value.splice(jyqxData.value.indexOf(tag), 1);
|
||||
hasChooseJyqx.value = jyqxData.value.map((item) => { return item.id; });
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeDialog(){
|
||||
form.value = JSON.parse(JSON.stringify(formDefault.value))
|
||||
dialogFormVisible.value = false;
|
||||
jyqxData.value = []
|
||||
hasChooseJyqx.value = []
|
||||
}
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false
|
||||
btnLoading.value = true;
|
||||
form.value.jyqx = JSON.stringify(jyqxData.value)
|
||||
if (diaTitle.value == '编辑巡防车辆') {
|
||||
upXfcl(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
btnLoading.value = false;
|
||||
closeDialog()
|
||||
getListData();
|
||||
}).catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
addXfcl(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
closeDialog()
|
||||
btnLoading.value = false;
|
||||
getListData();
|
||||
}).catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//购置日期限制
|
||||
function disableCgrq(row) {
|
||||
let time = new Date();
|
||||
return time.getTime() <= row.getTime();
|
||||
}
|
||||
|
||||
// 到期日期限制
|
||||
function disableDqsj(row) {
|
||||
if (form.value.gmrq) {
|
||||
let time = new Date(form.value.gmrq);
|
||||
return time.getTime() >= row.getTime();
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function cgrqTs() {
|
||||
if (!form.value.gmrq) {
|
||||
proxy.$message({ message: "请先选择车辆生产日期", type: "warning" });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.cntBox-bb{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.tabBox{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.mapbox{
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,141 +0,0 @@
|
||||
<template>
|
||||
<div class="mm-box" v-if="modelValue">
|
||||
<div class="head_box_ii">
|
||||
<el-form v-model="form" inline>
|
||||
<el-form-item label="巡逻时间" prop="bksj">
|
||||
<el-date-picker
|
||||
size="small"
|
||||
v-model="playTime"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
start-placeholder="巡逻开始时间"
|
||||
end-placeholder="巡逻结束时间"
|
||||
range-separator="至"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择巡逻时间"
|
||||
@change="handletime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号" prop="bksj">
|
||||
<el-select v-model="form.hphm" placeholder="请选择号牌号码" disabled>
|
||||
<el-option
|
||||
v-for="item in props.data.clList"
|
||||
:key="item.id"
|
||||
:label="item.jdchphm"
|
||||
:value="item.jdchphm"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<span>里程：{{ lc }} km</span>
|
||||
<el-form-item>
|
||||
<el-button size="small" class="btn" @click="getClDare"
|
||||
>车辆回放</el-button
|
||||
>
|
||||
<el-button size="small" @click="closeAddModel">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="map"><GdMap /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, watch, getCurrentInstance, reactive } from "vue";
|
||||
import { timeValidate } from "@/utils/time.js";
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const playTime = ref([]); //时间
|
||||
const detailFiles = ref([]); //时间范围
|
||||
const lc = ref(0); //里程
|
||||
const form = reactive({});
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
lxtype: String
|
||||
});
|
||||
|
||||
const isClearn = ref(true);
|
||||
const times = ref([1, 1]);
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
form.hphm = val.cph;
|
||||
form.gpsId = val.gpsId;
|
||||
form.lc = 0;
|
||||
getClDare();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 处理时间
|
||||
function handletime(val) {
|
||||
form.kssj = val ? val[0] : "";
|
||||
form.jssj = val ? val[1] : "";
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", "clgjRoute");
|
||||
form.islx = "1";
|
||||
qcckPost(form, "/mosty-jmxf/tbWzXfwz/selectSbLswzMo").then((res) => {
|
||||
let arr = res.list || [];
|
||||
lc.value = res.lc/1000;
|
||||
let points = arr.map((item) => {
|
||||
return [item.jd, item.wd];
|
||||
});
|
||||
if (points.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {
|
||||
coords: points,
|
||||
isClear: true,
|
||||
flag: "clgjRoute"
|
||||
});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 取消新增模板
|
||||
const closeAddModel = () => {
|
||||
emitter.emit("deletePointArea", "clgjRoute");
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mm-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 16px;
|
||||
background: #fff;
|
||||
.head_box_ii {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// height: 60px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,290 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防装备分类管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addLoad">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量注销</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="一级分类">
|
||||
<el-select @change="changeTree" v-model="listQuery.pcode" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in zbTree" :key="item.scode" :label="item.sname" :value="item.scode" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级分类">
|
||||
<el-select v-model="listQuery.scode" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in ejTree" :key="item.scode" :label="item.sname" :value="item.scode" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border ref="dataTreeList" row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }" :height="tableHeight" :key="keyCount">
|
||||
<el-table-column fixed align="center" type="selection" width="55" />
|
||||
<el-table-column type="index" align="center" width="60px" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="pname" show-overflow-tooltip align="center" label="一级分类">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="sname" show-overflow-tooltip align="center" label="二级分类">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="count" show-overflow-tooltip align="center" label="数量">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要注销?"
|
||||
@confirm="delDictItem(row.id)">
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">注销</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialog" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ diaTitle }}</span>
|
||||
<div>
|
||||
<el-button type="primary" :loading="btnLoading" size="small" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="dialog = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<!-- <el-form-item prop="pcode" label="装备分类编号">
|
||||
<el-input
|
||||
v-model="form.pcode"
|
||||
placeholder="请输入装备分类编号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="pname" label="一级分类名称">
|
||||
<el-input v-model="form.pname" placeholder="请输入一级分类名称" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="sname" label="二级分类名称">
|
||||
<el-input v-model="form.sname" placeholder="请输入二级分类名称" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input v-model="form.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getTree,
|
||||
addTpjcglzbfl,
|
||||
getZbfllist,
|
||||
upZbfl,
|
||||
delZbfl,
|
||||
infoZbfl
|
||||
} from "@/api/basicsmanage/watchmanZbgl";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
const listQuery = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
pcode: "",
|
||||
scode: ""
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const rules = ref({
|
||||
// pcode: [{ required: true, message: "请输入分类编码", trigger: "change" }],
|
||||
pname: [{ required: true, message: "请输入一级分类名称", trigger: "change" }],
|
||||
sname: [{ required: true, message: "请输入二级分类名称", trigger: "change" }]
|
||||
});
|
||||
const zbTree = ref([]);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const ejTree = ref([]);
|
||||
const diaTitle = ref();
|
||||
//获取装备树
|
||||
function getZbtree() {
|
||||
getTree().then((res) => {
|
||||
zbTree.value = res;
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getZbtree();
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表单数据
|
||||
const chackadd = ref(true); //切换新增修改
|
||||
const dialog = ref(false); //是否显示新增弹窗
|
||||
const total = ref(0); //总数据
|
||||
const elform = ref(null);
|
||||
const form = ref({
|
||||
sname: "",
|
||||
pname: "",
|
||||
bz: ""
|
||||
});
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageNo = 1;
|
||||
getListData();
|
||||
};
|
||||
function changeTree(code) {
|
||||
listQuery.value.scode = "";
|
||||
let arr = zbTree.value;
|
||||
arr.forEach((v) => {
|
||||
if (v.scode == listQuery.value.pcode) {
|
||||
ejTree.value = v.children;
|
||||
}
|
||||
});
|
||||
}
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
const params = listQuery.value;
|
||||
getZbfllist(params).then((res) => {
|
||||
tableData.value = res?.records;
|
||||
total.value = res.total;
|
||||
})
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
pcode: "",
|
||||
scode: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
//重置表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
function addLoad() {
|
||||
formReset();
|
||||
chackadd.value = false;
|
||||
diaTitle.value = "新增装备分类";
|
||||
dialog.value = true;
|
||||
}
|
||||
const addDict = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialog.value = true;
|
||||
};
|
||||
function update(row) {
|
||||
form.value.sname = row.sname;
|
||||
form.value.pname = row.pname;
|
||||
form.value.id = row.id;
|
||||
dialog.value = true;
|
||||
chackadd.value = true;
|
||||
diaTitle.value = "装备分类修改";
|
||||
// infoZbfl(id).then((res) => {
|
||||
// dialog.value = true;
|
||||
// chackadd.value = true;
|
||||
// diaTitle.value = "装备分类修改";
|
||||
// form.value = res;
|
||||
// });
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
let data = {};
|
||||
const keys = Object.keys(form.value);
|
||||
keys.map((item) => {
|
||||
if (form.value[item] != null) {
|
||||
data[item] = form.value[item];
|
||||
}
|
||||
});
|
||||
if (chackadd.value) {
|
||||
upZbfl(data).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialog.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
addTpjcglzbfl(data).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialog.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(id) {
|
||||
const ids = [id];
|
||||
delZbfl(ids).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNo = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -1,209 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防装备到期提醒</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备类型">
|
||||
<el-select v-model="zbLx" @change="checkZblx">
|
||||
<el-option value="1" label="智能装备"></el-option>
|
||||
<el-option value="2" label="常用装备"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ssbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="装备名称"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
{{ row.sbmc || row.qxMc }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="cgrq"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="生产日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="dqsj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="到期时间"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getZnzbTx, getJyqxTx } from "@/api/basicsmanage/watchmanZbtx.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const loadingTable = ref(true);
|
||||
const tableData = ref([]); //表单数据
|
||||
|
||||
const zbLx = ref("1");
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
if (zbLx.value == 1) {
|
||||
let prams = {
|
||||
pageCurrent: listQuery.value.pageCurrent,
|
||||
pageSize: listQuery.value.pageSize,
|
||||
ssbmid: listQuery.value.ssbmdm || "",
|
||||
sbmc: listQuery.value.sbmc || ""
|
||||
};
|
||||
getZnzbTx(prams).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
});
|
||||
} else {
|
||||
let prams = {
|
||||
pageCurrent: listQuery.value.pageCurrent,
|
||||
pageSize: listQuery.value.pageSize,
|
||||
ssbmid: listQuery.value.ssbmdm || "",
|
||||
qxMc: listQuery.value.sbmc || ""
|
||||
};
|
||||
getJyqxTx(prams).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
function checkZblx() {
|
||||
getListData();
|
||||
}
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const addDict = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,247 +0,0 @@
|
||||
<template>
|
||||
<div class="mm-box" v-if="props.modelValue">
|
||||
<div class="head_box_ii">
|
||||
<div class="timeBox">
|
||||
<div class="time-map">{{ times[0] }}</div>
|
||||
<el-slider
|
||||
v-model="playTime"
|
||||
id="playtimeSlider"
|
||||
:range="true"
|
||||
:min="sliderMIn"
|
||||
:max="sliderMax"
|
||||
:format-tooltip="playTimeFormat"
|
||||
@change="playTimeChange"
|
||||
:key="videoTndex">
|
||||
</el-slider>
|
||||
<div class="time-map">{{ times[1] }}</div>
|
||||
<div style="display:flex;" v-if="props.lxtype == 'gjhf'">
|
||||
<el-button size="small" @click="chooseTime">搜索</el-button>
|
||||
<el-button size="small" @click="getGjDare">轨迹回放</el-button>
|
||||
<el-button size="small" v-if="props.data.xffwlx == 1" @click="getXfqData">巡防区 </el-button>
|
||||
<el-button size="small" v-else-if="props.data.xffwlx == 2" @click="getKfdData">快反点</el-button>
|
||||
</div>
|
||||
<div v-else class="hphmBox">
|
||||
<div style="width:160px;">
|
||||
<el-select v-model="hphm" placeholder="请选择号牌号码" >
|
||||
<el-option v-for="item in props.data.clList" :key="item.id" :label="item.jdchphm" :value="item.jdchphm"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="width:110px;margin-left: 10px;">里程：{{lc}} km</div>
|
||||
|
||||
<el-button size="small" class="btn" @click="getClDare">车辆回放</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-button size="small" @click="closeAddModel">关闭</el-button>
|
||||
</div>
|
||||
<div class="map"><GdMap /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getTbJcglXfqySelectById, getTpJcglKfdSelectByid } from "@/api/dpApi/home.js";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, watch, getCurrentInstance } from "vue";
|
||||
import { timeValidate } from "@/utils/time.js";
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const playTime = ref(null); //时间
|
||||
const detailFiles = ref([]); //时间范围
|
||||
const sliderMIn = ref(0);
|
||||
const sliderMax = ref(0);
|
||||
const videoTndex = ref(1);
|
||||
const lc = ref(0);
|
||||
const hphm = ref("");
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
lxtype: String
|
||||
});
|
||||
|
||||
const isClearn = ref(true);
|
||||
const times = ref([1, 1]);
|
||||
watch(() => props.data,(val) => {
|
||||
hphm.value = ''
|
||||
lc.value = 0
|
||||
let ks = val.bbkssj;
|
||||
let js = val.bbjssj ? val.bbjssj : timeValidate(new Date());
|
||||
times.value = [ks, js];
|
||||
let start = new Date(ks).getTime();
|
||||
let end = new Date(js).getTime();
|
||||
sliderMIn.value = Number(start);
|
||||
sliderMax.value = Number(end);
|
||||
playTime.value = [start, end];
|
||||
if (props.lxtype == "gjhf") { getGjDare(); }
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 滑块提示
|
||||
function playTimeFormat(val) {
|
||||
let time = new Date(val);
|
||||
return timeValidate(time);
|
||||
}
|
||||
//选中时间
|
||||
function playTimeChange(val) {
|
||||
let kssj = timeValidate(val[0]);
|
||||
let jssj = timeValidate(val[1]);
|
||||
times.value = [kssj, jssj];
|
||||
}
|
||||
|
||||
// 根据时间来画轨迹
|
||||
function chooseTime() {
|
||||
let params = { bbId: props.data.id, kssj: times.value[0], jssj: times.value[1] };
|
||||
emitter.emit("deletePointArea", "route");
|
||||
qcckPost(params, "/mosty-wzzx/tbWzXfwz/selectLswz").then((res) => {
|
||||
let arr = res || [];
|
||||
handleRoute(arr)
|
||||
});
|
||||
}
|
||||
|
||||
// 获取轨迹
|
||||
function getGjDare(bbId) {
|
||||
let params = { bbId: props.data.id, kssj: times.value[0], jssj: times.value[1]};
|
||||
emitter.emit("deletePointArea", "route");
|
||||
qcckPost(params, "/mosty-wzzx/tbWzXfwz/selectLswz").then((res) => {
|
||||
let arr = res || [];
|
||||
handleRoute(arr)
|
||||
});
|
||||
}
|
||||
// 画轨迹
|
||||
function handleRoute(arr){
|
||||
let points = arr.map(item=>{return [item.jd, item.wd]});
|
||||
if (points.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'route'});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", "route");
|
||||
if (hphm.value == "") return proxy.$message({ type: "warning", message: `请选择车辆` });
|
||||
let list = props.data.clList;
|
||||
let obj = list.find(item=>{
|
||||
return item.jdchphm == hphm.value
|
||||
})
|
||||
if(obj && obj.gpsId){
|
||||
let params = { gpsId:obj.gpsId, kssj: times.value[0], jssj: times.value[1] , islx:"1"};
|
||||
qcckPost(params,'/mosty-wzzx/tbWzXfwz/selectSbLswzMo').then(res=>{
|
||||
let arr = res.list || []
|
||||
lc.value= res.lc / 1000
|
||||
handleRoute(arr)
|
||||
})
|
||||
}else{
|
||||
proxy.$message({ type: "warning", message: `该车辆暂时没有轨迹` });
|
||||
}
|
||||
|
||||
}
|
||||
//获取巡防区数据
|
||||
function getXfqData() {
|
||||
isClearn.value = !isClearn.value;
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
let ids = props.data.xffwid.split(",");
|
||||
if (ids.length > 0) {
|
||||
ids.forEach((el) => {
|
||||
getTbJcglXfqySelectById({id: el }).then((res) => {
|
||||
if (!res) return ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
||||
if (res.jd && res.wd) emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
||||
if (res.pgis.length <= 0) return;
|
||||
let obj = { position:[res.pgis], text:res.xfqMc, id: res.id}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "xfq",isclear: true });
|
||||
});
|
||||
});
|
||||
} else {
|
||||
ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
||||
}
|
||||
}
|
||||
|
||||
//获取快反点数据
|
||||
function getKfdData() {
|
||||
isClearn.value = !isClearn.value;
|
||||
if (isClearn.value) {
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("deletePointArea", "kfdArea");
|
||||
} else {
|
||||
getTpJcglKfdSelectByid({ id: props.data.xffwid }).then((res) => {
|
||||
if (res) {
|
||||
//点位数据
|
||||
if (!res.jd || !res.wd) return;
|
||||
//一分钟范围
|
||||
if (res.yfzfw.length > 0) {
|
||||
let obj = { position:[res.yfzfw], text:'', id: '11'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "kfdArea", color: "rgba(255,0,0,0.6)", linecolor:'#ff0000'});
|
||||
}
|
||||
//三分钟范围
|
||||
if (res.sfzfw.length > 0) {
|
||||
let obj1 = { position:[res.sfzfw], text:'', id: '211'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj1], flag: "kfdArea", color: "rgba(253,174,46,0.5)",linecolor:'#fdae2e'});
|
||||
}
|
||||
//五分钟范围
|
||||
if (res.wfzfw.length > 0) {
|
||||
let obj2 = { position:[res.wfzfw], text:'', id: '131'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj2], flag: "kfdArea", color: "rgba(0,102,255,0.4)", linecolor:'#0066ff'});
|
||||
}
|
||||
let icon = require("@/assets/point/kfd.png");
|
||||
emitter.emit("showPoint", { coords: [res], icon: icon, flag: "kfd" });
|
||||
emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
||||
} else {
|
||||
ElMessage({ message: "暂无快反点数据", type: "warning" });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 取消新增模板
|
||||
const closeAddModel = () => {
|
||||
emitter.emit("deletePointArea", "route");
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mm-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.head_box_ii {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.timeBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.time-map {
|
||||
width: 212px;
|
||||
margin: 0 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
.hphmBox {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">预案等级</span>
|
||||
<div>
|
||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
||||
<template #jwd>
|
||||
<div class="flex align-center ww100">
|
||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度"/>
|
||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度"/>
|
||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({});
|
||||
const openType = ref("")
|
||||
const rules = reactive({
|
||||
zsdMc: [{ required: true, message: "请选择预案等级", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "预案等级", prop: "yadj", type: "select",options:props.dic.D_BZ_KFDLX },
|
||||
],
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res => {
|
||||
if(res.type == 'point') {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id,) => {
|
||||
dialogForm.value = true;
|
||||
openType.value = type;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if(id) getDateById(id)
|
||||
};
|
||||
|
||||
// 根据id获取数据
|
||||
const getDateById = (id) =>{
|
||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
const changePoint = () =>{
|
||||
listQuery.value.jd = ''
|
||||
listQuery.value.wd = ''
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(()=>{
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height:500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="预案等级管理">
|
||||
<el-button type="primary" @click="addEdit('add', null)">
|
||||
<el-icon>
|
||||
<CirclePlus />
|
||||
</el-icon><span>新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #yadj="{ row }">
|
||||
<dict-tag :options="D_BZ_KFDLX" :value="row.yadj" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @updateData="getList" :dic="{D_BZ_KFDLX}" />
|
||||
</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/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_KFDLX } = proxy.$dict("D_BZ_KFDLX");
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "预案等级",
|
||||
prop: "yadj",
|
||||
placeholder: "预案等级",
|
||||
showType: "select",
|
||||
options: []
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "编码", prop: "bm" },
|
||||
{ label: "预定等级", prop: "yadj", showSolt: true },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
})
|
||||
// 搜索
|
||||
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 delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").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>
|
||||
@ -1,111 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">预案类型</span>
|
||||
<div>
|
||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({});
|
||||
const openType = ref("")
|
||||
const rules = reactive({
|
||||
zsdMc: [{ required: true, message: "请选择预案类型", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "预案类型", prop: "yalx", type: "select",options:props.dic.D_BZ_KFDLX },
|
||||
],
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res => {
|
||||
if(res.type == 'point') {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id,) => {
|
||||
dialogForm.value = true;
|
||||
openType.value = type;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if(id) getDateById(id)
|
||||
};
|
||||
|
||||
// 根据id获取数据
|
||||
const getDateById = (id) =>{
|
||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
const changePoint = () =>{
|
||||
listQuery.value.jd = ''
|
||||
listQuery.value.wd = ''
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(()=>{
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height:500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="预案类型管理">
|
||||
<el-button type="primary" @click="addEdit('add', null)">
|
||||
<el-icon>
|
||||
<CirclePlus />
|
||||
</el-icon><span>新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #yadj="{ row }">
|
||||
<dict-tag :options="D_BZ_KFDLX" :value="row.yadj" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @updateData="getList" :dic="{D_BZ_KFDLX}" />
|
||||
</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/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_KFDLX } = proxy.$dict("D_BZ_KFDLX");
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "预案类型",
|
||||
prop: "yalx",
|
||||
placeholder: "预案类型",
|
||||
showType: "select",
|
||||
options: []
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "编码", prop: "bm" },
|
||||
{ label: "预案类型", prop: "yalx", showSolt: true },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
})
|
||||
// 搜索
|
||||
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 delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").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>
|
||||
@ -1,309 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">预案</span>
|
||||
<div>
|
||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary"
|
||||
:loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" ref="FormRef" :rules="rules" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门" style="width:48%">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="预案名称" style="width:48%">
|
||||
<el-input placeholder="请输入预案名称" v-model="listQuery.yamc" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="预案代号" style="width:48%">
|
||||
<el-input placeholder="请输入预案代号" v-model="listQuery.yadh" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="案发地址" style="width:48%">
|
||||
<el-input placeholder="请输入案发地址" v-model="listQuery.afdz" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="预案等级" style="width:48%">
|
||||
<el-select filterable v-model="listQuery.yadj" class="m-2" placeholder="请选择预案等级">
|
||||
<el-option v-for="item in dic.D_BZ_CLPP" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="预案类型" style="width:48%">
|
||||
<el-select filterable v-model="listQuery.yalx" class="m-2" placeholder="请选择预案类型">
|
||||
<el-option v-for="item in dic.D_BZ_CLPP" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="案发坐标" style="width:100%">
|
||||
<div class="flex align-center ww100">
|
||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度" />
|
||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度" />
|
||||
<el-button type="primary" @click="openJwdDialog">选择点位</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="主题" style="width:100%">
|
||||
<el-input placeholder="请输入主题" type="textarea" v-model="listQuery.zt" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<div style="width: 100%;">
|
||||
<el-button type="primary" style="margin: 10px 0;">关联线索、情报</el-button>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth">
|
||||
<template #ewm="{ row }">
|
||||
<el-image :src="`${baseUrl}${row.ewm}`" preview-teleported>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #bxdLx="{ row }">
|
||||
<DictTag :value="row.bxdLx" :tag="false" :options="dic.D_BZ_BXDLX" />
|
||||
</template>
|
||||
<template #controls="{ row, index }">
|
||||
<el-link type="danger" @click="deleteRow(row, index)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<div style="width: 100%;">
|
||||
<el-button type="primary" style="margin: 10px 0;" @click="addYabk">添加预案板块</el-button>
|
||||
<ul v-if="listQuery.yabkList && listQuery.yabkList.length > 0">
|
||||
<li v-for="(el, idx) in listQuery.yabkList">
|
||||
<div class="title flex just-between align-center mb10">
|
||||
|
||||
<div style="color: #000;">板块{{ idx + 1 }}</div>
|
||||
<div>
|
||||
<el-button type="primary" @click="addDwll(el)">选择点位力量</el-button>
|
||||
<el-button type="delete" @click="reduceDwll(el)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="名称" prop="mc" style="width:100%"
|
||||
:rules='[{ required: true, message: "请输入名称", trigger: "blur" }]'>
|
||||
<el-input placeholder="请输入名称" v-model="el.mc" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="nr" style="width:100%"
|
||||
:rules='[{ required: true, message: "请输入内容", trigger: "blur" }]'>
|
||||
<el-input placeholder="请输入内容" type="textarea" v-model="el.nr" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<div v-if="el.dwll">
|
||||
<el-form-item label="别名" style="width:48%"
|
||||
:rules='[{ required: true, message: "请输入别名", trigger: "blur" }]'>
|
||||
<el-input placeholder="请输入别名" v-model="el.dwll.bm" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="带队领导" style="width:48%"
|
||||
:rules='[{ required: true, message: "请输入别名", trigger: "blur" }]'>
|
||||
<el-input placeholder="请选择带队领导" v-model="el.dwll.fzr" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" style="width:48%">
|
||||
<el-input placeholder="请输入联系电话" v-model="el.dwll.lxdh" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="职责" style="width:100%">
|
||||
<el-input placeholder="请输入职责" type="textarea" v-model="el.dwll.ze" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-button type="primary" class="mb10" @click="addPs(el.dwll)">新增配属</el-button>
|
||||
<div v-for="(item, index) in el.dwll.ps" :key="item">
|
||||
<el-form-item label="配属" style="width:48%">
|
||||
<el-input placeholder="请选择配属" v-model="item.xm" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" style="width:48%">
|
||||
<el-input placeholder="请选择联系电话" v-model="item.lxdh" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="职责" style="width:100%">
|
||||
<el-input placeholder="请输入职责" type="textarea" v-model="item.ze" clearabl></el-input>
|
||||
<el-icon size="32px" color="#000" @click="reducePs(el.dwll.ps, index)">
|
||||
<Minus />
|
||||
</el-icon>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="责任单位" style="width:48%">
|
||||
<MOSTY.Department width="100%" :multiple="true" clearable v-model="el.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择点位" style="width:48%">
|
||||
<el-button type="primary" @click="pointDialogShow = true">选择点位</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-divider content-position="left">分隔</el-divider>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<ChooseJwd v-model="jwdDialogShow" v-if="jwdDialogShow" @submitFn="submitFn" />
|
||||
<AddPoint v-model="pointDialogShow" v-if="pointDialogShow" @submitFn="submitPointFn" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ChooseJwd from '../../components/chooseJwd.vue'
|
||||
import AddPoint from '../../components/addPoint.vue'
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref, defineProps, reactive, defineEmits, getCurrentInstance, onMounted } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const pointDialogShow = ref(false);
|
||||
const jwdDialogShow = ref(false)
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({
|
||||
yabkList: []
|
||||
});
|
||||
const openType = ref("")
|
||||
const pageData = reactive({
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
},
|
||||
tableData: [],
|
||||
tableHeight: 400,
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "类型", prop: "bxdMc", showSolt: true },
|
||||
{ label: "名称", prop: "jd" },
|
||||
{ label: "内容", prop: "wd" },
|
||||
]
|
||||
});
|
||||
const rules = reactive({
|
||||
zsdMc: [{ required: true, message: "请输入值守点名称", trigger: "blur" }],
|
||||
});
|
||||
const bkformList = reactive([
|
||||
[
|
||||
{ label: "名称", prop: "mc", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "内容", prop: "nr", type: "input", lx: 'textarea' },
|
||||
],
|
||||
])
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
{ label: "预案名称", prop: "yamc", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "预案代号", prop: "yadm", type: "input" },
|
||||
{ label: "案发地址", prop: "afdz", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "预案等级", prop: "yadj", type: "select", options: [] },
|
||||
{ label: "预案类型", prop: "yalx", type: "select", options: [] },
|
||||
],
|
||||
[
|
||||
{ label: "案发坐标", prop: "jwd", type: "slot" },
|
||||
],
|
||||
[
|
||||
{ label: "主题", prop: "zt", type: "input", lx: 'textarea' },
|
||||
],
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
onMounted(() => {
|
||||
})
|
||||
|
||||
// 新增预案板块
|
||||
const addYabk = () => {
|
||||
listQuery.value.yabkList.push({
|
||||
mc: '',
|
||||
nr: ""
|
||||
})
|
||||
}
|
||||
// 新增点位
|
||||
const addDwll = (el) => {
|
||||
el.dwll = {
|
||||
bm: "", fzr: "", lxdh: "", ze: "", ps: [{
|
||||
xm: "",
|
||||
lxdh: "",
|
||||
ze: ""
|
||||
}]
|
||||
}
|
||||
}
|
||||
// 新增配属
|
||||
const addPs = (item) => {
|
||||
console.log(item, 'item');
|
||||
|
||||
item.ps.push({
|
||||
xm: "",
|
||||
lxdh: "",
|
||||
ze: ""
|
||||
})
|
||||
}
|
||||
// 删除点位力量
|
||||
const reduceDwll = (el) => {
|
||||
console.log(el, 'el');
|
||||
el.dwll = null
|
||||
}
|
||||
// 删除配属
|
||||
const reducePs = (arr, idx) => {
|
||||
arr.splice(idx, 1)
|
||||
}
|
||||
// 初始化数据
|
||||
const init = (type, id,) => {
|
||||
dialogForm.value = true;
|
||||
openType.value = type;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if (id) getDateById(id)
|
||||
};
|
||||
|
||||
// 根据id获取数据
|
||||
const getDateById = (id) => {
|
||||
qcckGet({ id }, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
const openJwdDialog = () => {
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point' });
|
||||
jwdDialogShow.value = true
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
const submitFn = (val) => {
|
||||
listQuery.value.jd = val.jd
|
||||
listQuery.value.wd = val.wd
|
||||
}
|
||||
const submitPointFn = (val) => {
|
||||
console.log(val, 'val');
|
||||
|
||||
}
|
||||
const deleteRow = (row, idx) => {
|
||||
pageData.tableData.splice(idx, 1)
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
|
||||
.mapBox {
|
||||
width: 70%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="预案管理（市局）">
|
||||
<el-button type="primary" @click="addEdit('add', null)">
|
||||
<el-icon>
|
||||
<CirclePlus />
|
||||
</el-icon><span>新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @updateData="getList" />
|
||||
</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/detailForm.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: "yamc",
|
||||
placeholder: "预案名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "预案代号",
|
||||
prop: "yadh",
|
||||
placeholder: "预案代号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "预案等级",
|
||||
prop: "yadj",
|
||||
placeholder: "预案等级",
|
||||
showType: "select",
|
||||
options:[]
|
||||
},
|
||||
{
|
||||
label: "预案类型",
|
||||
prop: "yalx",
|
||||
placeholder: "预案类型",
|
||||
showType: "select",
|
||||
options:[]
|
||||
},
|
||||
{
|
||||
label: "启动状态",
|
||||
prop: "qdzt",
|
||||
placeholder: "启动状态",
|
||||
showType: "select",
|
||||
options:[]
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "预案代号", prop: "yadh" },
|
||||
{ label: "预案名称", prop: "yamc" },
|
||||
{ label: "预案等级", prop: "yadj" },
|
||||
{ label: "预案类型", prop: "yalx" },
|
||||
{ label: "启动状态", prop: "qdzt" },
|
||||
{ label: "执行次数（次）", prop: "wpdw" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
})
|
||||
// 搜索
|
||||
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 delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").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>
|
||||
@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<el-dialog title="选择坐标" width="1400px" :model-value="modelValue" @close="closed">
|
||||
<div class="flex just-between">
|
||||
<el-form :model="listQuery" style="width: 30%;height: 60vh;overflow: auto;" ref="FormRef" :rules="rules" label-width="80px"
|
||||
class="mosty-from-wrap" :inline="true">
|
||||
<div class="flex just-between align-center">
|
||||
<div>点位坐标</div>
|
||||
<div><el-button @click="addFn('add')">添加</el-button></div>
|
||||
</div>
|
||||
<div v-for="(item, idx) in dwList" :key="idx">
|
||||
<el-form-item label="点位名称" prop="dwmc" style="width:100%"
|
||||
:rules='[{ required: true, message: "请输入点位名称", trigger: "blur" }]'>
|
||||
<el-input placeholder="请输入点位名称" v-model="item.dwmc" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="坐标" prop="jd" style="width:100%"
|
||||
:rules='[{ required: true, message: "请选择经纬度", trigger: "blur" }]'>
|
||||
<el-input style="width: 100%;" v-model="item.jd" placeholder="请选择经度" />
|
||||
<el-input style="width: 100%;" v-model="item.wd" placeholder="请选择纬度" />
|
||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="dz" style="width:100%"
|
||||
:rules='[{ required: true, message: "请输入名称", trigger: "blur" }]'>
|
||||
<el-input placeholder="请输入地址" v-model="item.dz" clearabl></el-input>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-button type="danger" @click="delFn(item, idx)">删除点位</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="mapBox relative">
|
||||
<GdMap v-if="mapShow"></GdMap>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
tabOption: {
|
||||
type: Array,
|
||||
require: []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: []
|
||||
},
|
||||
myId: {
|
||||
type: String,
|
||||
require: ""
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: ""
|
||||
}
|
||||
});
|
||||
const FormRef = ref()
|
||||
const listQuery = ref({})
|
||||
const mapShow = ref(false)
|
||||
const dwList = ref([{ dwmc: "", jd: "", wd: "", dz: "" }])
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
// 获取数据
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
mapShow.value = true
|
||||
}, 100);
|
||||
emitter.on("coordString", (res => {
|
||||
if (res.type == 'point') {
|
||||
dwList.value[dwList.value.length - 1].jd = res.coord[0];
|
||||
dwList.value[dwList.value.length - 1].wd = res.coord[1];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{ jd: res.coord[0], wd: res.coord[1] }], icon, flag: 'bxd' });
|
||||
}
|
||||
}))
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
// 选择点位
|
||||
const changePoint = () => {
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point' });
|
||||
}
|
||||
function submit() {
|
||||
emits("submitFn", listQuery.value)
|
||||
closed()
|
||||
}
|
||||
const delFn = (item, i) => {
|
||||
dwList.value.splice(i, 1);
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
}
|
||||
const addFn = (item) => {
|
||||
listQuery.value.jd = dwList.value[dwList.value.length - 1].jd
|
||||
listQuery.value.wd = dwList.value[dwList.value.length - 1].wd
|
||||
listQuery.value.dz = dwList.value[dwList.value.length - 1].dz
|
||||
listQuery.value.dwmc = dwList.value[dwList.value.length - 1].dwmc
|
||||
FormRef.value.validate((vaild) => {
|
||||
if (!vaild) return
|
||||
dwList.value.push({ dwmc: "", jd: "", wd: "", dz: "" })
|
||||
listQuery.value = {
|
||||
jd: "",
|
||||
wd: "",
|
||||
dwmc: "",
|
||||
dz: ""
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<el-dialog title="选择坐标" width="1400px" :model-value="modelValue" @close="closed">
|
||||
<div class="flex align-center ww100">
|
||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度" />
|
||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度" />
|
||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
||||
</div>
|
||||
<div class="mapBox relative">
|
||||
<GdMap mapid="mapId" v-if="mapShow"></GdMap>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
tabOption: {
|
||||
type: Array,
|
||||
require: []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: []
|
||||
},
|
||||
myId: {
|
||||
type: String,
|
||||
require: ""
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: ""
|
||||
}
|
||||
});
|
||||
const mapShow = ref(false)
|
||||
const listQuery = ref({})
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
// 获取数据
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
mapShow.value = true
|
||||
}, 100);
|
||||
emitter.on("coordString", (res => {
|
||||
if (res.type == 'point') {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{ jd: res.coord[0], wd: res.coord[1] }], icon, flag: 'bxd' });
|
||||
}
|
||||
}))
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
// 选择点位
|
||||
const changePoint = () => {
|
||||
listQuery.value.jd = ''
|
||||
listQuery.value.wd = ''
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point' });
|
||||
}
|
||||
function submit() {
|
||||
emits("submitFn", listQuery.value)
|
||||
closed()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<div class="contmin">
|
||||
<div class="head-tab">
|
||||
<span :class="active == 'USER' ? 'active' : ''" @click="active = 'USER'">个人中心</span>
|
||||
<span :class="active == 'USER' ? '' : 'active'" @click="active = 'INFO',getListData()">消息中心</span>
|
||||
</div>
|
||||
<div v-if="active == 'USER'" class="userinfo">
|
||||
<div>
|
||||
<div class="toux"><img src="@/assets/images/tx.png" />头像</div>
|
||||
<ul>
|
||||
<li>
|
||||
<span>姓名：</span>
|
||||
<el-input readonly v-model="params.userName"></el-input>
|
||||
</li>
|
||||
<li>
|
||||
<span>性别：</span>
|
||||
<el-input readonly v-model="params.sex"></el-input>
|
||||
</li>
|
||||
<li>
|
||||
<span>手机号：</span>
|
||||
<el-input readonly v-model="params.mobile"></el-input>
|
||||
</li>
|
||||
<li>
|
||||
<span>身份证号码：</span>
|
||||
<el-input readonly v-model="params.idEntityCard"></el-input>
|
||||
</li>
|
||||
<li>
|
||||
<span>警号：</span>
|
||||
<el-input readonly v-model="params.inDustRialId"></el-input>
|
||||
</li>
|
||||
<li>
|
||||
<span>所属部门：</span>
|
||||
<el-input readonly v-model="params.ssbm"></el-input>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="xiaoxi">
|
||||
<ul v-loading="loading">
|
||||
<li v-for="(item, index) in tableData" :key="index">
|
||||
<img v-show="item.xtLrrid !== 'admin'" class="icon" src="@/assets/images/top-message.png"/>
|
||||
<img v-show="item.xtLrrid === 'admin'" class="xxx" src="@/assets/images/top_message_xt.png"/>
|
||||
<div class="item-head">
|
||||
<span>{{ item.xtLrrid == "admin" ? "来自系统的通知" : `来自${item.xtLrrxm}的信息`}}</span>
|
||||
<div>
|
||||
<el-icon class="icon" size="16px" color="#206bcf"><Clock /></el-icon>{{ item.xtLrsj }}
|
||||
</div>
|
||||
</div>
|
||||
<p> {{ item.xxnr }} </p>
|
||||
<div class="btn">
|
||||
<span v-if="item.xtLrrid != 'admin'">
|
||||
<el-icon class="icon" size="16px" color="#e88e2a"><Edit /></el-icon>回复
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<el-empty
|
||||
description="没有数据"
|
||||
:image-size="150"
|
||||
v-if="!loading && tableData.length <= 0"
|
||||
/>
|
||||
</ul>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNum"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getUserInfoToId } from "@/api/user-manage";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { getPageList, sendMsg } from "@/api/editPassword.js";
|
||||
const router = useRouter();
|
||||
const active = ref("USER");
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const params = ref({});
|
||||
const loading = ref(false)
|
||||
function getUserInfo() {
|
||||
let id = getItem("USERID");
|
||||
let dept = getItem("deptId");
|
||||
getUserInfoToId(id).then((res) => {
|
||||
params.value = res;
|
||||
params.value.sex = res.sex == "1" ? "男" : "女";
|
||||
params.value.ssbm = dept[dept.length - 1].deptName;
|
||||
});
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
loading.value = true
|
||||
getPageList(listQuery.value).then((res) => {
|
||||
loading.value = false
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false
|
||||
});
|
||||
}
|
||||
const tableData = ref([]);
|
||||
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageNum = 1;
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => { getUserInfo(); });
|
||||
watch(() => router.currentRoute.value.fullPath,
|
||||
(val) => {
|
||||
active.value = val === "/editPassword" ? 'USER':'INFO'
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.contmin {
|
||||
height: 100%;
|
||||
padding: 0 2%;
|
||||
background: url("~@/assets/images/user_info.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.head-tab {
|
||||
padding: 2%;
|
||||
color: #fff;
|
||||
span {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
background: #02296a;
|
||||
margin-right: 12px;
|
||||
}
|
||||
span.active {
|
||||
background: #0d59b2;
|
||||
}
|
||||
}
|
||||
.userinfo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> div {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
.toux {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 100px;
|
||||
img {
|
||||
border: 1px solid rgb(58, 73, 235);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 24px 0;
|
||||
> span {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.xiaoxi {
|
||||
ul {
|
||||
height: calc(100vh - 300px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
li {
|
||||
border: 1px solid rgb(1, 124, 255);
|
||||
padding: 12px 12px 12px 36px;
|
||||
margin: 12px 12px 0 0;
|
||||
position: relative;
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
.xxx{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.item-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
div {
|
||||
position: relative;
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #aeaeae;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-left: 32px;
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
> span:hover {
|
||||
color: #0d59b2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background-color: #053390;
|
||||
border: 1px solid #00BFFF;
|
||||
}
|
||||
::v-deep .el-empty{
|
||||
margin-top: 10vw;
|
||||
}
|
||||
::v-deep .el-loading-mask{
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
</style>
|
||||
@ -1,391 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-01-25 16:21:46
|
||||
* @LastEditTime: 2024-01-26 10:10:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
v-show="!disabledFoem"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
:disabled="disabledFoem"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="ssxqid" label="所属巡区">
|
||||
<el-select v-model="listQuery.ssxqid">
|
||||
<el-option
|
||||
v-for="item in props.dic.D_XFTZ_XQLX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="xfbmmc" label="走访对象">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.xfbmmc"
|
||||
placeholder="请填写走访对象"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xzqhdm" label="行政辖区">
|
||||
<el-select v-model="listQuery.xzqhdm">
|
||||
<el-option
|
||||
v-for="item in props.dic.D_XFTZ_XZXQ"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="ssjdb" label="街道办">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.ssjdb"
|
||||
placeholder="请填写街道办"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sssq" label="社区">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.sssq"
|
||||
placeholder="请填写社区"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dwxz" label="走访对象类型">
|
||||
<el-select v-model="listQuery.dwxz">
|
||||
<el-option
|
||||
v-for="item in props.dic.D_XFTZ_DWXZ"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dwfzrxm" label="负责人姓名">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.dwfzrxm"
|
||||
placeholder="请填写负责人姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dwfzrlxdh" label="负责人联系电话">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.dwfzrlxdh"
|
||||
placeholder="请填写负责人联系电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbfwly" label="安保服务来源">
|
||||
<el-select v-model="listQuery.zbfwly">
|
||||
<el-option
|
||||
v-for="item in props.dic.D_DWGL_ABFWLY"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="abfzrzxm" label="安保负责人姓名">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.abfzrzxm"
|
||||
placeholder="请填写安保负责人姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="abfzrzdh" label="安保负责人电话">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.abfzrzdh"
|
||||
placeholder="请填写安保负责人电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bars" label="网格员/保安人数">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
type="number"
|
||||
v-model="listQuery.bars"
|
||||
placeholder="请填写网格员/保安人数"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dwdz" label="地址">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
v-model="listQuery.dwdz"
|
||||
placeholder="请填写详细地址：区、街道、路、门牌号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jd" label="经度">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
type="number"
|
||||
v-model="listQuery.jd"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="wd" label="纬度">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
clearable
|
||||
type="number"
|
||||
v-model="listQuery.wd"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<template #label>
|
||||
经纬度
|
||||
<el-button type="pramary" @click="chackLat">坐标</el-button></template
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<div style="width: 35%; height: 360px"><GdMap /></div>
|
||||
<el-form-item label="走访照片" style="width: 100%">
|
||||
<MOSTY.Upload
|
||||
width="800px"
|
||||
:limit="3"
|
||||
v-model="listQuery.xfzp"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<ChooseUser
|
||||
v-if="chooseUserVisible"
|
||||
v-model="chooseUserVisible"
|
||||
titleValue="选择负责人"
|
||||
:roleIds="hasChooseFzr"
|
||||
@choosedUsers="hanlderChoose"
|
||||
></ChooseUser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import Person from "@/assets/images/default_male.png";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
reactive,
|
||||
onMounted,
|
||||
defineProps,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emits = defineEmits(["updateChange"]);
|
||||
const imgList = ref([]);
|
||||
const urlImg = ref("/mosty-base/minio/image/download/");
|
||||
const props = defineProps({
|
||||
dic: { type: Object, default: {} }
|
||||
});
|
||||
const fileList = ref([]);
|
||||
const xflxList = ref([
|
||||
{ label: "巡访类型1", value: "01" },
|
||||
{ label: "巡访类型2", value: "02" }
|
||||
]);
|
||||
const chooseUserVisible = ref(false); //负责人弹窗
|
||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
||||
const hasChooseMj = ref([]); //已经选胡民警
|
||||
|
||||
const title = ref("新增巡访台账");
|
||||
const disabledFoem = ref(false); //表单禁用
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const xfzy = ref([]);
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
|
||||
dwxz: [{ required: true, message: "请选择单位性质", trigger: "change" }],
|
||||
dwfzrxm: [{ required: true, message: "请输入负责人姓名", trigger: "change" }],
|
||||
dwfzrlxdh: [
|
||||
{ required: true, message: "请输入负责人联系电话", trigger: "change" }
|
||||
],
|
||||
abfzrzxm: [
|
||||
{ required: true, message: "请输入安保负责人姓名", trigger: "change" }
|
||||
],
|
||||
abfzrzdh: [
|
||||
{ required: true, message: "请输入安保负责人电话", trigger: "change" }
|
||||
],
|
||||
bars: [
|
||||
{ required: true, message: "请输入网格员/保安人数", trigger: "change" }
|
||||
],
|
||||
ssxqid: [{ required: true, message: "请输入所属巡区", trigger: "change" }],
|
||||
xfbmmc: [{ required: true, message: "请输入巡防部门", trigger: "change" }],
|
||||
xzqhdm: [{ required: true, message: "请选择行政辖区", trigger: "change" }],
|
||||
dwdz: [{ required: true, message: "请输入地址", trigger: "change" }]
|
||||
});
|
||||
|
||||
//选择用户负责人
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
hasChooseFzr.value = [user.id];
|
||||
listQuery.value.xfzz = user.userName;
|
||||
};
|
||||
onMounted(() => {
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id) => {
|
||||
dialogForm.value = true;
|
||||
listQuery.value.xfzp = [];
|
||||
if (type == "add") {
|
||||
disabledFoem.value = false;
|
||||
title.value = "新增巡访台账";
|
||||
} else if (type == "edit") {
|
||||
disabledFoem.value = false;
|
||||
title.value = "修改巡访台账";
|
||||
} else {
|
||||
disabledFoem.value = true;
|
||||
title.value = "巡访台账详情";
|
||||
}
|
||||
if (id) {
|
||||
getDataById(id); //根据id查询详情
|
||||
}
|
||||
};
|
||||
// 根据id查询详情
|
||||
const getDataById = (id) => {
|
||||
qcckGet({ id }, "/mosty-jmxf/xftz/selectById").then((res) => {
|
||||
listQuery.value = JSON.parse(JSON.stringify(res));
|
||||
listQuery.value.xfzp = listQuery.value.xfzp
|
||||
? listQuery.value.xfzp.split(",")
|
||||
: [];
|
||||
});
|
||||
};
|
||||
|
||||
//获取经纬度
|
||||
function chackLat(type) {
|
||||
emitter.emit("drawShape", { type: "point", flag: "point", isclear: true });
|
||||
listQuery.value.jd = "";
|
||||
listQuery.value.wd = "";
|
||||
}
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
if (listQuery.value.xfzp && Array.isArray(listQuery.value.xfzp))
|
||||
listQuery.value.xfzp = listQuery.value.xfzp.join(",");
|
||||
if (listQuery.value.id) {
|
||||
qcckPost(listQuery.value, "/mosty-jmxf/xftz/updateEntity")
|
||||
.then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogForm.value = false;
|
||||
emits("updateChange");
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
qcckPost(listQuery.value, "/mosty-jmxf/xftz/addEntity")
|
||||
.then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogForm.value = false;
|
||||
emits("updateChange");
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = { sfzh: "" };
|
||||
dialogForm.value = false;
|
||||
};
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.photosBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.photosItem {
|
||||
width: 98px;
|
||||
height: 130px;
|
||||
margin-right: 10px;
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dzBox {
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
.dzItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
.text {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
background: #001238;
|
||||
}
|
||||
</style>
|
||||
@ -1,298 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="走访单位管理">
|
||||
<el-button type="primary" @click="lookDetail('add','')">
|
||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" @click="upDate" :loading='loading'>
|
||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">批量导入</span>
|
||||
</el-button> -->
|
||||
<el-button type="info" plain icon="Upload" @click="isImport = true">
|
||||
<span style="vertical-align: middle">批量导入</span>
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" @click="exportDate">
|
||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">导出报表</span>
|
||||
</el-button> -->
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
||||
<template #defaultSlot>
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
|
||||
<template #ssxqid="{ row }">
|
||||
<dict-tag :value="row.ssxqid" :options="D_XFTZ_XQLX" :tag="false"></dict-tag>
|
||||
</template>
|
||||
<template #dwxz="{ row }">
|
||||
<dict-tag :value="row.dwxz" :options="D_XFTZ_DWXZ" :tag="false"></dict-tag>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="lookDetail('edit', row)">修改</el-button>
|
||||
<el-button size="small" @click="lookDetail('detail', row)">详情</el-button>
|
||||
<el-button size="small" type="danger" @click="detelrow(row)">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<EditAddForm ref="editInfo" @updateChange='getDataList' :dic="{'D_XFTZ_XQLX':D_XFTZ_XQLX,'D_XFTZ_XZXQ':D_XFTZ_XZXQ,'D_XFTZ_DWXZ':D_XFTZ_DWXZ,'D_DWGL_ABFWLY':D_DWGL_ABFWLY}"></EditAddForm>
|
||||
<!-- 导入 -->
|
||||
<Export
|
||||
:show="isImport"
|
||||
lx="xfdwbb"
|
||||
@closeImport="isImport = false"
|
||||
@handleImport="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import Export from "@/components/export/index.vue";
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import EditAddForm from './components/editAddForm.vue'
|
||||
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 { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_XFTZ_XQLX,D_XFTZ_XZXQ,D_XFTZ_DWXZ,D_DWGL_ABFWLY } = proxy.$dict("D_XFTZ_XQLX","D_XFTZ_XZXQ","D_XFTZ_DWXZ","D_DWGL_ABFWLY");
|
||||
const ids = ref([]);//多选
|
||||
const isImport = ref(false);
|
||||
const searchBox = ref() //搜索框
|
||||
const listQuery = ref({})
|
||||
const editInfo = ref()
|
||||
const queryForm = ref()
|
||||
const loading=ref(false)
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "defaultSlot",
|
||||
prop: "ssbmdm",
|
||||
options: [],
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
showType: "input",
|
||||
prop: "xfbmmc",
|
||||
placeholder: "请输入走访对象名称",
|
||||
label: "走访对象",
|
||||
},
|
||||
{
|
||||
showType: "input",
|
||||
prop: "xqldxm",
|
||||
placeholder: "请输入巡区领导姓名",
|
||||
label: "巡区领导姓名",
|
||||
},
|
||||
{
|
||||
showType: "input",
|
||||
prop: "ssxqmc",
|
||||
placeholder: "请输入所属巡区名称",
|
||||
label: "所属巡区名称",
|
||||
},
|
||||
// {
|
||||
// showType: "select",
|
||||
// prop: "ssxqid",
|
||||
// placeholder: "请选择所属巡区",
|
||||
// label: "所属巡区",
|
||||
// options:D_XFTZ_XQLX
|
||||
// },
|
||||
// {
|
||||
// showType: "select",
|
||||
// prop: "dwxz",
|
||||
// placeholder: "请选择走访对象类型",
|
||||
// label: "走访对象类型",
|
||||
// options:D_XFTZ_DWXZ
|
||||
// },
|
||||
// {
|
||||
// showType: "select",
|
||||
// prop: "xzqhdm",
|
||||
// placeholder: "请选择行政辖区",
|
||||
// label: "行政辖区",
|
||||
// options:D_XFTZ_XZXQ
|
||||
// },
|
||||
|
||||
])
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "ssbm"
|
||||
},
|
||||
{
|
||||
label: "所属巡区",
|
||||
prop: "ssxqid",
|
||||
showSolt:true
|
||||
},
|
||||
{
|
||||
label: "走访对象",
|
||||
prop: "xfbmmc"
|
||||
},
|
||||
{
|
||||
label: "巡防年份",
|
||||
prop: "xfnf"
|
||||
},
|
||||
{
|
||||
label: "走访对象类型",
|
||||
prop: "dwxz",
|
||||
showSolt:true
|
||||
},
|
||||
{
|
||||
label: "负责人姓名",
|
||||
prop: "dwfzrxm"
|
||||
},
|
||||
{
|
||||
label: "安保负责人姓名",
|
||||
prop: "abfzrzxm",
|
||||
},
|
||||
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
getDataList()
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
delete val.ssbmdm
|
||||
listQuery.value = {...listQuery.value,...val}
|
||||
if(val.cz) listQuery.value.ssbmdm = '';
|
||||
delete listQuery.value.cz;
|
||||
pageData.pageConfiger.pageNum=1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
|
||||
// 获取数据
|
||||
const getDataList = ()=>{
|
||||
let pramas = {
|
||||
pageSize:pageData.pageConfiger.pageSize,
|
||||
pageCurrent:pageData.pageConfiger.pageNum,
|
||||
...listQuery.value
|
||||
}
|
||||
delete pramas.daterange
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckGet(pramas,'/mosty-jmxf/xftz/selectPageList').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getDataList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getDataList()
|
||||
}
|
||||
//删除
|
||||
function detelrow(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
qcckPost([row.id],'/mosty-jmxf/xftz/deleteById').then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getDataList()
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
// 导出报表
|
||||
const exportDate = ()=>{}
|
||||
// 详情
|
||||
const lookDetail = (type,row)=>{
|
||||
editInfo.value.init(type,row.id)
|
||||
}
|
||||
//批量导入
|
||||
function upDate(file) {
|
||||
loading.value=true
|
||||
let formData=new FormData()
|
||||
formData.append('file',file.raw)
|
||||
qcckPost(formData,'/mosty-jmxf/xftz/batchExport').then(res=>{
|
||||
pageData.pageConfiger.pageNum=1
|
||||
getDataList()
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "导入成功"
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.value=false
|
||||
})
|
||||
}
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.green{
|
||||
color: #00FF89;
|
||||
}
|
||||
.orange{
|
||||
color: orange;
|
||||
}
|
||||
.red{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user