警报
This commit is contained in:
13684185576
@ -0,0 +1,96 @@
|
||||
<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 { qcckGet } from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import BarHatEcharts from "@/components/echarts/barNewHatEcharts.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
|
||||
const searchConfiger = ref([{ label: "时间段", prop: "time", showType: "daterange" }]);
|
||||
const searchDate = ref({})
|
||||
const obj = ref({
|
||||
xDate: [],
|
||||
list: []
|
||||
});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableHeight: 620,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
showIndex: false
|
||||
},
|
||||
controlsWidth: 100, // No controls needed based on prototype
|
||||
tableColumn: []
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
});
|
||||
const onSearch = params => {
|
||||
console.log("Search params:", params);
|
||||
};
|
||||
const getList = () => {
|
||||
let data = { ...searchDate.value };
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckGet(data, "/mosty-jbld/jbld/jqxt/bmtj").then((res) => {
|
||||
pageData.tableData = res.data || [];
|
||||
pageData.tableColumn = res.title.map((el => {
|
||||
return { label: el.name, prop: el.key }
|
||||
})) || [];
|
||||
pageData.tableColumn.unshift({ label: "", prop: "ssbm" })
|
||||
obj.value.xDate = pageData.tableData.map(v => v.ssbm);
|
||||
res.title.forEach((el) => {
|
||||
obj.value.list.push({
|
||||
name: el.name, value: pageData.tableData.map((item) => {
|
||||
return item[el.key]
|
||||
})
|
||||
})
|
||||
})
|
||||
echartsBar.value++
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
</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>
|
||||
@ -0,0 +1,148 @@
|
||||
<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: "bjr",
|
||||
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: 80,
|
||||
|
||||
tableColumn: [
|
||||
{ label: "管辖部门", prop: "ssbm" },
|
||||
{ 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-jbld/jbld/jqxt/selectPage";
|
||||
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>
|
||||
@ -0,0 +1,89 @@
|
||||
<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 { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
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: "input" },
|
||||
{ label: "报警人", prop: "bjrxm", type: "input" },
|
||||
{ label: "报警人性别", prop: "bjrxb", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "报警人电话", prop: "bjrdh", type: "input" },
|
||||
{ label: "报警时间", prop: "bjsj", type: "date" },
|
||||
{ label: "接警员编号", prop: "jjydh", type: "input" },
|
||||
{ label: "接警员姓名", prop: "jjyxm", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "协调保安", prop: "xtba", type: "input" },
|
||||
{ label: "处置民警", prop: "czmj", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "警情描述", prop: "jqms", type: "input", lx: 'textarea' },
|
||||
]
|
||||
])
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
qcckGet({}, `/mosty-jbld/jbld/jqxt/getInfo/${row.id}`).then(res => {
|
||||
listQuery.value = res
|
||||
})
|
||||
// 根据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>
|
||||
@ -0,0 +1,30 @@
|
||||
<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>
|
||||
@ -0,0 +1,57 @@
|
||||
<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>
|
||||
@ -0,0 +1,247 @@
|
||||
<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>
|
||||
159
src/views/backOfficeSystem/AlarmLinkage/FixedDuty/index.vue
Normal file
159
src/views/backOfficeSystem/AlarmLinkage/FixedDuty/index.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<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>
|
||||
@ -0,0 +1,137 @@
|
||||
<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>
|
||||
159
src/views/backOfficeSystem/AlarmLinkage/GuardPoint/index.vue
Normal file
159
src/views/backOfficeSystem/AlarmLinkage/GuardPoint/index.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<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>
|
||||
@ -0,0 +1,170 @@
|
||||
<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 #dkqk>
|
||||
<MyTable :tableData="listQuery.smjlList" :tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth" @chooseData="chooseData">
|
||||
<template #gw="{ row }">
|
||||
<dict-tag :options="dic.D_BAXX_GWLX" :value="row.gw" :tag="false" />
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<div class="mapBox relative">
|
||||
<!-- <GdMap></GdMap> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
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 pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "岗位", prop: "gw", showSolt: true },
|
||||
{ label: "所属单位", prop: "ssbm" },
|
||||
{ label: "执勤打卡时间", prop: "smsj" }
|
||||
]
|
||||
});
|
||||
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: "zqrXm", type: "input" },
|
||||
{ label: "执勤时间", prop: "smkssj", type: "date" },
|
||||
],
|
||||
[
|
||||
{ label: "执勤情况", prop: "zqqk", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "打卡情况", prop: "dkqk", 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) => {
|
||||
console.log(res,'res');
|
||||
|
||||
listQuery.value = res || {};
|
||||
listQuery.value.zqrXm = res.list ? res.list.join(',') : '';
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
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>
|
||||
@ -0,0 +1,108 @@
|
||||
<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>
|
||||
@ -0,0 +1,40 @@
|
||||
<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" :dic="{ D_BAXX_GWLX }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import DetailForm from "@/views/backOfficeSystem/AlarmLinkage/GuardPoint/components/detailForm.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import ListTable from "./listTable.vue";
|
||||
import Count from "./count.vue";
|
||||
import { nextTick, ref, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BAXX_GWLX } = proxy.$dict("D_BAXX_GWLX");
|
||||
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>
|
||||
@ -0,0 +1,123 @@
|
||||
<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: "smkssj" },
|
||||
{ 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>
|
||||
@ -0,0 +1,236 @@
|
||||
<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">
|
||||
<template #zb>
|
||||
<el-input v-model="listQuery.zb" placeholder="请选择必巡线">
|
||||
<template #append><el-button type="primary" @click="chackLat">开始绘制</el-button></template>
|
||||
</el-input>
|
||||
</template>
|
||||
<div class="mapBox relative mb10">
|
||||
<GdMap></GdMap>
|
||||
</div>
|
||||
<template #bxds>
|
||||
<el-input v-model="listQuery.bxdsl" placeholder="关联点位数量">
|
||||
<template #append><el-button type="primary" @click="addEditPoint('add', row)">新增点位</el-button></template>
|
||||
</el-input>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<div style="padding: 0 12rem;">
|
||||
<MyTable :tableData="listQuery.bxds" :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 }">
|
||||
<el-link type="primary" @click="addEditPoint('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="chooseJwd(row)">选择经纬度</el-link>
|
||||
<el-link type="danger" @click="deleteRow(row)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DetectionPoints ref="addPoint" v-if="showMap" @changeDxd="changeDxd" :dic="{ D_BZ_BXDLX: dic.D_BZ_BXDLX }"></DetectionPoints>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetectionPoints from "./detectionPoints";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { qcckPost, 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 { proxy } = getCurrentInstance();
|
||||
const baseUrl = 'data:image/jpeg;base64,'
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const showMap = ref(false); // 控制地图显示
|
||||
const addPoint = ref();
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const changeItem = ref({});
|
||||
|
||||
const listQuery = ref({
|
||||
bxds: []
|
||||
});
|
||||
const rules = reactive({
|
||||
bxxMc: [{ required: true, message: "请输入必巡线名称", trigger: "blur" }],
|
||||
bxxLx: [{ required: true, message: "请选择必巡线类型", trigger: "blur" }],
|
||||
});
|
||||
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "必巡线名称", prop: "bxxMc", type: "input" },
|
||||
{ label: "必巡线类型", prop: "bxxLx", type: "select", options: props.dic.D_BZ_BXDLX },
|
||||
{ label: "所属辖区", prop: "ssxq", type: "select", options: props.dic.D_BZ_XZQHDM },
|
||||
],
|
||||
[
|
||||
{ label: "必巡线", prop: "zb", type: "slot",width:'100%' },
|
||||
],
|
||||
{ label: "", prop: "map", type: "slot",width:'100%' },
|
||||
[
|
||||
{ label: "必巡点", prop: "bxds", type: "slot",width:'100%' },
|
||||
]
|
||||
])
|
||||
const pageData = reactive({
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
},
|
||||
tableHeight: 400,
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "必巡点名称", prop: "bxdMc"},
|
||||
{ label: "经度", prop: "jd"},
|
||||
{ label: "纬度", prop: "wd"},
|
||||
{ label: "二维码", prop: "ewm",showSolt: true },
|
||||
{ label: "必巡点类型", prop: "bxdLx", showSolt: true },
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
dialogForm.value = true;
|
||||
if (row) getDateById(row.id) ;
|
||||
};
|
||||
|
||||
// 获取详情
|
||||
const getDateById = (id) => {
|
||||
qcckGet({ id }, `/mosty-jbld/jbldBxx/selectById`).then((res) => {
|
||||
emitter.emit("echoLine", { coords: [{coords:[res.zb]}],type:'solid', flag: 'bxx'});
|
||||
res.bxds = res.bxds ? res.bxds : [];
|
||||
res.bxds.forEach((item) => {
|
||||
let icon = require('@/assets/point/zsdw.png');
|
||||
emitter.emit("addPointArea", { coords: [item], icon, flag: 'bxd'+item.id });
|
||||
});
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEditPoint = (type, row) => {
|
||||
if(!listQuery.value.zb) return proxy.$message.warning("请先选择必巡线");
|
||||
showMap.value = true;
|
||||
nextTick(() => {
|
||||
addPoint.value.init(type, row,listQuery.value.zb);
|
||||
});
|
||||
};
|
||||
|
||||
// 新增或者编辑比巡店
|
||||
const changeDxd = (val) => {
|
||||
if(val.type == 'add') {
|
||||
listQuery.value.bxds.push(val.data);
|
||||
} else {
|
||||
let index = listQuery.value.bxds.findIndex(item => item.id == val.data.id);
|
||||
listQuery.value.bxds.splice(index, 1, val.data);
|
||||
}
|
||||
listQuery.bxdsl = listQuery.value.bxds.length;
|
||||
pageData.keyCount++;
|
||||
if(val.data.jd && val.data.wd) {
|
||||
emitter.emit("deletePointArea", 'bxd' + val.data.id);
|
||||
let icon = require('@/assets/point/zsdw.png');
|
||||
emitter.emit("addPointArea", { coords: [{jd:val.data.jd,wd:val.data.wd}], icon, flag: 'bxd'+val.data.id });
|
||||
}
|
||||
};
|
||||
|
||||
// 选择经纬度
|
||||
const chooseJwd = (row) => {
|
||||
changeItem.value = row;
|
||||
emitter.emit("deletePointArea", 'bxd' + row.id);
|
||||
emitter.emit("removePlot", 'point'+row.id);
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point'+row.id});
|
||||
};
|
||||
// 选择必巡线
|
||||
const chackLat = () => {
|
||||
emitter.emit("removeAll");
|
||||
listQuery.value.zb = [];
|
||||
emitter.emit("drawShape", { type: 'line', flag: 'bxx', isclear: true })
|
||||
}
|
||||
|
||||
// 保存
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldBxx/addBxx` : `/mosty-jbld/jbldBxx/updateBxx`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
const deleteRow = (row) => {
|
||||
listQuery.value.bxds.splice(row, 1);
|
||||
emitter.emit("deletePointArea", 'bxd' + row.id);
|
||||
emitter.emit("removePlot", 'point' + row.id);
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("coordString", (res => {
|
||||
if (res?.flag == 'bxx') listQuery.value.zb = res.coord;
|
||||
if(res.type == 'point') {
|
||||
listQuery.value.bxds.forEach((item) => {
|
||||
if (item.id == changeItem.value.id) {
|
||||
item.jd = res.coord[0];
|
||||
item.wd = res.coord[1];
|
||||
}
|
||||
});
|
||||
let icon = require('@/assets/point/zsdw.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'+changeItem.value.id });
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
defineExpose({ init })
|
||||
onUnmounted(() => {
|
||||
emitter.off("coordString")
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog custom-class="zdy-dialog-bbd" :destroy-on-close="true" v-model="dialogForm" :title="`比巡点${title}`" width="80%" @close="close">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList">
|
||||
</FormMessage>
|
||||
<div class="tc mt10">
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref, defineProps, reactive, defineEmits } 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 rules = reactive({
|
||||
bxdMc: [{ required: true, message: "请输入必巡点名称", trigger: "blur" }],
|
||||
bxdLx: [{ required: true, message: "请输入必巡点类型", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
{ label: "必巡点名称", prop: "bxdMc", type: "input" },
|
||||
{ label: "必巡点类型", prop: "bxdLx", type: "select", options: props.dic.D_BZ_BXDLX },
|
||||
{ label: "经度", prop: "jd",type: "input" },
|
||||
{ label: "纬度", prop: "wd", type: "input"},
|
||||
])
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
listQuery.value = row ? { ...row } : {};
|
||||
console.log(listQuery.value,'===listQuery.value');
|
||||
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
let data = JSON.parse(JSON.stringify(listQuery.value));
|
||||
data.id = data.id || new Date().getTime();
|
||||
let obj = {
|
||||
data: data,
|
||||
type: title.value == "新增" ? "add" : "edit"
|
||||
}
|
||||
emit("changeDxd", obj);
|
||||
close();
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({ init })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
--el-dialog-bg-color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .zdy-dialog-bbd {
|
||||
width: 30%!important;
|
||||
--el-dialog-bg-color: #fff !important;
|
||||
background: #fff !important;
|
||||
|
||||
::v-deep .el-dialog__header {
|
||||
background-color: #f7fafb;
|
||||
border-bottom: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/views/backOfficeSystem/AlarmLinkage/PatrolLine/index.vue
Normal file
157
src/views/backOfficeSystem/AlarmLinkage/PatrolLine/index.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<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"></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 #bxxLx="{ row }">
|
||||
<DictTag :value="row.bxxLx" :tag="false" :options="D_BZ_BXDLX" />
|
||||
</template>
|
||||
<template #bxds="{ row }">
|
||||
<div>{{ row.bxds?.length }}</div>
|
||||
</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>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" v-if="showDetail" @refresh="getList" :dic="{D_BZ_BXDLX,D_BZ_XZQHDM}" />
|
||||
</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 { D_BZ_BXDLX,D_BZ_XZQHDM } = proxy.$dict("D_BZ_BXDLX","D_BZ_XZQHDM");
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const showDetail = ref(false); // 控制详情弹窗显示
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "必巡线名称",
|
||||
prop: "bxxmc",
|
||||
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: 200,
|
||||
tableColumn: [
|
||||
{ label: "必巡线名称", prop: "bxxMc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "必巡线类型", prop: "bxxLx", showSolt: true },
|
||||
{ label: "必巡点数量", prop: "bxds", 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 = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/jbldBxx/queryList").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
showDetail.value = true;
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, row);
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (ids) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"}).then(() => {
|
||||
qcckPost(ids, "/mosty-jbld/jbldBxx/deleteBxx").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>
|
||||
@ -0,0 +1,99 @@
|
||||
<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, defineProps } from 'vue';
|
||||
const emit = defineEmits(["updateData"]);
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
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" },
|
||||
],
|
||||
[
|
||||
{ label: "岗位", prop: "gw", type: "select", options: props.dic.D_BAXX_GWLX },
|
||||
],
|
||||
])
|
||||
|
||||
// 初始化数据
|
||||
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>
|
||||
@ -0,0 +1,158 @@
|
||||
<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" :dic="{ D_BAXX_GWLX }" />
|
||||
</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_BAXX_GWLX } = proxy.$dict("D_BAXX_GWLX");
|
||||
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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
128
src/views/backOfficeSystem/AlarmLinkage/TemporaryDuty/count.vue
Normal file
128
src/views/backOfficeSystem/AlarmLinkage/TemporaryDuty/count.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<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>
|
||||
@ -0,0 +1,31 @@
|
||||
<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>
|
||||
@ -0,0 +1,142 @@
|
||||
<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>
|
||||
@ -0,0 +1,123 @@
|
||||
<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 { qcckGet } from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "日期", prop: "sbrq", type: "input" },
|
||||
{ label: "所属辖区", prop: "ssxq", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "巡逻路线", prop: "xllx", type: "input" },
|
||||
{ label: "地址", prop: "dz", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "上报人", prop: "sbrxm", type: "input" },
|
||||
{ label: "街面状况", prop: "jmzk", type: "date" },
|
||||
],
|
||||
[
|
||||
{ label: "状况描述", prop: "zkms", type: "input" },
|
||||
],
|
||||
])
|
||||
// 初始化数据
|
||||
const init = (row) => {
|
||||
dialogForm.value = true;
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckGet({}, `/mosty-jbld/jbjmzk/${row.id}`).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>
|
||||
120
src/views/backOfficeSystem/AlarmLinkage/sectionalState/index.vue
Normal file
120
src/views/backOfficeSystem/AlarmLinkage/sectionalState/index.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<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>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
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: "ssxq" },
|
||||
{ label: "日期", prop: "sbrq" },
|
||||
{ label: "巡逻路线", prop: "xllx" },
|
||||
{ label: "上报人", prop: "sbrxm" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
const changeNo = val => {
|
||||
pageData.pageConfiger.pageCurrent = 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/jbjmzk/selelctPage")
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total=res.total
|
||||
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>
|
||||
@ -0,0 +1,155 @@
|
||||
<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>
|
||||
108
src/views/backOfficeSystem/AlarmLinkage/xlqkStatistics/index.vue
Normal file
108
src/views/backOfficeSystem/AlarmLinkage/xlqkStatistics/index.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<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>
|
||||
261
src/views/backOfficeSystem/editPassword/index.vue
Normal file
261
src/views/backOfficeSystem/editPassword/index.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<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>
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-dialog title="角色选择" :model-value="modelValue" @close="closed">
|
||||
内容
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">关闭</el-button>
|
||||
<el-button type="primary" @click="onConfirm">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
|
||||
const closed = () => {
|
||||
emits('update:moselValus',false)
|
||||
}
|
||||
/**
|
||||
确定按钮点击事件
|
||||
*/
|
||||
const onConfirm = async () => {
|
||||
closed()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<el-dialog title="配置角色" :model-value="modelValue" @close="closed">
|
||||
<!-- <el-checkbox-group v-model="userRoleTitleList">
|
||||
<el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.roleName" />
|
||||
</el-checkbox-group>-->
|
||||
<el-table max-height="380px" ref="multipleTableRef" :data="allRoleList" style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column property="orderNo" label="角色编号" />
|
||||
<el-table-column property="roleName" label="角色名称" />
|
||||
<el-table-column prop="xtZhxgsj" label="更新时间">
|
||||
<template #default="{ row }">{{ $filters.dateFilter(row.xtZhxgsj) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" :loading="buttonLoading" @click="onComfirm">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import {
|
||||
getRoleList,
|
||||
saveRoleDeptInfo,
|
||||
selectRolePageByDept,
|
||||
getUserRoleList,
|
||||
grantRoleToUser
|
||||
} from "@/api/user-manage";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
deptId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const buttonLoading = ref(false)
|
||||
const emits = defineEmits(["update:modelValue", "updateRole"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const multipleTableRef = ref(null)
|
||||
|
||||
const multipleSelection = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const ids = multipleSelection.value.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
let params = {
|
||||
deptId: props.deptId,
|
||||
roleIds: ids
|
||||
};
|
||||
buttonLoading.value = true;
|
||||
saveRoleDeptInfo(params).then((res) => {
|
||||
ElMessage.success("操作成功");
|
||||
//通知
|
||||
emits("updateRole");
|
||||
}).finally(() => {
|
||||
buttonLoading.value = false;
|
||||
}); ;
|
||||
closed();
|
||||
};
|
||||
|
||||
//当前用户角色
|
||||
const userRoleTitleList = ref([]);
|
||||
const getUserRoles = async () => {
|
||||
const res = await selectRolePageByDept({ current: 1, size: 9999, deptId: props.deptId });
|
||||
userRoleTitleList.value = res.records.map((item) => item.roleId);
|
||||
const hx = [];
|
||||
allRoleList.value.forEach(item => {
|
||||
if (userRoleTitleList.value.indexOf(item.id)!=-1) {
|
||||
hx.push(item)
|
||||
}
|
||||
})
|
||||
toggleSelection(hx)
|
||||
};
|
||||
|
||||
const toggleSelection = (rows) => {
|
||||
if (rows) {
|
||||
rows.forEach((row) => {
|
||||
multipleTableRef.value.toggleRowSelection(row, true)
|
||||
})
|
||||
} else {
|
||||
multipleTableRef.value.clearSelection()
|
||||
}
|
||||
}
|
||||
|
||||
//所有角色
|
||||
const allRoleList = ref([]);
|
||||
const getAllRoleList = async () => {
|
||||
const params = {
|
||||
page: 1,
|
||||
size: 999
|
||||
};
|
||||
const res = await getRoleList(params);
|
||||
allRoleList.value = res?.records;
|
||||
getUserRoles();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.deptId,
|
||||
(val) => {
|
||||
if (val) {
|
||||
getAllRoleList();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,480 @@
|
||||
<template>
|
||||
<div class="user-list-page">
|
||||
<el-card class="table-header-wrap">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="用户ID">
|
||||
<el-input
|
||||
placeholder="请输入用户ID"
|
||||
v-model="listQuery.userId"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="unbundleRole()"
|
||||
>批量取消授权</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addUser()">添加用户</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<div class="main-box">
|
||||
<el-card class="user-main-wrap">
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
prop="loginName"
|
||||
align="center"
|
||||
label="用户名"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
align="center"
|
||||
label="用户昵称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="mobile"
|
||||
width="120px"
|
||||
label="移动电话"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column prop="xtZhxgsj" align="center" label="录入时间">
|
||||
<template #default="{ row }">{{
|
||||
$filters.dateFilter(row.xtLrsj)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="unbundleRole(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">取消授权</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
width="900px"
|
||||
custom-class="way"
|
||||
v-model="dialogFormVisible"
|
||||
@closed="closeDialog"
|
||||
:title="isEdit ? '修改' : '新增'"
|
||||
>
|
||||
<p>{{ dialogForm }}</p>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="dialogForm"
|
||||
label-width="120px"
|
||||
class="mosty-from-wrap twoLine"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="用户昵称:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="用户昵称"
|
||||
clearable
|
||||
v-model="dialogForm.userName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="登录账号"
|
||||
clearable
|
||||
v-model="dialogForm.loginName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="密码"
|
||||
show-password
|
||||
v-model="dialogForm.password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idEntityCard">
|
||||
<MOSTY.IdentityCard
|
||||
width="280px"
|
||||
v-model="dialogForm.idEntityCard"
|
||||
clearable
|
||||
></MOSTY.IdentityCard>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码:" prop="telePhone">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.telePhone"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动电话:" prop="mobile">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.mobile"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="封装民族:" prop="nation">
|
||||
<MOSTY.PackageSelect
|
||||
width="280px"
|
||||
v-model="dialogForm.nation"
|
||||
dictEnum="NATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别:" prop="">
|
||||
<MOSTY.Sex width="220px" v-model:sex="dialogForm.sex" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文化程度:" prop="">
|
||||
<MOSTY.PackageSelect
|
||||
dictEnum="EDUCATION"
|
||||
width="280px"
|
||||
v-model="dialogForm.whcd"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="E-mail" prop="email">
|
||||
<MOSTY.Email
|
||||
v-model="dialogForm.email"
|
||||
width="280px"
|
||||
clearable
|
||||
></MOSTY.Email>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="email">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.birthday"
|
||||
type="date"
|
||||
placeholder="出生日期"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期:" prop="">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.endTime"
|
||||
type="datetime"
|
||||
placeholder="Select date and time"
|
||||
format="YYYY/MM/DD hh:mm:ss"
|
||||
value-format="x"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="行业号码:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="行业号码"
|
||||
v-model="dialogForm.inDustRialId"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="管理部门名称:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="管理部门名称"
|
||||
v-model="dialogForm.managerOrgName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="管理部门ID:" prop="">
|
||||
<MOSTY.Department
|
||||
placeholder="管理部门ID"
|
||||
width="280px"
|
||||
clearable
|
||||
filterable
|
||||
multiple
|
||||
v-model="dialogForm.managerOrgId"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位名称:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="岗位名称"
|
||||
v-model="dialogForm.positionName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位ID:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="岗位ID"
|
||||
v-model="dialogForm.positionId"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户类型:" prop="">
|
||||
<el-select v-model="dialogForm.userType" placeholder="请选择">
|
||||
<el-option label="系统用户默认" value="00" />
|
||||
<el-option label="注册用户" value="01" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="虚拟用户:" prop="">
|
||||
<el-select v-model="dialogForm.isVirtualUser" placeholder="请选择">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="不是" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" v-if="isEdit" @click="onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button type="primary" v-else @click="onAdd">新增</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisible"
|
||||
:roleId="route.params.id"
|
||||
@choosedUsers="saveUsers"
|
||||
></ChooseUser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import { useRoute } from "vue-router";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, computed, watch } from "vue";
|
||||
import {
|
||||
selectUnAccreditPage,
|
||||
batchUnboundUserRole,
|
||||
selectUserPageByDept,
|
||||
grantUserToRole
|
||||
} from "@/api/user-manage";
|
||||
const route = useRoute();
|
||||
const rules = ref({
|
||||
...rule.phoneRule({ validator: true }, "mobile"), // 是否必填 是否进行校验
|
||||
...rule.phoneRule({ validator: true }, "telePhone"), // 是否必填 是否进行校验 如果props与from里面数据不一致，可以传第二个参数
|
||||
...rule.identityCardRule({ validator: true }), //身份证校验
|
||||
...rule.addressSelectRule({ require: true }), //地址
|
||||
...rule.emailRule({ validator: true }), //邮箱
|
||||
packageSelect: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
other: [
|
||||
{
|
||||
required: true,
|
||||
message: "自由发挥哦",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
current: 1,
|
||||
size: 20
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({
|
||||
userName: ""
|
||||
});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
params.deptId = route.params.id;
|
||||
const res = await selectUserPageByDept(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.current = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const unbundleRole = (row) => {
|
||||
let params = {
|
||||
roleId: route.params.id,
|
||||
userIdList: []
|
||||
};
|
||||
if (row) {
|
||||
params.userIdList.push(row.id);
|
||||
} else {
|
||||
if (multipleSelection.value.length <= 0) return false;
|
||||
multipleSelection.value.forEach((item) => {
|
||||
params.userIdList.push(item.id);
|
||||
});
|
||||
}
|
||||
batchUnboundUserRole(params).then((res) => {
|
||||
ElMessage.success("操作成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
//分配角色
|
||||
const currentUserId = ref("");
|
||||
const roleDialogVisible = ref(false);
|
||||
const assignRoles = (row) => {
|
||||
roleDialogVisible.value = true;
|
||||
currentUserId.value = row.id;
|
||||
};
|
||||
|
||||
const multipleTableRef = ref(null);
|
||||
const multipleSelection = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
const chooseUserVisible = ref(false);
|
||||
const addUser = () => {
|
||||
chooseUserVisible.value = true;
|
||||
};
|
||||
|
||||
//批量添加用户
|
||||
const saveUsers = (users) => {
|
||||
if (users.length > 0) {
|
||||
let userIds = users.map((item) => item.id);
|
||||
let params = {
|
||||
roleId: route.params.id,
|
||||
userIds: userIds
|
||||
};
|
||||
grantUserToRole(params).then((res) => {
|
||||
ElMessage.success("修改成功");
|
||||
handleFilter();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//watch监听路由变化
|
||||
watch(roleDialogVisible, (val) => {
|
||||
if (!val) currentUserId.value = "";
|
||||
});
|
||||
|
||||
watch(
|
||||
listQuery.value,
|
||||
() => {
|
||||
handleFilter();
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-list-page {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.main-box {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.departmentTree-box {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.user-main-wrap {
|
||||
overflow: hidden;
|
||||
// width: calc(100% - 260px);
|
||||
width: 100%;
|
||||
|
||||
.el-table--fit {
|
||||
float: right;
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,617 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">部门管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addItemMenu">
|
||||
<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.deptname"
|
||||
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"
|
||||
v-loading="loading"
|
||||
border
|
||||
row-key="orgCode"
|
||||
:tree-props="{ children: 'childDeptList', hasChildren: 'hasChildren' }"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
lazy
|
||||
:load="depLoad"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="orgName"
|
||||
label="部门名称"
|
||||
show-overflow-tooltip
|
||||
width="320"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.orgName ? row.orgName : row.orgJc }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="orgType"
|
||||
label="部门类型"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BMLX" :value="row.orgType" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="orgLevel"
|
||||
label="部门等级"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BMDJ" :value="row.orgLevel" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="linkTel"
|
||||
label="部门电话"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="linkManTel"
|
||||
label="部门联系人电话"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="linkMan"
|
||||
label="部门联系人"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="qxbs" label="权限标识" align="center" width="140px"></el-table-column> -->
|
||||
<el-table-column label="操作" align="center" fixed="right" width="320">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-button @click="addItemMenu(row)" size="small"
|
||||
>添加下级</el-button
|
||||
>
|
||||
<el-button @click="assignRoles(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>
|
||||
<RolesDialog
|
||||
v-model="roleDialogVisible"
|
||||
:deptId="currentDeptId"
|
||||
@updateRole="handleFilter"
|
||||
></RolesDialog>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:model="dialogForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="部门名称"
|
||||
:rules="[{ required: true, message: '请填写部门名称' }]"
|
||||
prop="orgName"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
placeholder="请填写部门名称"
|
||||
v-model="dialogForm.orgName"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="部门全称"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
prop="orgQc"
|
||||
required
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
placeholder="请填写部门全称"
|
||||
v-model="dialogForm.orgQc"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="部门简称"
|
||||
:rules="[{ required: true, message: '请填写部门简称' }]"
|
||||
prop="orgJc"
|
||||
required
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
placeholder="请填写部门简称"
|
||||
v-model="dialogForm.orgJc"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="部门类型"
|
||||
:rules="[{ required: true, message: '请选择部门类型' }]"
|
||||
prop="orgType"
|
||||
required
|
||||
label-width="140px"
|
||||
>
|
||||
<!-- <el-input
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
v-model="dialogForm.orgType"
|
||||
></el-input> -->
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.orgType"
|
||||
class="m-4"
|
||||
placeholder="请选择部门类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in D_BZ_BMLX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="部门代码"
|
||||
:rules="[{ required: true, message: '请填写部门代码' }]"
|
||||
prop="orgCode"
|
||||
required
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
placeholder="请填写部门代码"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
v-model="dialogForm.orgCode"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="部门等级"
|
||||
:rules="[{ required: true, message: '请选择部门等级' }]"
|
||||
prop="orgLevel"
|
||||
required
|
||||
label-width="140px"
|
||||
>
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.orgLevel"
|
||||
class="m-4"
|
||||
placeholder="请选择部门等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BMDJ"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门顺序号" label-width="140px">
|
||||
<el-input-number
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.orgNo"
|
||||
class="mx-4"
|
||||
placeholder="请填写部门顺序号"
|
||||
:min="1"
|
||||
:max="100"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="部门电话" prop="linkTel" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.linkTel"
|
||||
placeholder="请填写部门电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="部门业务类型"
|
||||
:rules="[{ required: true, message: '请选择部门业务类型' }]"
|
||||
prop="orgBizType"
|
||||
required
|
||||
label-width="140px"
|
||||
>
|
||||
<!-- <el-input
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
v-model="dialogForm.orgBizType"
|
||||
></el-input> -->
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.orgBizType"
|
||||
class="m-4"
|
||||
placeholder="请选择部门业务类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in D_BZ_BMYWLX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人电话" label-width="140px">
|
||||
<el-input
|
||||
placeholder="请填写部门联系人电话"
|
||||
v-model="dialogForm.linkManTel"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人" label-width="140px">
|
||||
<el-input
|
||||
show-word-limit
|
||||
placeholder="请填写部门联系人"
|
||||
maxlength="30"
|
||||
v-model="dialogForm.linkMan"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门邮箱" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.email"
|
||||
placeholder="请填写部门邮箱"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称拼音" label-width="140px">
|
||||
<el-input
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
placeholder="请填写部门名称拼音"
|
||||
v-model="dialogForm.bmpyszm"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="部门主页" label-width="140px">
|
||||
<el-input
|
||||
show-word-limit
|
||||
placeholder="请填写部门主页"
|
||||
maxlength="50"
|
||||
v-model="dialogForm.webUrl"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门所属行政区划" label-width="140px">
|
||||
<el-input
|
||||
show-word-limit
|
||||
placeholder="请填写部门所属行政区划"
|
||||
maxlength="50"
|
||||
v-model="dialogForm.xzqh"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="状态" label-width="140px">
|
||||
<el-select v-model="dialogForm.zdywlb" placeholder="请选择业务类别">
|
||||
<el-option label="正常" value="0"></el-option>
|
||||
<el-option label="注销" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item style="width: 100%" label="部门地址" label-width="140px">
|
||||
<el-input
|
||||
show-word-limit
|
||||
placeholder="请填写部门地址"
|
||||
maxlength="200"
|
||||
v-model="dialogForm.address"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="备注" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import RolesDialog from "./components/roles.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
import {
|
||||
addSysDept,
|
||||
deleteSysDept,
|
||||
updateSysDept,
|
||||
selectDeptPage
|
||||
} from "@/api/user-manage";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_BMYWLX, D_BZ_BMDJ, D_BZ_BMLX } = proxy.$dict(
|
||||
"D_BZ_BMYWLX",
|
||||
"D_BZ_BMDJ",
|
||||
"D_BZ_BMLX"
|
||||
);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const route = useRoute();
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
deptname: "",
|
||||
deptcode: ""
|
||||
});
|
||||
const topParentId = ref("");
|
||||
const id = ref("");
|
||||
const zdlx = ref();
|
||||
const buttonLoading = ref(false);
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({
|
||||
orgNo: 1
|
||||
});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
//动态加载部门数据
|
||||
function depLoad(row, treeNode, resolve) {
|
||||
listQuery.value.parentid = row.id;
|
||||
selectDeptPage(listQuery.value).then((res) => {
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
loading.value = true
|
||||
const res = await selectDeptPage(params);
|
||||
tableData.value = res;
|
||||
loading.value = false
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
const reset = () => {
|
||||
tableData.value = [];
|
||||
listQuery.value = {
|
||||
deptname: "",
|
||||
deptcode: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const handleFilter = () => {
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const update = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
// dialogForm.value.linkManTel = parseInt(dialogForm.value.linkManTel);
|
||||
// dialogForm.value.linkTel = parseInt(dialogForm.value.linkTel);
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
function isNull(data) {
|
||||
if (!data) return true;
|
||||
if (JSON.stringify(data) === "{}") return true;
|
||||
if (JSON.stringify(data) === "[]") return true;
|
||||
return false;
|
||||
}
|
||||
const addItemMenu = (row) => {
|
||||
id.value = isNull(row) ? topParentId.value : row.id;
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {
|
||||
orgNo: 1
|
||||
};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
updateSysDept({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
reset();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
const editRef = ref(null);
|
||||
const onAdd = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
addSysDept({
|
||||
...dialogForm.value,
|
||||
parentId: id.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
reset();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const delDictItem = (row) => {
|
||||
deleteSysDept({
|
||||
id: Number(row.id)
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
reset();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
const toGoPage = (row) => {
|
||||
router.push("/user/role?zdbh=" + row.zdbh);
|
||||
};
|
||||
|
||||
//分配角色
|
||||
const currentDeptId = ref("");
|
||||
const roleDialogVisible = ref(false);
|
||||
const assignRoles = (row) => {
|
||||
roleDialogVisible.value = true;
|
||||
currentDeptId.value = row.id;
|
||||
};
|
||||
|
||||
//分配用户
|
||||
const router = useRouter();
|
||||
const allocationUser = (row) => {
|
||||
router.push(`/user/deptAllocationUser/${row.id}`);
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 210;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
403
src/views/backOfficeSystem/systemConfig/dict/detail.vue
Normal file
403
src/views/backOfficeSystem/systemConfig/dict/detail.vue
Normal file
@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<div class="user-manage-container">
|
||||
<div class="titleBox">
|
||||
<div class="title">字典数据</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addItemDict()">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>新增</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="primary" @click="closeItemDict()"> 关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="searchBox">
|
||||
<el-card class="table-header-wrap">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="字典名称">
|
||||
<el-input
|
||||
placeholder="请输入字典名称"
|
||||
v-model="listQuery.dictName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter"> 查询 </el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="resetHandleFilter">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card :style="{ height: tableHeight + 'px' }">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
@selection-change="handleSelectionChange"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
:height="h"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column prop="dm" align="center" label="字典代码">
|
||||
</el-table-column>
|
||||
<el-table-column prop="zdmc" label="字典名称"> </el-table-column>
|
||||
<el-table-column prop="py" label="字典拼音" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="px" label="字典排序" align="center" sortable>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bz" label="备注"> </el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="220">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" @click="update(row)" size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="zdlx === 2"
|
||||
@click="addItemDict(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>
|
||||
</el-card>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }" v-if="type == 1">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
custom-class="way"
|
||||
v-model="dialogFormVisible"
|
||||
@closed="closeDialog"
|
||||
:title="isEdit ? '修改' : '新增'"
|
||||
>
|
||||
<el-form
|
||||
v-if="dialogFormVisible"
|
||||
ref="formDom"
|
||||
:rules="rules"
|
||||
:model="dialogForm"
|
||||
>
|
||||
<el-form-item label="字典名称" prop="zdmc" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.zdmc"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典拼音" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.py"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典代码" prop="dm" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.dm"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="px" label-width="140px">
|
||||
<el-input-number
|
||||
v-model="dialogForm.px"
|
||||
class="mx-4"
|
||||
:min="1"
|
||||
:max="100"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" v-if="isEdit" @click="onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button type="primary" v-else @click="onAdd">新增</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckPost, qcckGet,qcckPut,qcckDelete } from "@/api/qcckApi.js";
|
||||
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
||||
import { updateSysDictItem, getSysDictByCode, getSysDictByCodeList, deleteSysDictItem, addSysDictItem} from "@/api/sysDict";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const formDom = ref(null);
|
||||
const rules = ref({
|
||||
zdmc: [{ required: true, message: "请输入字典名称" }],
|
||||
py: [{ required: true, pattern: /^[a-zA-Z]+$/, message: "请输入字典拼音" }],
|
||||
dm: [{ required: true, message: "请输入字典代码" }],
|
||||
px: [{ required: true, message: "请输入字典排序" }]
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const type = ref("1");
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
//查询参数
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
dictName: "",
|
||||
dictCode: "",
|
||||
xtZxbz: ""
|
||||
});
|
||||
const total = ref(0);
|
||||
const pageSize = ref(20);
|
||||
const pageCurrent = ref(1);
|
||||
const ids = ref([]);
|
||||
const topParentId = ref("");
|
||||
const id = ref("");
|
||||
const zdlx = ref();
|
||||
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
const tableHeight = ref();
|
||||
const searchBox = ref(null);
|
||||
const h = ref();
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
h.value = window.innerHeight - searchBox.value.offsetHeight - 300;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
onMounted(() => {
|
||||
type.value = route.query.zdlx;
|
||||
tabHeightFn();
|
||||
getListData();
|
||||
});
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = val.map((v) => { return v.id; });
|
||||
};
|
||||
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
qcckPost(ids.value,'/mosty-base/sys-dict-item/deleteSysDictItemBatch').then(res=>{
|
||||
proxy.$message({ message: "删除成功",type: "success"});
|
||||
getListData();
|
||||
})
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
// size 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
pageSize.value = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
pageCurrent.value = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = { dictCode: route.query.zdbh, zdmc: listQuery.value.dictName };
|
||||
if (route.query.zdlx == 1) {
|
||||
//列表
|
||||
params.size = pageSize.value;
|
||||
params.current = pageCurrent.value;
|
||||
getlist(params);
|
||||
} else {
|
||||
getree(params);
|
||||
}
|
||||
};
|
||||
|
||||
const getlist = async (params) => {
|
||||
let res = await getSysDictByCodeList(params);
|
||||
topParentId.value = route.query.Pid;
|
||||
tableData.value = res ? res.records : [];
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
const getree = async (params) => {
|
||||
let res = await getSysDictByCode(params);
|
||||
topParentId.value = res.id;
|
||||
zdlx.value = res.zdlx;
|
||||
tableData.value = res?.itemList;
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
const resetHandleFilter = () => {
|
||||
listQuery.value.dictName = "";
|
||||
listQuery.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
/**修改字典 */
|
||||
const update = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
function isNull(data) {
|
||||
if (!data) return true;
|
||||
if (JSON.stringify(data) === "{}") return true;
|
||||
if (JSON.stringify(data) === "[]") return true;
|
||||
return false;
|
||||
}
|
||||
const addItemDict = (row) => {
|
||||
id.value = isNull(row) ? topParentId.value : row.id;
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
// 返回字典列表页面
|
||||
const closeItemDict = () => {
|
||||
router.push("/dict/index");
|
||||
};
|
||||
const onSave = () => {
|
||||
formDom.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
updateSysDictItem({
|
||||
bz: dialogForm.value.bz,
|
||||
id: dialogForm.value.id,
|
||||
dm: dialogForm.value.dm,
|
||||
px: dialogForm.value.px,
|
||||
py: dialogForm.value.py,
|
||||
zdbh: dialogForm.value.zdbh,
|
||||
zdmc: dialogForm.value.zdmc
|
||||
}).then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
handleFilter();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
formDom.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
addSysDictItem({
|
||||
parentId: id.value,
|
||||
bz: dialogForm.value.bz,
|
||||
dm: dialogForm.value.dm,
|
||||
px: dialogForm.value.px,
|
||||
py: dialogForm.value.py,
|
||||
zdbh: dialogForm.value.zdbh,
|
||||
zdmc: dialogForm.value.zdmc
|
||||
}).then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
handleFilter();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delDictItem = (row) => {
|
||||
deleteSysDictItem({ id: Number(row.id) }).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
const toGoPage = (row) => {
|
||||
router.push("/user/role?zdbh=" + row.zdbh);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
::v-deep .el-card {
|
||||
--el-card-border-color: #143578;
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 20px;
|
||||
--el-card-bg-color: #17096130;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .el-table--fit {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
left: 14px;
|
||||
|
||||
// overflow-y: scroll;
|
||||
width: calc(100% - 28px);
|
||||
}
|
||||
</style>
|
||||
452
src/views/backOfficeSystem/systemConfig/dict/index.vue
Normal file
452
src/views/backOfficeSystem/systemConfig/dict/index.vue
Normal file
@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">字典列表</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addDict">
|
||||
<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.dictName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典编码">
|
||||
<el-input
|
||||
placeholder="请输入字典编码"
|
||||
v-model="listQuery.dictCode"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="字典状态">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.xtZxbz"
|
||||
placeholder="请选择状态"
|
||||
>
|
||||
<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%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="zdbh"
|
||||
label="字典编号"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="zdmc"
|
||||
label="字典名称"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable label="状态" width="80px">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag size="small" type="success" v-if="row.xtZxbz == 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="row.xtZxbz == 1"
|
||||
>注销</el-tag
|
||||
>
|
||||
<el-tag size="small" type="info" v-else>未知</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="bz" label="备注" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="xtZhxgsj" label="更新时间">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.dateFilter(row.xtZhxgsj) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="260">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateDict(row)" size="small"> 修改</el-button>
|
||||
<el-button @click="toGoPage(row)" size="small">
|
||||
{{ row.zdlx === 1 ? "列表" : "树形" }}</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要注销?"
|
||||
@confirm="delDict(row)"
|
||||
@cancel="cancelEvent">
|
||||
<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
|
||||
size
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:model="dialogForm"
|
||||
:rules="rules"
|
||||
ref="elform"
|
||||
>
|
||||
<el-form-item prop="zdmc" class="one" label="字典名称">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.zdmc"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="zdbh" label="字典编码">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.zdbh"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="yybz" class="one" label="引用标准">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.yybz"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="xtZxbz" label="状态">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.xtZxbz"
|
||||
placeholder="请选择业务类别"
|
||||
>
|
||||
<el-option label="正常" :value="0"></el-option>
|
||||
<el-option label="注销" :value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="是否是树形结构" prop="zdlx">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.zdlx"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option label="列表" :value="1"></el-option>
|
||||
<el-option label="树形" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="备注">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
import {
|
||||
getAllSysDict,
|
||||
updateSysDict,
|
||||
addSysDict,
|
||||
deleteSysDict
|
||||
} from "@/api/sysDict";
|
||||
import { useRouter } from "vue-router";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const elform = ref(null);
|
||||
const router = useRouter();
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const buttonLoading = ref(false);
|
||||
const listQuery = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
dictName: "",
|
||||
dictCode: "",
|
||||
xtZxbz: ""
|
||||
});
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
dictName: "",
|
||||
dictCode: "",
|
||||
xtZxbz: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
// listQuery.value.pageIndex = pageIndex.value;
|
||||
// this.listQuery.pageSize = this.pageSize;
|
||||
// for (let key in this.listQuery) {
|
||||
// if (this.listQuery[key] === "") {
|
||||
// delete this.listQuery[key];
|
||||
// }
|
||||
// }
|
||||
const params = listQuery.value;
|
||||
const res = await getAllSysDict(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
//验证
|
||||
const rules = ref({
|
||||
zdmc: [{ required: true, message: "请输入字典名称", trigger: "change" }],
|
||||
zdbh: [{ required: true, message: "请输入字典编码", trigger: "change" }],
|
||||
xtZxbz: [{ required: true, message: "请选择业务类别", trigger: "change" }],
|
||||
zdlx: [{ required: true, message: "请选择字典类型", trigger: "change" }],
|
||||
yybz: [{ required: true, message: "请填写引用标准", trigger: "change" }]
|
||||
});
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.current = currentPage;
|
||||
getListData();
|
||||
};
|
||||
const cancelEvent = () => {};
|
||||
|
||||
/**修改字典 */
|
||||
const updateDict = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogForm.value.zdywlb = Number(dialogForm.value.zdywlb);
|
||||
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const delDict = (row) => {
|
||||
deleteSysDict({
|
||||
id: Number(row.id)
|
||||
}).then((res) => {
|
||||
ElMessage.success("注销成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const addDict = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const isAvailable = (val) => {
|
||||
if (val === 0) return true;
|
||||
if (
|
||||
val == null ||
|
||||
val == undefined ||
|
||||
val == "" ||
|
||||
val == "undefined" ||
|
||||
val == "null"
|
||||
) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const onSave = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
updateSysDict({
|
||||
bz: dialogForm.value.bz,
|
||||
id: dialogForm.value.id,
|
||||
yybz: dialogForm.value.yybz,
|
||||
zdbh: dialogForm.value.zdbh,
|
||||
zdlx: dialogForm.value.zdlx,
|
||||
zdmc: dialogForm.value.zdmc,
|
||||
zdywlb: dialogForm.value.zdywlb,
|
||||
xtZxbz: dialogForm.value.xtZxbz
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
addSysDict({
|
||||
bz: dialogForm.value.bz,
|
||||
// id: dialogForm.value.id,
|
||||
yybz: dialogForm.value.yybz,
|
||||
zdbh: dialogForm.value.zdbh,
|
||||
zdlx: dialogForm.value.zdlx,
|
||||
zdmc: dialogForm.value.zdmc,
|
||||
zdywlb: dialogForm.value.zdywlb
|
||||
})
|
||||
.then((res) => {
|
||||
ElMessage.success("添加成功");
|
||||
dialogFormVisible.value = false;
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
const toGoPage = (row) => {
|
||||
router.push("/dict/detail?zdbh=" + row.zdbh + '&zdlx='+row.zdlx + '&Pid='+ row.id);
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input placeholder="请输入仓库名称" v-model="info.tableName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input placeholder="请输入" v-model="info.tableComment" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实体类名称" prop="className">
|
||||
<el-input placeholder="请输入" v-model="info.className" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="作者" prop="functionAuthor">
|
||||
<el-input placeholder="请输入" v-model="info.functionAuthor" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,defineProps, toRefs,reactive,onActivated, watch, nextTick,getCurrentInstance } from "vue";
|
||||
defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
// 表单校验
|
||||
const rules = ref({
|
||||
tableName: [{ required: true, message: "请输入表名称", trigger: "blur" }],
|
||||
tableComment: [{ required: true, message: "请输入表描述", trigger: "blur" }],
|
||||
className: [{ required: true, message: "请输入实体类名称", trigger: "blur" }],
|
||||
functionAuthor: [{ required: true, message: "请输入作者", trigger: "blur" }]
|
||||
});
|
||||
</script>
|
||||
195
src/views/backOfficeSystem/systemConfig/gen/editTable.vue
Normal file
195
src/views/backOfficeSystem/systemConfig/gen/editTable.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<basic-info-form ref="basicInfo" :info="info" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="字段信息" name="columnInfo">
|
||||
<el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
|
||||
<el-table-column label="序号" type="index" min-width="5%" />
|
||||
<el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="字段描述" min-width="10%">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.columnComment"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物理类型" prop="columnType" min-width="10%" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="Java类型" min-width="11%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.javaType">
|
||||
<el-option label="Long" value="Long" />
|
||||
<el-option label="String" value="String" />
|
||||
<el-option label="Integer" value="Integer" />
|
||||
<el-option label="Double" value="Double" />
|
||||
<el-option label="BigDecimal" value="BigDecimal" />
|
||||
<el-option label="Date" value="Date" />
|
||||
<el-option label="Boolean" value="Boolean" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="java属性" min-width="10%">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.javaField"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="插入" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isInsert"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="编辑" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列表" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式" min-width="10%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.queryType">
|
||||
<el-option label="=" value="EQ" />
|
||||
<el-option label="!=" value="NE" />
|
||||
<el-option label=">" value="GT" />
|
||||
<el-option label=">=" value="GTE" />
|
||||
<el-option label="<" value="LT" />
|
||||
<el-option label="<=" value="LTE" />
|
||||
<el-option label="LIKE" value="LIKE" />
|
||||
<el-option label="BETWEEN" value="BETWEEN" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isRequired"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示类型" min-width="12%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.htmlType">
|
||||
<el-option label="文本框" value="input" />
|
||||
<el-option label="文本域" value="textarea" />
|
||||
<el-option label="下拉框" value="select" />
|
||||
<el-option label="单选框" value="radio" />
|
||||
<el-option label="复选框" value="checkbox" />
|
||||
<el-option label="日期控件" value="datetime" />
|
||||
<el-option label="图片上传" value="imageUpload" />
|
||||
<el-option label="文件上传" value="fileUpload" />
|
||||
<el-option label="富文本控件" value="editor" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典类型" min-width="12%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
|
||||
<el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName"
|
||||
:value="dict.dictType">
|
||||
<span style="float: left">{{ dict.dictName }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="生成信息" name="genInfo">
|
||||
<gen-info-form ref="genInfo" :info="info" :tables="tables" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-form label-width="100px">
|
||||
<div style="text-align: center;margin-left:-100px;margin-top:10px;">
|
||||
<el-button type="primary" @click="submitForm()">提交</el-button>
|
||||
<el-button @click="close()">返回</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup name="GenEdit">
|
||||
import { ref, toRefs, reactive, onActivated, watch, nextTick, defineProps, getCurrentInstance } from "vue";
|
||||
import { getGenTable11, updateGenTable, getDictOptionselect } from "@/api/tool/gen";
|
||||
// import { optionselect as getDictOptionselect } from "@/api/tool/gen";
|
||||
import basicInfoForm from "./basicInfoForm";
|
||||
import genInfoForm from "./genInfoForm";
|
||||
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const activeName = ref("columnInfo");
|
||||
const tableHeight = ref(document.documentElement.scrollHeight - 245 + "px");
|
||||
const tables = ref([]);
|
||||
const columns = ref([]);
|
||||
const dictOptions = ref([]);
|
||||
const info = ref({});
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
const basicForm = proxy.$refs.basicInfo.$refs.basicInfoForm;
|
||||
const genForm = proxy.$refs.genInfo.$refs.genInfoForm;
|
||||
Promise.all([basicForm, genForm].map(getFormPromise)).then(res => {
|
||||
const validateResult = res.every(item => !!item);
|
||||
if (validateResult) {
|
||||
const genTable = Object.assign({}, basicForm.model, genForm.model);
|
||||
genTable.columns = columns.value;
|
||||
genTable.params = {
|
||||
treeCode: genTable.treeCode,
|
||||
treeName: genTable.treeName,
|
||||
treeParentCode: genTable.treeParentCode,
|
||||
parentMenuId: genTable.parentMenuId
|
||||
};
|
||||
updateGenTable(genTable).then(res => {
|
||||
proxy.$modal.msgSuccess(res.msg);
|
||||
if (res.code === 200) {
|
||||
close();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
|
||||
}
|
||||
});
|
||||
}
|
||||
function getFormPromise(form) {
|
||||
return new Promise(resolve => {
|
||||
form.validate(res => {
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function close() {
|
||||
router.push('/gen/index')
|
||||
}
|
||||
|
||||
(() => {
|
||||
const tableId = route.params && route.params.tableId;
|
||||
if (tableId) {
|
||||
// 获取表详细信息
|
||||
getGenTable11(tableId)
|
||||
.then(res => {
|
||||
columns.value = res.data.rows;
|
||||
info.value = res.data.info;
|
||||
tables.value = res.data.tables;
|
||||
});
|
||||
/** 查询字典下拉列表 */
|
||||
getDictOptionselect().then(response => {
|
||||
dictOptions.value = response.data;
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
359
src/views/backOfficeSystem/systemConfig/gen/genInfoForm.vue
Normal file
359
src/views/backOfficeSystem/systemConfig/gen/genInfoForm.vue
Normal file
@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="tplCategory">
|
||||
<template #label>生成模板</template>
|
||||
<el-select v-model="info.tplCategory" @change="tplSelectChange">
|
||||
<el-option label="单表（增删改查）" value="crud" />
|
||||
<el-option label="树表（增删改查）" value="tree" />
|
||||
<el-option label="主子表（增删改查）" value="sub" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="packageName">
|
||||
<template #label>
|
||||
生成包路径
|
||||
<el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input v-model="info.packageName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="moduleName">
|
||||
<template #label>
|
||||
生成模块名
|
||||
<el-tooltip content="可理解为子系统名，例如 system" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input v-model="info.moduleName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="businessName">
|
||||
<template #label>
|
||||
生成业务名
|
||||
<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input v-model="info.businessName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="functionName">
|
||||
<template #label>
|
||||
生成功能名
|
||||
<el-tooltip content="用作类描述，例如 用户" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input v-model="info.functionName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
上级菜单
|
||||
<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<tree-select v-model:value="info.parentMenuId" :options="menuOptions"
|
||||
:objMap="{ value: 'id', label: 'menuName', children: 'sysMenuList' }" placeholder="请选择系统菜单" />
|
||||
<!-- <el-tree
|
||||
ref="treeRef"
|
||||
:data="menuOptions"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
:check-strictly="true"
|
||||
@check="checkeTree"
|
||||
>
|
||||
</el-tree> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="genType">
|
||||
<template #label>
|
||||
生成代码方式
|
||||
<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
|
||||
<el-radio v-model="info.genType" label="1">自定义路径</el-radio>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" v-if="info.genType == '1'">
|
||||
<el-form-item prop="genPath">
|
||||
<template #label>
|
||||
自定义路径
|
||||
<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input v-model="info.genPath">
|
||||
<template #append>
|
||||
<el-dropdown>
|
||||
<el-button type="primary">
|
||||
最近路径快速选择
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<template v-if="info.tplCategory == 'tree'">
|
||||
<h4 class="form-header">其他信息</h4>
|
||||
<el-row v-show="info.tplCategory == 'tree'">
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
树编码字段
|
||||
<el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select v-model="info.treeCode" placeholder="请选择">
|
||||
<el-option v-for="(column, index) in info.columns" :key="index"
|
||||
:label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
树父编码字段
|
||||
<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select v-model="info.treeParentCode" placeholder="请选择">
|
||||
<el-option v-for="(column, index) in info.columns" :key="index"
|
||||
:label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
树名称字段
|
||||
<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select v-model="info.treeName" placeholder="请选择">
|
||||
<el-option v-for="(column, index) in info.columns" :key="index"
|
||||
:label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template v-if="info.tplCategory == 'sub'">
|
||||
<h4 class="form-header">关联信息</h4>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
关联子表的表名
|
||||
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
|
||||
<el-option v-for="(table, index) in tables" :key="index"
|
||||
:label="table.tableName + '：' + table.tableComment" :value="table.tableName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
子表关联的外键名
|
||||
<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select v-model="info.subTableFkName" placeholder="请选择">
|
||||
<el-option v-for="(column, index) in subColumns" :key="index"
|
||||
:label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getMenuTree as listMenu } from "@/api/user-manage";
|
||||
import {
|
||||
ref,
|
||||
toRefs,
|
||||
reactive,
|
||||
onActivated,
|
||||
watch,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const subColumns = ref([]);
|
||||
const menuOptions = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
tables: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
// 表单校验
|
||||
const rules = ref({
|
||||
tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
|
||||
packageName: [
|
||||
{ required: true, message: "请输入生成包路径", trigger: "blur" }
|
||||
],
|
||||
moduleName: [
|
||||
{ required: true, message: "请输入生成模块名", trigger: "blur" }
|
||||
],
|
||||
businessName: [
|
||||
{ required: true, message: "请输入生成业务名", trigger: "blur" }
|
||||
],
|
||||
functionName: [
|
||||
{ required: true, message: "请输入生成功能名", trigger: "blur" }
|
||||
]
|
||||
});
|
||||
function subSelectChange(value) {
|
||||
props.info.subTableFkName = "";
|
||||
}
|
||||
function tplSelectChange(value) {
|
||||
if (value !== "sub") {
|
||||
props.info.subTableName = "";
|
||||
props.info.subTableFkName = "";
|
||||
}
|
||||
}
|
||||
function setSubTableColumns(value) {
|
||||
for (var item in props.tables) {
|
||||
const name = props.tables[item].tableName;
|
||||
if (value === name) {
|
||||
subColumns.value = props.tables[item].columns;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 构造树型结构数据
|
||||
* @param {*} data 数据源
|
||||
* @param {*} id id字段 默认 'id'
|
||||
* @param {*} parentId 父节点字段 默认 'parentId'
|
||||
* @param {*} children 孩子节点字段 默认 'children'
|
||||
*/
|
||||
const handleTree = (data, id, parentId, children) => {
|
||||
let config = {
|
||||
id: id || "id",
|
||||
parentId: parentId || "parentId",
|
||||
childrenList: children || "children"
|
||||
};
|
||||
|
||||
var childrenListMap = {};
|
||||
var nodeIds = {};
|
||||
var tree = [];
|
||||
|
||||
for (let d of data) {
|
||||
let parentId = d[config.parentId];
|
||||
if (childrenListMap[parentId] == null) {
|
||||
childrenListMap[parentId] = [];
|
||||
}
|
||||
nodeIds[d[config.id]] = d;
|
||||
childrenListMap[parentId].push(d);
|
||||
}
|
||||
|
||||
for (let d of data) {
|
||||
let parentId = d[config.parentId];
|
||||
if (nodeIds[parentId] == null) {
|
||||
tree.push(d);
|
||||
}
|
||||
}
|
||||
|
||||
for (let t of tree) {
|
||||
adaptToChildrenList(t);
|
||||
}
|
||||
|
||||
function adaptToChildrenList(o) {
|
||||
if (childrenListMap[o[config.id]] !== null) {
|
||||
o[config.childrenList] = childrenListMap[o[config.id]];
|
||||
}
|
||||
if (o[config.childrenList]) {
|
||||
for (let c of o[config.childrenList]) {
|
||||
adaptToChildrenList(c);
|
||||
}
|
||||
}
|
||||
}
|
||||
return tree;
|
||||
};
|
||||
/** 查询菜单下拉树结构 */
|
||||
function getMenuTreeselect() {
|
||||
listMenu().then((response) => {
|
||||
menuOptions.value = handleTree(response, "id");
|
||||
});
|
||||
}
|
||||
// 选中子节点，默认选中父节点
|
||||
const checkeTree = (data) => {
|
||||
let thisNode = treeRef.value.getNode(data.id); // 获取当前节点
|
||||
const keys = treeRef.value.getCheckedKeys(); // 获取已勾选节点的key值
|
||||
if (thisNode.checked) {
|
||||
// 当前节点若被选中
|
||||
for (let i = thisNode.level; i > 1; i--) {
|
||||
// 判断是否有父级节点
|
||||
if (!thisNode.parent.checked) {
|
||||
// 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
|
||||
thisNode = thisNode.parent;
|
||||
keys.push(thisNode.data.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
treeRef.value.setCheckedKeys(keys); // 将所有keys数组的节点全选中
|
||||
};
|
||||
const treeRef = ref(null);
|
||||
//属性结构配置
|
||||
const defaultProps = {
|
||||
children: "sysMenuList",
|
||||
label: "menuName"
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.info.subTableName,
|
||||
(val) => {
|
||||
setSubTableColumns(val);
|
||||
}
|
||||
);
|
||||
|
||||
getMenuTreeselect();
|
||||
</script>
|
||||
118
src/views/backOfficeSystem/systemConfig/gen/importTable.vue
Normal file
118
src/views/backOfficeSystem/systemConfig/gen/importTable.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<!-- 导入表 -->
|
||||
<el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body>
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input
|
||||
v-model="queryParams.tableName"
|
||||
placeholder="请输入表名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input
|
||||
v-model="queryParams.tableComment"
|
||||
placeholder="请输入表描述"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||
<el-table-column prop="updateTime" label="更新时间"></el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="handleImportTable">确 定</el-button>
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listDbTable, importTable } from "@/api/tool/gen";
|
||||
|
||||
const total = ref(0);
|
||||
const visible = ref(false);
|
||||
const tables = ref([]);
|
||||
const dbTableList = ref([]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tableName: undefined,
|
||||
tableComment: undefined
|
||||
});
|
||||
|
||||
const emit = defineEmits(["ok"]);
|
||||
|
||||
/** 查询参数列表 */
|
||||
function show() {
|
||||
getList();
|
||||
visible.value = true;
|
||||
}
|
||||
/** 单击选择行 */
|
||||
function clickRow(row) {
|
||||
proxy.$refs.table.toggleRowSelection(row);
|
||||
}
|
||||
/** 多选框选中数据 */
|
||||
function handleSelectionChange(selection) {
|
||||
tables.value = selection.map(item => item.tableName);
|
||||
}
|
||||
/** 查询表数据 */
|
||||
function getList() {
|
||||
listDbTable(queryParams).then(res => {
|
||||
dbTableList.value = res.rows;
|
||||
total.value = res.total;
|
||||
});
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
/** 导入按钮操作 */
|
||||
function handleImportTable() {
|
||||
const tableNames = tables.value.join(",");
|
||||
if (tableNames == "") {
|
||||
proxy.$modal.msgError("请选择要导入的表");
|
||||
return;
|
||||
}
|
||||
importTable({ tables: tableNames }).then(res => {
|
||||
proxy.$modal.msgSuccess(res.msg);
|
||||
if (res.code === 200) {
|
||||
visible.value = false;
|
||||
emit("ok");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
});
|
||||
</script>
|
||||
426
src/views/backOfficeSystem/systemConfig/gen/index.vue
Normal file
426
src/views/backOfficeSystem/systemConfig/gen/index.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">代码生成</div>
|
||||
<div class="btnBox">
|
||||
<el-button icon="Download" @click="handleGenTable">生成</el-button>
|
||||
<el-button icon="Upload" @click="openImportTable">导入</el-button>
|
||||
<el-button icon="Edit" :disabled="single" @click="handleEditTable"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input
|
||||
v-model="queryParams.tableName"
|
||||
placeholder="请输入表名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input
|
||||
v-model="queryParams.tableComment"
|
||||
placeholder="请输入表描述"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" style="width: 308px">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">查询</el-button>
|
||||
<el-button @click="resetQuery()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Download" @click="handleGenTable"
|
||||
>生成</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Upload" @click="openImportTable"
|
||||
>导入</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
:disabled="single"
|
||||
@click="handleEditTable"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row> -->
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
border
|
||||
:data="tableList"
|
||||
@selection-change="handleSelectionChange"
|
||||
:height="tableHeight"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
align="center"
|
||||
width="55"
|
||||
></el-table-column>
|
||||
<el-table-column label="序号" type="index" width="60" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
(queryParams.pageNum - 1) * queryParams.pageSize +
|
||||
scope.$index +
|
||||
1
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
label="表名称"
|
||||
align="center"
|
||||
prop="tableName"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
label="表描述"
|
||||
align="center"
|
||||
prop="tableComment"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
label="实体"
|
||||
align="center"
|
||||
prop="className"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
label="更新时间"
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="330"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tooltip content="预览" placement="top">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="View"
|
||||
@click="handlePreview(scope.row)"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="编辑" placement="top">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="Edit"
|
||||
@click="handleEditTable(scope.row)"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="同步" placement="top">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="Refresh"
|
||||
@click="handleSynchDb(scope.row)"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="生成代码" placement="top">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="Download"
|
||||
@click="handleGenTable(scope.row)"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 预览界面 -->
|
||||
<el-dialog
|
||||
:title="preview.title"
|
||||
v-model="preview.open"
|
||||
width="80%"
|
||||
top="5vh"
|
||||
append-to-body
|
||||
custom-class="scrollbar"
|
||||
>
|
||||
<el-tabs v-model="preview.activeName">
|
||||
<el-tab-pane
|
||||
v-for="(value, key) in preview.data"
|
||||
:label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
|
||||
:name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
|
||||
:key="key"
|
||||
>
|
||||
<pre>{{ value }}</pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
<!-- <import-table ref="importRef" @ok="handleQuery" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Gen">
|
||||
import {
|
||||
ref,
|
||||
toRefs,
|
||||
reactive,
|
||||
onActivated,
|
||||
watch,
|
||||
nextTick,
|
||||
getCurrentInstance,
|
||||
onMounted
|
||||
} from "vue";
|
||||
import {
|
||||
listTable,
|
||||
previewTable,
|
||||
delTable,
|
||||
genCode,
|
||||
synchDb
|
||||
} from "@/api/tool/gen";
|
||||
// import importTable from "./importTable";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const editTableDialogVisible = ref(false);
|
||||
const tableList = ref([]);
|
||||
const loading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const tableNames = ref([]);
|
||||
const dateRange = ref([]);
|
||||
const uniqueId = ref("");
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tableName: undefined,
|
||||
tableComment: undefined
|
||||
},
|
||||
preview: {
|
||||
open: false,
|
||||
title: "代码预览",
|
||||
data: {},
|
||||
activeName: "domain.java"
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, preview } = toRefs(data);
|
||||
|
||||
onActivated(() => {
|
||||
const time = route.query.t;
|
||||
if (time != null && time != uniqueId.value) {
|
||||
uniqueId.value = time;
|
||||
queryParams.value.pageNum = Number(route.query.pageNum);
|
||||
dateRange.value = [];
|
||||
proxy.resetForm("queryForm");
|
||||
getList();
|
||||
}
|
||||
});
|
||||
const addDateRange = (params, dateRange, propName) => {
|
||||
let search = params;
|
||||
search.params =
|
||||
typeof search.params === "object" &&
|
||||
search.params !== null &&
|
||||
!Array.isArray(search.params)
|
||||
? search.params
|
||||
: {};
|
||||
dateRange = Array.isArray(dateRange) ? dateRange : [];
|
||||
if (typeof propName === "undefined") {
|
||||
search.params.beginTime = dateRange[0];
|
||||
search.params.endTime = dateRange[1];
|
||||
} else {
|
||||
search.params["begin" + propName] = dateRange[0];
|
||||
search.params["end" + propName] = dateRange[1];
|
||||
}
|
||||
return search;
|
||||
};
|
||||
|
||||
/** 查询表集合 */
|
||||
function getList() {
|
||||
let params = addDateRange(queryParams.value, dateRange.value);
|
||||
loading.value = true;
|
||||
listTable(params).then((response) => {
|
||||
tableList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
/** 生成代码操作 */
|
||||
function handleGenTable(row) {
|
||||
const tbNames = row.tableName || tableNames.value;
|
||||
if (tbNames == "") {
|
||||
proxy.$modal.msgError("请选择要生成的数据");
|
||||
return;
|
||||
}
|
||||
if (row.genType === "1") {
|
||||
genCode(row.tableName).then((response) => {
|
||||
proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
|
||||
});
|
||||
} else {
|
||||
proxy.$modal.msgError(
|
||||
"下载功能 需要沟通一下，后端直接生成 给一个下载地址？"
|
||||
);
|
||||
// proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, "zhiyu");
|
||||
}
|
||||
}
|
||||
/** 同步数据库操作 */
|
||||
function handleSynchDb(row) {
|
||||
const tableName = row.tableName;
|
||||
proxy.$modal
|
||||
.confirm('确认要强制同步"' + tableName + '"表结构吗？')
|
||||
.then(function () {
|
||||
return synchDb(tableName);
|
||||
})
|
||||
.then(() => {
|
||||
proxy.$modal.msgSuccess("同步成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
/** 打开导入表弹窗 */
|
||||
function openImportTable() {
|
||||
proxy.$refs.importRef.show();
|
||||
}
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
dateRange.value = [];
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
/** 预览按钮 */
|
||||
function handlePreview(row) {
|
||||
previewTable(row.tableId).then((response) => {
|
||||
preview.value.data = response;
|
||||
preview.value.open = true;
|
||||
preview.value.activeName = "domain.java";
|
||||
});
|
||||
}
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.tableId);
|
||||
tableNames.value = selection.map((item) => item.tableName);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
/** 修改按钮操作 */
|
||||
function handleEditTable(row) {
|
||||
const tableId = row.tableId || ids.value[0];
|
||||
router.push({
|
||||
path: "/tool/gen-edit/index/" + tableId,
|
||||
query: { pageNum: queryParams.value.pageNum }
|
||||
});
|
||||
}
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const tableIds = row.tableId || ids.value;
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？')
|
||||
.then(function () {
|
||||
return delTable(tableIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
getList();
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
@import "@/assets/css/layout.scss";
|
||||
</style>
|
||||
1043
src/views/backOfficeSystem/systemConfig/intelligence/index.vue
Normal file
1043
src/views/backOfficeSystem/systemConfig/intelligence/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,135 @@
|
||||
<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 { 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.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%;
|
||||
height: 100%;
|
||||
.head_box_ii {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 62vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
421
src/views/backOfficeSystem/systemConfig/job-list/index.vue
Normal file
421
src/views/backOfficeSystem/systemConfig/job-list/index.vue
Normal file
@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">岗位列表</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addJob()">
|
||||
<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.positionName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码">
|
||||
<el-input
|
||||
placeholder="请输入岗位编码"
|
||||
v-model="listQuery.positionCode"
|
||||
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
|
||||
:height="tableHeight"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="postCode"
|
||||
show-overflow-tooltip
|
||||
label="岗位编码"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="postName"
|
||||
show-overflow-tooltip
|
||||
label="岗位名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable label="状态" width="80px">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag size="small" type="success" v-if="row.xtZxbz === 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="row.xtZxbz === 1"
|
||||
>注销</el-tag
|
||||
>
|
||||
<el-tag size="small" type="info" v-else>未知</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="postDesc"
|
||||
label="岗位描述"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="bz" label="备注" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="xtZhxgsj" label="修改时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.dateFilter(row.xtZhxgsj) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateJob(row)" size="small">修改</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delRole(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="listQuery.page"
|
||||
:page-sizes="[ 10, 20 , 30 , 50]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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
|
||||
ref="elform"
|
||||
class="mosty-from-wrap"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:model="dialogForm"
|
||||
>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="postName"
|
||||
label="岗位名称"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.postName"
|
||||
autocomplete="off"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="postCode"
|
||||
label="岗位编码"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.postCode"
|
||||
autocomplete="off"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="xtZxbz" label="状态">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.xtZxbz"
|
||||
placeholder="请选择业务类别"
|
||||
>
|
||||
<el-option label="正常" :value="0"></el-option>
|
||||
<el-option label="注销" :value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="岗位描述" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.postDesc"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="备注" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <el-dialog
|
||||
draggable
|
||||
custom-class="way"
|
||||
v-model="dialogFormVisible"
|
||||
@closed="closeDialog"
|
||||
:title="isEdit ? '修改' : '新增'"
|
||||
>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="isEdit"
|
||||
:loading="buttonLoading"
|
||||
@click="onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-else
|
||||
:loading="buttonLoading"
|
||||
@click="onAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted,onUnmounted,getCurrentInstance } from "vue";
|
||||
import {
|
||||
selectJobPage,
|
||||
updateSysPosition,
|
||||
deleteSysPosition,
|
||||
addSysPosition
|
||||
} from "@/api/user-manage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const buttonLoading = ref(false);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 10,
|
||||
positionName: "",
|
||||
positionCode: ""
|
||||
});
|
||||
const elform = ref(null);
|
||||
//验证
|
||||
const rules = ref({
|
||||
postName: [{ required: true, message: "请输入岗位名称", trigger: "change" }],
|
||||
postCode: [{ required: true, message: "请输入岗位编码", trigger: "change" }]
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
positionName: "",
|
||||
positionCode: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
params.current = params.page;
|
||||
const res = await selectJobPage(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const updateJob = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const addJob = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
updateSysPosition({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
addSysPosition({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delRole = (row) => {
|
||||
deleteSysPosition({
|
||||
id: Number(row.id)
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
// 高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/views/backOfficeSystem/systemConfig/log-manage/index.vue
Normal file
14
src/views/backOfficeSystem/systemConfig/log-manage/index.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
1111
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">登录日志</div>
|
||||
<div class="btnBox">
|
||||
<el-button style="margin-left: 10px" type="info" @click="exportExcel">
|
||||
导出
|
||||
</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.userName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="操作人员">
|
||||
<el-input placeholder="请输入操作人员" v-model="listQuery.userName" clearable></el-input>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="状态">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.status"
|
||||
placeholder="请选择状态"
|
||||
>
|
||||
<el-option label="正常" value="0"></el-option>
|
||||
<el-option label="异常" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="infoId"
|
||||
label="访问编号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="browser"
|
||||
label="浏览器"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ipaddr"
|
||||
label="访问地址"
|
||||
></el-table-column>
|
||||
<el-table-column sortable prop="msg" label="操作信息"></el-table-column>
|
||||
<el-table-column sortable prop="os" label="操作系统"></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="userName"
|
||||
label="登录账号"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column prop="msg" label="操作信息"></el-table-column> -->
|
||||
<el-table-column sortable prop="accessTime" label="操作时间">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.dateFilter(row.accessTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column sortable label="登录状态" width="110px">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag size="small" type="success" v-if="row.status == 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="row.status == 1"
|
||||
>异常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="info" v-else>未知</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column label="操作" fixed="right" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button type="success" size="small" @click="handleDetail(row)">详情</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delRow(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
custom-class="way"
|
||||
v-model="dialogFormVisible"
|
||||
@closed="closeDialog"
|
||||
:title="isEdit ? '修改' : '新增'"
|
||||
>
|
||||
<el-form :model="dialogForm">
|
||||
<el-form-item label="部门名称" label-width="140px">
|
||||
<el-input v-model="dialogForm.orgName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门全称" label-width="140px">
|
||||
<el-input v-model="dialogForm.orgQc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门简称" label-width="140px">
|
||||
<el-input v-model="dialogForm.orgJc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门类型" label-width="140px">
|
||||
<el-input v-model="dialogForm.orgType"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门代码" label-width="140px">
|
||||
<el-input v-model="dialogForm.orgCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门等级" label-width="140px">
|
||||
<el-input-number
|
||||
v-model="dialogForm.orgLevel"
|
||||
class="mx-4"
|
||||
:min="1"
|
||||
:max="100"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门顺序号" label-width="140px">
|
||||
<el-input-number
|
||||
v-model="dialogForm.orgNo"
|
||||
class="mx-4"
|
||||
:min="1"
|
||||
:max="100"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="部门电话" label-width="140px">
|
||||
<el-input v-model="dialogForm.linkTel"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门业务类型" label-width="140px">
|
||||
<el-input v-model="dialogForm.orgBizType"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人电话" label-width="140px">
|
||||
<el-input v-model="dialogForm.linkManTel"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人" label-width="140px">
|
||||
<el-input v-model="dialogForm.linkMan"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门邮箱" label-width="140px">
|
||||
<el-input v-model="dialogForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称拼音" label-width="140px">
|
||||
<el-input v-model="dialogForm.bmpyszm"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="部门地址" label-width="140px">
|
||||
<el-input v-model="dialogForm.address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门主页" label-width="140px">
|
||||
<el-input v-model="dialogForm.webUrl"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门所属行政区划" label-width="140px">
|
||||
<el-input v-model="dialogForm.xzqh"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="状态" label-width="140px">
|
||||
<el-select v-model="dialogForm.zdywlb" placeholder="请选择业务类别">
|
||||
<el-option label="正常" value="0"></el-option>
|
||||
<el-option label="注销" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item label="备注" label-width="140px">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" v-if="isEdit" @click="onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button type="primary" v-else @click="onAdd">新增</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { download } from "@/utils/request";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted,onUnmounted,getCurrentInstance } from "vue";
|
||||
import {
|
||||
getSysLoginLogList,
|
||||
sysLogRemove,
|
||||
LoginlogClean,
|
||||
sysLoginogDetail
|
||||
} from "@/api/user-manage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 20
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
const res = await getSysLoginLogList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const updateDict = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleDetail = (row) => {
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const addRole = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
updateSysRole({
|
||||
...dialogForm.value
|
||||
}).then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
// 导出
|
||||
function exportExcel() {
|
||||
proxy.$confirm(`当前数据${total.value}条,确定是否导出全部数据?`, "警告", {type: "warning"}).then(() => {
|
||||
download('/mosty-api/mosty-base/other/exportLoginLog',listQuery.value , `人员核查日志_${new Date().getTime()}.xlsx`)
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
const onAdd = () => {
|
||||
addSysRole({
|
||||
...dialogForm.value
|
||||
}).then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
const clearAll = async () => {
|
||||
const res = await LoginlogClean();
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
};
|
||||
const delRow = (row) => {
|
||||
sysLogRemove({
|
||||
ids: [row.infoId]
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
function reset() {
|
||||
listQuery.value = {};
|
||||
listQuery.value.page = 1;
|
||||
listQuery.value.size = 20;
|
||||
getListData();
|
||||
}
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">操作日志</div>
|
||||
<div class="btnBox">
|
||||
<el-button style="margin-left: 10px" type="info" @click="exportExcel">
|
||||
导出
|
||||
</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.title"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人员">
|
||||
<el-input
|
||||
placeholder="请输入操作人员"
|
||||
v-model="listQuery.operName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.businessType"
|
||||
placeholder="请选择类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in businessTypeArr"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.status"
|
||||
placeholder="请选择状态"
|
||||
>
|
||||
<el-option label="正常" value="0"></el-option>
|
||||
<el-option label="异常" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="operId"
|
||||
label="日志编号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="title"
|
||||
label="系统模块"
|
||||
></el-table-column>
|
||||
<el-table-column sortable label="操作类型" width="120px">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
{{
|
||||
businessTypeArr.find((item) => item.value == row.businessType)
|
||||
.label || "未知"
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="requestMethod"
|
||||
label="请求方式"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="operName"
|
||||
label="操作人员"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="operIp"
|
||||
label="操作地址"
|
||||
></el-table-column>
|
||||
<el-table-column sortable label="操作状态" width="120px">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag size="small" type="success" v-if="row.status == 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="row.status == 1"
|
||||
>异常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="info" v-else>未知</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="operTime"
|
||||
label="操作时间"
|
||||
width="200px"
|
||||
></el-table-column>
|
||||
<!-- <template #default="{ row }">{{ $filters.dateFilter(row.createTime) }}</template> -->
|
||||
<el-table-column label="操作" fixed="right" width="100px">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="handleDetail(row)">详情</el-button>
|
||||
<!-- <el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delHandler(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form :model="dialogForm" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item class="one" label="系统模块" label-width="140px">{{
|
||||
dialogForm.title
|
||||
}}</el-form-item>
|
||||
<el-form-item class="one" label="请求方式" label-width="140px">{{
|
||||
dialogForm.requestMethod
|
||||
}}</el-form-item>
|
||||
<el-form-item class="one" label="操作人员" label-width="140px">{{
|
||||
dialogForm.operName
|
||||
}}</el-form-item>
|
||||
<el-form-item class="one" label="使用方法" label-width="140px">{{
|
||||
dialogForm.method
|
||||
}}</el-form-item>
|
||||
<el-form-item class="one" label="jsonResult" label-width="140px">
|
||||
{{ dialogForm.jsonResult }}
|
||||
</el-form-item>
|
||||
<el-form-item label="操作地址" label-width="140px">
|
||||
{{ dialogForm.operIp }}
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="one" label="操作状态" label-width="140px">
|
||||
{{ dialogForm.statu == 0 ? "正常" : "注销" }}
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="操作时间" label-width="140px">{{
|
||||
$filters.dateFilter(dialogForm.createTime)
|
||||
}}</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <el-dialog
|
||||
draggable
|
||||
custom-class="way"
|
||||
v-model="dialogFormVisible"
|
||||
@closed="closeDialog"
|
||||
title="详情"
|
||||
>
|
||||
<el-form :model="dialogForm">
|
||||
<el-form-item label="系统模块" label-width="140px">{{
|
||||
dialogForm.title
|
||||
}}</el-form-item>
|
||||
<el-form-item label="请求方式" label-width="140px">{{
|
||||
dialogForm.requestMethod
|
||||
}}</el-form-item>
|
||||
<el-form-item label="操作人员" label-width="140px">{{
|
||||
dialogForm.operName
|
||||
}}</el-form-item>
|
||||
<el-form-item label="使用方法" label-width="140px">{{
|
||||
dialogForm.method
|
||||
}}</el-form-item>
|
||||
<el-form-item label="jsonResult" label-width="140px">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="dialogForm.jsonResult"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作地址" label-width="140px">
|
||||
{{ dialogForm.operIp }}
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="操作状态" label-width="140px">
|
||||
<el-select
|
||||
readonly
|
||||
v-model="dialogForm.status"
|
||||
placeholder="请选择状态"
|
||||
>
|
||||
<el-option label="正常" :value="0"></el-option>
|
||||
<el-option label="注销" :value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" label-width="140px">{{
|
||||
$filters.dateFilter(dialogForm.createTime)
|
||||
}}</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { download } from "@/utils/request";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted,onUnmounted,getCurrentInstance } from "vue";
|
||||
import {
|
||||
getOperlogList,
|
||||
operlogRemove,
|
||||
operlogClean,
|
||||
operlogDetail
|
||||
} from "@/api/user-manage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 20
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
const businessTypeArr = ref([
|
||||
{
|
||||
value: "0",
|
||||
label: "其他"
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "新增"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "修改"
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "删除"
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "授权"
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "导出"
|
||||
},
|
||||
{
|
||||
value: "6",
|
||||
label: "导入"
|
||||
},
|
||||
{
|
||||
value: "7",
|
||||
label: "强退"
|
||||
},
|
||||
{
|
||||
value: "8",
|
||||
label: "生成代码"
|
||||
},
|
||||
{
|
||||
value: "9",
|
||||
label: "清空数据"
|
||||
}
|
||||
]);
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
const res = await getOperlogList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
|
||||
// tableData.value = result.list
|
||||
// total.value = result.total
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
function reset() {
|
||||
listQuery.value = {};
|
||||
listQuery.value.page = 1;
|
||||
listQuery.value.size = 20;
|
||||
getListData();
|
||||
}
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const clearAll = async () => {
|
||||
const res = await operlogClean();
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const updateDict = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const handleDetail = (row) => {
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
updateSysRole({
|
||||
...dialogForm.value
|
||||
}).then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
addSysRole({
|
||||
...dialogForm.value
|
||||
}).then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const delHandler = (row) => {
|
||||
operlogRemove({
|
||||
ids: [row.operId]
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
|
||||
// 导出
|
||||
function exportExcel() {
|
||||
proxy.$confirm(`当前数据${total.value}条,确定是否导出全部数据?`, "警告", {type: "warning"}).then(() => {
|
||||
download('/mosty-api/mosty-base/other/exportOperlog',listQuery.value , `人员核查日志_${new Date().getTime()}.xlsx`)
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
547
src/views/backOfficeSystem/systemConfig/menu-list/index.vue
Normal file
547
src/views/backOfficeSystem/systemConfig/menu-list/index.vue
Normal file
@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">菜单管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addItemMenu">
|
||||
<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.menuName"
|
||||
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
|
||||
v-if="refreshTable"
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
ref="dataTreeList"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'sysMenuList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="menuName"
|
||||
show-overflow-tooltip
|
||||
width="200px"
|
||||
label="菜单名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="menuCode"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="150px"
|
||||
label="菜单编码"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="orderNo"
|
||||
label="排序"
|
||||
width="140px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="menuUrl"
|
||||
show-overflow-tooltip
|
||||
label="菜单地址"
|
||||
align="center"
|
||||
width="140px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="menuType"
|
||||
label="类型"
|
||||
align="center"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.menuType === 1" size="small">菜单组</el-tag>
|
||||
<el-tag v-else-if="row.menuType === 2" type="success" size="small"
|
||||
>菜单</el-tag
|
||||
>
|
||||
<el-tag v-else-if="row.menuType === 3" type="success" size="small"
|
||||
>页面</el-tag
|
||||
>
|
||||
<el-tag v-else-if="row.menuType === 4" type="success" size="small"
|
||||
>资源</el-tag
|
||||
>
|
||||
<el-tag v-else type="info" size="small">未知</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="showMode"
|
||||
label="可见"
|
||||
align="center"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.showMode === 1" type="success" size="small"
|
||||
>展示</el-tag
|
||||
>
|
||||
<el-tag v-else-if="row.showMode === 2" type="info" size="small"
|
||||
>不展示</el-tag
|
||||
>
|
||||
<el-tag v-else type="warning">未知</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bz"
|
||||
show-overflow-tooltip
|
||||
label="备注"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="qxbs"
|
||||
label="权限标识"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="140px"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="220">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-button @click="addItemMenu(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
ref="editRef"
|
||||
:rules="rules"
|
||||
:model="dialogForm"
|
||||
>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="菜单名称"
|
||||
prop="menuName"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.menuName"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="菜单编码" label-width="140px">
|
||||
<el-input v-model="dialogForm.menuCode" show-word-limit maxlength="50" autocomplete="off"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="菜单地址"
|
||||
prop="menuUrl"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.menuUrl"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="是否展示"
|
||||
prop="showMode"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-radio-group v-model="dialogForm.showMode">
|
||||
<el-radio :label="1">展示</el-radio>
|
||||
<el-radio :label="2">不展示</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="菜单类型"
|
||||
prop="menuType"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-radio-group :disabled="isEdit" v-model="dialogForm.menuType">
|
||||
<el-radio :label="1">菜单组</el-radio>
|
||||
<el-radio :label="2">菜单</el-radio>
|
||||
<el-radio :label="3">页面</el-radio>
|
||||
<el-radio :label="4">资源</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
v-if="dialogForm.menuType == 4"
|
||||
prop="buttonResource"
|
||||
label="按钮标识"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.buttonResource"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="菜单编码"
|
||||
prop="menuCode"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.menuCode"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
placeholder="权限标识对应路由name"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="选择图标"
|
||||
prop="iconName"
|
||||
label-width="140px"
|
||||
>
|
||||
<ChooseIcon
|
||||
width="400"
|
||||
:limit="13"
|
||||
:isImg="false"
|
||||
clearable=""
|
||||
v-model="dialogForm.iconName"
|
||||
></ChooseIcon>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="排序"
|
||||
prop="orderNo"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="dialogForm.orderNo"
|
||||
class="mx-4"
|
||||
:min="1"
|
||||
:max="100"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="状态" label-width="140px">
|
||||
<el-select v-model="dialogForm.zdywlb" placeholder="请选择业务类别">
|
||||
<el-option label="正常" value="0"></el-option>
|
||||
<el-option label="注销" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item class="one" label="备注" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChooseIcon from "@/components/MyComponents/ChooseIcon";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
nextTick,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
import {
|
||||
getSystemMeny,
|
||||
addSysMenu,
|
||||
updateSysMenu,
|
||||
deleteSysMenu
|
||||
} from "@/api/user-manage";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const rules = ref({
|
||||
menuName: [{ required: true, message: "请输入菜单名称 " }],
|
||||
menuUrl: [{ required: true, message: "请输入菜单地址 " }],
|
||||
showMode: [{ required: true, message: " 请选择是否展示" }],
|
||||
menuType: [{ required: true, message: "请选择菜单类型 " }],
|
||||
buttonResource: [{ required: true, message: "请填写菜单编码" }],
|
||||
menuCode: [{ required: true, message: "请填写菜单编码 " }],
|
||||
iconName: [{ required: true, message: " 请选择图标" }],
|
||||
orderNo: [{ required: true, message: "请填写排序号 " }]
|
||||
});
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
dictName: "",
|
||||
dictCode: "",
|
||||
xtZxbz: "",
|
||||
current: 1,
|
||||
size:20
|
||||
});
|
||||
const buttonLoading = ref(false);
|
||||
const topParentId = ref("");
|
||||
const id = ref("");
|
||||
const zdlx = ref();
|
||||
const refreshTable = ref(true);
|
||||
const isExpand = ref(false); //展开折叠
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
loading.value = true
|
||||
const res = await getSystemMeny(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
loading.value = false
|
||||
};
|
||||
const editRef = ref(null);
|
||||
const handleFilter = () => {
|
||||
listQuery.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
//isExpand 监听 时候展开table
|
||||
watch(isExpand, (val) => {
|
||||
refreshTable.value = false;
|
||||
nextTick(() => {
|
||||
refreshTable.value = true;
|
||||
});
|
||||
});
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
menuName: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.current = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**修改字典 */
|
||||
const update = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
function isNull(data) {
|
||||
if (!data) return true;
|
||||
if (JSON.stringify(data) === "{}") return true;
|
||||
if (JSON.stringify(data) === "[]") return true;
|
||||
return false;
|
||||
}
|
||||
const addItemMenu = (row) => {
|
||||
id.value = isNull(row) ? topParentId.value : row.id;
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
updateSysMenu({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
addSysMenu({
|
||||
...dialogForm.value,
|
||||
parentId: id.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const delDictItem = (row) => {
|
||||
deleteSysMenu({
|
||||
id: Number(row.id)
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
const toGoPage = (row) => {
|
||||
router.push("/user/role?zdbh=" + row.zdbh);
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
::v-deep .el-loading-mask{
|
||||
background:rgba(0,0,0,.5)
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="">权限列表</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {} from 'vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
511
src/views/backOfficeSystem/systemConfig/publicSecurity/index.vue
Normal file
511
src/views/backOfficeSystem/systemConfig/publicSecurity/index.vue
Normal file
@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">公安机关要素</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addItemMenu">
|
||||
<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.gajgmc"
|
||||
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
|
||||
v-if="refreshTable"
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
prop="gajgmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="200px"
|
||||
label="要素名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="gajgjc"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
width="200px"
|
||||
label="要素简称"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="wzBc"
|
||||
label="位置别称"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="wzXz"
|
||||
show-overflow-tooltip
|
||||
label="位置"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ysdl"
|
||||
label="要素大类"
|
||||
align="center"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_ZDY_YSDL"
|
||||
:value="row.ysdl"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yszl"
|
||||
label="要素中类"
|
||||
align="center"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_ZDY_YSZL"
|
||||
:value="row.yszl"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ysxl"
|
||||
label="要素小类"
|
||||
align="center"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_ZDY_YSXL"
|
||||
:value="row.ysxl"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="220">
|
||||
<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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
ref="editRef"
|
||||
:rules="rules"
|
||||
:model="dialogForm"
|
||||
>
|
||||
<el-form-item label="要素名称" prop="gajgmc" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.gajgmc"
|
||||
placeholder="请输入要素名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="要素简称" prop="gajgjc" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.gajgjc"
|
||||
placeholder="请输入要素简称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联部门" label-width="140px">
|
||||
<MOSTY.Department
|
||||
placeholder="部门"
|
||||
width="280px"
|
||||
clearable
|
||||
multiple
|
||||
filterable
|
||||
v-model="dialogForm.glbmDtoList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="要素小类" prop="ysxl" label-width="140px">
|
||||
<el-select v-model="dialogForm.ysxl" placeholder="请选择要素小类">
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_YSXL"
|
||||
:key="dict.value + 'ysxl'"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置别称" prop="wzBc" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.wzBc"
|
||||
placeholder="请输入位置别称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置" prop="wzXz" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.wzXz"
|
||||
placeholder="请输入地址详址"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="dialogForm.jd" clearable style="width: 45%" />
|
||||
<el-input v-model="dialogForm.wd" clearable style="width: 45%" />
|
||||
<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 GdMap from "@/components/GdMap/index.vue";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ChooseIcon from "@/components/MyComponents/ChooseIcon";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getAddressApi } from "@/utils/tools.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
nextTick,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
import {
|
||||
getPageList,
|
||||
getYsAdd,
|
||||
getYsUpdate,
|
||||
getYsDelete,
|
||||
getYsInfo
|
||||
} from "@/api/ysCenter";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDY_YSDL, D_ZDY_YSZL, D_ZDY_YSXL } = proxy.$dict(
|
||||
"D_ZDY_YSDL",
|
||||
"D_ZDY_YSZL",
|
||||
"D_ZDY_YSXL"
|
||||
);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const rules = ref({
|
||||
gajgmc: [{ required: true, message: "请输入要素名称 " }],
|
||||
gajgjc: [{ required: true, message: "请输入要素简称 " }],
|
||||
glbmDtoList: [{ required: true, message: " 请选择关联部门" }],
|
||||
ysxl: [{ required: true, message: "请填写要素小类 " }],
|
||||
jd: [{ required: true, message: "请选择位置 " }]
|
||||
});
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
gajgmc: "",
|
||||
yszl: "",
|
||||
jsnr: "",
|
||||
ysxl:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const buttonLoading = ref(false);
|
||||
const topParentId = ref("");
|
||||
const id = ref("");
|
||||
const zdlx = ref();
|
||||
const refreshTable = ref(true);
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({
|
||||
ysdl: "001",
|
||||
yszl: "001001"
|
||||
});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
const res = await getPageList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
const editRef = ref(null);
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageNum = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
//获取经纬度
|
||||
function chackLat(type) {
|
||||
emitter.emit("drawShape", {
|
||||
type: "drawPoint",
|
||||
flag: "point"
|
||||
});
|
||||
dialogForm.value.jd = "";
|
||||
dialogForm.value.wd = "";
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
gajgmc: "",
|
||||
yszl: "",
|
||||
jsnr: "",
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.current = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**修改字典 */
|
||||
const update = (row) => {
|
||||
getYsInfo(row.id).then((res) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...res };
|
||||
dialogForm.value.glbmDtoList = res.glbmDtoList.map(
|
||||
(item) => item.ssbmid * 1
|
||||
);
|
||||
dialogFormVisible.value = true;
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [res],
|
||||
icon: require("@/assets/point/kfd.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
function isNull(data) {
|
||||
if (!data) return true;
|
||||
if (JSON.stringify(data) === "{}") return true;
|
||||
if (JSON.stringify(data) === "[]") return true;
|
||||
return false;
|
||||
}
|
||||
const addItemMenu = (row) => {
|
||||
id.value = isNull(row) ? topParentId.value : row.id;
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {
|
||||
ysdl: "001",
|
||||
yszl: "001001"
|
||||
};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
const data = { ...dialogForm.value };
|
||||
data.glbmDtoList = data.glbmDtoList.map((item) => {
|
||||
return { ssbmid: item };
|
||||
});
|
||||
getYsUpdate({
|
||||
...data
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
const data = { ...dialogForm.value };
|
||||
data.glbmDtoList = data.glbmDtoList.map((item) => {
|
||||
return {
|
||||
ssbmid: item
|
||||
};
|
||||
});
|
||||
getYsAdd({
|
||||
...data
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const delDictItem = (row) => {
|
||||
getYsDelete(row.id).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
const toGoPage = (row) => {
|
||||
router.push("/user/role?zdbh=" + row.zdbh);
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "drawPoint") {
|
||||
let arr = res.coord.split(",");
|
||||
dialogForm.value.jd = arr[0];
|
||||
dialogForm.value.wd = arr[1];
|
||||
// getAddressApi({ jd: arr[0], wd: arr[1] }, (res) => {
|
||||
// dialogForm.value.wzXz = res.address;
|
||||
// });
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,469 @@
|
||||
<template>
|
||||
<div class="user-list-page">
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
v-model="listQuery.userName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码">
|
||||
<el-input
|
||||
placeholder="请输入电话号码"
|
||||
v-model="listQuery.phone"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="unbundleRole()"
|
||||
>批量取消授权</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addUser()">添加用户</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
prop="loginName"
|
||||
align="center"
|
||||
label="用户名"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
align="center"
|
||||
label="用户昵称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="mobile"
|
||||
width="120px"
|
||||
label="移动电话"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column prop="xtZhxgsj" align="center" label="录入时间">
|
||||
<template #default="{ row }">{{
|
||||
$filters.dateFilter(row.xtLrsj)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-popconfirm
|
||||
confirm-button-text="Yes"
|
||||
cancel-button-text="No"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="unbundleRole(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
width="900px"
|
||||
custom-class="way"
|
||||
v-model="dialogFormVisible"
|
||||
@closed="closeDialog"
|
||||
:title="isEdit ? '修改' : '新增'"
|
||||
>
|
||||
<!-- <p>{{ dialogForm }}</p> -->
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="dialogForm"
|
||||
label-width="120px"
|
||||
class="mosty-from-wrap twoLine"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="用户昵称:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="用户昵称"
|
||||
clearable
|
||||
v-model="dialogForm.userName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="登录账号"
|
||||
clearable
|
||||
v-model="dialogForm.loginName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="密码"
|
||||
show-password
|
||||
v-model="dialogForm.password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idEntityCard">
|
||||
<MOSTY.IdentityCard
|
||||
width="280px"
|
||||
v-model="dialogForm.idEntityCard"
|
||||
clearable
|
||||
></MOSTY.IdentityCard>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码:" prop="telePhone">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.telePhone"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动电话:" prop="mobile">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.mobile"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="封装民族:" prop="nation">
|
||||
<MOSTY.PackageSelect
|
||||
width="280px"
|
||||
v-model="dialogForm.nation"
|
||||
dictEnum="NATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别:" prop="">
|
||||
<MOSTY.Sex width="220px" v-model:sex="dialogForm.sex" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文化程度:" prop="">
|
||||
<MOSTY.PackageSelect
|
||||
dictEnum="EDUCATION"
|
||||
width="280px"
|
||||
v-model="dialogForm.whcd"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="E-mail" prop="email">
|
||||
<MOSTY.Email
|
||||
v-model="dialogForm.email"
|
||||
width="280px"
|
||||
clearable
|
||||
></MOSTY.Email>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="email">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.birthday"
|
||||
type="date"
|
||||
placeholder="出生日期"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期:" prop="">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.endTime"
|
||||
type="datetime"
|
||||
placeholder="Select date and time"
|
||||
format="YYYY/MM/DD hh:mm:ss"
|
||||
value-format="x"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="行业号码:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="行业号码"
|
||||
v-model="dialogForm.inDustRialId"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="管理部门名称:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="管理部门名称"
|
||||
v-model="dialogForm.managerOrgName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="管理部门ID:" prop="">
|
||||
<MOSTY.Department
|
||||
placeholder="管理部门ID"
|
||||
width="280px"
|
||||
clearable
|
||||
filterable
|
||||
multiple
|
||||
v-model="dialogForm.managerOrgId"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位名称:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="岗位名称"
|
||||
v-model="dialogForm.positionName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位ID:" prop="">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="岗位ID"
|
||||
v-model="dialogForm.positionId"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户类型:" prop="">
|
||||
<el-select v-model="dialogForm.userType" placeholder="请选择">
|
||||
<el-option label="系统用户默认" value="00" />
|
||||
<el-option label="注册用户" value="01" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="虚拟用户:" prop="">
|
||||
<el-select v-model="dialogForm.isVirtualUser" placeholder="请选择">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="不是" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" v-if="isEdit" @click="onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button type="primary" v-else @click="onAdd">新增</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisible"
|
||||
:roleId="route.params.id"
|
||||
@choosedUsers="saveUsers"
|
||||
></ChooseUser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import { useRoute } from "vue-router";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, computed, watch,onMounted,onUnmounted,getCurrentInstance } from "vue";
|
||||
import {
|
||||
selectUnAccreditPage,
|
||||
batchUnboundUserRole,
|
||||
getRoleUserList,
|
||||
grantUserToRole
|
||||
} from "@/api/user-manage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const route = useRoute();
|
||||
const searchBox = ref()
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const rules = ref({
|
||||
...rule.phoneRule({ validator: true }, "mobile"), // 是否必填 是否进行校验
|
||||
...rule.phoneRule({ validator: true }, "telePhone"), // 是否必填 是否进行校验 如果props与from里面数据不一致，可以传第二个参数
|
||||
...rule.identityCardRule({ validator: true }), //身份证校验
|
||||
...rule.addressSelectRule({ require: true }), //地址
|
||||
...rule.emailRule({ validator: true }), //邮箱
|
||||
packageSelect: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
other: [
|
||||
{
|
||||
required: true,
|
||||
message: "自由发挥哦",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 20,
|
||||
userName: '',
|
||||
phone: ''
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({
|
||||
userName: ""
|
||||
});
|
||||
//分配角色
|
||||
const currentUserId = ref("");
|
||||
const roleDialogVisible = ref(false);
|
||||
const multipleTableRef = ref(null);
|
||||
const multipleSelection = ref([]);
|
||||
const chooseUserVisible = ref(false);
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
params.roleId = route.params.id;
|
||||
const res = await getRoleUserList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
page: 1,
|
||||
size: 5,
|
||||
userName: "",
|
||||
phone: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
|
||||
// 分页相关 size 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const unbundleRole = (row) => {
|
||||
let params = {
|
||||
roleId: route.params.id,
|
||||
ids: []
|
||||
};
|
||||
if (row) {
|
||||
params.ids.push(row.id);
|
||||
} else {
|
||||
if (multipleSelection.value.length <= 0) return false;
|
||||
multipleSelection.value.forEach((item) => {
|
||||
params.ids.push(item.id);
|
||||
});
|
||||
}
|
||||
batchUnboundUserRole(params).then((res) => {
|
||||
ElMessage.success("操作成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
|
||||
const assignRoles = (row) => {
|
||||
roleDialogVisible.value = true;
|
||||
currentUserId.value = row.id;
|
||||
};
|
||||
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
const addUser = () => {
|
||||
chooseUserVisible.value = true;
|
||||
};
|
||||
|
||||
//批量添加用户
|
||||
const saveUsers = (users) => {
|
||||
if (users.length > 0) {
|
||||
let userIds = users.map((item) => item.id);
|
||||
let params = {
|
||||
roleId: route.params.id,
|
||||
userIds: userIds
|
||||
};
|
||||
grantUserToRole(params).then((res) => {
|
||||
ElMessage.success("修改成功");
|
||||
handleFilter();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 200;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
//watch监听路由变化
|
||||
watch(roleDialogVisible, (val) => {
|
||||
if (!val) currentUserId.value = "";
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="分配权限"
|
||||
width="500px"
|
||||
:model-value="modelValue"
|
||||
:destroy-on-close="true"
|
||||
@close="closed"
|
||||
>
|
||||
<div class="treeCnt">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="allPermission"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
:check-strictly="true"
|
||||
@check="checkeTree"
|
||||
>
|
||||
</el-tree>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import {
|
||||
saveRoleMenuInfo,
|
||||
getRoleMenuIds,
|
||||
getMenuTree
|
||||
} from "@/api/user-manage";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
roleId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const form = ref({});
|
||||
|
||||
const emits = defineEmits(["update:modelValue", "updateRole"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const onComfirm = () => {
|
||||
let params = {
|
||||
roleId: Number(props.roleId),
|
||||
menuIds: treeRef.value.getCheckedKeys().map((item) => Number(item))
|
||||
};
|
||||
saveRoleMenuInfo(params).then((res) => {
|
||||
ElMessage.success("操作成功");
|
||||
});
|
||||
closed();
|
||||
};
|
||||
|
||||
//所有权限
|
||||
const allPermission = ref([]);
|
||||
const getPermissionList = async () => {
|
||||
const res = await getMenuTree();
|
||||
allPermission.value = res;
|
||||
};
|
||||
getPermissionList();
|
||||
|
||||
const treeRef = ref(null);
|
||||
//属性结构配置
|
||||
const defaultProps = {
|
||||
children: "sysMenuList",
|
||||
label: "menuName"
|
||||
};
|
||||
//当前角色权限
|
||||
const getRolePermission = async () => {
|
||||
const checkedKeys = await getRoleMenuIds(props.roleId);
|
||||
treeRef.value.setCheckedKeys(checkedKeys);
|
||||
};
|
||||
|
||||
// 选中子节点，默认选中父节点
|
||||
const checkeTree = (data) => {
|
||||
let thisNode = treeRef.value.getNode(data.id); // 获取当前节点
|
||||
const keys = treeRef.value.getCheckedKeys(); // 获取已勾选节点的key值
|
||||
if (thisNode.checked) {
|
||||
// 当前节点若被选中
|
||||
for (let i = thisNode.level; i > 1; i--) {
|
||||
// 判断是否有父级节点
|
||||
if (!thisNode.parent.checked) {
|
||||
// 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
|
||||
thisNode = thisNode.parent;
|
||||
// keys.push(thisNode.data.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
treeRef.value.setCheckedKeys(keys); // 将所有keys数组的节点全选中
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.roleId,
|
||||
(val) => {
|
||||
if (val) {
|
||||
getRolePermission();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
max-height: 80vh;
|
||||
.treeCnt {
|
||||
height: 65vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
465
src/views/backOfficeSystem/systemConfig/role-list/index.vue
Normal file
465
src/views/backOfficeSystem/systemConfig/role-list/index.vue
Normal file
@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">角色列表</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addRole()">
|
||||
<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.roleName"
|
||||
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
|
||||
:height="tableHeight"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="orderNo"
|
||||
label="角色编号"
|
||||
show-overflow-tooltip
|
||||
width="120px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="roleName"
|
||||
label="角色名称"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="roleCode"
|
||||
label="角色编码"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable label="状态" width="80px">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag size="small" type="success" v-if="row.xtZxbz === 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="row.xtZxbz === 1"
|
||||
>注销</el-tag
|
||||
>
|
||||
<el-tag size="small" type="info" v-else>未知</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="roleDesc"
|
||||
label="角色描述"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="bz" label="备注" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="xtZhxgsj" label="更新时间">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.dateFilter(row.xtZhxgsj) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="320">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateDict(row)" size="small">修改</el-button>
|
||||
<el-button @click="allocationUser(row)" size="small"
|
||||
>管理用户</el-button
|
||||
>
|
||||
<el-button @click="privilegesHanlder(row)" size="small"
|
||||
>菜单权限</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delRole(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<!-- v-permission="['removeTest','removeTest2']" -->
|
||||
<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.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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
|
||||
:rules="rules"
|
||||
ref="elform"
|
||||
inline="true"
|
||||
label-position="top"
|
||||
:model="dialogForm"
|
||||
class="mosty-from-wrap"
|
||||
>
|
||||
<el-form-item prop="roleName" class="one" label="角色名称">
|
||||
<el-input
|
||||
v-model="dialogForm.roleName"
|
||||
show-word-limit
|
||||
maxlength="20"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="roleCode"
|
||||
label="角色编码"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.roleCode"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="角色描述"
|
||||
prop="roleDesc"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.roleDesc"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="排序号"
|
||||
prop="orderNo"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="dialogForm.orderNo"
|
||||
class="mx-4"
|
||||
:min="1"
|
||||
:max="100"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="权限范围"
|
||||
prop="dataPermissionLevel"
|
||||
label-width="140px"
|
||||
>
|
||||
<!-- <MOSTY.PackageSelect
|
||||
width="280px"
|
||||
v-model="dialogForm.dataPermissionLevel"
|
||||
dictEnum="D_ZDY_SJQX"
|
||||
clearable
|
||||
filterable
|
||||
/> -->
|
||||
<el-select
|
||||
clearable
|
||||
v-model="dialogForm.dataPermissionLevel"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="(dict, index) in D_ZDY_SJQX"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="备注" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<PrivilegesDialog
|
||||
v-model="privilegesDialogVisible"
|
||||
:roleId="currentRow.id"
|
||||
></PrivilegesDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import PrivilegesDialog from "./conponents/PrivilegesDialog.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDY_SJQX } = proxy.$dict("D_ZDY_SJQX");
|
||||
import {
|
||||
getRoleList,
|
||||
addSysRole,
|
||||
updateSysRole,
|
||||
deleteSysRole
|
||||
} from "@/api/user-manage";
|
||||
import { useRouter } from "vue-router";
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 20,
|
||||
dictName: "",
|
||||
dictCode: "",
|
||||
xtZxbz: ""
|
||||
});
|
||||
const elform = ref(null);
|
||||
//验证
|
||||
const rules = ref({
|
||||
roleName: [{ required: true, message: "请输入角色名称", trigger: "change" }],
|
||||
roleCode: [{ required: true, message: "请输入角色编码", trigger: "change" }],
|
||||
roleDesc: [{ required: true, message: "请输入角色描述", trigger: "change" }],
|
||||
orderNo: [{ required: true, message: "请输入排序号", trigger: "change" }],
|
||||
dataPermissionLevel: [
|
||||
{ required: true, message: "请选择权限范围", trigger: "change" }
|
||||
]
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
const buttonLoading = ref(false);
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
const res = await getRoleList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
page: 1,
|
||||
size: 5,
|
||||
roleName: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const updateDict = (row) => {
|
||||
isEdit.value = true;
|
||||
row.dataPermissionLevel = "" + row.dataPermissionLevel;
|
||||
dialogForm.value = { ...row };
|
||||
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
/**privileges 分配权限 */
|
||||
const privilegesDialogVisible = ref(false);
|
||||
const privilegesHanlder = (row) => {
|
||||
privilegesDialogVisible.value = true;
|
||||
currentRow.value = { ...row };
|
||||
};
|
||||
|
||||
const addRole = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
updateSysRole({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
addSysRole({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("操作成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delRole = (row) => {
|
||||
buttonLoading.value = true;
|
||||
deleteSysRole({
|
||||
id: Number(row.id)
|
||||
})
|
||||
.then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
//分配用户
|
||||
const router = useRouter();
|
||||
const allocationUser = (row) => {
|
||||
//
|
||||
router.push(`/user/allocationUser/${row.id}`);
|
||||
};
|
||||
// 高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">系统配置</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addConfig">
|
||||
<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.configName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置键">
|
||||
<el-input
|
||||
placeholder="请输入配置键"
|
||||
v-model="listQuery.configKey"
|
||||
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
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="pzmc"
|
||||
show-overflow-tooltip
|
||||
label="配置名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="pzj"
|
||||
show-overflow-tooltip
|
||||
label="配置键"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="pzz"
|
||||
show-overflow-tooltip
|
||||
label="配置值"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xtZhxgrxm"
|
||||
show-overflow-tooltip
|
||||
label="修改人姓名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="bz" show-overflow-tooltip label="备注">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="xtCjsj" label="采集时间">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.dateFilter(row.xtCjsj) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateDict(row)" size="small">修改</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delConfig(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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
|
||||
ref="formRef"
|
||||
class="mosty-from-wrap"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:model="dialogForm"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="配置名称"
|
||||
prop="pzmc"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.pzmc"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="配置键" prop="pzj" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.pzj"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
label="配置值"
|
||||
prop="pzz"
|
||||
required
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.pzz"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item class="one" prop="xtZxbz" label="状态">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.xtZxbz"
|
||||
placeholder="请选择配置状态"
|
||||
>
|
||||
<el-option label="正常" :value="0"></el-option>
|
||||
<el-option label="注销" :value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item class="one" label="备注" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import {
|
||||
getSysConfigList,
|
||||
addSysConfig,
|
||||
updateSysConfig,
|
||||
deleteSysConfig
|
||||
} from "@/api/user-manage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const formRef = ref(null);
|
||||
const rules = ref({
|
||||
pzmc: [{ required: true, message: "请填写配置名称", trigger: "blur" }],
|
||||
pzj: [{ required: true, message: "请填写配置键", trigger: "blur" }],
|
||||
pzz: [{ required: true, message: "请填写配置值", trigger: "blur" }],
|
||||
xtZxbz: [{ required: true, message: "请选择配置状态", trigger: "blur" }],
|
||||
});
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 20,
|
||||
dictName: "",
|
||||
dictCode: "",
|
||||
xtZxbz: ""
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
const buttonLoading = ref(false);
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
const res = await getSysConfigList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
page: 1,
|
||||
size: 20,
|
||||
configName: "",
|
||||
configKey: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const updateDict = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const addConfig = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
updateSysConfig({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
addSysConfig({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delConfig = (row) => {
|
||||
deleteSysConfig({
|
||||
id: Number(row.id)
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">系统版本管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addVersion">
|
||||
<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.sysVersion"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.startPublishTime"
|
||||
type="datetime"
|
||||
placeholder="选择发布时间"
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label>
|
||||
<el-date-picker
|
||||
v-model="listQuery.endPublishTime"
|
||||
type="datetime"
|
||||
placeholder="结束时间"
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</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
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sysVersion"
|
||||
label="版本"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="addFunction"
|
||||
label="新增功能"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="fixBug"
|
||||
label="修复bug"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column sortable prop="xtCjsj" label="发布时间" width="160">
|
||||
<template #default="{ row }">{{
|
||||
$filters.dateFilter(row.xtCjsj)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bz"
|
||||
label="备注"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="260">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateVersion(row)" size="small">修改</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delVersion(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:model="dialogForm"
|
||||
ref="elform"
|
||||
>
|
||||
<el-form-item
|
||||
prop="sysVersion"
|
||||
class="one"
|
||||
label="版本"
|
||||
:rules="[{ required: true, message: '请填写版本号' }]"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.sysVersion"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="addFunction"
|
||||
label="新增功能"
|
||||
:rules="[{ required: true, message: '请填写新增功能描述' }]"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.addFunction"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="fixBug"
|
||||
label="修复bug"
|
||||
:rules="[{ required: true, message: '请填写修复bug' }]"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.fixBug"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="publishTime"
|
||||
label="发布时间"
|
||||
:rules="[{ required: true, message: '请选择发布时间' }]"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="dialogForm.publishTime"
|
||||
type="datetime"
|
||||
placeholder="选择时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" label="备注" label-width="140px">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted,onUnmounted,getCurrentInstance } from "vue";
|
||||
import {
|
||||
getSysVersionList,
|
||||
updateVersionManage,
|
||||
deleteVersionManage,
|
||||
addVersionManage
|
||||
} from "@/api/user-manage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const elform = ref(null);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 20,
|
||||
dictName: "",
|
||||
dictCode: "",
|
||||
xtZxbz: ""
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
const buttonLoading = ref(false);
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
const res = await getSysVersionList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
page: 1,
|
||||
size: 20,
|
||||
sysVersion: "",
|
||||
startPublishTime: "",
|
||||
endPublishTime: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const updateVersion = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const addVersion = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
updateVersionManage({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
addVersionManage({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delVersion = (row) => {
|
||||
deleteVersionManage({
|
||||
id: Number(row.id)
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
740
src/views/backOfficeSystem/systemConfig/systemFxMx/index.vue
Normal file
740
src/views/backOfficeSystem/systemConfig/systemFxMx/index.vue
Normal file
@ -0,0 +1,740 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">系统分析模型</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addJob()">
|
||||
<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.mxmc"
|
||||
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
|
||||
:height="tableHeight"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="id"
|
||||
show-overflow-tooltip
|
||||
label="模型编号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="mxmc"
|
||||
show-overflow-tooltip
|
||||
label="模型名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="mxsm"
|
||||
show-overflow-tooltip
|
||||
label="模型说明"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="yxcs"
|
||||
show-overflow-tooltip
|
||||
label="运行次数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="yjCs"
|
||||
show-overflow-tooltip
|
||||
label="预警次数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable label="模型状态" width="100px">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-tag size="small" type="success" v-if="row.mxzt == '01'"
|
||||
>运行中</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="row.mxzt == '02'"
|
||||
>已停止</el-tag
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="280">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.mxzt == '01'">
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要停止?"
|
||||
@confirm="startModel(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button size="small">停止</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要启动?"
|
||||
@confirm="stopModel(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button size="small">启动</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
|
||||
<el-button @click="csSet(row)" size="small">参数设置</el-button>
|
||||
<el-button @click="updateJob(row)" size="small">修改</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delRole(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:page-size="listQuery.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">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
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
|
||||
ref="elform"
|
||||
class="mosty-from-wrap"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:model="dialogForm"
|
||||
>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="id"
|
||||
label="模型编号"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.id"
|
||||
placeholder="请输入模型编号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="ssbmid"
|
||||
label="所属辖区"
|
||||
label-width="140px"
|
||||
>
|
||||
<MOSTY.Department
|
||||
placeholder="请选择所属辖区"
|
||||
width="100%"
|
||||
clearable
|
||||
filterable
|
||||
v-model="dialogForm.ssbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="mxmc"
|
||||
label="模型名称"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.mxmc"
|
||||
placeholder="请输入模型名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="mxlx" label="模型类型">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.mxlx"
|
||||
placeholder="请选择模型类型"
|
||||
>
|
||||
<el-option label="街面违法犯罪预警" :value="'01'"></el-option>
|
||||
<el-option label="重点巡防区域预警" :value="'02'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="mxsm"
|
||||
label="模型说明"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="dialogForm.mxsm"
|
||||
autocomplete="off"
|
||||
show-word-limit
|
||||
maxlength="3000"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 模型参数 -->
|
||||
<div v-if="dialogCSSZTableVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">参数设置</span>
|
||||
<div>
|
||||
<el-button size="small" @click="dialogCSSZTableVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mxcs_table">
|
||||
<div class="csmxadd">
|
||||
<el-button type="primary" @click="addCsModel()">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableCSData"
|
||||
border
|
||||
:height="tableHeight"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="cslx"
|
||||
show-overflow-toolt
|
||||
label="参数类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span>{{row.cslx == '01' ? '时间（分）':row.cslx == '02' ? '次数':row.cslx == '03' ? '人数':'距离（米）'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="csmc"
|
||||
show-overflow-tooltip
|
||||
label="参数名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="csz"
|
||||
show-overflow-tooltip
|
||||
label="参数值"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="csdm"
|
||||
show-overflow-tooltip
|
||||
label="参数代码"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateCs(row)" size="small">修改</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="deleteCs(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="handleSizeChangecs"
|
||||
@current-change="handleCurrentChangecs"
|
||||
:current-page="csform.pageCurrent"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:page-size="csform.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="cstotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模型参数新增 修改 -->
|
||||
<div v-if="dialogcsFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ iscsEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="iscsEdit"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="updateCsModel"
|
||||
:loading="buttonLoading"
|
||||
>保存</el-button
|
||||
>
|
||||
<!-- 新增 -->
|
||||
<el-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="saveCs"
|
||||
:loading="buttonLoading"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="dialogcsFormVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elcsform"
|
||||
class="mosty-from-wrap"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:model="csform"
|
||||
>
|
||||
<el-form-item
|
||||
class="one"
|
||||
prop="csmc"
|
||||
label="参数名称"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-input
|
||||
v-model="csform.csmc"
|
||||
placeholder="请输入参数名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="csz" label="参数值" label-width="140px">
|
||||
<el-input v-model="csform.csz" placeholder="请输入参数值"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="csdm" label="参数代码" label-width="140px">
|
||||
<el-input v-model="csform.csdm" placeholder="请输入参数代码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="cslx" label="参数类型">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="csform.cslx"
|
||||
placeholder="请选择参数类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cslxList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import {
|
||||
getYJModelList,
|
||||
addYJmodel,
|
||||
putYJmodel,
|
||||
delYJModel,
|
||||
getCsList,
|
||||
addCs,
|
||||
putCs,
|
||||
delCs,
|
||||
getCsDTQZ
|
||||
} from "@/api/basicsmanage/yjmodel";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const buttonLoading = ref(false);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
mxmc: ""
|
||||
});
|
||||
const elform = ref(null);
|
||||
const elcsform = ref(null);
|
||||
//验证
|
||||
const rules = ref({
|
||||
ssbmid: [{ required: true, message: "请选择所属辖区", trigger: "change" }],
|
||||
mxmc: [{ required: true, message: "请输入模型名称", trigger: "change" }],
|
||||
mxlx: [{ required: true, message: "请选择模型类型", trigger: "change" }],
|
||||
mxsm: [{ required: true, message: "请输入模型说明", trigger: "change" }],
|
||||
csmc: [{ required: true, message: "请输入参数名称", trigger: "change" }],
|
||||
csz: [{ required: true, message: "请输入参数值", trigger: "change" }],
|
||||
cslx: [{ required: true, message: "请选择参数类型", trigger: "change" }],
|
||||
id: [{ required: true, message: "请输入模型编号", trigger: "change" }],
|
||||
csdm: [{required: true, message: "请输入参数代码", trigger: "change"}]
|
||||
});
|
||||
// 参数类型
|
||||
const cslxList = ref([
|
||||
{
|
||||
label: "时间(分)",
|
||||
value: "01"
|
||||
},
|
||||
{
|
||||
label: "次数",
|
||||
value: "02"
|
||||
},
|
||||
{
|
||||
label: "人数",
|
||||
value: "03"
|
||||
},
|
||||
{
|
||||
label: "距离（米）",
|
||||
value: "04"
|
||||
}
|
||||
]);
|
||||
// 参数设置
|
||||
const csform = ref({});
|
||||
const csparams = ref({
|
||||
pageSize: 10,
|
||||
pageCurrent: 1,
|
||||
mxid: ""
|
||||
});
|
||||
const cstotal = ref(0);
|
||||
const iscsEdit = ref(false);
|
||||
const tableCSData = ref([]);
|
||||
const dialogCSSZTableVisible = ref(false);
|
||||
const dialogcsFormVisible = ref(false);
|
||||
function csSet(row) {
|
||||
csparams.value.mxid = row.id;
|
||||
dialogCSSZTableVisible.value = true;
|
||||
searchCs();
|
||||
}
|
||||
// 参数查询
|
||||
function searchCs() {
|
||||
getCsList(csparams.value).then((res) => {
|
||||
tableCSData.value = res.records;
|
||||
cstotal.value = res.total;
|
||||
});
|
||||
}
|
||||
// 参数新增
|
||||
function addCsModel() {
|
||||
iscsEdit.value = false;
|
||||
dialogcsFormVisible.value = true;
|
||||
csform.value = {
|
||||
csmc: "",
|
||||
csz: "",
|
||||
cslx: ""
|
||||
};
|
||||
csform.value.mxid = csparams.value.mxid;
|
||||
}
|
||||
function saveCs() {
|
||||
elcsform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
addCs(csform.value).then((res) => {
|
||||
ElMessage.success("新增成功");
|
||||
csparams.value.pageCurrent = 1;
|
||||
searchCs();
|
||||
dialogcsFormVisible.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
// 参数删除
|
||||
function deleteCs(row) {
|
||||
delCs(row.id).then((res) => {
|
||||
csparams.value.pageCurrent = 1;
|
||||
searchCs();
|
||||
});
|
||||
}
|
||||
// 参数修改
|
||||
function updateCs(row) {
|
||||
iscsEdit.value = true;
|
||||
dialogcsFormVisible.value = true;
|
||||
csform.value = row;
|
||||
}
|
||||
function updateCsModel() {
|
||||
elcsform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
putCs(csform.value).then((res) => {
|
||||
ElMessage.success("修改成功");
|
||||
csparams.value.pageCurrent = 1;
|
||||
searchCs();
|
||||
dialogcsFormVisible.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 参数分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChangecs = (currentSize) => {
|
||||
csform.value.pageSize = currentSize;
|
||||
searchCs();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChangecs = (currentPage) => {
|
||||
csform.value.pageCurrent = currentPage;
|
||||
searchCs();
|
||||
};
|
||||
|
||||
// 启动
|
||||
function startModel(row) {
|
||||
getCsDTQZ(row.id).then((res) => {
|
||||
ElMessage.success("启动成功");
|
||||
handleFilter();
|
||||
});
|
||||
}
|
||||
// 停止
|
||||
function stopModel(row) {
|
||||
getCsDTQZ(row.id).then((res) => {
|
||||
ElMessage.success("停止成功");
|
||||
handleFilter();
|
||||
});
|
||||
}
|
||||
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({});
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
mxmc: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const res = await getYJModelList(listQuery.value);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const updateJob = (row) => {
|
||||
isEdit.value = true;
|
||||
dialogForm.value = { ...row };
|
||||
dialogForm.value.ssbmid = dialogForm.value.ssbmid * 1;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const addJob = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
dialogForm.value.ssbmdm = dialogForm.value.ssbmid;
|
||||
putYJmodel({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) {
|
||||
ElMessage.error("请完成必填项！");
|
||||
return false;
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
dialogForm.value.ssbmdm = dialogForm.value.ssbmid;
|
||||
addYJmodel({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delRole = (row) => {
|
||||
delYJModel(row.id).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
// 高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
.cslb_text {
|
||||
// font-size: 20px;
|
||||
color: rgb(7, 142, 231);
|
||||
padding: 10px;
|
||||
}
|
||||
.canshu_box {
|
||||
width: 94%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.csmxadd {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 10px;
|
||||
}
|
||||
.mxcs_table {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<el-dialog title="配置角色" :model-value="modelValue" @close="closed">
|
||||
<!-- <el-checkbox-group v-model="userRoleTitleList">
|
||||
<el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.roleName" />
|
||||
</el-checkbox-group>-->
|
||||
<el-table max-height="380px" ref="multipleTableRef" :data="allRoleList" style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column property="orderNo" label="角色编号" />
|
||||
<el-table-column property="roleName" label="角色名称" />
|
||||
<el-table-column prop="xtZhxgsj" label="更新时间">
|
||||
<template #default="{ row }">{{ $filters.dateFilter(row.xtZhxgsj) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" :loading="buttonLoading" @click="onComfirm">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import {
|
||||
getRoleList,
|
||||
getUserRoleList,
|
||||
grantRoleToUser
|
||||
} from "@/api/user-manage";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
userId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const buttonLoading = ref(false)
|
||||
const emits = defineEmits(["update:modelValue", "updateRole"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const multipleTableRef = ref(null)
|
||||
|
||||
const multipleSelection = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
// const roles = userRoleTitleList.value.map((roleName) => {
|
||||
// return allRoleList.value.find((role) => role.roleName === roleName);
|
||||
// });
|
||||
// const ids = roles.map((item) => {
|
||||
// return item.id;
|
||||
// });
|
||||
const ids = multipleSelection.value.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
let params = {
|
||||
userId: props.userId,
|
||||
roleIds: ids
|
||||
};
|
||||
buttonLoading.value = true;
|
||||
grantRoleToUser(params).then((res) => {
|
||||
ElMessage.success("操作成功");
|
||||
//通知
|
||||
buttonLoading.value = false;
|
||||
emits("updateRole");
|
||||
});
|
||||
closed();
|
||||
};
|
||||
|
||||
//当前用户角色
|
||||
const userRoleTitleList = ref([]);
|
||||
const getUserRoles = async () => {
|
||||
const res = await getUserRoleList(Number(props.userId));
|
||||
userRoleTitleList.value = res.map((item) => item.id);
|
||||
const hx = [];
|
||||
allRoleList.value.forEach(item => {
|
||||
if (userRoleTitleList.value.includes(item.id)) {
|
||||
hx.push(item)
|
||||
}
|
||||
})
|
||||
toggleSelection(hx)
|
||||
};
|
||||
|
||||
const toggleSelection = (rows) => {
|
||||
if (rows) {
|
||||
rows.forEach((row) => {
|
||||
multipleTableRef.value.toggleRowSelection(row, true)
|
||||
})
|
||||
} else {
|
||||
multipleTableRef.value.clearSelection()
|
||||
}
|
||||
}
|
||||
|
||||
//所有角色
|
||||
const allRoleList = ref([]);
|
||||
const getAllRoleList = async () => {
|
||||
const params = {
|
||||
page: 1,
|
||||
size: 999
|
||||
};
|
||||
const res = await getRoleList(params);
|
||||
allRoleList.value = res?.records;
|
||||
getUserRoles();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.userId,
|
||||
(val) => {
|
||||
if (val) {
|
||||
getAllRoleList();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
786
src/views/backOfficeSystem/systemConfig/user-list/index.vue
Normal file
786
src/views/backOfficeSystem/systemConfig/user-list/index.vue
Normal file
@ -0,0 +1,786 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">用户管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addUserHander">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
v-model="listQuery.loginName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动电话">
|
||||
<el-input
|
||||
placeholder="请输入移动电话"
|
||||
v-model="listQuery.phone"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="身份证号">
|
||||
<el-input
|
||||
placeholder="请输入身份证号"
|
||||
v-model="listQuery.idEntityCard"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号">
|
||||
<el-input
|
||||
placeholder="请输入警号"
|
||||
v-model="listQuery.inDustRialId"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item 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="main-box">
|
||||
<div class="treeBox" :style="{ height: treeHeight }">
|
||||
<MOSTY.DepartmentTree
|
||||
width="280px"
|
||||
placeholder="管理部门ID"
|
||||
clearable
|
||||
filterable
|
||||
:isBmId="true"
|
||||
v-model="listQuery.deptId"
|
||||
/>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="userName"
|
||||
align="center"
|
||||
label="用户名"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="idEntityCard"
|
||||
align="center"
|
||||
label="身份证号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="deptName"
|
||||
label="部门"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="inDustRialId"
|
||||
align="center"
|
||||
label="警号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="mobile"
|
||||
align="center"
|
||||
label="电话号码"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" sortable label="性别" width="80">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XB" :value="row.sex" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
width="250"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateDict(row)" size="small">编辑</el-button>
|
||||
<el-dropdown
|
||||
style="margin-left: 12px; margin-right: 12px"
|
||||
@command="dropdownAction"
|
||||
>
|
||||
<el-button style="" size="small" @click="handleClick">
|
||||
更多<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
:command="commandValue('assignRoles', row)"
|
||||
>分配角色</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item :command="commandValue('restPwd', row)"
|
||||
>重置密码</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delRole(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="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="onSave"
|
||||
:loading="buttonLoading"
|
||||
>修改</el-button
|
||||
>
|
||||
<!-- 新增 -->
|
||||
<el-button v-else type="primary" size="small" @click="onAdd"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
class="mosty-from-wrap"
|
||||
ref="elform"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="部门:" prop="ssbmdm">
|
||||
<MOSTY.Department
|
||||
:placeholder="dialogForm.ssbm"
|
||||
width="280px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="dialogForm.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称:" prop="userName">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入用户昵称"
|
||||
clearable
|
||||
v-model="dialogForm.userName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号:" prop="loginName">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入登录账号"
|
||||
clearable
|
||||
v-model="dialogForm.loginName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" v-if="!isEdit" prop="password">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
v-model="dialogForm.password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idEntityCard">
|
||||
<MOSTY.IdentityCard
|
||||
width="280px"
|
||||
v-model="dialogForm.idEntityCard"
|
||||
@change="fn"
|
||||
clearable
|
||||
></MOSTY.IdentityCard>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号" prop="inDustRialId">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入警号"
|
||||
v-model="dialogForm.inDustRialId"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位选择">
|
||||
<MOSTY.StationSelect
|
||||
width="300px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="dialogForm.positionId"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户类型:" prop="userType">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.userType"
|
||||
placeholder="请选择用户类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_YHLX"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="虚拟用户:" prop="isVirtualUser">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.isVirtualUser"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_XNYH"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码:" prop="telePhone">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.telePhone"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动电话:" prop="mobile">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.mobile"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族:" prop="nation">
|
||||
<MOSTY.PackageSelect
|
||||
width="280px"
|
||||
v-model="dialogForm.nation"
|
||||
dictEnum="NATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别:" prop="sex">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.sex"
|
||||
placeholder="请选择性别"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in D_BZ_XB"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文化程度:" prop="whcd">
|
||||
<MOSTY.PackageSelect
|
||||
dictEnum="EDUCATION"
|
||||
width="280px"
|
||||
v-model="dialogForm.whcd"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="E-mail" prop="email">
|
||||
<MOSTY.Email
|
||||
v-model="dialogForm.email"
|
||||
width="280px"
|
||||
clearable
|
||||
></MOSTY.Email>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="birthday">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.birthday"
|
||||
type="date"
|
||||
placeholder="出生日期"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属模块:" prop="politic">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.politic"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_ZZMM"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="婚姻状况:" prop="marital">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.marital"
|
||||
placeholder="请选择婚姻状况"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_HYZK"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员类别:" prop="type">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.type"
|
||||
placeholder="请选择人员类别"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_RYLB"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期:" prop="endTime">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.endTime"
|
||||
type="datetime"
|
||||
placeholder="请选择有效期"
|
||||
format="YYYY/MM/DD hh:mm:ss"
|
||||
value-format="x"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否融合">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.sfrh"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SF"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%" label="备注">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<RolesDialog
|
||||
v-model="roleDialogVisible"
|
||||
:userId="currentUserId"
|
||||
@updateRole="handleFilter"
|
||||
></RolesDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
import RolesDialog from "./components/roles.vue";
|
||||
import {
|
||||
getSysUserList,
|
||||
editSysUser,
|
||||
addUser,
|
||||
getUserInfoToId,
|
||||
resetPassword,
|
||||
deleteSysUser,
|
||||
selectDeptPage,
|
||||
getUserRoleList
|
||||
} from "@/api/user-manage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_XB,
|
||||
D_BZ_YHLX,
|
||||
D_BZ_XNYH,
|
||||
D_BZ_RYLB,
|
||||
D_BZ_SF,
|
||||
D_BZ_HYZK,
|
||||
D_BZ_ZZMM
|
||||
} = proxy.$dict(
|
||||
"D_BZ_XB",
|
||||
"D_BZ_YHLX",
|
||||
"D_BZ_XNYH",
|
||||
"D_BZ_RYLB",
|
||||
"D_BZ_SF",
|
||||
"D_BZ_HYZK",
|
||||
"D_BZ_ZZMM"
|
||||
);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const treeHeight = ref(""); // 树高度
|
||||
const rules = ref({
|
||||
// ...rule.phoneRule({ validator: true }, "mobile"), // 是否必填 是否进行校验
|
||||
// ...rule.phoneRule({ validator: true }, "telePhone"), // 是否必填 是否进行校验 如果props与from里面数据不一致，可以传第二个参数
|
||||
// ...rule.identityCardRule({ validator: true }), //身份证校验
|
||||
// ...rule.addressSelectRule({ require: true }), //地址
|
||||
// ...rule.emailRule({ validator: true }), //邮箱
|
||||
userName: [{ required: true, message: "请填写用户昵称" }],
|
||||
loginName: [{ required: true, message: "请填写登录账号" }],
|
||||
password: [{ required: true, message: "请填写密码" }],
|
||||
// nation: [{ required: true, message: "请选择民族" }],
|
||||
// sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
||||
// whcd: [{ required: true, message: "请选择文化程度" }],
|
||||
// birthday: [{ required: true, message: "请选择出生日期" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门" }],
|
||||
inDustRialId: [{ required: true, message: "请填写警号" }],
|
||||
managerOrgId: [{ required: true, message: "请选择岗位" }],
|
||||
positionId: [{ required: true, message: " " }],
|
||||
userType: [{ required: true, message: "请选择用户类型" }],
|
||||
isVirtualUser: [{ required: true, message: "请选择虚拟用户" }],
|
||||
idEntityCard: [{ required: true, message: "请输入身份证号码" }],
|
||||
packageSelect: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
other: [
|
||||
{
|
||||
required: true,
|
||||
message: "自由发挥哦",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
const elform = ref(null);
|
||||
const buttonLoading = ref(false);
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(20);
|
||||
const currentRow = ref({});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 20,
|
||||
loginName: "",
|
||||
phone: ""
|
||||
});
|
||||
const isEdit = ref(true);
|
||||
const dialogForm = ref({
|
||||
userName: ""
|
||||
});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
params.current = params.page;
|
||||
const res = await getSysUserList(params);
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
};
|
||||
getListData();
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
page: 1,
|
||||
size: 20,
|
||||
loginName: "",
|
||||
phone: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.page = 1;
|
||||
getListData();
|
||||
};
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.page = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**修改字典 */
|
||||
const updateDict = async (row) => {
|
||||
getUserInfoToId(row.id).then((res) => {
|
||||
dialogForm.value = { ...res };
|
||||
dialogForm.value.nation = "" + res.nation;
|
||||
dialogForm.value.isVirtualUser = "" + res.isVirtualUser;
|
||||
isEdit.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
};
|
||||
//身份证号计算出生日期
|
||||
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-");
|
||||
}
|
||||
return birthday;
|
||||
}
|
||||
function fn(e) {
|
||||
let text = 0;
|
||||
if (e.length >= 17) {
|
||||
dialogForm.value.birthday = getBirthdayFromIdCard(e);
|
||||
text = e[e.length - 2] * 1;
|
||||
if (text % 2 === 0) {
|
||||
dialogForm.value.sex = "2";
|
||||
} else {
|
||||
dialogForm.value.sex = "1";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const commandValue = (type, command) => {
|
||||
return {
|
||||
type: type,
|
||||
command: command
|
||||
};
|
||||
};
|
||||
const dropdownAction = (item) => {
|
||||
const { type, command } = item;
|
||||
if (type === "assignRoles") {
|
||||
assignRoles(command);
|
||||
} else if (type === "restPwd") {
|
||||
restPwd(command);
|
||||
}
|
||||
};
|
||||
|
||||
const addUserHander = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const onSave = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
dialogForm.value.positionName = "";
|
||||
editSysUser({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("修改成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
//新增人员
|
||||
const onAdd = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
addUser({
|
||||
...dialogForm.value
|
||||
})
|
||||
.then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功");
|
||||
buttonLoading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("请填写完必填项!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const delRole = (row) => {
|
||||
deleteSysUser({
|
||||
id: Number(row.id)
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
const moreAction = (e, item) => {};
|
||||
|
||||
//分配角色
|
||||
const currentUserId = ref("");
|
||||
const roleDialogVisible = ref(false);
|
||||
const assignRoles = (row) => {
|
||||
roleDialogVisible.value = true;
|
||||
currentUserId.value = row.id;
|
||||
};
|
||||
|
||||
const restPwd = (row) => {
|
||||
resetPassword({ userId: row.id }).then((res) => {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("操作成功");
|
||||
handleFilter();
|
||||
});
|
||||
};
|
||||
const handleClick = (e) => {};
|
||||
|
||||
//watch监听路由变化
|
||||
watch(roleDialogVisible, (val) => {
|
||||
if (!val) currentUserId.value = "";
|
||||
});
|
||||
|
||||
watch(
|
||||
() => listQuery.value.deptId,
|
||||
() => {
|
||||
handleFilter();
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
};
|
||||
// 树高度计算
|
||||
const treeHeightFn = () => {
|
||||
treeHeight.value = window.innerHeight - searchBox.value.offsetHeight - 213 + "px";
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
treeHeightFn();
|
||||
window.onresize = function () {
|
||||
treeHeightFn();
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
// .user-list-page {
|
||||
// .userListDialog {
|
||||
// .el-input__inner {
|
||||
// min-width: 260px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
143
src/views/backOfficeSystem/systemConfig/user-manage/index.vue
Normal file
143
src/views/backOfficeSystem/systemConfig/user-manage/index.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="user-manage-container">
|
||||
<el-card class="header">
|
||||
<div>
|
||||
分配角色
|
||||
<el-button type="primary"> 新增</el-button>
|
||||
<el-button type="success"> 查询 </el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column label="#" type="index" />
|
||||
<el-table-column prop="username" label="姓名"> </el-table-column>
|
||||
<el-table-column prop="mobile" label="联系方式"> </el-table-column>
|
||||
<el-table-column label="头像" align="center">
|
||||
<template v-slot="{ row }">
|
||||
<el-image
|
||||
class="avatar"
|
||||
:src="row.avatar"
|
||||
:preview-src-list="[row.avatar]"
|
||||
></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.role && row.role.length > 0">
|
||||
<el-tag v-for="item in row.role" :key="item.id" size="mini">{{
|
||||
item.title
|
||||
}}</el-tag>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-tag size="mini">{{ $t("msg.excel.defaultRole") }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updateTime" label="更新时间">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.dateFilter(row.updateTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="260">
|
||||
<template #default>
|
||||
<el-button type="primary" size="mini">查询</el-button>
|
||||
<el-button type="info" size="mini">角色</el-button>
|
||||
<el-button type="danger" size="mini">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
// 数据相关
|
||||
const tableData = ref([
|
||||
{
|
||||
username: "何潇",
|
||||
mobile: "13540652686",
|
||||
avatar: "man",
|
||||
role: [{ title: "超级管理员", id: 1 }],
|
||||
updateTime: "1646472058066"
|
||||
},
|
||||
{
|
||||
username: "何潇",
|
||||
mobile: "13540652686",
|
||||
avatar: "man",
|
||||
role: [{ title: "超级管理员", id: 1 }],
|
||||
updateTime: "1646472047000"
|
||||
},
|
||||
{
|
||||
username: "何潇",
|
||||
mobile: "13540652686",
|
||||
avatar: "man",
|
||||
role: [{ title: "超级管理员", id: 1 }],
|
||||
updateTime: "1646472047002"
|
||||
}
|
||||
]);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const size = ref(2);
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
// const result = await getUserManageList({
|
||||
// page: page.value,
|
||||
// size: size.value
|
||||
// })
|
||||
// tableData.value = result.list
|
||||
// total.value = result.total
|
||||
};
|
||||
getListData();
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
size.value = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
page.value = currentPage;
|
||||
getListData();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-manage-container {
|
||||
.header {
|
||||
margin-bottom: 22px;
|
||||
text-align: right;
|
||||
}
|
||||
::v-deep .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
363
src/views/backOfficeSystem/videoPatrol/patrolPlan/index.vue
Normal file
363
src/views/backOfficeSystem/videoPatrol/patrolPlan/index.vue
Normal file
@ -0,0 +1,363 @@
|
||||
<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 typeof="danger" @click="delBatch">
|
||||
<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="queryParams" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="200px" clearable filterable v-model="queryParams.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="方案名称">
|
||||
<el-input style="width: 200px" clearable placeholder="请填写方案类型" v-model="queryParams.famc">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="方案类型">
|
||||
<el-select style="width: 200px" v-model="queryParams.falx" clearable placeholder="请选择方案类型">
|
||||
<el-option v-for="dict in D_BZ_FALX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分屏数">
|
||||
<el-select style="width: 200px" clearable v-model="queryParams.fps" placeholder="请选择分屏数">
|
||||
<el-option v-for="dict in D_BZ_FPS" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻时间">
|
||||
<el-time-picker style="width: 500px" v-model="time" is-range clearable range-separator=" 至 " format="HH:mm"
|
||||
value-format="HH:mm" start-placeholder="开始时间" end-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" style="width: 100%" :key="keyCount" :height="tableHeight"
|
||||
v-loading="loading" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55" />
|
||||
<el-table-column prop="famc" show-overflow-tooltip align="center" label="方案名称" />
|
||||
<el-table-column prop="kssj" show-overflow-tooltip align="center" label="开始时间">
|
||||
</el-table-column>
|
||||
<el-table-column prop="jssj" show-overflow-tooltip align="center" label="结束时间">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip width="100" align="center" label="方案类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_FALX" :value="row.falx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="分屏数">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_FPS" :value="row.fps" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jgsj" show-overflow-tooltip align="center" label="间隔时间">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cjrxm" show-overflow-tooltip align="center" label="创建人">
|
||||
</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="280px">
|
||||
<template #default="{ row }">
|
||||
<el-button type="success" @click="pzsxt(row.id)">感知源</el-button>
|
||||
<el-button type="warning" @click="update(row)" size="small">修改</el-button>
|
||||
<el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除当前信息?"
|
||||
@confirm="delItem([row.id])">
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-button @click="playVideo(row.id)" type="primary" 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="queryParams.pageNum" :page-sizes="[5, 10, 20]" :page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isShow" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button v-if="showType !== 'show'" type="primary" @click="submit">保存</el-button>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item prop="famc" label="方案名称">
|
||||
<el-input v-model="form.famc" placeholder="请输入方案名称" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="falx" label="方案类型">
|
||||
<el-select style="width: 100%" v-model="form.falx" placeholder="请选择方案类型">
|
||||
<el-option v-for="dict in D_BZ_FALX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻时间" style="width: 48%" prop="time1">
|
||||
<el-time-picker style="width: 100%" v-model="form.time1" is-range clearable range-separator=" 至 "
|
||||
format="HH:mm" value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="fps" label="分屏数">
|
||||
<el-select style="width: 100%" v-model="form.fps" placeholder="请选择分屏数">
|
||||
<el-option v-for="dict in D_BZ_FPS" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jgsj" label="间隔时间(分钟)">
|
||||
<el-input v-model="form.jgsj" placeholder="请输入间隔时间(分钟)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input prop="bz" v-model="form.bz" type="textarea" show-word-limit placeholder="请输入方案名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<sxtpz v-if="pzIsShow" :pzIsShow="pzIsShow" @getIsShow="getIsShow" :faid="faid"></sxtpz>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import sxtpz from "../sxtpz/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import {
|
||||
getDataList,
|
||||
addFa,
|
||||
editFa,
|
||||
getInfo,
|
||||
deleteBatchs,
|
||||
getSpInfo
|
||||
} from "@/api/videoPatrol/index.js";
|
||||
const pzIsShow = ref(false);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_FALX, D_BZ_FPS } = proxy.$dict("D_BZ_FALX", "D_BZ_FPS");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const showType = ref("add");
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const time = ref([]); // 时间
|
||||
const time1 = ref([]); // 时间
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增方案");
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const faid = ref("");
|
||||
const isShow = ref(false); //弹窗
|
||||
const deleteRows = ref([]); //弹窗
|
||||
function getIsShow(data) {
|
||||
pzIsShow.value = data;
|
||||
}
|
||||
//搜索数据
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
// 批量删除
|
||||
function delBatch() {
|
||||
proxy
|
||||
.$confirm("确认删除当前选中数据？", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then((_) => {
|
||||
let ids = deleteRows.value.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
delItem(ids);
|
||||
})
|
||||
.catch((_) => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
famc: [{ required: true, message: "请填写方案名称" }],
|
||||
falx: [{ required: true, message: "请选择方案类型" }],
|
||||
fps: [{ required: true, message: "请选择分屏数" }],
|
||||
jgsj: [{ required: true, message: "请输入间隔时间" }],
|
||||
time1: [{ required: true, message: '请选择巡逻时间段' }]
|
||||
});
|
||||
// 多选
|
||||
const handleSelectionChange = (val) => {
|
||||
deleteRows.value = val;
|
||||
};
|
||||
// 查看详情
|
||||
function showInfo(row) {
|
||||
getInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
if (res.kssj && res.jssj) {
|
||||
time1.value = [res.kssj, res.jssj];
|
||||
} else {
|
||||
time1.value = [];
|
||||
}
|
||||
title.value = "方案查看";
|
||||
isShow.value = true;
|
||||
showType.value = "show";
|
||||
});
|
||||
}
|
||||
// 播放
|
||||
function playVideo(id) {
|
||||
getSpInfo(id).then((res) => {
|
||||
if (!res.sxtzList || res.sxtzList.length == 0) {
|
||||
proxy.$message.error("未配置摄像头，无法播放，请先配置摄像头");
|
||||
} else {
|
||||
sessionStorage.removeItem('videdoList')
|
||||
sessionStorage.setItem("XLFAVIDEO", JSON.stringify(res));
|
||||
window.open(NPShref.href, "_blank");
|
||||
}
|
||||
});
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getListData();
|
||||
}
|
||||
// 配置查看摄像头
|
||||
function pzsxt(id) {
|
||||
pzIsShow.value = true;
|
||||
faid.value = id;
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
queryParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
time.value = [];
|
||||
getListData();
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
title.value = "新增方案";
|
||||
showType.value = "add";
|
||||
isShow.value = true;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
getInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
if (res.kssj && res.jssj) {
|
||||
form.value.time1 = [res.kssj, res.jssj];
|
||||
} else {
|
||||
form.value.time1 = [];
|
||||
}
|
||||
title.value = "修改方案";
|
||||
isShow.value = true;
|
||||
showType.value = "edit";
|
||||
});
|
||||
}
|
||||
//注销
|
||||
function delItem(ids) {
|
||||
deleteBatchs(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功", grouping: true });
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loading.value = true;
|
||||
if (time.value.length === 2) {
|
||||
queryParams.value.kssj = time.value[0];
|
||||
queryParams.value.jssj = time.value[1];
|
||||
}
|
||||
getDataList(queryParams.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
isShow.value = false;
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
falx: form.value.falx,
|
||||
famc: form.value.famc,
|
||||
fps: form.value.fps,
|
||||
jgsj: form.value.jgsj,
|
||||
kssj: form.value.time1[0],
|
||||
jssj: form.value.time1[1]
|
||||
}
|
||||
proxy.$confirm("确定当前操作？").then((_) => {
|
||||
if (!form.value.id) {
|
||||
addFa(data).then(() => {
|
||||
proxy.$message({ type: "success", message: "保存成功" });
|
||||
isShow.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
data.id = form.value.id
|
||||
editFa(data).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
isShow.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
queryParams.value.pageSize = currentSize;
|
||||
queryParams.value.pageNum = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
queryParams.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
179
src/views/backOfficeSystem/videoPatrol/sxtpz/gzyInfo.vue
Normal file
179
src/views/backOfficeSystem/videoPatrol/sxtpz/gzyInfo.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="dialogBox" v-if="show">
|
||||
<div class="title">
|
||||
<span>感知源</span><span @click="close" class="close">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in info" :key="index + 'gzy'">
|
||||
<div class="infoBox">
|
||||
<div class="content">{{ item.sbmc }}</div>
|
||||
<div class="other">
|
||||
<p>设备编号：{{ item.sbbh }}</p>
|
||||
<p>所属部门：{{ item.ssbm }}</p>
|
||||
<p>厂商名称：{{ item.csmc }}</p>
|
||||
</div>
|
||||
<div class="addressBox">
|
||||
<div>
|
||||
<img src="@/assets/images/dingwei.png" />
|
||||
<span>{{ item.dzmc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_bom">
|
||||
<button class="dp-default small" @click="chooceItem(item)" style="margin-right: 10px;">选择</button>
|
||||
<button class="dp-default small" @click="openVideo(item)">视频播放</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, defineEmits } from "vue";
|
||||
// 左右折叠状态
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const show = ref(false);
|
||||
const info = ref([]); //警情数据
|
||||
const emits = defineEmits(['chooseVideo'])
|
||||
onMounted(() => {
|
||||
emitter.on("showGzyInfo", (res) => {
|
||||
info.value = res;
|
||||
show.value = true;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showGzyInfo");
|
||||
});
|
||||
|
||||
function chooceItem(item) {
|
||||
emits('chooseVideo', item)
|
||||
}
|
||||
|
||||
// 打开视频
|
||||
function openVideo(item) {
|
||||
let params = {
|
||||
...item,
|
||||
splitNum: 1
|
||||
}
|
||||
emitter.emit("openGzyVideo", params)
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
show.value = false;
|
||||
emitter.emit("showGzy", false);
|
||||
emitter.emit("deletePointArea", "lang");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialogBox {
|
||||
width: 360px;
|
||||
max-height: 78vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 10px;
|
||||
background: #052342;
|
||||
z-index: 9;
|
||||
border-radius: 4px;
|
||||
|
||||
.title {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.addressBox {
|
||||
border-top: 1px solid #162f55;
|
||||
margin: 0 10px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
border: 1px solid #275288;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.content {
|
||||
padding: 10px 10px 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.other {
|
||||
margin: 0 10px;
|
||||
padding: 0px;
|
||||
color: #779dcd;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn_bom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 12px;
|
||||
|
||||
span {
|
||||
background: #2c7ee3;
|
||||
border-radius: 4px;
|
||||
padding: 2px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
background: #497dbd;
|
||||
border-radius: 4px;
|
||||
padding: 2px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/largeScreen.scss";
|
||||
|
||||
.infoBox {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px 10px 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.other {
|
||||
margin: 0 10px;
|
||||
padding: 0px;
|
||||
color: #779dcd;
|
||||
list-style: none;
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.itemBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
470
src/views/backOfficeSystem/videoPatrol/sxtpz/index.vue
Normal file
470
src/views/backOfficeSystem/videoPatrol/sxtpz/index.vue
Normal file
@ -0,0 +1,470 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="pzIsShow && fa != null">
|
||||
<div class="head_box">
|
||||
<span class="title">摄像头配置</span>
|
||||
<div>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
<el-button @click="close">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="common-layout">
|
||||
<el-container style="height: calc(100vh - 170px)">
|
||||
<el-aside class="box_sp" width="300px">
|
||||
<div class="sxtz_title">摄像头组列表</div>
|
||||
<div class="sxtzList">
|
||||
<el-card class="box-card" style="margin-top: 10px" v-for="(sxtz, index) in sxtzList" :key="'a' + index">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="sxtzmc">
|
||||
<span>组名：</span><el-input v-model="sxtz.sxtzmc" size="mini"></el-input>
|
||||
</span>
|
||||
<el-icon class="close" @click="deleteSxtz(index)">
|
||||
<CloseBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div v-for="(sxt, ind) in sxtz.sxtList" :key="'o' + ind" class="sxtList">
|
||||
<div class="icon" v-if="sxt.isSelect" />
|
||||
<div>
|
||||
<el-input readonly placeholder="点击选择摄像头" size="mini" v-model="sxt.sxtmc"
|
||||
@click="clickInput(index, ind)" class="input" />
|
||||
</div>
|
||||
<div class="btns">
|
||||
<span class="btn play" @click="openVideo(sxt)">播放</span>
|
||||
<span v-if="fa.falx != '1'" class="btn sz">设置</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="sxtz_btn">
|
||||
<el-button @click="addSxtz">添加摄像头组</el-button>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-aside class="box_sp box_center_list" width="400px">
|
||||
<div class="sxtz_title">摄像头列表</div>
|
||||
<div class="search">
|
||||
<MOSTY.Department width="200px" clearable filterable v-model="queryParams.ssbmdm" />
|
||||
<el-input style="width:180px" v-model="queryParams.jsnr" placeholder="设备编号、名称" clearable
|
||||
@clear="search"></el-input>
|
||||
<el-button @click="search">查询</el-button>
|
||||
</div>
|
||||
<div class="sxt_list">
|
||||
<div class="sxt_item" v-for="(item, index) in gzyList" :key="index + 'sxt'" @click="clickItem(item)">
|
||||
<div class="sxtmc">{{ item.sbmc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page1">
|
||||
<el-pagination @current-change="handleCurrentChange" :current-page="queryParams.pageNum"
|
||||
:page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main class="box_sp box_map">
|
||||
<GdMap />
|
||||
<gzy-info @chooseVideo="chooseVideo"></gzy-info>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
|
||||
<VideoCnt />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import VideoCnt from "@/components/video/index.vue";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import {
|
||||
getSpInfo,
|
||||
getSxtList,
|
||||
getSxtAll,
|
||||
addSxtPz,
|
||||
editSxtPz
|
||||
} from "@/api/videoPatrol/index.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import gzyInfo from "./gzyInfo.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_FALX } = proxy.$dict("D_BZ_FALX");
|
||||
const fa = ref(null);
|
||||
const sxtzList = ref([]);
|
||||
const gzyList = ref([]);
|
||||
const total = ref(0);
|
||||
const activeAddSxt = ref(false); //切换新增修改
|
||||
const activeIndex = reactive({
|
||||
sbzIndex: null,
|
||||
sbIndex: null
|
||||
});
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// sblx:'01',
|
||||
jsnr: ""
|
||||
});
|
||||
const props = defineProps({
|
||||
//获取组件传值
|
||||
pzIsShow: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
faid: {
|
||||
detault: "1546416261034004481",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(["change", "delete"]);
|
||||
function handleCurrentChange(e) {
|
||||
queryParams.value.pageNum = e;
|
||||
getGzyList();
|
||||
}
|
||||
// 查询感知源
|
||||
function search() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getGzyList();
|
||||
getGzyAll();
|
||||
}
|
||||
|
||||
// 打开视频
|
||||
function openVideo(item) {
|
||||
if (item.isSelect) {
|
||||
let params = { sbbh: item.sxtid, splitNum: 1 };
|
||||
emitter.emit("openGzyVideo", params);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取感知源撒点数据
|
||||
function getGzyAll() {
|
||||
emitter.emit("deletePointArea", "sp");
|
||||
getSxtAll(queryParams.value).then((res) => {
|
||||
if (res.length > 0) {
|
||||
let arr = []
|
||||
res.forEach(el => {
|
||||
if (el.jd && el.wd) {
|
||||
arr.push(el)
|
||||
}
|
||||
})
|
||||
emitter.emit("addPoint", { coords: arr, icon: require("@/assets/point/sp.png"), flag: "sp", fontColor: '#ff0000' });
|
||||
}
|
||||
});
|
||||
}
|
||||
// 获取感知源列表
|
||||
function getGzyList() {
|
||||
getSxtList(queryParams.value).then((res) => {
|
||||
gzyList.value = res ? res.records : [];
|
||||
total.value = res ? res.total : 0;
|
||||
});
|
||||
}
|
||||
// 删除摄像头组
|
||||
function deleteSxtz(i) {
|
||||
if (sxtzList.value.length <= 1) {
|
||||
proxy.$message.error("至少保存一个摄像头组！！");
|
||||
return;
|
||||
}
|
||||
proxy
|
||||
.$confirm("确定删除该摄像头组？", "提示")
|
||||
.then(() => {
|
||||
sxtzList.value = sxtzList.value.filter((item, index) => {
|
||||
return index != i;
|
||||
});
|
||||
})
|
||||
.catch((_) => { });
|
||||
}
|
||||
// 点击input框
|
||||
function clickInput(index, ind) {
|
||||
sxtzList.value.forEach((item) => {
|
||||
item.sxtList.forEach((it) => {
|
||||
it.isSelect = false;
|
||||
});
|
||||
});
|
||||
sxtzList.value[index].sxtList[ind].isSelect = true;
|
||||
activeIndex.sbzIndex = index;
|
||||
activeIndex.sbIndex = ind;
|
||||
}
|
||||
// 添加摄像头组
|
||||
function addSxtz() {
|
||||
let sxtList = [];
|
||||
for (let i = 0; i < Number(fa.value.fps); i++) {
|
||||
sxtList.push({});
|
||||
}
|
||||
sxtzList.value.push({
|
||||
sxtzmc: "摄像头组" + (sxtzList.value.length + 1),
|
||||
sxtList: sxtList
|
||||
});
|
||||
}
|
||||
|
||||
// 选择视频
|
||||
function chooseVideo(sxt) {
|
||||
if (null != activeIndex.sbzIndex && null != activeIndex.sbIndex) {
|
||||
sxtzList.value[activeIndex.sbzIndex].sxtList[activeIndex.sbIndex].sxtmc =
|
||||
sxt.sbmc;
|
||||
sxtzList.value[activeIndex.sbzIndex].sxtList[activeIndex.sbIndex].sxtid =
|
||||
sxt.jkdbgbh;
|
||||
}
|
||||
}
|
||||
// 点击摄像头定位弹窗
|
||||
function clickItem(sxt) {
|
||||
// emitter.emit("showGzyInfo", sxt);
|
||||
emitter.emit("addPoint", {
|
||||
coords: [sxt],
|
||||
icon: require(`@/assets/point/sp.png`),
|
||||
flag: "sp"
|
||||
});
|
||||
}
|
||||
// 提交
|
||||
function submit() {
|
||||
const params = {
|
||||
faid: props.faid,
|
||||
sxtzList: sxtzList.value.map((item) => {
|
||||
const sxt = {
|
||||
sxtzmc: item.sxtzmc,
|
||||
sxtList: item.sxtList.map((e) => {
|
||||
return { sxtid: e.sxtid, sxtmc: e.sxtmc };
|
||||
})
|
||||
};
|
||||
return sxt;
|
||||
})
|
||||
};
|
||||
if (activeAddSxt.value) {
|
||||
addSxtPz(params).then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
emit("getIsShow", false);
|
||||
props.pzIsShow = false;
|
||||
});
|
||||
} else {
|
||||
editSxtPz(params).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
emit("getIsShow", false);
|
||||
props.pzIsShow = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
function close() {
|
||||
emit("getIsShow", false);
|
||||
props.pzIsShow = false;
|
||||
}
|
||||
function getFaInfo() {
|
||||
getSpInfo(props.faid).then((res) => {
|
||||
fa.value = res;
|
||||
let sxtList = [];
|
||||
if (res.sxtzList.length > 0) {
|
||||
activeAddSxt.value = false;
|
||||
sxtzList.value = res.sxtzList.map((item) => {
|
||||
return {
|
||||
sxtzmc: item.sxtzmc,
|
||||
sxtList: item.sxtList.map((e) => {
|
||||
return {
|
||||
sxtid: e.sxtid,
|
||||
sxtmc: e.sxtmc
|
||||
};
|
||||
})
|
||||
};
|
||||
});
|
||||
} else {
|
||||
activeAddSxt.value = true;
|
||||
for (let i = 0; i < Number(fa.value.fps); i++) {
|
||||
sxtList.push({});
|
||||
}
|
||||
sxtzList.value.push({
|
||||
sxtzmc: "摄像头组1",
|
||||
sxtList: sxtList
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getFaInfo();
|
||||
// 查询摄像头列表和撒点
|
||||
getGzyList();
|
||||
// 获取感知源撒点信息
|
||||
getGzyAll();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.box_center_list {
|
||||
.sxt_list {
|
||||
height: calc(100vh - 300px);
|
||||
overflow: auto;
|
||||
|
||||
.sxt_item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
border: 1px solid #0065d8;
|
||||
margin-top: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
|
||||
.sxtmc {
|
||||
// width: 70%;
|
||||
}
|
||||
|
||||
.btns {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play {
|
||||
color: #409eff;
|
||||
|
||||
&:hover {
|
||||
color: #79bbff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #529b2e;
|
||||
|
||||
&:hover {
|
||||
color: #95d475;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.page1 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.box_sp {
|
||||
.sxtz_btn {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sxtz_title {
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sxtzList {
|
||||
margin-top: 10px;
|
||||
height: calc(100vh - 280px);
|
||||
overflow: auto;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.sxtzmc {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 230px;
|
||||
|
||||
>span {
|
||||
width: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sxtList {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
|
||||
.btns {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play {
|
||||
color: #409eff;
|
||||
|
||||
&:hover {
|
||||
color: #79bbff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sz {
|
||||
color: #f56c6c;
|
||||
margin-top: 5px;
|
||||
|
||||
&:hover {
|
||||
color: #f89898;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 180px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 15px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
border-right: 1px solid #07376d;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box_map {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
107
src/views/dataBI/components/Patrolmissions.vue
Normal file
107
src/views/dataBI/components/Patrolmissions.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<ul class="patrol-missions" v-if="showModel" infinite-scroll-distance="1" v-infinite-scroll="loadList" v-loading="loading">
|
||||
<li class="test-item" v-for="(item, index) in list" :key="`info${index}`">
|
||||
<div class="person-img"><img src="@/assets/images/person.png" /></div>
|
||||
<div class="info">
|
||||
<div class="text one_text_detail f16">{{ item.qwmc }}</div>
|
||||
<div class="text lh30">负责人:{{ item.xm }}</div>
|
||||
<div class="lh30">电话:{{ item.lxdh }}</div>
|
||||
<div class="one_text_detail">巡逻路线:{{ item.bxxmc }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<p class="tc" v-if="list.length > 0 && noMore && !loading ">没有数据了</p>
|
||||
<MOSTY.Empty :show="true" :imgSize="100" v-if="list.length == 0 && !loading"></MOSTY.Empty>
|
||||
</ul>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { onMounted, ref } from 'vue';
|
||||
const list = ref([])
|
||||
const loading = ref(false);
|
||||
const page = ref(1);
|
||||
const total = ref(0)
|
||||
const noMore = ref(false)
|
||||
const showModel = ref(false)
|
||||
onMounted(()=>{
|
||||
showModel.value = true;
|
||||
getDateMeta()
|
||||
})
|
||||
// 更新数据
|
||||
const getDateMeta = () =>{
|
||||
loading.value = true;
|
||||
let params = {
|
||||
pageSize:10,
|
||||
pageCurrent:page.value,
|
||||
}
|
||||
qcckGet(params,'/mosty-jbld/dptj/getJbxlrw').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || []
|
||||
list.value = page.value == 1 ? arr : list.value.concat(arr);
|
||||
total.value = res.total
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动加载
|
||||
const loadList = () =>{
|
||||
console.log('鸡杂');
|
||||
|
||||
if(list.value.length == total.value) return noMore.value = true;
|
||||
noMore.value = false;
|
||||
page.value++;
|
||||
getDateMeta();
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.patrol-missions {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 10px);
|
||||
padding: 10px 10px 0 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.test-item {
|
||||
background: url("~@/assets/images/bi/xlrw.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 10px 14px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 4px;
|
||||
&:nth-last-child(1){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.person-img {
|
||||
width: 116px;
|
||||
height: 90px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
width: calc(100% - 145px);
|
||||
.text{
|
||||
color: rgb(1, 252, 254);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70 !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe !important;;
|
||||
border-radius: 50px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70 !important;;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141 !important;;
|
||||
}
|
||||
</style>
|
||||
105
src/views/dataBI/components/SecurityInfo.vue
Normal file
105
src/views/dataBI/components/SecurityInfo.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="patrol-missions" v-if="showModel" infinite-scroll-distance="1" v-infinite-scroll="loadList" v-loading="loading">
|
||||
<div class="test-item" v-for="(item, index) in list" :key="`info${index}`">
|
||||
<div class="person-img"><img src="@/assets/images/person.png" /></div>
|
||||
<div class="info">
|
||||
<div class="text lh30">负责人:{{ item.xm }}</div>
|
||||
<div class="lh30">电话:{{ item.lxdh }}</div>
|
||||
<div class="one_text_detail">巡逻地址:{{ item.zsdmc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tc" v-if="list.length > 0 && noMore && !loading ">没有数据了</p>
|
||||
<MOSTY.Empty :show="true" :imgSize="100" v-if="list.length == 0 && !loading"></MOSTY.Empty>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { fa } from "element-plus/es/locale.mjs";
|
||||
import { onMounted, ref } from 'vue';
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const page = ref(1);
|
||||
const total = ref(0)
|
||||
const noMore = ref(false);
|
||||
const showModel = ref(false)
|
||||
onMounted(()=>{
|
||||
showModel.value = true;
|
||||
getDateMeta()
|
||||
})
|
||||
// 更新数据
|
||||
const getDateMeta = () =>{
|
||||
loading.value = true;
|
||||
let params = {
|
||||
pageSize:10,
|
||||
pageCurrent:page.value,
|
||||
}
|
||||
qcckGet(params,'/mosty-jbld/dptj/getZsba').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || []
|
||||
list.value = page.value == 1 ? arr : list.value.concat(arr);
|
||||
total.value = res.total
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动加载
|
||||
const loadList = () =>{
|
||||
if(list.value.length == total.value) return noMore.value = true;
|
||||
noMore.value = false;
|
||||
page.value++;
|
||||
getDateMeta();
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.patrol-missions {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 10px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.test-item {
|
||||
background: url("~@/assets/images/bi/xlrw.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 10px 14px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 4px;
|
||||
&:nth-last-child(1){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.person-img {
|
||||
width: 116px;
|
||||
height: 90px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
width: calc(100% - 145px);
|
||||
.text{
|
||||
color: rgb(1, 252, 254);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70 !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe !important;;
|
||||
border-radius: 50px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70 !important;;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141 !important;;
|
||||
}
|
||||
</style>
|
||||
83
src/views/dataBI/components/Securityforces.vue
Normal file
83
src/views/dataBI/components/Securityforces.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="security-forces">
|
||||
<div class="security-forces-content noScollLine" v-loading="loading">
|
||||
<div v-for="(item, index) in list" :key="index" class="mt5 mb5">
|
||||
<div class="flex align-center title">
|
||||
<img src="@/assets/images/bi/abll.png" /><span class="f18">{{ item.ssbm }}</span>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<el-row class="mb2 pl20 pb2">
|
||||
<el-col :span="12">值守点位:<span class="num"> {{ item.zsdSl }} </span>个</el-col>
|
||||
<el-col :span="12">保安巡逻组:<span class="num"> {{ item.baxlzSl }} </span>组</el-col>
|
||||
</el-row>
|
||||
<el-row class="pl20 pb2">
|
||||
<el-col :span="12">保安值守:<span class="num"> {{ item.baSl }} </span>个</el-col>
|
||||
<el-col :span="12">保安巡逻:<span class="num"> {{ item.baxlSl }} </span>个</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { onMounted, ref } from 'vue';
|
||||
const list = ref([])
|
||||
const loading = ref(false)
|
||||
onMounted(()=>{
|
||||
getCount()
|
||||
})
|
||||
|
||||
// 更新数据
|
||||
const getCount = () =>{
|
||||
loading.value = true;
|
||||
qcckGet({},'/mosty-jbld/dptj/getAbxxtj').then(res=>{
|
||||
loading.value = false;
|
||||
list.value = res || []
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.security-forces {
|
||||
padding: 10px 10px 5px 10px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
.security-forces-content {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.title {
|
||||
font-family: "YSBTH";
|
||||
-webkit-background-clip: text;
|
||||
background-image: linear-gradient(to top, #a3c6f5 20%, #ffffff 80%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
background: url("~@/assets/images/bi/nrk.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
.num {
|
||||
font-size: 18px;
|
||||
color: rgb(1, 252, 254);
|
||||
margin: 0 5px;
|
||||
}
|
||||
.el-col{
|
||||
padding: 2px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
103
src/views/dataBI/components/StreetConditions.vue
Normal file
103
src/views/dataBI/components/StreetConditions.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="street-conditions">
|
||||
<ul class="flex just-center mt10 mb10">
|
||||
<li class="btn ml4 mr4" v-for="(it, idx) in btns" :key="it" :class="active == idx ? 'activeBtn' : ''"
|
||||
@click="changeTab(it, idx)">{{ it }}</li>
|
||||
</ul>
|
||||
<div class="container" v-if="showModel" infinite-scroll-distance="1" v-infinite-scroll="loadList"
|
||||
v-loading="loading">
|
||||
<div v-for="(item, index) in list" :key="`info${index}`" class="item">
|
||||
<!-- 警情 -->
|
||||
<JqItem :item="item" v-if="active == 0"></JqItem>
|
||||
<!-- 街面状况 -->
|
||||
<JmItem :item="item" v-if="active == 1"></JmItem>
|
||||
</div>
|
||||
<p class="tc" v-if="list.length > 0 && noMore && !loading">没有数据了</p>
|
||||
<MOSTY.Empty :show="true" :imgSize="100" v-if="list.length == 0 && !loading"></MOSTY.Empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import JqItem from './jqItem.vue'
|
||||
import JmItem from './jmItem.vue'
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
const btns = reactive(['警 情', '街面状况'])
|
||||
const active = ref(1);
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const page = ref(1);
|
||||
const total = ref(0)
|
||||
const noMore = ref(false)
|
||||
const showModel = ref(false)
|
||||
onMounted(() => {
|
||||
showModel.value = true;
|
||||
getDate()
|
||||
})
|
||||
const getDate = () => {
|
||||
getDate_jq()
|
||||
}
|
||||
const changeTab = (val, idx) => {
|
||||
list.value = [];
|
||||
page.value = 1
|
||||
active.value = idx;
|
||||
getDate_jq()
|
||||
}
|
||||
|
||||
// 更新数据
|
||||
const getDate_jq = () => {
|
||||
let params = {
|
||||
pageSize: 10,
|
||||
pageCurrent: page.value,
|
||||
}
|
||||
let url = active.value == 0 ? '/mosty-jbld/tbJq/getPageList' : '/mosty-jbld/jbjmzk/selelctPage';
|
||||
if (url) {
|
||||
loading.value = true;
|
||||
qcckGet(params, url).then(res => {
|
||||
loading.value = false;
|
||||
let arr = res.records || []
|
||||
list.value = page.value == 1 ? arr : list.value.concat(arr);
|
||||
total.value = res.total
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 滚动加载
|
||||
const loadList = () => {
|
||||
if (list.value.length == total.value) return noMore.value = true;
|
||||
noMore.value = false;
|
||||
page.value++;
|
||||
getDateMeta();
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.street-conditions {
|
||||
height: 100%;
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
background: url("~@/assets/images/bi/wxz.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
width: 159px;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.activeBtn {
|
||||
background: url("~@/assets/images/bi/xz.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100% - 76px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/views/dataBI/components/TopStatistics.vue
Normal file
84
src/views/dataBI/components/TopStatistics.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="top-statistics-container">
|
||||
<div class="top-statistics transition" :style="{height:isShow ? '83px' : 0 }">
|
||||
<div class="test-item" v-for="(item,idx) in list" :key="idx">
|
||||
<div class="desc"><span class="num">{{ item.label }}</span>个</div>
|
||||
<div class="f18">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="f28 pointer" @click="isShow = !isShow" :title="isShow ? '点击收起' : '点击展开'">
|
||||
<el-icon color="#333"><CaretTop v-if="isShow" /><CaretBottom v-else /></el-icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref ,onMounted} from "vue";
|
||||
const isShow = ref(true);
|
||||
const list = ref([
|
||||
{ label:'值守点位',value:0,lx:'zsdSl' },
|
||||
{ label:'保安值守数',value:0,lx:'baSl' },
|
||||
{ label:'保安巡逻组',value:0,lx:'baxlzSl' },
|
||||
{ label:'保安巡逻数',value:0,lx:'baxlSl' },
|
||||
{ label:'临时任务',value:0,lx:'rwSl' },
|
||||
{ label:'警情协助',value:0,lx:'jqxzSl' },
|
||||
])
|
||||
onMounted(()=>{
|
||||
getDate()
|
||||
})
|
||||
|
||||
const getDate = () =>{
|
||||
qcckGet({},'/mosty-jbld/dptj/getDpxxtj').then(res=>{
|
||||
let data = res || {}
|
||||
for(let key in data){
|
||||
list.value.forEach(v=>{
|
||||
if(v.lx == key) v.value = data[key]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.top-statistics-container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50%;
|
||||
top: 130px;
|
||||
z-index: 3;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
.top-statistics {
|
||||
overflow: hidden;
|
||||
padding: 10px 0 0 0;
|
||||
height: 83px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 5px;
|
||||
.test-item {
|
||||
width: 130px;
|
||||
background: url("~@/assets/images/bi/zjtj.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
.desc {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
.num {
|
||||
font-family: "YSBTH";
|
||||
font-size: 20px;
|
||||
background-image: linear-gradient(to top, #a3c6f5 20%, #ffffff 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.transition{
|
||||
transition: all 0.5s;
|
||||
}
|
||||
</style>
|
||||
131
src/views/dataBI/components/dialog/gzyInfo.vue
Normal file
131
src/views/dataBI/components/dialog/gzyInfo.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2022-09-20 10:22:51
|
||||
* @LastEditTime: 2024-02-19 11:40:22
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \rs-web\src\views\situationPresentation\dialog\gzyInfo.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialogBox" >
|
||||
<div class="title">
|
||||
<span class="mc">感知源</span>
|
||||
<span @click="close" class="close"><el-icon><Close /></el-icon> </span>
|
||||
</div>
|
||||
<div class="videoLIstBox">
|
||||
<div v-for="(item, index) in info" :key="index">
|
||||
<div class="infoBox">
|
||||
<div class="content">{{ item.sbmc }}</div>
|
||||
<div class="other">
|
||||
<p>设备编号：{{ item.sbbh }}</p>
|
||||
<p>所属部门：{{ item.ssbm }}</p>
|
||||
<p class="itemBox">
|
||||
<span>厂商名称：{{ item.csmc }}</span>
|
||||
<button class="dp-default small" v-if="item.isPlay" @click="closePlay(item.id)"> 关闭 </button>
|
||||
<button v-else class="dp-default small" @click="openVideo(item)">播放 </button>
|
||||
</p>
|
||||
<div class="videoBox" :id="'id_'+item.sbbh" v-if="item.isPlay">
|
||||
</div>
|
||||
</div>
|
||||
<div class="addressBox">
|
||||
<div class="ddd">
|
||||
<img src="@/assets/images/dingwei.png" />
|
||||
<span>{{ item.dzmc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
|
||||
// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index"; //ws播放高阶
|
||||
// import VideoPay from "@/components/videoOne/index"; //ws播放
|
||||
import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
data:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
})
|
||||
const info = ref([])
|
||||
watch(()=>props.data,(val)=>{
|
||||
info.value = val
|
||||
},{
|
||||
immediate:true
|
||||
})
|
||||
// 打开视频
|
||||
function openVideo(item) {
|
||||
if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
|
||||
SPPUC.rdCard(item.sbbh, 1, ["10%", "40%"]);
|
||||
}
|
||||
//关闭视频
|
||||
function closePlay(id) {
|
||||
info.value.forEach((item) => {
|
||||
if (item.id == id) item.isPlay = false;
|
||||
});
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
emitter.emit("deletePointArea", "lang");
|
||||
emitter.emit("showGzy", false);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/largeScreen.scss";
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.dialogBox{
|
||||
padding: 0 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
border-bottom: 1px solid #275288;
|
||||
margin-bottom: 6px;
|
||||
.mc { margin-left: 10px; }
|
||||
}
|
||||
.videoLIstBox {
|
||||
max-height: 680px;
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.infoBox {
|
||||
position: relative;
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #20557c;
|
||||
.content {
|
||||
padding: 10px 10px 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.other {
|
||||
margin: 0 10px;
|
||||
padding: 0px;
|
||||
color: #779dcd;
|
||||
list-style: none;
|
||||
.itemBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.videoBox {
|
||||
height: 160px;
|
||||
background: #000;
|
||||
}
|
||||
p { margin: 5px 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ddd{
|
||||
|
||||
}
|
||||
</style>
|
||||
142
src/views/dataBI/components/dialog/zsdInfo.vue
Normal file
142
src/views/dataBI/components/dialog/zsdInfo.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2022-09-20 10:22:51
|
||||
* @LastEditTime: 2024-02-19 11:40:22
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \rs-web\src\views\situationPresentation\dialog\gzyInfo.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialogBox">
|
||||
<div class="title">
|
||||
<span class="mc">值守点</span>
|
||||
<span @click="close" class="close"><el-icon>
|
||||
<Close />
|
||||
</el-icon> </span>
|
||||
</div>
|
||||
<div class="videoLIstBox">
|
||||
<div v-for="(item, index) in info" :key="index">
|
||||
<div class="infoBox">
|
||||
<div class="other">
|
||||
<div><span style="color:#fff">值守点名称：</span>{{ item.zsdMc }}</div>
|
||||
<div v-if="item.smjlList && item.smjlList.length > 0">
|
||||
<span style="color:#fff">打卡人员：</span>
|
||||
<div v-for="el in item.smjlList" :key="el">{{
|
||||
el.xm
|
||||
}} ({{ el.smsj }})</div>
|
||||
</div>
|
||||
<p><span style="color:#fff">所属部门：</span>{{ item.ssbm }}</p>
|
||||
<p><span style="color:#fff">二维码：</span><el-image style="width: 70px;"
|
||||
:preview-src-list="[`data:image/png;base64,${item.ewm}`]" :src="`data:image/png;base64,${item.ewm}`"
|
||||
preview-teleported>
|
||||
</el-image></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
|
||||
// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index"; //ws播放高阶
|
||||
// import VideoPay from "@/components/videoOne/index"; //ws播放
|
||||
import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
const info = ref([])
|
||||
watch(() => props.data, (val) => {
|
||||
info.value = val
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
// 打开视频
|
||||
function openVideo(item) {
|
||||
if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
|
||||
SPPUC.rdCard(item.sbbh, 1, ["10%", "40%"]);
|
||||
}
|
||||
//关闭视频
|
||||
function closePlay(id) {
|
||||
info.value.forEach((item) => {
|
||||
if (item.id == id) item.isPlay = false;
|
||||
});
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
emitter.emit("deletePointArea", "lang");
|
||||
emitter.emit("showZsdw", false);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/largeScreen.scss";
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.dialogBox {
|
||||
padding: 0 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid #275288;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.mc {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.videoLIstBox {
|
||||
max-height: 680px;
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.infoBox {
|
||||
position: relative;
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #20557c;
|
||||
|
||||
.content {
|
||||
padding: 10px 10px 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.other {
|
||||
margin: 0 10px;
|
||||
padding: 0px;
|
||||
color: #779dcd;
|
||||
list-style: none;
|
||||
|
||||
.itemBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.videoBox {
|
||||
height: 160px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ddd {}
|
||||
</style>
|
||||
96
src/views/dataBI/components/jmItem.vue
Normal file
96
src/views/dataBI/components/jmItem.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="itemsBox">
|
||||
<div class="time flex just-between align-center pr10">
|
||||
<span class="f14 ml4">{{ item.bjsj }}</span>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="flex just-between">
|
||||
<span class="text">辖区：{{ item.ssxq }}</span>
|
||||
<span class="text one_text_detail">上报人：{{ item.sbrxm }}</span>
|
||||
</div>
|
||||
<div class="flex just-between">
|
||||
<span class="text">街面情况：{{ item.jmzk }}</span>
|
||||
<span class="text one_text_detail">巡逻路线：{{ item.xllx }}</span>
|
||||
</div>
|
||||
<div class="flex just-between">
|
||||
<span style="width: 100%;" class="text one_text_detail">状况描述：{{ item.zkms }}</span>
|
||||
</div>
|
||||
<div class="foot flex align-center two_text_detail">
|
||||
<img src="@/assets/images/bi/ddtb.png" />{{ item.dz }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.itemsBox {
|
||||
position: relative;
|
||||
padding: 0 0 12px 10px;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #0072ff;
|
||||
margin-left: 12px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -7px;
|
||||
top: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #061b44;
|
||||
border: 2px solid #43c276;
|
||||
}
|
||||
|
||||
.dw {
|
||||
color: #0072ff;
|
||||
}
|
||||
|
||||
.cards {
|
||||
background: url("~@/assets/images/bi/jqk.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px 5px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
width: calc(50% - 12px);
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #FFFFFF 30.4658203125%, #89AFCF 100%);
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.foot {
|
||||
border-top: 1px dashed #89AFCF;
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
src/views/dataBI/components/jqItem.vue
Normal file
108
src/views/dataBI/components/jqItem.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="itemsBox">
|
||||
<div class="time flex just-between align-center pr10">
|
||||
<span class="f14 ml4">{{ item.bjsj }}</span>
|
||||
<span class="dw pointer">重新定位</span>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="marks">已派警</div>
|
||||
<div class="mb4 text_detail">{{ item.bjnr }}</div>
|
||||
<div class="flex just-between">
|
||||
<span class="text">报警人：{{ item.bjrXm }}</span>
|
||||
<span class="text one_text_detail">报警时间：{{ item.bjsj }}</span>
|
||||
</div>
|
||||
<div class="flex just-between">
|
||||
<span class="text">报警类型：{{ item.bjlxmc }}</span>
|
||||
<span class="text one_text_detail">报警细类：{{ item.bjxlmc }}</span>
|
||||
</div>
|
||||
<div class="flex just-between">
|
||||
<span style="width: 100%;" class="text one_text_detail">管辖单位：{{ item.ssbm }}</span>
|
||||
</div>
|
||||
<div class="foot flex align-center two_text_detail">
|
||||
<img src="@/assets/images/bi/ddtb.png" />{{ item.sfdz }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref } from 'vue'
|
||||
const props = defineProps({
|
||||
item:{
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.itemsBox{
|
||||
position: relative;
|
||||
padding: 0 0 12px 10px;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #0072ff;
|
||||
margin-left: 12px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -7px;
|
||||
top: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #061b44;
|
||||
border: 2px solid #43c276;
|
||||
}
|
||||
.dw{
|
||||
color: #0072ff;
|
||||
}
|
||||
.cards{
|
||||
position: relative;
|
||||
background: url("~@/assets/images/bi/jqk.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px 5px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
.text{
|
||||
font-size: 12px;
|
||||
width: calc(50% - 12px);
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
box-sizing: border-box;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #FFFFFF 30.4658203125%, #89AFCF 100%);
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
border-top: 1px dashed #89AFCF;
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.marks{
|
||||
position: absolute;
|
||||
right: -32px;
|
||||
top: 4px;
|
||||
width: 100px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
background: #47e5ad;
|
||||
font-size: 12px;
|
||||
transform: rotate(38deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
75
src/views/dataBI/components/leftDialog.vue
Normal file
75
src/views/dataBI/components/leftDialog.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="all-dialog noScollLine" :style="{ left: props.isPosition ? '0px' : '448px' }"
|
||||
style="transition: all 0.5s">
|
||||
<!-- 感知源弹窗 -->
|
||||
<GzyInfo v-if="isShow.showGzy" :data="list.gzyxqList" />
|
||||
<!-- 值守点 -->
|
||||
<ZsdInfo v-if="isShow.showZsdw" :data="list.zsdwList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GzyInfo from "./dialog/gzyInfo.vue";
|
||||
import ZsdInfo from "./dialog/zsdInfo.vue";
|
||||
import { ref, defineProps, onMounted, onUnmounted, reactive } from "vue";
|
||||
const props = defineProps({
|
||||
isPosition: Boolean
|
||||
});
|
||||
|
||||
const isShowDefault = ref({});
|
||||
const isShow = ref({
|
||||
showGzy: false, //感知源
|
||||
showZsdw: false, //值守点
|
||||
});
|
||||
const list = reactive({
|
||||
gzyxqList: [], //感知元数据
|
||||
zsdwList: [], //感知元数据
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
isShowDefault.value = JSON.parse(JSON.stringify(isShow.value));
|
||||
// 感知源
|
||||
emitter.on("showGzy", (res) => {
|
||||
isShow.value.showGzy = res ? true : false;
|
||||
if (res) {
|
||||
list.gzyxqList = res.map((item) => {
|
||||
item.isPlay = false;
|
||||
return item;
|
||||
});
|
||||
}
|
||||
});
|
||||
// 必巡点
|
||||
emitter.on("showZsdw", (res) => {
|
||||
console.log(res,'res');
|
||||
|
||||
isShow.value.showZsdw = res ? true : false;
|
||||
if (res) {
|
||||
list.zsdwList = res.map((item) => {
|
||||
item.isPlay = false;
|
||||
return item;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showGzy");
|
||||
emitter.off("showZsdw");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.all-dialog {
|
||||
position: absolute;
|
||||
width: 370px;
|
||||
top: 24%;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
159
src/views/dataBI/components/mapResource.vue
Normal file
159
src/views/dataBI/components/mapResource.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="top-statistics">
|
||||
<div class="test-item" :class="item.active ? 'test-item-active' : ''" v-for="(item, index) in info"
|
||||
@click="handlePoint(item)" :key="`${index}info`">
|
||||
<img :src="!item.active ? item.url : item.urlActive" />
|
||||
<div>{{ item.title }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { reactive } from "vue";
|
||||
import { fa } from "element-plus/es/locale.mjs";
|
||||
const info = reactive([
|
||||
{
|
||||
title: "值守点位",
|
||||
active: false,
|
||||
url: require("@/assets/images/bi/zsdw.png"),
|
||||
urlActive: require("@/assets/images/bi/zsdw-active.png"),
|
||||
},
|
||||
{
|
||||
title: "巡逻路线",
|
||||
active: false,
|
||||
url: require("@/assets/images/bi/lx.png"),
|
||||
urlActive: require("@/assets/images/bi/lx-active.png"),
|
||||
},
|
||||
// {
|
||||
// title: "必巡点",
|
||||
// active: false,
|
||||
// url: require("@/assets/images/bi/bxd.png"),
|
||||
// urlActive: require("@/assets/images/bi/bxd-active.png"),
|
||||
// },
|
||||
{
|
||||
title: "感知源",
|
||||
active: false,
|
||||
url: require("@/assets/images/bi/gzy.png"),
|
||||
urlActive: require("@/assets/images/bi/gzy-active.png"),
|
||||
},
|
||||
{
|
||||
title: "清除",
|
||||
url: require("@/assets/images/bi/qc-active.png"),
|
||||
urlActive: require("@/assets/images/bi/qc-active.png"),
|
||||
}
|
||||
]);
|
||||
|
||||
const handlePoint = (val) => {
|
||||
val.active = !val.active;
|
||||
switch (val.title) {
|
||||
case '值守点位':
|
||||
if (val.active) getPoint_ZSDW();
|
||||
else clearnPoint(['map_zsdw'])
|
||||
break;
|
||||
case '巡逻路线':
|
||||
if (val.active) getPoint_XLX();
|
||||
else clearnPoint(['map_line', 'map_line_dw'])
|
||||
break;
|
||||
case '必巡点':
|
||||
if (val.active) getPoint_BXD();
|
||||
else clearnPoint(['map_bxd'])
|
||||
break;
|
||||
case '感知源':
|
||||
if (val.active) getPoint_GZY()
|
||||
else clearnPoint(['map_gzy'])
|
||||
break;
|
||||
case '清除':
|
||||
emitter.emit("removeAll");
|
||||
info.forEach(item => { item.active = false })
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 值守点位
|
||||
const getPoint_ZSDW = () => {
|
||||
qcckGet({}, '/mosty-jbld/jbldzsd/selectList').then(res => {
|
||||
console.log(res);
|
||||
if (!res) return ElMessage({ message: "暂无值守点位数据", type: "warning" });
|
||||
let arr = res ? res : [];
|
||||
let icon = require("@/assets/point/zsd1.png");
|
||||
let obj = { coords: arr, flag: "map_zsdw", icon };
|
||||
emitter.emit("addPointArea", obj);
|
||||
})
|
||||
}
|
||||
|
||||
// 巡逻路线
|
||||
const getPoint_XLX = () => {
|
||||
qcckGet({}, '/mosty-jbld/jbldBxx/selecList').then(res => {
|
||||
if (!res) return ElMessage({ message: "暂无值巡逻路线数据", type: "warning" });
|
||||
let arr = res ? res : [];
|
||||
let points = []
|
||||
let coords = arr.map((v) => {
|
||||
points = points.concat(v.bxds)
|
||||
return { coords: [v.zb], text: v.zrqMc };
|
||||
});
|
||||
let icon = require("@/assets/point/zsdw.png");
|
||||
let obj = { coords: points, flag: "map_line_dw", icon };
|
||||
emitter.emit("addPointArea", obj);// 撒点
|
||||
emitter.emit("echoLine", { coords, width: 3, flag: "map_line", type: "solid", color: '#ff0000' });// 画线
|
||||
})
|
||||
}
|
||||
|
||||
// 感知源
|
||||
const getPoint_GZY = () => {
|
||||
qcckPost({}, '/mosty-jmxf/tbYsSxt/getList').then(res => {
|
||||
if (!res) return ElMessage({ message: "暂无感知源数据", type: "warning" });
|
||||
let arr = res ? res : [];
|
||||
let icon = require("@/assets/point/sp.png");
|
||||
let obj = { coords: arr, flag: "map_gzy", icon };
|
||||
emitter.emit("addPoint", obj);
|
||||
})
|
||||
}
|
||||
|
||||
// 比巡点
|
||||
const getPoint_BXD = () => {
|
||||
qcckGet({}, '/mosty-jbld/jbldBxx/selecBxdList').then(res => {
|
||||
if (!res) return ElMessage({ message: "暂无值必巡点数据", type: "warning" });
|
||||
let arr = res ? res : [];
|
||||
let icon = require("@/assets/point/zsdw.png");
|
||||
let obj = { coords: arr, flag: "map_bxd", icon };
|
||||
emitter.emit("showPoint", obj);
|
||||
})
|
||||
}
|
||||
|
||||
// 清处点位
|
||||
const clearnPoint = (falgArr) => {
|
||||
falgArr.forEach((flag) => {
|
||||
emitter.emit("deletePointArea", flag);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.top-statistics {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0px;
|
||||
width: 53%;
|
||||
z-index: 3;
|
||||
padding: 10px 50px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.test-item {
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0072ff;
|
||||
}
|
||||
|
||||
.test-item-active {
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
src/views/dataBI/index.vue
Normal file
132
src/views/dataBI/index.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<!-- 头部 -->
|
||||
|
||||
<Head></Head>
|
||||
<GdMap></GdMap>
|
||||
<!-- 左边 -->
|
||||
<div class="home-aside aside-left">
|
||||
<div class="asideModel">
|
||||
<div class="common-title">安保信息</div>
|
||||
<div class="comom-cnt">
|
||||
<Securityforces></Securityforces>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideModel">
|
||||
<div class="common-title">警保巡逻任务</div>
|
||||
<div class="comom-cnt">
|
||||
<Patrolmissions></Patrolmissions>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideModel">
|
||||
<div class="common-title">值守保安</div>
|
||||
<div class="comom-cnt">
|
||||
<SecurityInfo></SecurityInfo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边 -->
|
||||
<div class="home-aside aside-right">
|
||||
<div class="right-top">
|
||||
<div class="common-title">街面情况</div>
|
||||
<div class="comom-cnt">
|
||||
<StreetConditions></StreetConditions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 统计 -->
|
||||
<TopStatistics></TopStatistics>
|
||||
<!-- 地图资源 -->
|
||||
<BottomStatistics></BottomStatistics>
|
||||
<LeftDialog />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from "./layout/head.vue";
|
||||
import Securityforces from "./components/Securityforces.vue";
|
||||
import Patrolmissions from "./components/Patrolmissions.vue";
|
||||
import StreetConditions from "./components/StreetConditions.vue";
|
||||
import SecurityInfo from "./components/SecurityInfo.vue";
|
||||
import TopStatistics from "./components/TopStatistics.vue";
|
||||
import BottomStatistics from "./components/mapResource.vue";
|
||||
import LeftDialog from "./components/leftDialog.vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
onMounted(() => {
|
||||
// 融合通迅
|
||||
let idEntityCard = window.localStorage.getItem("idEntityCard");
|
||||
let sfrh = window.localStorage.getItem("SFRH");
|
||||
if (sfrh == 1 && idEntityCard) {
|
||||
try {
|
||||
SPPUC.init(
|
||||
idEntityCard,
|
||||
"",
|
||||
function () { },
|
||||
function (device_id, type, [lng, lat, speed]) { }
|
||||
);
|
||||
console.log(SPPUC, 'SPPUC');
|
||||
|
||||
} catch { }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.homeBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
||||
.home-aside {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 70px;
|
||||
height: calc(100vh - 67px);
|
||||
background: #263445;
|
||||
z-index: 3;
|
||||
width: 442px;
|
||||
|
||||
.asideModel {
|
||||
height: calc(100%/3);
|
||||
background: url("~@/assets/images/bi/L_B.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bi/R_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.aside-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// 公用
|
||||
.common-title {
|
||||
padding: 0 54px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.comom-cnt {
|
||||
height: calc(100% - 30px);
|
||||
padding: 4px 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
src/views/dataBI/layout/head.vue
Normal file
132
src/views/dataBI/layout/head.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<div class="home-head-box relative">
|
||||
<div class="time absolute">
|
||||
<div class="f20">{{ datatime }}</div>
|
||||
<div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
|
||||
</div>
|
||||
<div class="title absolute" @click="goPath">{{ props.title }}</div>
|
||||
|
||||
<!-- <div class="title-tow" absolute>
|
||||
<div class="back"><span class="ml40">林芝市</span></div>
|
||||
</div> -->
|
||||
<div class="wd absolute">
|
||||
<el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
|
||||
<span> 温度 1~7°C </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import { getRecentDay, timeValidate } from "@/utils/tools.js";
|
||||
import { ref, onMounted, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "警保联动"
|
||||
}
|
||||
});
|
||||
const datatime = ref(getRecentDay(0));
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref(0);
|
||||
const timersfm = ref(null);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
|
||||
function goPath() {
|
||||
router.push("/editPassword");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.head-container {
|
||||
width: 100%;
|
||||
height: 135px;
|
||||
position: relative;
|
||||
background: #263445;
|
||||
z-index: 2;
|
||||
}
|
||||
.home-head-box {
|
||||
width: 100%;
|
||||
height: 138px;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
z-index: 2;
|
||||
.title {
|
||||
font-size: 36px;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
transform: translateX(-50%);
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.title-tow {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
width: 500px;
|
||||
top: 50px;
|
||||
left: calc(50% - 270px);
|
||||
font-size: 36px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
.back {
|
||||
background: url("~@/assets/images/bi/fbt.png") no-repeat center center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
left: 25%;
|
||||
top: 10px;
|
||||
}
|
||||
.wd {
|
||||
right: 25%;
|
||||
top: 12px;
|
||||
font-size: 16px;
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
}
|
||||
.zbbb {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
font-size: 16px;
|
||||
width: 162px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
background: url("~@/assets/images/btnbb.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
345
src/views/login/index.vue
Normal file
345
src/views/login/index.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form
|
||||
class="login-form"
|
||||
ref="loginFromRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<div class="title-container">
|
||||
<h3 class="title">用户登录</h3>
|
||||
</div>
|
||||
<el-form-item prop="userName">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon="user" />
|
||||
</span>
|
||||
<el-input
|
||||
placeholder="请输入账号"
|
||||
name="userName"
|
||||
type="text"
|
||||
v-model="loginForm.userName"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password1">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon="password" />
|
||||
</span>
|
||||
<el-input
|
||||
placeholder="请输入密码"
|
||||
name="password"
|
||||
:type="passwordType"
|
||||
v-model="loginForm.password"
|
||||
/>
|
||||
<span class="show-pwd">
|
||||
<svg-icon
|
||||
@click="onChangePwdType"
|
||||
:icon="passwordType === 'password' ? 'eye' : 'eye-open'"
|
||||
/>
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="isShowKaptCha" prop="kaptcha">
|
||||
<span class="svg-container"><svg-icon icon="kaptcha" /></span>
|
||||
<el-input
|
||||
@keydown.enter="handleLogin()"
|
||||
v-model="loginForm.kaptcha"
|
||||
placeholder="请输入验证码"
|
||||
name="kaptcha"
|
||||
type="text"
|
||||
/>
|
||||
<span @click="getKaptchaImg">
|
||||
<el-image class="show-kaptcha" :src="kaptchaUrl" fit="cover">
|
||||
<template #error>
|
||||
<div class="image-slot"><svg-icon icon="errorImg" /></div>
|
||||
</template>
|
||||
</el-image>
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<!---登录按钮-->
|
||||
<el-form-item style="height: 49px" v-if="!loginDialog">
|
||||
<el-button
|
||||
@click="handleLogin"
|
||||
type="primary"
|
||||
style="width: 520px; height: 49px"
|
||||
:loading="loading"
|
||||
native-type="submit"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="choosedept-wrap" v-if="loginDialog">
|
||||
<el-select
|
||||
v-model="deptId"
|
||||
@change="refreshToken"
|
||||
placeholder="请选择部门"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "login"
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import { setItem } from "@/utils/storage";
|
||||
import { ElNotification } from "element-plus";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getKaptcha } from "@/api/sys";
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import { validatePassword } from "./rules";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
import { useRouter, onBeforeRouteLeave } from "vue-router";
|
||||
const store = useStore();
|
||||
const kaptchaUrl = ref("");
|
||||
// 数据源
|
||||
const loginForm = ref({
|
||||
userName: "admin",
|
||||
password: "111111",
|
||||
kaptcha: ""
|
||||
});
|
||||
const loginDialog = ref(false);
|
||||
const deptList = ref([]);
|
||||
const deptId = ref("");
|
||||
const authorization = ref("");
|
||||
const isShowKaptCha = ref(false);
|
||||
|
||||
// 验证规则
|
||||
const loginRules = ref({
|
||||
userName: [{ required: true, trigger: "blur", message: "用户名为必填项" }],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", validator: validatePassword() }
|
||||
],
|
||||
kaptcha: [{ required: true, trigger: "blur", message: "验证码为必填项" }]
|
||||
});
|
||||
|
||||
const handleClose = () => {};
|
||||
const refreshToken = (e) => {
|
||||
store
|
||||
.dispatch("user/refreshToken", { deptId: e, jwtToken: authorization.value })
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
store.commit("user/setDeptId", e);
|
||||
// window.location.href = '/'// 登录后操作
|
||||
router.push("/");
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 处理密码框文本显示状态
|
||||
const passwordType = ref("password");
|
||||
const onChangePwdType = () => {
|
||||
if (passwordType.value === "password") {
|
||||
passwordType.value = "text";
|
||||
} else {
|
||||
passwordType.value = "password";
|
||||
}
|
||||
};
|
||||
|
||||
// 登录动作处理
|
||||
const loading = ref(false);
|
||||
const loginFromRef = ref(null);
|
||||
const router = useRouter();
|
||||
const handleLogin = () => {
|
||||
loginFromRef.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// setItem("token", "1255555888");
|
||||
// setItem("isOatuh", 0);
|
||||
// router.push("/");
|
||||
loading.value = true;
|
||||
store
|
||||
.dispatch("user/login", loginForm.value)
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
// 登录后操作;
|
||||
if (res.deptList.length === 1) {
|
||||
window.location.href = "/";
|
||||
} else {
|
||||
deptList.value = [...res.deptList];
|
||||
loginDialog.value = true;
|
||||
authorization.value = res.jwtToken;
|
||||
ElNotification({
|
||||
title: "提示",
|
||||
message: "请选择部门",
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
const logout = () => {
|
||||
store.dispatch("user/logout");
|
||||
};
|
||||
onMounted(() => {});
|
||||
const getKaptchaImg = () => {
|
||||
const res =
|
||||
`${process.env.VUE_APP_GATEWAY_BASE_URL}/mosty-api/mosty-base/kaptcha?date=` +
|
||||
new Date();
|
||||
kaptchaUrl.value = res;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg: #2d3a4b;
|
||||
$dark_gray: #889aa4;
|
||||
$light_gray: #eee;
|
||||
$cursor: #fff;
|
||||
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: $bg;
|
||||
overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 160px 35px 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
&::v-deep .el-input__inner {
|
||||
-webkit-box-shadow: 0 0 0 1000px #283443 inset;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
&::v-deep .el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
&::v-deep .el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
caret-color: $cursor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .lang-select {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
font-size: 22px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.show-kaptcha {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.choosedept-wrap {
|
||||
.el-form-item__content {
|
||||
width: 100%;
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// .el-dialog{
|
||||
// background: #293444;
|
||||
// color: white;
|
||||
// .el-dialog__title{
|
||||
// color: #fff;
|
||||
// }
|
||||
// .el-select{
|
||||
// width: 300px;
|
||||
// padding-bottom: 40px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
9
src/views/login/rules.js
Normal file
9
src/views/login/rules.js
Normal file
@ -0,0 +1,9 @@
|
||||
export const validatePassword = () => {
|
||||
return (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('密码不能少于6位'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user