124
This commit is contained in:
165
src/views/backOfficeSystem/busStop/components/detailForm.vue
Normal file
165
src/views/backOfficeSystem/busStop/components/detailForm.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<!-- 行政区域 公交线路编码 1122 xxx站点1 林芝市巴宜区 11223
|
||||
开始时间 结束时间 23:00 08:00 -->
|
||||
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-form-item label="行政区域">
|
||||
<el-select
|
||||
clearable
|
||||
disabled
|
||||
v-model="listQuery.xzqhbm"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_XZQHDM"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="公交线路编码">
|
||||
<el-input
|
||||
disabled
|
||||
v-model="listQuery.zdbm"
|
||||
placeholder="公交线路编码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="公交站点编码">
|
||||
<el-input
|
||||
v-model="listQuery.zdbm"
|
||||
disabled
|
||||
placeholder="公交站点编码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="公交站点名称">
|
||||
<el-input
|
||||
v-model="listQuery.zdmc"
|
||||
disabled
|
||||
placeholder="公交站点名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="开始时间">
|
||||
<el-input
|
||||
disabled
|
||||
v-model="listQuery.kssj"
|
||||
placeholder="开始时间"
|
||||
/> </el-form-item
|
||||
><el-form-item label="结束时间">
|
||||
<el-input
|
||||
disabled
|
||||
v-model="listQuery.jssj"
|
||||
placeholder="结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("公交站点详情");
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
if (row) {
|
||||
listQuery.value = { ...row };
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
.el-form-items {
|
||||
flex: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
169
src/views/backOfficeSystem/busStop/index.vue
Normal file
169
src/views/backOfficeSystem/busStop/index.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="公交车站点管理" />
|
||||
</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 #xzqhbm="{ row }">
|
||||
<dict-tag :options="D_BZ_XZQHDM" :value="row.xzqhbm" :tag="false" />
|
||||
</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" :dict="{ 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 { tbGjZdxxselectPage } from "@/api/mosty-zhgj.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XZQHDM } = proxy.$dict("D_BZ_XZQHDM");
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "xzqy",
|
||||
placeholder: "行政区划",
|
||||
showType: "select",
|
||||
options: D_BZ_XZQHDM
|
||||
},
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
placeholder: "公交线路起点站",
|
||||
showType: "datetime"
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
placeholder: "公交线路终点站",
|
||||
showType: "datetime"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
// {
|
||||
// id: 1,
|
||||
// xzqhbm: "542600",
|
||||
// gjxlbm: "13800138000",
|
||||
// zdbm: "张三",
|
||||
// zdmc: "511222222222222",
|
||||
// kssj: "13900139000",
|
||||
// jssj: "在营"
|
||||
// }
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "公交线路编码", prop: "gjxlbm" },
|
||||
{ label: "公交站点名称", prop: "zdmc" },
|
||||
{ label: "公交站点编码", prop: "xzqhbm" },
|
||||
{ label: "行政区划", prop: "xzqhbm", 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 };
|
||||
tbGjZdxxselectPage(data)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
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>
|
||||
206
src/views/backOfficeSystem/forewarning/components/detailForm.vue
Normal file
206
src/views/backOfficeSystem/forewarning/components/detailForm.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<div>
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-image
|
||||
class="image"
|
||||
:src="urlImg + listQuery.yjTp"
|
||||
show-progress
|
||||
fit="cover"
|
||||
:preview-src-list="[urlImg + listQuery.yjTp]"
|
||||
/>
|
||||
<div class="form-item">
|
||||
<div class="lable">预警人员姓名</div>
|
||||
<div class="menu">{{ listQuery.yjRyxm }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">身份证号码</div>
|
||||
<div class="menu">{{ listQuery.yjRysfzh }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">预警标题</div>
|
||||
<div class="menu">{{ listQuery.yjBt }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">预警时间</div>
|
||||
<div class="menu">{{ listQuery.yjSj }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">预警来源名称</div>
|
||||
<div class="menu">{{ listQuery.yjlyBqmc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">相似度</div>
|
||||
<div class="menu">{{ listQuery.xsd }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">预警次数</div>
|
||||
<div class="menu">{{ listQuery.yjCs }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">感知源名称</div>
|
||||
<div class="menu">{{ listQuery.yjGzymc }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">购买地点</div>
|
||||
<div class="menu">{{ listQuery.gmdd }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">购票时间</div>
|
||||
<div class="menu">{{ listQuery.gpsj }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">购买路线</div>
|
||||
<div class="menu">{{ listQuery.gmlx }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">预警内容</div>
|
||||
<div class="menu">{{ listQuery.yjNr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { tbGjYjxxgetInfo } from "@/api/mosty-zhgj.js";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("预警详情");
|
||||
const listQuery = ref({});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
gettbGjYjxxgetInfo(row.id);
|
||||
};
|
||||
const gettbGjYjxxgetInfo = (val) => {
|
||||
tbGjYjxxgetInfo(val).then((res) => {
|
||||
if (res) {
|
||||
listQuery.value = res;
|
||||
}
|
||||
});
|
||||
};
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
color: #000;
|
||||
.form-item {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.el-form-items {
|
||||
flex: 0.5;
|
||||
}
|
||||
}
|
||||
.lable {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
width: 230px;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
.menu {
|
||||
height: 36px;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e3e7ed;
|
||||
background-color: #fff;
|
||||
}
|
||||
.control {
|
||||
background-color: #f7fafb;
|
||||
}
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.interval {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.map {
|
||||
margin-top: 10px;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.image {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
</style>
|
||||
187
src/views/backOfficeSystem/forewarning/index.vue
Normal file
187
src/views/backOfficeSystem/forewarning/index.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="预警管理" />
|
||||
</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 #yjTp="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="urlImg + row.yjTp"
|
||||
show-progress
|
||||
:preview-src-list="[urlImg + row.yjTp]"
|
||||
fit="cover"
|
||||
/>
|
||||
<!-- <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" :dict="{ D_BZ_XB }" />
|
||||
</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 { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "车牌号",
|
||||
prop: "cph",
|
||||
placeholder: "车牌号",
|
||||
showType: "input"
|
||||
},
|
||||
// {
|
||||
// label: "起点",
|
||||
// prop: "xlqdz",
|
||||
// placeholder: "起点",
|
||||
// showType: "input"
|
||||
// },
|
||||
// {
|
||||
// label: "终点",
|
||||
// prop: "xlzdz",
|
||||
// placeholder: "终点",
|
||||
// showType: "input"
|
||||
// },
|
||||
{
|
||||
label: "日期",
|
||||
prop: "startTime",
|
||||
placeholder: "日期",
|
||||
showType: "daterange",
|
||||
bool: false
|
||||
}
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "yjTp", showSolt: true },
|
||||
{ label: "姓名", prop: "yjRyxm" },
|
||||
{ label: "身份证号码", prop: "yjRysfzh" },
|
||||
{ label: "购买线路", prop: "gmlx" },
|
||||
{ label: "购买地点", prop: "gmdd" },
|
||||
{ label: "预警时间", prop: "yjSj" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
//选择类型
|
||||
|
||||
const onSearch = (val) => {
|
||||
console.log(val);
|
||||
const promes = {
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
};
|
||||
if (val.startTime) {
|
||||
promes.startTime = val.startTime[0];
|
||||
promes.endTime = val.startTime[1];
|
||||
}
|
||||
queryFrom.value = { ...val, ...promes };
|
||||
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 };
|
||||
tbGjYjgetPageList(data)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
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,284 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName" @tab-click="switchover(activeName)">
|
||||
<el-tab-pane label="单位信息" name="basic">
|
||||
<el-form
|
||||
:model="dataList.corpoInfo"
|
||||
:label-width="230"
|
||||
label-position="left"
|
||||
>
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位类型">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwlx"
|
||||
placeholder="ktv"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.shxydm"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称（营业执照登记名称）">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwmc"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwzcdz"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位司机数量">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwsjsl"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位车辆数量">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwclsl"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.ssxq"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" :src="dataList.corpoInfo.yyzzzp" alt="" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
<el-form :label-width="230" label-position="left">
|
||||
<div
|
||||
class="flex align-center bottom"
|
||||
v-for="(item, index) in dataList.personalInfo"
|
||||
:key="index"
|
||||
>
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="item.xm" placeholder="ktv" />
|
||||
</el-form-item>
|
||||
<el-form-item label="民族">
|
||||
<el-input v-model="item.shxydm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="证件号码">
|
||||
<el-input v-model="item.zjhm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="item.lxdh" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="居住地址">
|
||||
<el-input v-model="item.jzdz" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="item.dwmc" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="企业部门">
|
||||
<el-input v-model="item.qybm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="入职时间">
|
||||
<el-input v-model="item.rzsj" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位">
|
||||
<el-input v-model="item.gw" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="违法犯罪经历描述">
|
||||
<el-input v-model="item.wffzms" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="dataList.personalInfo.length == 0" />
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="车辆" name="vehicle">
|
||||
<!-- 车辆 -->
|
||||
<el-form :label-width="230" label-position="left">
|
||||
<div
|
||||
class="flex align-center bottom"
|
||||
v-for="(item, index) in dataList.vehicleInfo"
|
||||
:key="index"
|
||||
>
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-form-item label="车辆驾驶员">
|
||||
<el-input v-model="item.cljsy" placeholder="ktv" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆类型">
|
||||
<el-input v-model="item.cllx" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="车牌号">
|
||||
<el-input v-model="item.cph" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="item.dwmc" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="企业部门">
|
||||
<el-input v-model="item.qybm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="行政区域">
|
||||
<el-input v-model="item.xzqy" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线路名称">
|
||||
<el-input v-model="item.xlmc" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="dataList.vehicleInfo.length == 0" />
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { tbGjclselectList, tbJcxxAbrySelectList } from "@/api/mosty-zhgj.js";
|
||||
import Empty from "@/components/Empty/index.vue";
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref("basic");
|
||||
const title = ref("单位信息");
|
||||
const dataList = reactive({
|
||||
corpoInfo: {},
|
||||
vehicleInfo: [],
|
||||
personalInfo: []
|
||||
});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
activeName.value = type;
|
||||
dataList.corpoInfo = { ...row };
|
||||
switchover(type);
|
||||
};
|
||||
const switchover = (type) => {
|
||||
if (type == "staff") {
|
||||
gettbJcxxAbrySelectList();
|
||||
} else if (type == "vehicle") {
|
||||
gettbGjclselectList();
|
||||
}
|
||||
};
|
||||
const gettbJcxxAbrySelectList = () => {
|
||||
tbJcxxAbrySelectList({ dwid: dataList.corpoInfo.id }).then((res) => {
|
||||
dataList.personalInfo = res;
|
||||
});
|
||||
};
|
||||
const gettbGjclselectList = () => {
|
||||
tbGjclselectList({ dwid: dataList.corpoInfo.id }).then((res) => {
|
||||
dataList.vehicleInfo = res;
|
||||
});
|
||||
};
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.bottom {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
175
src/views/backOfficeSystem/passengerTransport/index.vue
Normal file
175
src/views/backOfficeSystem/passengerTransport/index.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="客运单位信息管理" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
>
|
||||
<!-- <template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template> -->
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('basic', row)">详情</el-link>
|
||||
<el-link type="primary" @click="addEdit('staff', row)"
|
||||
>从业人员</el-link
|
||||
>
|
||||
<el-link type="primary" @click="addEdit('vehicle', row)"
|
||||
>车辆</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { gjDwjbxxSelectPage } from "@/api/mosty-zhgj.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "单位名称",
|
||||
prop: "placeName",
|
||||
placeholder: "单位名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "单位类型",
|
||||
prop: "placeName",
|
||||
placeholder: "单位类型",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
// {
|
||||
// id: 1,
|
||||
// placeName: "老王打印店",
|
||||
// placePhone: "13800138000",
|
||||
// legalPersonName: "张三",
|
||||
// legalPersonId: "511222222222222",
|
||||
// legalPersonPhone: "13900139000",
|
||||
// operationStatus: "在营",
|
||||
// jurisdiction: "巴宜区纺织路派出所"
|
||||
// }
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "单位名称", prop: "placeName" },
|
||||
{ label: "单位类型", prop: "operationStatus" },
|
||||
{ label: "单位车辆数量", prop: "jurisdiction" },
|
||||
{ label: "所属辖区", prop: "legalPersonName" }
|
||||
]
|
||||
});
|
||||
|
||||
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 };
|
||||
gjDwjbxxSelectPage(data)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
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,190 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<div>
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">行政区域</div>
|
||||
<div class="menu">{{ listQuery.xzqy }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">单位名称</div>
|
||||
<div class="menu">{{ listQuery.dwmc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">企业部门</div>
|
||||
<div class="menu">{{ listQuery.qybm }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">岗位</div>
|
||||
<div class="menu">{{ listQuery.gw }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">姓名</div>
|
||||
<div class="menu">{{ listQuery.xm }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">证件号码</div>
|
||||
<div class="menu">{{ listQuery.zjhm }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">联系电话</div>
|
||||
<div class="menu">{{ listQuery.lxdh }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">民族</div>
|
||||
<div class="menu">
|
||||
<dict-tag
|
||||
:options="dict.D_BZ_MZ"
|
||||
:value="listQuery.mzdm"
|
||||
:tag="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">居住地址</div>
|
||||
<div class="menu">{{ listQuery.jzdz }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">入职时间</div>
|
||||
<div class="menu">{{ listQuery.rzsj }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">违法犯罪经历描述</div>
|
||||
<div class="menu">{{ listQuery.wffzms }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("人员详情");
|
||||
const listQuery = ref({});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
listQuery.value = { ...row };
|
||||
};
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
color: #000;
|
||||
.form-item {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.el-form-items {
|
||||
flex: 0.5;
|
||||
}
|
||||
}
|
||||
.lable {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
width: 230px;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
.menu {
|
||||
height: 36px;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e3e7ed;
|
||||
background-color: #fff;
|
||||
}
|
||||
.control {
|
||||
background-color: #f7fafb;
|
||||
}
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.interval {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.map {
|
||||
margin-top: 10px;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.image {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
</style>
|
||||
171
src/views/backOfficeSystem/practitioner/index.vue
Normal file
171
src/views/backOfficeSystem/practitioner/index.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人员管理" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link 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" :dict="{ D_BZ_MZ }" />
|
||||
</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 { tbJcxxAbryselectPage } from "@/api/mosty-zhgj.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_MZ } = proxy.$dict("D_BZ_MZ");
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "人员姓名",
|
||||
prop: "xm",
|
||||
placeholder: "人员姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "zjhm",
|
||||
placeholder: "证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "联系电话",
|
||||
prop: "lxdh",
|
||||
placeholder: "联系电话",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
xm: 1,
|
||||
zjhm: "20",
|
||||
cljsy: "张三",
|
||||
rzsj: "511222222222222",
|
||||
gw: "511222222222222",
|
||||
lxdh: "511222222222222",
|
||||
wffzms: "111",
|
||||
zjhm: "谢谢谢谢",
|
||||
xzqy: "谢谢谢谢",
|
||||
mzdm: "20"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "证件号码", prop: "zjhm" },
|
||||
{ label: "入职时间", prop: "rzsj" },
|
||||
{ label: "岗位", prop: "gw" },
|
||||
{ label: "联系方式", prop: "lxdh" }
|
||||
]
|
||||
});
|
||||
|
||||
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 };
|
||||
tbJcxxAbryselectPage(data)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
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,163 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-form-item label="行政区域">
|
||||
<el-input v-model="listQuery.dwlx" placeholder="行政区域" />
|
||||
</el-form-item>
|
||||
<el-form-item label="公交线路编码">
|
||||
<el-input
|
||||
v-model="listQuery.shxydm"
|
||||
placeholder="公交线路编码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="公交线路名称">
|
||||
<el-input v-model="listQuery.dwmc" placeholder="公交线路名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="公交线路起点站">
|
||||
<el-input
|
||||
v-model="listQuery.dwzcdz"
|
||||
placeholder="公交线路起点站"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="公交线路终点站" class="el-form-items">
|
||||
<el-input
|
||||
v-model="listQuery.dwsjsl"
|
||||
placeholder="公交线路终点站"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="起点站首末车">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="起点站首末车" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="开始时间">
|
||||
<el-input
|
||||
v-model="listQuery.ssxq"
|
||||
placeholder="开始时间"
|
||||
/> </el-form-item
|
||||
><el-form-item label="结束时间">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="终点站点站首末车">
|
||||
<el-input
|
||||
v-model="listQuery.ssxq"
|
||||
placeholder="终点站点站首末车"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="开始时间">
|
||||
<el-input
|
||||
v-model="listQuery.ssxq"
|
||||
placeholder="开始时间"
|
||||
/> </el-form-item
|
||||
><el-form-item label="结束时间">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("公交线路详情");
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
if (row) {
|
||||
listQuery.value = { ...row };
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
.el-form-items {
|
||||
flex: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
163
src/views/backOfficeSystem/routeManagement/index.vue
Normal file
163
src/views/backOfficeSystem/routeManagement/index.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="公交路线管理" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
>
|
||||
<!-- <template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template> -->
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" title="公交线路详情" />
|
||||
</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 { tbGjclXlxxselectPage } from "@/api/mosty-zhgj.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "xzqy",
|
||||
placeholder: "行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "公交线路起点站",
|
||||
prop: "xlqdz",
|
||||
placeholder: "公交线路起点站",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "公交线路终点站",
|
||||
prop: "xlzdz",
|
||||
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: "placeName" },
|
||||
{ label: "公交线路起点站", prop: "operationStatus" },
|
||||
{ label: "公交线路终点站", prop: "jurisdiction" },
|
||||
{ label: "行政区划", prop: "legalPersonName" }
|
||||
]
|
||||
});
|
||||
|
||||
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 };
|
||||
tbGjclXlxxselectPage(data)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
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,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>
|
||||
426
src/views/backOfficeSystem/systemConfig/dict/detail.vue
Normal file
426
src/views/backOfficeSystem/systemConfig/dict/detail.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<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);
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
// --el-dialog-bg-color: #001238;
|
||||
}
|
||||
</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>
|
||||
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,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>
|
||||
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>
|
||||
349
src/views/backOfficeSystem/systemConfig/useQk/index.vue
Normal file
349
src/views/backOfficeSystem/systemConfig/useQk/index.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="btnBoxss">
|
||||
<div class="title">系统使用情况</div>
|
||||
<div class="btnBox">
|
||||
<el-radio-group v-model="tabPos" @change="getTab">
|
||||
<el-radio-button label="1">今日</el-radio-button>
|
||||
<el-radio-button label="2">近7日</el-radio-button>
|
||||
<el-radio-button label="3">近30日</el-radio-button>
|
||||
<el-radio-button label="4">近90日</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart_box">
|
||||
<div class="chart_item left_item">
|
||||
<div class="sy_pep">使用次数</div>
|
||||
<div class="cen_box">
|
||||
<pie :data="sbLxData" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart_item right_item">
|
||||
<div class="sy_pep">使用人数</div>
|
||||
<div class="cen_box">
|
||||
<div class="content">
|
||||
<div class="stat_box">
|
||||
<div>人数</div>
|
||||
<div class="num-text">{{ peopleNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tablebox" ref="tableList">
|
||||
<div class="stitle ranktitle">
|
||||
排行榜
|
||||
<div class="rankText">
|
||||
<el-radio-group v-model="radioList" @change="checkActive">
|
||||
<el-radio :label="1">人员</el-radio>
|
||||
<el-radio :label="2">部门</el-radio>
|
||||
<el-radio :label="3">模块</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-List">
|
||||
<div class="table-header">
|
||||
<span class="table-item">排名</span>
|
||||
<span class="table-item">使用成功数</span>
|
||||
<span class="table-item">使用失败数</span>
|
||||
<span class="table-item">总数</span>
|
||||
<span class="table-item" v-if="radioList === 1">人员</span>
|
||||
<span class="table-item">{{
|
||||
radioList === 3 ? "模块名称" : "部门名称"
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
class="table-body"
|
||||
:class="index % 2 === 0 ? 'bg' : ''"
|
||||
v-for="(item, index) in tableData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="table-item">
|
||||
<img
|
||||
v-if="index === 0"
|
||||
:src="require('@/assets/images/gold.png')"
|
||||
alt=""
|
||||
width="20"
|
||||
height="25"
|
||||
/>
|
||||
<img
|
||||
v-else-if="index === 1"
|
||||
:src="require('@/assets/images/silver.png')"
|
||||
alt=""
|
||||
width="20"
|
||||
height="25"
|
||||
/>
|
||||
<img
|
||||
v-else-if="index === 2"
|
||||
:src="require('@/assets/images/copper.png')"
|
||||
alt=""
|
||||
width="20"
|
||||
height="25"
|
||||
/>
|
||||
<span v-else>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<span class="table-item">{{ active ? item.pass : item.aa }}</span>
|
||||
<span class="table-item">{{ active ? item.noPass : item.a }}</span>
|
||||
<span class="table-item">{{ active ? item.count : item.a }}</span>
|
||||
<span class="table-item" v-if="radioList === 1">{{
|
||||
item.oper_name
|
||||
}}</span>
|
||||
<span class="table-item" v-if="radioList != 3">{{ item.ssbm }}</span>
|
||||
<span class="table-item" v-if="radioList === 3">
|
||||
<dict-tag :options="D_BZ_FWMC" :value="item.mkmc" :tag="false" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import pie from "./pie.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 {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
nextTick,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const { proxy } = getCurrentInstance();
|
||||
import {
|
||||
ryStatistics,
|
||||
bmStatistics,
|
||||
mkStatistics,
|
||||
useStatistics
|
||||
} from "@/api/sys.js";
|
||||
const { D_BZ_FWMC } = proxy.$dict("D_BZ_FWMC");
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const active = ref(true);
|
||||
const tabPos = ref("1");
|
||||
const params = ref({
|
||||
type: "1"
|
||||
});
|
||||
function getTab(val) {
|
||||
params.value.type = val;
|
||||
getTableData();
|
||||
getpie();
|
||||
}
|
||||
const tableData = ref([]); //表格数据
|
||||
function getTableData() {
|
||||
if (radioList.value === 1) {
|
||||
ryStatistics(params.value).then((res) => {
|
||||
tableData.value = res;
|
||||
});
|
||||
} else if (radioList.value === 2) {
|
||||
bmStatistics(params.value).then((res) => {
|
||||
tableData.value = res;
|
||||
});
|
||||
} else if (radioList.value === 3) {
|
||||
mkStatistics(params.value).then((res) => {
|
||||
tableData.value = res;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const radioList = ref(1);
|
||||
function checkActive(val) {
|
||||
getTableData();
|
||||
}
|
||||
|
||||
const sbLxData = ref([
|
||||
{
|
||||
name: "成功次数",
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: "失败次数",
|
||||
value: 0
|
||||
}
|
||||
]);
|
||||
const peopleNum = ref(0);
|
||||
function getpie() {
|
||||
useStatistics(params.value).then((res) => {
|
||||
peopleNum.value = res.fwrs;
|
||||
sbLxData.value[0].value = res.qqcgcs;
|
||||
sbLxData.value[1].value = res.qqsbcs;
|
||||
});
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getpie();
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</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;
|
||||
}
|
||||
.btnBoxss {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
.btnBox {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
.chart_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.chart_item {
|
||||
flex: 1;
|
||||
height: 300px;
|
||||
border: 1px solid #07539a;
|
||||
padding: 10px;
|
||||
}
|
||||
.left_item {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.right_item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.cen_box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.tablebox {
|
||||
margin-top: 15px;
|
||||
border: 1px solid #07539a;
|
||||
height: 54vh;
|
||||
padding: 10px;
|
||||
.ranktitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.rankText {
|
||||
color: #2892ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rankText:hover {
|
||||
color: rgb(59, 162, 231);
|
||||
}
|
||||
}
|
||||
.table-List {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.table-List {
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #54c5ff;
|
||||
background-color: #004485;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.table-body {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
.table-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.table-item-dep {
|
||||
flex: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bg {
|
||||
background-color: #002f5b;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 76.5px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
width: 160px;
|
||||
:last-child {
|
||||
margin-right: 0vw;
|
||||
}
|
||||
}
|
||||
.stat_box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(76, 166, 251, 0.8);
|
||||
border-radius: 2px;
|
||||
margin-right: 1vw;
|
||||
padding: 13px 0;
|
||||
.num-text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
background: linear-gradient(to bottom right, #36e5ff, #1092ff);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
.sy_pep {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
115
src/views/backOfficeSystem/systemConfig/useQk/pie.vue
Normal file
115
src/views/backOfficeSystem/systemConfig/useQk/pie.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="circlecz" style="width: 500px; height: 260px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { ref, onMounted, watch, defineProps } from "vue";
|
||||
const props = defineProps({
|
||||
data: { type: Array }
|
||||
});
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
lineChartFn();
|
||||
},
|
||||
{
|
||||
deep:true
|
||||
}
|
||||
);
|
||||
function lineChartFn() {
|
||||
var chartDom = document.getElementById("circlecz");
|
||||
var myChart = echarts.init(chartDom, "dark");
|
||||
var option;
|
||||
var scale = 1;
|
||||
// var echartData = props.data.map((item) => {
|
||||
// return {
|
||||
// value: item.value,
|
||||
// name: item.name
|
||||
// };
|
||||
// });
|
||||
var rich = {
|
||||
yellow: {
|
||||
color: "#ffc72b",
|
||||
fontSize: 14 * scale,
|
||||
padding: [5, 4],
|
||||
align: "center"
|
||||
},
|
||||
total: {
|
||||
color: "#ffc72b",
|
||||
fontSize: 14 * scale,
|
||||
align: "center"
|
||||
},
|
||||
white: {
|
||||
color: "#fff",
|
||||
align: "center",
|
||||
fontSize: 14 * scale,
|
||||
padding: [0, 0]
|
||||
},
|
||||
blue: {
|
||||
color: "#49dff0",
|
||||
fontSize: 14 * scale,
|
||||
align: "center"
|
||||
}
|
||||
};
|
||||
|
||||
option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
// title:{
|
||||
// show:true,
|
||||
// text: '使用次数'
|
||||
// },
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
right: 0,
|
||||
top: 5
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "使用次数",
|
||||
type: "pie",
|
||||
radius: ["32%", "50%"],
|
||||
hoverAnimation: false,
|
||||
color: [
|
||||
"#c487ee",
|
||||
"#deb140",
|
||||
"#49dff0",
|
||||
"#034079",
|
||||
"#6f81da",
|
||||
"#00ffb4"
|
||||
],
|
||||
label: {
|
||||
normal: {
|
||||
formatter: function (params, ticket, callback) {
|
||||
return (
|
||||
"{white|" +
|
||||
params.name +
|
||||
"}\n{yellow|" +
|
||||
params.value +
|
||||
"}\n{blue|" +
|
||||
params.percent +
|
||||
"%}"
|
||||
);
|
||||
},
|
||||
rich: rich
|
||||
}
|
||||
},
|
||||
data: props.data
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
||||
}
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</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>
|
||||
@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo" v-if="show">
|
||||
<div>
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">车牌号</div>
|
||||
<div class="menu">{{ listQuery.cph }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">日期</div>
|
||||
<div class="menu">{{ listQuery.gprq }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">车辆驾驶员</div>
|
||||
<div class="menu">{{ listQuery.cljsy }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">车辆起始线路</div>
|
||||
<div class="menu">{{ listQuery.clqsxl }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">乘客数量</div>
|
||||
<div class="menu">{{ listQuery.cksl }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">重点人数量</div>
|
||||
<div class="menu">{{ listQuery.zdrsl }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 乘客信息 -->
|
||||
<div class="form-row interval">
|
||||
<div class="form-item">
|
||||
<div class="lable">乘客信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="menu control">姓名</div>
|
||||
<div class="menu control">身份证号</div>
|
||||
<div class="menu control">性别</div>
|
||||
<div class="menu control">户籍地址</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="form-row"
|
||||
:key="index"
|
||||
v-for="(item, index) in listQuery.ckxxList"
|
||||
>
|
||||
<div class="form-item">
|
||||
<div class="menu">{{ item.xm }}</div>
|
||||
<div class="menu">{{ item.sfzh }}</div>
|
||||
<div class="menu">
|
||||
<dict-tag
|
||||
:options="dict.D_BZ_XB"
|
||||
:value="item.xbdm"
|
||||
:tag="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="menu">{{ item.hjdz }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中途上车人员信息 -->
|
||||
<div class="form-row interval">
|
||||
<div class="form-item">
|
||||
<div class="lable">中途上车人员信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="menu control">姓名</div>
|
||||
<div class="menu control">身份证号</div>
|
||||
<div class="menu control">性别</div>
|
||||
<div class="menu control">户籍地址</div>
|
||||
<div class="menu control">上车地址</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="form-row"
|
||||
:key="index"
|
||||
v-for="(item, index) in listQuery.ztscryList"
|
||||
>
|
||||
<div class="form-item">
|
||||
<div class="menu">{{ item.xm }}</div>
|
||||
<div class="menu">{{ item.sfzh }}</div>
|
||||
<div class="menu">
|
||||
<dict-tag
|
||||
:options="dict.D_BZ_XB"
|
||||
:value="item.xbdm"
|
||||
:tag="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="menu">{{ item.hjdz }}</div>
|
||||
<div class="menu">{{ item.scdz }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 重点人员信息 -->
|
||||
<div class="form-row interval">
|
||||
<div class="form-item">
|
||||
<div class="lable">重点人员信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="menu control">姓名</div>
|
||||
<div class="menu control">身份证号</div>
|
||||
<div class="menu control">性别</div>
|
||||
<div class="menu control">户籍地址</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="form-row"
|
||||
:key="index"
|
||||
v-for="(item, index) in listQuery.zdrList"
|
||||
>
|
||||
<div class="form-item">
|
||||
<div class="menu">{{ item.xm }}</div>
|
||||
<div class="menu">{{ item.sfzh }}</div>
|
||||
<div class="menu">
|
||||
<dict-tag
|
||||
:options="dict.D_BZ_XB"
|
||||
:value="item.xbdm"
|
||||
:tag="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="menu">{{ item.hjdz }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo" v-else>
|
||||
<div>
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">车牌号</div>
|
||||
<div class="menu">{{ listQuery.cph }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">日期</div>
|
||||
<div class="menu">{{ listQuery.gprq }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">车辆驾驶员</div>
|
||||
<div class="menu">{{ listQuery.cljsy }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">车辆起始线路</div>
|
||||
<div class="menu">{{ listQuery.clqsxl }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">乘客数量</div>
|
||||
<div class="menu">{{ listQuery.cksl }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">重点人数量</div>
|
||||
<div class="menu">{{ listQuery.zdrsl }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map"><GdMap style="width: 100%; width: 100%" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { tbGpJbxxgetInfo, tbGjclgetInfo } from "@/api/mosty-zhgj.js";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("购票详情");
|
||||
const listQuery = reactive({ zdrList: [], ztscryList: [], ckxxList: [] });
|
||||
const show = ref(true);
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
|
||||
if (type == "track") {
|
||||
show.value = false;
|
||||
gettbGpJbxxgetInfo(row.id);
|
||||
gettbGjclgetInfo(row.clid);
|
||||
title.value = "车辆轨迹";
|
||||
} else {
|
||||
show.value = true;
|
||||
title.value = "购票详情";
|
||||
gettbGpJbxxgetInfo(row.id);
|
||||
}
|
||||
};
|
||||
const gettbGpJbxxgetInfo = (val) => {
|
||||
tbGpJbxxgetInfo(val).then((res) => {
|
||||
listQuery = res;
|
||||
});
|
||||
};
|
||||
const gettbGjclgetInfo = (val) => {
|
||||
tbGjclgetInfo(val).then((res) => {
|
||||
roadmap(res.zb);
|
||||
});
|
||||
};
|
||||
//画线
|
||||
const roadmap = (row) => {
|
||||
if (row && row.length > 0) {
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [row[0][0], row[0][1]],
|
||||
zoomLevel: 12
|
||||
});
|
||||
emitter.emit("drawLineAnimation", {
|
||||
type: "solid",
|
||||
coords: row,
|
||||
isclear: true,
|
||||
flag: "lx"
|
||||
});
|
||||
}
|
||||
};
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
emitter.emit("deletePointArea", "lx");
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
color: #000;
|
||||
.form-item {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.el-form-items {
|
||||
flex: 0.5;
|
||||
}
|
||||
}
|
||||
.lable {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
width: 230px;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
.menu {
|
||||
height: 36px;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e3e7ed;
|
||||
background-color: #fff;
|
||||
}
|
||||
.control {
|
||||
background-color: #f7fafb;
|
||||
}
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.interval {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.map {
|
||||
margin-top: 10px;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
164
src/views/backOfficeSystem/ticketPurchase/index.vue
Normal file
164
src/views/backOfficeSystem/ticketPurchase/index.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="购票管理" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('track', row)"
|
||||
>车辆轨迹</el-link
|
||||
>
|
||||
<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" :dict="{ D_BZ_XB }" />
|
||||
</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 { tbGpJbxxselectPage } from "@/api/mosty-zhgj.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "车牌号",
|
||||
prop: "cph",
|
||||
placeholder: "车牌号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "起点",
|
||||
prop: "xlqdz",
|
||||
placeholder: "起点",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "终点",
|
||||
prop: "xlzdz",
|
||||
placeholder: "终点",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "endTime",
|
||||
placeholder: "日期",
|
||||
showType: "date"
|
||||
}
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "车牌号", prop: "gjxlbm" },
|
||||
{ label: "日期", prop: "zdmc" },
|
||||
{ label: "车辆驾驶员", prop: "xm" },
|
||||
{ label: "车辆行驶线路", prop: "xzqhbm" },
|
||||
{ label: "乘客数量", prop: "xzqhbm" },
|
||||
{ label: "重点人数量", prop: "xzqhbm" }
|
||||
]
|
||||
});
|
||||
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 };
|
||||
tbGpJbxxselectPage(data)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
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,170 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<div>
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">行政区域</div>
|
||||
<div class="menu">{{ listQuery.xzqy }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">单位名称</div>
|
||||
<div class="menu">{{ listQuery.dwmc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">企业部门</div>
|
||||
<div class="menu">{{ listQuery.qybm }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">车牌号</div>
|
||||
<div class="menu">{{ listQuery.cph }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">车辆类型</div>
|
||||
<div class="menu">
|
||||
<dict-tag
|
||||
:options="dict.D_BZ_CLLX"
|
||||
:value="listQuery.cllx"
|
||||
:tag="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="lable">车辆驾驶员</div>
|
||||
<div class="menu">{{ listQuery.cljsy }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="lable">车辆线路</div>
|
||||
<div class="menu">{{ listQuery.xlmc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("车辆详情");
|
||||
const listQuery = ref({});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
listQuery.value = { ...row };
|
||||
};
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
color: #000;
|
||||
.form-item {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.el-form-items {
|
||||
flex: 0.5;
|
||||
}
|
||||
}
|
||||
.lable {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
width: 230px;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
.menu {
|
||||
height: 36px;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e3e7ed;
|
||||
background-color: #fff;
|
||||
}
|
||||
.control {
|
||||
background-color: #f7fafb;
|
||||
}
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.interval {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.map {
|
||||
margin-top: 10px;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.image {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
</style>
|
||||
163
src/views/backOfficeSystem/vehiclesCity/index.vue
Normal file
163
src/views/backOfficeSystem/vehiclesCity/index.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆管理" />
|
||||
</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 #cllx="{ row }">
|
||||
<dict-tag :options="D_BZ_CLLX" :value="row.cllx" :tag="false" />
|
||||
</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" :dict="{ D_BZ_CLLX }" />
|
||||
</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 { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_CLLX } = proxy.$dict("D_BZ_CLLX");
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "车牌号",
|
||||
prop: "cph",
|
||||
placeholder: "车牌号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "车辆类型",
|
||||
prop: "cllx",
|
||||
placeholder: "车辆类型",
|
||||
showType: "select",
|
||||
options: D_BZ_CLLX
|
||||
}
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "车牌号", prop: "cph" },
|
||||
{ label: "车辆类型", prop: "cllx", showSolt: true },
|
||||
{ label: "车辆驾驶员", prop: "cljsy" },
|
||||
{ label: "车辆起始线路", prop: "xlmc" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
//选择类型
|
||||
|
||||
const onSearch = (val) => {
|
||||
console.log(val);
|
||||
const promes = {
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
};
|
||||
if (val.startTime) {
|
||||
promes.startTime = val.startTime[0];
|
||||
promes.endTime = val.startTime[1];
|
||||
}
|
||||
queryFrom.value = { ...val, ...promes };
|
||||
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 };
|
||||
tbGjYjgetPageList(data)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
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>
|
||||
Reference in New Issue
Block a user