124
This commit is contained in:
121
src/views/StationLevel/index.vue
Normal file
121
src/views/StationLevel/index.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="homeBox" @click="handless">
|
||||
<Head :title="query.name" :query="query.name"></Head>
|
||||
<div class="mainBox_jcz hidden flex">
|
||||
<ul class="asideBox">
|
||||
<li class="asideItem" v-for="(item, idx) in meun.leftMeun" :key="idx">
|
||||
<div class="title">{{ item }}</div>
|
||||
<div class="asideCnt" @click="handless">
|
||||
<PeoCollection
|
||||
:jczId="query.id"
|
||||
v-if="item == '人员数据采集'"
|
||||
></PeoCollection>
|
||||
<PlowStatistics
|
||||
:jczId="query.id"
|
||||
v-if="item == '流入流出统计'"
|
||||
></PlowStatistics>
|
||||
<WarningCount
|
||||
:jczId="query.id"
|
||||
v-if="item == '预警统计'"
|
||||
></WarningCount>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mainBox">
|
||||
<div class="main-top"><VideoMore></VideoMore></div>
|
||||
<div class="main-bottom"><VideoFoot></VideoFoot></div>
|
||||
</div>
|
||||
<ul class="asideBox">
|
||||
<li class="asideItem" v-for="(item, idx) in meun.rightMeun" :key="idx">
|
||||
<div class="title">{{ item }}</div>
|
||||
<div class="asideCnt">
|
||||
<BeOnDuty :jczId="query.id" v-if="item == '值班备勤'"></BeOnDuty>
|
||||
<CarWarning
|
||||
:jczId="query.id"
|
||||
v-if="item == '车辆预警'"
|
||||
></CarWarning>
|
||||
<PeoWarning
|
||||
:jczId="query.id"
|
||||
v-if="item == '人员预警'"
|
||||
></PeoWarning>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from "@/views/home/layout/head.vue";
|
||||
import PeoCollection from "./layout/PeoCollection.vue";
|
||||
import PlowStatistics from "./layout/FlowStatistics.vue";
|
||||
import WarningCount from "./layout/WarningCount.vue";
|
||||
import BeOnDuty from "./layout/BeOnDuty.vue";
|
||||
import CarWarning from "./layout/CarWarning.vue";
|
||||
import PeoWarning from "./layout/PeoWarning.vue";
|
||||
import VideoMore from "./layout/VideoMore.vue";
|
||||
import VideoFoot from "./layout/VideoFoot.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
|
||||
const router = useRoute();
|
||||
const meun = reactive({
|
||||
leftMeun: ["人员数据采集", "流入流出统计", "预警统计"],
|
||||
rightMeun: ["值班备勤", "车辆预警", "人员预警"]
|
||||
});
|
||||
const query = computed(() => {
|
||||
return router.query;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.homeBox {
|
||||
background: #000;
|
||||
}
|
||||
.mainBox_jcz {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
background: #000;
|
||||
.asideBox {
|
||||
width: 420px;
|
||||
height: 100%;
|
||||
.asideItem {
|
||||
height: calc(100% / 3);
|
||||
background: url("~@/assets/images/bg12.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.asideCnt {
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mainBox {
|
||||
flex: 1 0 0;
|
||||
margin: 10px;
|
||||
.main-top {
|
||||
background: url("~@/assets/images/bg_13.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 70%;
|
||||
}
|
||||
.main-bottom {
|
||||
height: 30%;
|
||||
background: url("~@/assets/images/bg_14.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
229
src/views/StationLevel/layout/BeOnDuty.vue
Normal file
229
src/views/StationLevel/layout/BeOnDuty.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="warning-container">
|
||||
<!-- 标签切换 -->
|
||||
<div class="tab-container">
|
||||
<div
|
||||
class="tab-item"
|
||||
@click="showchenge(1)"
|
||||
:class="{ active: show == 1 }"
|
||||
>
|
||||
<div class="tab-content">值班人员</div>
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
@click="showchenge(2)"
|
||||
:class="{ active: show == 2 }"
|
||||
>
|
||||
<div class="tab-content">值班装备</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预警列表 -->
|
||||
<div class="warning-list" v-if="show == 2 && warningList">
|
||||
<div class="warning-card">
|
||||
<div class="title flex align-center">
|
||||
<img src="@/assets/images/icon_06.png" alt="" />
|
||||
值班装备
|
||||
</div>
|
||||
<div
|
||||
class="cardItem flex"
|
||||
v-for="(item, index) in warningList.qxList"
|
||||
:key="index"
|
||||
>
|
||||
<span style="flex: 1">名称：{{ item.qxmc }}</span>
|
||||
<span style="flex: 1">数量：{{ item.qxsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line mt6 mb6"></div>
|
||||
<div class="warning-card">
|
||||
<div class="title flex align-center">
|
||||
<img src="@/assets/images/icon_06.png" alt="" /> 值班车辆
|
||||
</div>
|
||||
<div
|
||||
class="cardItem"
|
||||
v-for="(item, index) in warningList.clList"
|
||||
:key="index"
|
||||
>
|
||||
车牌号：{{ item.cph }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList == null && show == 2" />
|
||||
<div class="warning-list" v-if="show == 1 && warningList">
|
||||
<div class="warning-card">
|
||||
<div class="title flex align-center">
|
||||
<img src="@/assets/images/icon_06.png" alt="" />
|
||||
值班人员
|
||||
</div>
|
||||
<div
|
||||
class="cardItem flex"
|
||||
v-for="(item, index) in warningList.ryList"
|
||||
:key="index"
|
||||
>
|
||||
<span style="flex: 1">名称：{{ item.ryXm }}</span>
|
||||
<span style="flex: 1"
|
||||
>警种：{{ item.ryJzlx == "01" ? "民警" : "辅警" }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt6 mb6"></div>
|
||||
</div>
|
||||
<Empty :show="warningList == null && show == 1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
import { jczqueryById } from "@/api/mosty-jcz";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const warningList = ref({ qxList: [], ryList: [], clList: [] });
|
||||
|
||||
const show = ref(1);
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const showchenge = (val) => {
|
||||
show.value = val;
|
||||
getjczqueryById();
|
||||
};
|
||||
|
||||
const getjczqueryById = () => {
|
||||
jczqueryById({ jczid: props.jczId }).then((res) => {
|
||||
if (res) {
|
||||
emitter.emit("chengZ", res);
|
||||
warningList.value.qxList = res.qxList
|
||||
? res.qxList.filter((item) => item.qxsl > 0)
|
||||
: [];
|
||||
warningList.value.ryList = res.ryList ? res.ryList : [];
|
||||
warningList.value.clList = res.clList ? res.clList : [];
|
||||
} else {
|
||||
warningList.value = res;
|
||||
}
|
||||
});
|
||||
};
|
||||
getjczqueryById();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warning-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
width: 150px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 8px 30px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg_08.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab-item.active::before {
|
||||
background: url("~@/assets/images/bg_09.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.warning-list {
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
.cardItem {
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
margin-bottom: 5px;
|
||||
background: url("~@/assets/images/bg_12.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: url("~@/assets/images/line.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(250, 177, 21, 0.9);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
149
src/views/StationLevel/layout/CarWarning.vue
Normal file
149
src/views/StationLevel/layout/CarWarning.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div
|
||||
class="waning-cards noScollLine"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="warning-image">
|
||||
<img :src="item.yjTp" alt="预警图片" />
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item">
|
||||
<span class="label">车牌号：</span>
|
||||
<span>{{ item.yjClcph }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">相似度：</span>
|
||||
<span class="highlight">{{ item.xsd }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span>{{ item.yjSj }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.yjDz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList.data.length == 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance } from "vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 2,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
jczid: props.jczId
|
||||
});
|
||||
// 获取预警数据
|
||||
const getPageList = () => {
|
||||
loading.value = true;
|
||||
jczgetPageList(linkQuery.value)
|
||||
.then((res) => {
|
||||
warningList.data =
|
||||
linkQuery.value.pageNum == 1
|
||||
? res.records
|
||||
: warningList.data.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("预警数据请求错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//滚动
|
||||
const rollingLoading = () => {
|
||||
if (warningList.data.length < warningList.total) {
|
||||
linkQuery.value.pageNum++;
|
||||
getPageList();
|
||||
}
|
||||
};
|
||||
getPageList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.waning-cards {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/bg_10.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(250, 177, 21, 0.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffac26;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
118
src/views/StationLevel/layout/FlowStatistics.vue
Normal file
118
src/views/StationLevel/layout/FlowStatistics.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="flow-grid">
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="64" src="@/assets/images/bg_06.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林人员</span>
|
||||
<span class="flow-number">{{ carAccess.rlsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="64" src="@/assets/images/bg_06.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林人员</span>
|
||||
<span class="flow-number">{{ carAccess.clsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="64" src="@/assets/images/bg_07.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林车辆</span>
|
||||
<span class="flow-number">{{ personneAccess.rlsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="64" src="@/assets/images/bg_07.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林车辆</span>
|
||||
<span class="flow-number">{{ personneAccess.clsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以在这里添加需要的响应式数据和方法
|
||||
import { jczgetcountCrl, jczGzrycountCrl } from "@/api/mosty-jcz";
|
||||
import { ref } from "vue";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const personneAccess = ref({
|
||||
clsl: 0,
|
||||
rlsl: 0
|
||||
});
|
||||
const carAccess = ref({
|
||||
clsl: 0,
|
||||
rlsl: 0
|
||||
});
|
||||
|
||||
const getcountCrl = () => {
|
||||
jczgetcountCrl({ kkId: props.jczId })
|
||||
.then((res) => {
|
||||
personneAccess.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
const GzrycountCrl = () => {
|
||||
jczGzrycountCrl({ kkId: props.jczId })
|
||||
.then((res) => {
|
||||
carAccess.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
GzrycountCrl();
|
||||
getcountCrl();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 22px;
|
||||
padding: 10px 10px 10px 20px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.flow-icon {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.flow-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flow-label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flow-number {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
margin-top: 5px;
|
||||
font-family: "HANYILINGXINTIJIAN";
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
</style>
|
||||
68
src/views/StationLevel/layout/PeoCollection.vue
Normal file
68
src/views/StationLevel/layout/PeoCollection.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="peo-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.rzhy }}</div>
|
||||
<div class="f14">人证核验</div>
|
||||
<div><img src="@/assets/images/bg_03.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.wgtx }}</div>
|
||||
<div class="f14">无感通行</div>
|
||||
<div><img src="@/assets/images/bg_04.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.sczd }}</div>
|
||||
<div class="f14">手持终端登记</div>
|
||||
<div><img src="@/assets/images/bg_05.png" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以在这里添加需要的响应式数据和方法
|
||||
import { jczCountWay } from "@/api/mosty-jcz";
|
||||
import { ref } from "vue";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
|
||||
const personnelData = ref({
|
||||
rzhy: 0,
|
||||
sczd: 0,
|
||||
wgtx: 0
|
||||
});
|
||||
|
||||
const countWay = () => {
|
||||
jczCountWay({ kkId: props.jczId })
|
||||
.then((res) => {
|
||||
personnelData.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
countWay();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.peo-cards {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
color: #00f0ff;
|
||||
margin-bottom: 5px;
|
||||
font-family: "HANYILINGXINTIJIAN";
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
</style>
|
||||
158
src/views/StationLevel/layout/PeoWarning.vue
Normal file
158
src/views/StationLevel/layout/PeoWarning.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div
|
||||
class="waning-cards noScollLine"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="warning-image">
|
||||
<img :src="item.yjTp" alt="预警图片" />
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item">
|
||||
<span class="label">姓名：</span>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item flex">
|
||||
<span class="label">性别：</span>
|
||||
<dict-tag
|
||||
:options="D_BZ_XB"
|
||||
:value="IdCard(item.yjRysfzh, 3)"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">相似度：</span>
|
||||
<span class="highlight">{{ item.xsd }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span>{{ item.yjSj }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.yjDz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList.data.length == 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance } from "vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import { IdCard } from "@/utils/dict.js";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
jczid: props.jczId
|
||||
});
|
||||
// 获取预警数据
|
||||
const getPageList = () => {
|
||||
loading.value = true;
|
||||
jczgetPageList(linkQuery.value)
|
||||
.then((res) => {
|
||||
warningList.data =
|
||||
linkQuery.value.pageNum == 1
|
||||
? res.records
|
||||
: warningList.data.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("预警数据请求错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//滚动
|
||||
const rollingLoading = () => {
|
||||
if (warningList.data.length < warningList.total) {
|
||||
linkQuery.value.pageNum++;
|
||||
getPageList();
|
||||
}
|
||||
};
|
||||
getPageList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.waning-cards {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/bg_10.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(250, 177, 21, 0.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffac26;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
97
src/views/StationLevel/layout/VideoFoot.vue
Normal file
97
src/views/StationLevel/layout/VideoFoot.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="image-carousel">
|
||||
<div class="control-button prev" @click="prevImage">
|
||||
<img src="@/assets/images/icon_08.png" alt="">
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div class="hh100" :style="{transform: `translateX(-${currentIndex * 100}%)`}">
|
||||
<ul class="image-wrapper" style="margin-bottom:1%;">
|
||||
<li v-for="(image, index) in images" :key="index" class="image-item">
|
||||
<img :src="image" alt="carousel image">
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="image-wrapper">
|
||||
<li v-for="(image, index) in images" :key="index" class="image-item">
|
||||
<img :src="image" alt="carousel image">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="control-button next" @click="nextImage">
|
||||
<img src="@/assets/images/icon_07.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
images: [
|
||||
require('@/assets/images/person.png'),
|
||||
require('@/assets/images/person.png'),
|
||||
require('@/assets/images/person.png'),
|
||||
require('@/assets/images/person.png')
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
prevImage() {
|
||||
this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.images.length - 1
|
||||
},
|
||||
nextImage() {
|
||||
this.currentIndex = this.currentIndex < this.images.length - 1 ? this.currentIndex + 1 : 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image-carousel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding: 30px 20px;
|
||||
box-sizing: border-box;
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: flex;
|
||||
height: 49.5%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
width: 24%;
|
||||
margin: 0 1%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.control-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
&.prev {
|
||||
left: 0;
|
||||
}
|
||||
&.next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
src/views/StationLevel/layout/VideoMore.vue
Normal file
141
src/views/StationLevel/layout/VideoMore.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="video-more-container">
|
||||
<div class="switch-btn prev" @click="handlePrev">
|
||||
<img src="@/assets/images/icon_08.png" alt="">
|
||||
</div>
|
||||
<div class="video-grid">
|
||||
<div v-for="index in 4" :key="index" class="video-cell">
|
||||
<div class="video-wrapper">
|
||||
<video class="video-player" controls>
|
||||
<source src="" type="video/mp4">
|
||||
</video>
|
||||
<div class="video-controls">
|
||||
<div class="time-display">01:32</div>
|
||||
<div class="control-buttons">
|
||||
<i class="el-icon-video-play"></i>
|
||||
<i class="el-icon-refresh-right"></i>
|
||||
<i class="el-icon-full-screen"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="switch-btn next" @click="handleNext">
|
||||
<img src="@/assets/images/icon_07.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VideoMore',
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
totalPages: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePrev() {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--
|
||||
}
|
||||
},
|
||||
handleNext() {
|
||||
if (this.currentPage < this.totalPages) {
|
||||
this.currentPage++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-more-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.switch-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
|
||||
&.prev {
|
||||
left: 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-cell {
|
||||
position: relative;
|
||||
background: url('~@/assets/images/bg13.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
&:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
src/views/StationLevel/layout/WarningCount.vue
Normal file
159
src/views/StationLevel/layout/WarningCount.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="waning-cards">
|
||||
<div class="stat-card">
|
||||
<div class="flex align-center mb10">
|
||||
<img src="~@/assets/images/icon-05.png" alt="" />
|
||||
<div class="stat-title">
|
||||
<div class="mt4">人员预警</div>
|
||||
<div class="num">{{ dataList.RyData.total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-details">
|
||||
<div
|
||||
class="stat-item red"
|
||||
v-for="(item, index) in dataList.RyData.YjData"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="require(`@/assets/images/icon-0${index}.png`)" alt="" />
|
||||
<span class="label">{{ item.jbmc }}:</span>
|
||||
<span class="value mr10">{{ item.yjsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="flex mb10">
|
||||
<img src="~@/assets/images/icon-04.png" alt="" />
|
||||
<div>
|
||||
<div class="stat-title mt4">车辆预警</div>
|
||||
<div class="num1 mr10">{{ dataList.CarlData.total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-details">
|
||||
<div
|
||||
class="stat-item red"
|
||||
v-for="(item, index) in dataList.CarlData.ClData"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="require(`@/assets/images/icon-0${index}.png`)" alt="" />
|
||||
<span class="label">{{ item.jbmc }}:</span>
|
||||
<span class="value mr10">{{ item.yjsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { jczgetYjdjtj } from "@/api/mosty-jcz";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const dataList = reactive({
|
||||
RyData: {
|
||||
YjData: [],
|
||||
total: 0
|
||||
},
|
||||
CarlData: {
|
||||
ClData: [],
|
||||
total: 0
|
||||
}
|
||||
});
|
||||
const getjczgetYjdjtj = () => {
|
||||
jczgetYjdjtj({ jczid: props.jczId, yjLx: 1 }).then((res) => {
|
||||
dataList.RyData.YjData = res.map((item, index) => {
|
||||
dataList.RyData.total = +item.yjsl;
|
||||
return { ...item };
|
||||
});
|
||||
});
|
||||
};
|
||||
const getCarlData = () => {
|
||||
jczgetYjdjtj({ jczid: props.jczId, yjLx: 2 }).then((res) => {
|
||||
dataList.CarlData.ClData = res.map((item) => {
|
||||
dataList.CarlData.total = +item.yjsl;
|
||||
return { ...item };
|
||||
});
|
||||
});
|
||||
};
|
||||
getjczgetYjdjtj();
|
||||
getCarlData();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.waning-cards {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
.num {
|
||||
font-size: 20px;
|
||||
background: linear-gradient(0deg, #e38f2c 10%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-family: "HANYILINGXINTIJIAN";
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.num1 {
|
||||
font-size: 20px;
|
||||
background: linear-gradient(0deg, #d83327 10%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-family: "HANYILINGXINTIJIAN";
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.stat-total {
|
||||
font-size: 32px;
|
||||
color: #00f0ff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-details {
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
&.red .value {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.orange .value {
|
||||
color: #ff7a45;
|
||||
}
|
||||
|
||||
&.yellow .value {
|
||||
color: #ffc53d;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<div class="flex align-center">
|
||||
报备单位：
|
||||
<MOSTY.Department
|
||||
v-model="listQuery.ssbmdm"
|
||||
placeholder="请选择部门"
|
||||
@getDepValue="changeDep"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
class="info"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
:rules="rules"
|
||||
>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">检查站设置</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 800,
|
||||
lx: 'jcz',
|
||||
isRadio: true
|
||||
}"
|
||||
v-model="listQuery.jczList"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
|
||||
<div class="peolist" v-if="listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{
|
||||
listQuery.jczList.jczmc
|
||||
}}</el-tag>
|
||||
</div>
|
||||
<div class="peolist" v-if="listQuery.jczmc && !listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{
|
||||
listQuery.jczmc
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">班次设置</div>
|
||||
<div class="info">
|
||||
<el-form-item prop="kssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcKssj"
|
||||
:disabled="isDetail"
|
||||
placeholder="开始时间"
|
||||
format="HH:mm:ss"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bcKts">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.bcKtsDict"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dic.D_QW_BC_KTS"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcJssj"
|
||||
:disabled="isDetail"
|
||||
format="HH:mm:ss"
|
||||
placeholder="结束时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">负责人</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
@change="handleFzr"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 700,
|
||||
lx: 'mj',
|
||||
rowKey: 'id',
|
||||
isRadio: true
|
||||
}"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrXm">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrXm"
|
||||
placeholder="负责人"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrSfzh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrSfzh"
|
||||
placeholder="身份证"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrLxdh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrLxdh"
|
||||
placeholder="负责人电话"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">当班人员</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="mjData" label="当班民警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ mjData ? mjData.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'mj',
|
||||
rowKey: 'ryid',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="mjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in mjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="fjData" label="当班辅警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ fjData ? fjData.length : 0 }}
|
||||
</div>
|
||||
<!-- :deptment="props.dep"
|
||||
:dic="props.dic" -->
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:configer="{ lx: 'fj', placement: 'top-start' }"
|
||||
v-model="fjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in fjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">装备</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="zdList" label="智能装备">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.zdList ? listQuery.zdList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:deptment="deptment"
|
||||
:configer="{
|
||||
lx: 'znzb',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.zdList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.zdList"
|
||||
:key="item"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <div style="width: 100%">
|
||||
<el-form-item prop="jyqxList" label="警用器械">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.jyqxList ? listQuery.jyqxList.length : 0 }}
|
||||
</div>
|
||||
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{ lx: 'jyqx', placement: 'top-start' }"
|
||||
v-model="listQuery.jyqxList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.jyqxList"
|
||||
:key="item"
|
||||
>{{ item.qxMc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item
|
||||
v-for="(item, idx) in listQuery.jyqxList"
|
||||
:key="idx"
|
||||
:label="item.qxMc"
|
||||
>
|
||||
<el-input-number
|
||||
:disabled="isDetail"
|
||||
style="width: 100%"
|
||||
v-model="item.qxsl"
|
||||
class="mx-4"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div> -->
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="clList" label="巡防车辆">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.clList ? listQuery.clList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'cl',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.clList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.clList"
|
||||
:key="item"
|
||||
>{{ item.cph }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">警用器械</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<div
|
||||
v-for="(item, index) in listQuery.qxList"
|
||||
:key="index"
|
||||
style="width: 30%; margin-bottom: 10px"
|
||||
>
|
||||
<div class="flex">
|
||||
<div style="width: 30%">{{ item.qxmc }}：</div>
|
||||
<el-input-number v-model="item.qxsl" :step="1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import ChooseTable from "@/components/chooseList/chooseTable.vue";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isDetail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const mjData = ref([]);
|
||||
const fjData = ref([]);
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
if (row) {
|
||||
listQuery.value = { ...row };
|
||||
if (row.ryList.length > 0) {
|
||||
const data = fz(row.ryList);
|
||||
mjData.value = data.filter((item) => item.fl == "01");
|
||||
fjData.value = data.filter((item) => item.fl == "02");
|
||||
}
|
||||
if (listQuery.value.qxList.length == 0) {
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
} else {
|
||||
pageType.value = "add";
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 验证规则
|
||||
const rules = ref({
|
||||
spbt: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标题",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
//保存
|
||||
|
||||
const _onSave = () => {
|
||||
const data = [...mjData.value, ...fjData.value];
|
||||
console.log(data, "-------------------------------------");
|
||||
|
||||
listQuery.value.ryList = ChegeMj(data);
|
||||
const time = new Date();
|
||||
listQuery.value.bbSjBbrq = timeValidate(time);
|
||||
switch (listQuery.value.bcKtsDict) {
|
||||
case "01":
|
||||
listQuery.value.bcKts = 1;
|
||||
break;
|
||||
case "02":
|
||||
listQuery.value.bcKts = 2;
|
||||
case "03":
|
||||
listQuery.value.bcKts = 4;
|
||||
case "04":
|
||||
listQuery.value.bcKts = 5;
|
||||
case "05":
|
||||
listQuery.value.bcKts = 6;
|
||||
case "06":
|
||||
listQuery.value.bcKts = 7;
|
||||
case "07":
|
||||
listQuery.value.bcKts = 8;
|
||||
}
|
||||
|
||||
listQuery.value.jczid = listQuery.value.jczList.id;
|
||||
listQuery.value.jczmc = listQuery.value.jczList.jczmc;
|
||||
if (pageType.value == "add") {
|
||||
jczsavel(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
Xfbbupdate(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
};
|
||||
const ChegeMj = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
xfllld: item.id,
|
||||
ryXm: item.xm,
|
||||
rysfzh: item.sfzh,
|
||||
ryJzlx: item.fl,
|
||||
ryMfjilb: item.ryid,
|
||||
ryLxdh: item.lxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
const fz = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
id: item.xfllld,
|
||||
xm: item.ryXm,
|
||||
sfzh: item.rysfzh,
|
||||
fl: item.ryJzlx,
|
||||
ryid: item.ryMfjilb,
|
||||
lxdh: item.ryLxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
//
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const JczShow = ref(false);
|
||||
//负责人
|
||||
const handleFzr = (val) => {
|
||||
listQuery.value.fzrXm = val.xm;
|
||||
listQuery.value.fzrId = val.ryid;
|
||||
listQuery.value.fzrSfzh = val.sfzh;
|
||||
listQuery.value.fzrLxdh = val.lxdh;
|
||||
};
|
||||
const deptment = ref({});
|
||||
const changeDep = (val) => {
|
||||
deptment.value = val;
|
||||
};
|
||||
const changeJCZ = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.file {
|
||||
height: 400px;
|
||||
border: 1px solid #e9e9e9;
|
||||
// border-radius: ;
|
||||
color: #777575;
|
||||
// border-left: 0;
|
||||
}
|
||||
|
||||
: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;
|
||||
color: #000;
|
||||
}
|
||||
.bblxItem {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
color: #000;
|
||||
.btItem {
|
||||
width: 180px;
|
||||
padding: 7px 0;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.gapline {
|
||||
height: 1px;
|
||||
border-top: 1px dashed #66cbff;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.dl-car {
|
||||
min-width: 200px;
|
||||
display: inline-block;
|
||||
border: solid 1px #66cbff;
|
||||
margin: 20px 30px 0 0;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
dt {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #0380c0;
|
||||
padding: 0 10px 0 40px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px #66cbff;
|
||||
background: #e3f5ff;
|
||||
height: 30px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.peo {
|
||||
border-bottom: solid 1px #01d608;
|
||||
background: #dbf3cf;
|
||||
color: #339d00;
|
||||
}
|
||||
}
|
||||
.dl-car::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -18px;
|
||||
left: -18px;
|
||||
width: 52px;
|
||||
height: 49px;
|
||||
background: url("~@/assets/images/peo.png");
|
||||
}
|
||||
}
|
||||
.num {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid #bebebe;
|
||||
// background-color: #1b294c;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.subBtn {
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--default {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.deBtn {
|
||||
padding: 0px 10px;
|
||||
background: rgb(35, 176, 241);
|
||||
border-radius: 18px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
src/views/backOfficeSystem/Report/ReportingCenter/index.vue
Normal file
187
src/views/backOfficeSystem/Report/ReportingCenter/index.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="单位保安信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #bbZt="{ row }">
|
||||
<dict-tag :options="D_QW_BBZT" :value="row.bbZt" :tag="false" />
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
:dic="{ D_BZ_RYMFJLB, D_BZ_JYQXFL, D_BZ_JLLX, D_BZ_JYQXFL, D_QW_BC_KTS }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { XfbbselectPage, JczXfbb } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_RYMFJLB,
|
||||
D_BZ_JYQXFL,
|
||||
D_BZ_XFQDJ,
|
||||
D_BZ_SF,
|
||||
D_BZ_JLLX,
|
||||
D_QW_BBZT,
|
||||
D_QW_BC_KTS
|
||||
} = proxy.$dict(
|
||||
"D_BZ_RYMFJLB",
|
||||
"D_BZ_JYQXFL",
|
||||
"D_BZ_XFQDJ",
|
||||
"D_BZ_SF",
|
||||
"D_BZ_JLLX",
|
||||
"D_QW_BBZT",
|
||||
"D_QW_BC_KTS"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "负责人",
|
||||
prop: "fzrXm",
|
||||
placeholder: "请输入负责人",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "报备状态",
|
||||
prop: "bbZt",
|
||||
placeholder: "报备状态",
|
||||
showType: "select",
|
||||
options: D_QW_BBZT
|
||||
}
|
||||
]);
|
||||
const detailDiloag = ref();
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "负责人姓名", prop: "fzrXm" },
|
||||
{ label: "检查站名称", prop: "jczmc" },
|
||||
{ label: "报备状态", prop: "bbZt", showSolt: true }, //D_QW_BBZT
|
||||
{ label: "报备时间结束时间", prop: "bbSjJssj" },
|
||||
{ label: "报备时间开始时间", prop: "bbSjKssj" },
|
||||
{ label: "班次结束时间", prop: "bcJssj" },
|
||||
{ label: "班次开始时间", prop: "bcKssj" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getjczgetXfllList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
XfbbselectPage({ pageSize: 10, pageCurrent: 1 }).then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
let url = "";
|
||||
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
JczXfbb(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
const searchBox = ref();
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
// 下载
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="xm" label="姓名">
|
||||
<el-input
|
||||
v-model="listQuery.xm"
|
||||
placeholder="请输入姓名"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="gmsfzhm" label="公民身份证号码">
|
||||
<el-input
|
||||
v-model="listQuery.gmsfzhm"
|
||||
placeholder="请输入公民身份证号码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="jrsj" label="加入时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.jrsj"
|
||||
type="datetime"
|
||||
placeholder="请选中结束时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 40%"
|
||||
prop="zdryflgklbdm"
|
||||
label="重点人员分类管控类别代码"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.zdryflgklbdm"
|
||||
placeholder="请输入重点人员分类管控类别代码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sfjc" style="width: 40%" label="省份简称">
|
||||
<el-select
|
||||
v-model="listQuery.sfjc"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_XZQHDM"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" label="检查站名称">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.kkMc">{{ listQuery.kkMc }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import { RymdinsertEntity, RymdeditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
}
|
||||
],
|
||||
gmsfzhm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号"
|
||||
}
|
||||
],
|
||||
jrsj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入加入时间",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {});
|
||||
let pageType = ref("add");
|
||||
//打开弹窗
|
||||
const showJcz = ref(false);
|
||||
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.kkMc = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
listQuery.value.type = "02";
|
||||
if (pageType.value == "add") {
|
||||
RymdinsertEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
RymdeditEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人员黑名单">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sfjc="{ row }">
|
||||
<dict-tag :value="row.sfjc" :options="D_BZ_XZQHDM" :tag="false" />
|
||||
</template>
|
||||
<template #type="{ row }">
|
||||
{{ row.type == "02" ? "黑名单" : "白名单" }}
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_XZQHDM }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { RymdselectPage, RymddeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_XZQHDM } = proxy.$dict("D_BZ_XZQHDM");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "重点人员分类管控类别代码",
|
||||
prop: "zdryflgklbdm",
|
||||
placeholder: "请输入重点人员分类管控类别代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "公民身份证号码",
|
||||
prop: "gmsfzhm",
|
||||
placeholder: "请输入公民身份证号码",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
||||
{ label: "公民身份证号码", prop: "gmsfzhm", showOverflowTooltip: true },
|
||||
{ label: "加入时间", prop: "jrsj", showOverflowTooltip: true },
|
||||
{ label: "卡口名称", prop: "kkMc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "省份简称",
|
||||
prop: "sfjc",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{
|
||||
label: "名单类型",
|
||||
prop: "type",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{
|
||||
label: "重点人员分类管控类别代码",
|
||||
prop: "zdryflgklbdm",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({ type: "02" });
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
RymdselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
RymddeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 40%"
|
||||
prop="jdcsysmc"
|
||||
label="机动车所有人姓名"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.jdcsysmc"
|
||||
placeholder="请输入机动车所有人姓名"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="gmsfzh" label="公民身份证号码">
|
||||
<el-input
|
||||
v-model="listQuery.gmsfzh"
|
||||
placeholder="请输入公民身份证号码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="clxh" label="车辆型号">
|
||||
<el-input
|
||||
v-model="listQuery.clxh"
|
||||
placeholder="请输入车辆型号"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="hphm" label="机动车号牌号码">
|
||||
<el-input
|
||||
v-model="listQuery.hphm"
|
||||
placeholder="请输入机动车号牌号码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="jrsj" label="加入时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.jrsj"
|
||||
type="datetime"
|
||||
placeholder="请选中结束时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="sfjc" style="width: 40%" label="省份简称">
|
||||
<el-select
|
||||
v-model="listQuery.sfjc"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_XZQHDM"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cllxdm" style="width: 40%" label="机动车车辆类型">
|
||||
<el-select
|
||||
v-model="listQuery.cllxdm"
|
||||
class="m-2"
|
||||
placeholder="请选择机动车车辆类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_CLLX"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="csysdm" style="width: 40%" label="机动车车身颜色">
|
||||
<el-select
|
||||
v-model="listQuery.csysdm"
|
||||
class="m-2"
|
||||
placeholder="请选择机动车车身颜色"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_CLYS"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="hpzldm"
|
||||
style="width: 40%"
|
||||
label="机动车号牌种类颜色"
|
||||
>
|
||||
<el-select
|
||||
v-model="listQuery.hpzldm"
|
||||
class="m-2"
|
||||
placeholder="请选择机动车号牌种类颜色"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_JCGL_JYCL_HPYSLB"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" label="检查站名称">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.kkMc">{{ listQuery.kkMc }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import { ClhmdinsertEntity, ClhmdeditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
}
|
||||
],
|
||||
gmsfzhm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号"
|
||||
}
|
||||
],
|
||||
jrsj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入加入时间",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {});
|
||||
let pageType = ref("add");
|
||||
//打开弹窗
|
||||
const showJcz = ref(false);
|
||||
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.kkMc = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
ClhmdinsertEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
ClhmdeditEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆白名单">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sfjc="{ row }">
|
||||
<dict-tag :value="row.sfjc" :options="D_BZ_XZQHDM" :tag="false" />
|
||||
</template>
|
||||
<template #csysdm="{ row }">
|
||||
<dict-tag :value="row.csysdm" :options="D_BZ_CLYS" :tag="false" />
|
||||
</template>
|
||||
|
||||
<template #type="{ row }">
|
||||
{{ row.type == "02" ? "黑名单" : "白名单" }}
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_XZQHDM, D_BZ_CLLX, D_BZ_CLYS, D_JCGL_JYCL_HPYSLB }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { ClbmdselectPage, ClbmdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_XZQHDM, D_BZ_CLLX, D_BZ_CLYS, D_JCGL_JYCL_HPYSLB } = proxy.$dict(
|
||||
"D_BZ_XZQHDM",
|
||||
"D_BZ_CLLX",
|
||||
"D_BZ_CLYS",
|
||||
"D_JCGL_JYCL_HPYSLB"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "重点人员分类管控类别代码",
|
||||
prop: "zdryflgklbdm",
|
||||
placeholder: "请输入重点人员分类管控类别代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "公民身份证号码",
|
||||
prop: "gmsfzhm",
|
||||
placeholder: "请输入公民身份证号码",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "机动车号牌号码", prop: "hphm", showOverflowTooltip: true },
|
||||
{ label: "车辆型号", prop: "clxh", showOverflowTooltip: true },
|
||||
{
|
||||
label: "机动车车身颜色代码",
|
||||
prop: "csysdm",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{ label: "卡口名称", prop: "kkMc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "省份简称",
|
||||
prop: "sfjc",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{
|
||||
label: "名单类型",
|
||||
prop: "type",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({ type: "01" });
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
ClbmdselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
ClbmdeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
210
src/views/backOfficeSystem/peopleManag/Givevehicles/index.vue
Normal file
210
src/views/backOfficeSystem/peopleManag/Givevehicles/index.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆黑名单">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sfjc="{ row }">
|
||||
<dict-tag :value="row.sfjc" :options="D_BZ_XZQHDM" :tag="false" />
|
||||
</template>
|
||||
<template #csysdm="{ row }">
|
||||
<dict-tag :value="row.csysdm" :options="D_BZ_CLYS" :tag="false" />
|
||||
</template>
|
||||
|
||||
<template #type="{ row }">
|
||||
{{ row.type == "02" ? "黑名单" : "白名单" }}
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_XZQHDM, D_BZ_CLLX, D_BZ_CLYS, D_JCGL_JYCL_HPYSLB }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { ClhmdselectPage, ClhmddeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_XZQHDM, D_BZ_CLLX, D_BZ_CLYS, D_JCGL_JYCL_HPYSLB } = proxy.$dict(
|
||||
"D_BZ_XZQHDM",
|
||||
"D_BZ_CLLX",
|
||||
"D_BZ_CLYS",
|
||||
"D_JCGL_JYCL_HPYSLB"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "机动车所有人",
|
||||
prop: "jdcsysmc",
|
||||
placeholder: "请输入机动车所有人",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "重点人员分类管控类别代码",
|
||||
prop: "zdryflgklbdm",
|
||||
placeholder: "请输入重点人员分类管控类别代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "公民身份证号码",
|
||||
prop: "gmsfzh",
|
||||
placeholder: "请输入公民身份证号码",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "机动车号牌号码", prop: "hphm", showOverflowTooltip: true },
|
||||
{ label: "车辆型号", prop: "clxh", showOverflowTooltip: true },
|
||||
{
|
||||
label: "机动车车身颜色代码",
|
||||
prop: "csysdm",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{ label: "卡口名称", prop: "kkMc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "省份简称",
|
||||
prop: "sfjc",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{
|
||||
label: "名单类型",
|
||||
prop: "type",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref();
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
ClhmdselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
ClhmddeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" label="检查站名称">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.kkMc">{{ listQuery.kkMc }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="检查站标识码" style="width: 40%">
|
||||
<el-input v-model="listQuery.jczmsm" placeholder="检查站标识码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号" prop="hphm" style="width: 40%">
|
||||
<el-input v-model="listQuery.hphm" placeholder="车牌号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车侧图" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.cct"
|
||||
></MOSTY.Upload
|
||||
>{{ listQuery.cct }}
|
||||
</el-form-item>
|
||||
<el-form-item label="车顶图" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.cdt"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="车前标" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.cqb"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="车后标" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.chb"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车前盖图" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.cqgt"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="车厢图" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.cxt"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="底盘图" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.dpt"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车后部物品特征代码" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.chbwptzdm"
|
||||
placeholder="车后部物品特征代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆异常痕迹代码" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.clychjdm"
|
||||
placeholder="车辆异常痕迹代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆张贴物品特征代码" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.clztwptzdm"
|
||||
placeholder="车辆张贴物品特征代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车前部物品特征代码" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.cqbwptzdm"
|
||||
placeholder="车前部物品特征代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="通行事件标识码" style="width: 40%">
|
||||
<el-input v-model="listQuery.txsjbsm" placeholder="通行事件标识码" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="通行时间" prop="txsj" style="width: 40%">
|
||||
<el-date-picker
|
||||
v-model="listQuery.txsj"
|
||||
type="datetime"
|
||||
placeholder="请选中通行时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import { GjcltxinsertEntity, GjcltxeditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
sbmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源名称"
|
||||
}
|
||||
],
|
||||
sblx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择感知源类型"
|
||||
}
|
||||
],
|
||||
sbbh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源编号",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
wd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入维度"
|
||||
}
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经度"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {});
|
||||
let pageType = ref("add");
|
||||
const showJcz = ref(false);
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.kkMc = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
listQuery.value.cct = row.cct.split(",");
|
||||
listQuery.value.cdt = row.cdt.split(",");
|
||||
listQuery.value.chb = row.chb.split(",");
|
||||
listQuery.value.cqb = row.cqb.split(",");
|
||||
listQuery.value.cqgt = row.cqgt.split(",");
|
||||
listQuery.value.cxt = row.cxt.split(",");
|
||||
listQuery.value.dpt = row.dpt.split(",");
|
||||
console.log(listQuery.value);
|
||||
} else {
|
||||
listQuery.value = {
|
||||
cct: [],
|
||||
cdt: [],
|
||||
chb: [],
|
||||
cqb: [],
|
||||
cqgt: [],
|
||||
cxt: [],
|
||||
dpt: []
|
||||
};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
const promes = {
|
||||
cct: listQuery.value.cct.toString(),
|
||||
cdt: listQuery.value.cdt.toString(),
|
||||
chb: listQuery.value.chb.toString(),
|
||||
cqb: listQuery.value.cqb.toString(),
|
||||
cdt: listQuery.value.cdt.toString(),
|
||||
cqgt: listQuery.value.cqgt.toString(),
|
||||
cxt: listQuery.value.cxt.toString(),
|
||||
dpt: listQuery.value.dpt.toString()
|
||||
};
|
||||
if (pageType.value == "add") {
|
||||
GjcltxinsertEntity({ ...listQuery.value, ...promes }).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
GjcltxeditEntity({ ...listQuery.value, ...promes }).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log(listQuery.value);
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapbox {
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
::v-deep .el-icon svg {
|
||||
color: #000000 !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="过检车辆管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #cqgt="{ row }">
|
||||
<div class="phone">
|
||||
<el-image
|
||||
v-if="row.cqgt"
|
||||
:src="urlImg + row.cqgt"
|
||||
fit="cover"
|
||||
lazy
|
||||
/>
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_JCZLX, D_BZ_ZQLX, D_BZ_DLLX, D_BZ_JCZJB }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { GjcltxselectPage, GjcltxdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JCZLX, D_BZ_ZQLX, D_BZ_DLLX, D_BZ_JCZJB } = proxy.$dict(
|
||||
"D_BZ_JCZLX",
|
||||
"D_BZ_ZQLX",
|
||||
"D_BZ_DLLX",
|
||||
"D_BZ_JCZJB"
|
||||
);
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
label: "车辆张贴物品特征代码",
|
||||
prop: "clztwptzdm",
|
||||
placeholder: "车辆张贴物品特征代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "车后部物品特征代码",
|
||||
prop: "chbwptzdm",
|
||||
placeholder: "车后部物品特征代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "车前部物品特征代码",
|
||||
prop: "zqlx",
|
||||
placeholder: "车前部物品特征代码",
|
||||
showType: "input"
|
||||
},
|
||||
|
||||
{
|
||||
label: "车辆异常痕迹代码",
|
||||
prop: "clychjdm",
|
||||
placeholder: "请选择检查站类型",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{
|
||||
label: "车前盖图",
|
||||
prop: "cqgt",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{
|
||||
label: "车辆张贴物品特征代码",
|
||||
prop: "clztwptzdm",
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "车后部物品特征代码",
|
||||
prop: "chbwptzdm",
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{ label: "车前部物品特征代码", prop: "zqlx", showOverflowTooltip: true },
|
||||
{ label: "车辆异常痕迹代码", prop: "clychjdm", showOverflowTooltip: true },
|
||||
{
|
||||
label: "卡口名称",
|
||||
prop: "kkMc",
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
|
||||
{
|
||||
label: "机动车号牌号码",
|
||||
prop: "hphm",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
|
||||
{
|
||||
label: "通行时间",
|
||||
prop: "txsj",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
GjcltxselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
GjcltxdeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" label="检查站名称">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.kkMc">{{ listQuery.kkMc }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="检查站标识码" style="width: 40%">
|
||||
<el-input v-model="listQuery.jczmsm" placeholder="检查站标识码" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="过检人员身份证号"
|
||||
prop="gjrysfzh"
|
||||
style="width: 40%"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.gjrysfzh"
|
||||
placeholder="过检人员身份证号"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="过检人员姓名" prop="gjryxm" style="width: 40%">
|
||||
<el-input v-model="listQuery.gjryxm" placeholder="过检人员姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="佩戴眼镜特征代码" prop="rltzsj" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pdyjtzdm"
|
||||
placeholder="佩戴眼镜特征代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="人脸图" style="width: 15%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="1"
|
||||
v-model="listQuery.rlt"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="人脸特征数据" prop="rltzsj" style="width: 20%">
|
||||
<el-input v-model="listQuery.rltzsj" placeholder="人脸特征数据" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人脸特征数据" prop="rtzttzdm" style="width: 20%">
|
||||
<el-input
|
||||
v-model="listQuery.rtzttzdm"
|
||||
placeholder="人体姿态特征代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="人员图" prop="ryt" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
width="100%"
|
||||
:isImg="true"
|
||||
:limit="3"
|
||||
v-model="listQuery.ryt"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="三维人脸图像" prop="swrltx" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
width="100%"
|
||||
:isImg="true"
|
||||
:limit="3"
|
||||
v-model="listQuery.swrltx"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="上身着装特征代码"
|
||||
prop="sszztzdm"
|
||||
style="width: 40%"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.sszztzdm"
|
||||
placeholder="上身着装特征代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="下身着装特征代码"
|
||||
prop="xszztzdm"
|
||||
style="width: 40%"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.xszztzdm"
|
||||
placeholder="下身着装特征代码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="着冒特征代码" prop="zmtzdm" style="width: 40%">
|
||||
<el-input v-model="listQuery.zmtzdm" placeholder="着冒特征代码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="着鞋特征代码" prop="zxtzdm" style="width: 40%">
|
||||
<el-input v-model="listQuery.zxtzdm" placeholder="着鞋特征代码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="通行事件标识码" prop="zxtzdm" style="width: 40%">
|
||||
<el-input v-model="listQuery.txsjbsm" placeholder="通行事件标识码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="通行时间" prop="txsj" style="width: 40%">
|
||||
<el-date-picker
|
||||
v-model="listQuery.txsj"
|
||||
type="datetime"
|
||||
placeholder="请选中通行时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import { GjrytxinsertEntity, GjrytxeditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
sbmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源名称"
|
||||
}
|
||||
],
|
||||
sblx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择感知源类型"
|
||||
}
|
||||
],
|
||||
sbbh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源编号",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
wd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入维度"
|
||||
}
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经度"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref();
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {});
|
||||
let pageType = ref("add");
|
||||
const showJcz = ref(false);
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.kkMc = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
listQuery.value.rlt = row.rlt ? JSON.parse(row.rlt) : [];
|
||||
listQuery.value.swrltx = row.swrltx ? JSON.parse(row.swrltx) : [];
|
||||
listQuery.value.ryt = row.ryt ? JSON.parse(row.ryt) : [];
|
||||
} else {
|
||||
listQuery.value = {
|
||||
rlt: [],
|
||||
swrltx: [],
|
||||
ryt: []
|
||||
};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
const promes = {
|
||||
ryt: listQuery.value.rlt.toString(),
|
||||
swrltx: listQuery.value.swrltx.toString(),
|
||||
rlt: listQuery.value.rlt.toString()
|
||||
};
|
||||
|
||||
if (pageType.value == "add") {
|
||||
GjrytxinsertEntity({ ...listQuery.value, ...promes }).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
GjrytxeditEntity({ ...listQuery.value, ...promes }).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log();
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapbox {
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
::v-deep .el-icon svg {
|
||||
color: #000000 !important;
|
||||
}
|
||||
</style>
|
||||
241
src/views/backOfficeSystem/peopleManag/Inspector/index.vue
Normal file
241
src/views/backOfficeSystem/peopleManag/Inspector/index.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="过检人像管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #jczlx="{ row }">
|
||||
<dict-tag :value="row.jczlx" :options="D_BZ_JCZLX" :tag="false" />
|
||||
</template>
|
||||
<template #zqlx="{ row }">
|
||||
<dict-tag :options="D_BZ_ZQLX" :value="row.zqlx" :tag="false" />
|
||||
</template>
|
||||
<template #jczjb="{ row }">
|
||||
<dict-tag :options="D_BZ_JCZJB" :value="row.jczjb" :tag="false" />
|
||||
</template>
|
||||
<template #swrltx="{ row }">
|
||||
<div class="phone">
|
||||
<el-image
|
||||
v-if="row.swrltx"
|
||||
:src="urlImg + row.swrltx"
|
||||
fit="cover"
|
||||
lazy
|
||||
/>
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<template #ryt="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.ryt" :src="urlImg + row.ryt" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<template #rlt="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.rlt" :src="urlImg + row.rlt" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_JCZLX, D_BZ_ZQLX, D_BZ_DLLX, D_BZ_JCZJB }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { GjrytxselectPage, GjrytxdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JCZLX, D_BZ_ZQLX, D_BZ_DLLX, D_BZ_JCZJB } = proxy.$dict(
|
||||
"D_BZ_JCZLX",
|
||||
"D_BZ_ZQLX",
|
||||
"D_BZ_DLLX",
|
||||
"D_BZ_JCZJB"
|
||||
);
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
label: "过检人员姓名",
|
||||
prop: "gjryxm",
|
||||
placeholder: "请输入过检人员姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "过检人员身份证号",
|
||||
prop: "zqlx",
|
||||
placeholder: "请输入过检人员身份证号",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "过检人员姓名", prop: "gjryxm", showOverflowTooltip: true },
|
||||
{ label: "过检人员身份证号", prop: "gjrysfzh", showOverflowTooltip: true },
|
||||
{
|
||||
label: "卡口名称",
|
||||
prop: "kkMc",
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
|
||||
{
|
||||
label: "三维人脸图像",
|
||||
prop: "swrltx",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "人脸图",
|
||||
prop: "rlt",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "人员图",
|
||||
prop: "ryt",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "通行时间",
|
||||
prop: "txsj",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
GjrytxselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
GjrytxdeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,468 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div style="position: relative; width: 90px; height: 100px">
|
||||
<el-upload
|
||||
action="/mosty-api/mosty-base/minio/image/upload/id"
|
||||
:on-change="upImgFile"
|
||||
:on-success="upImg"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
|
||||
<el-icon v-else>
|
||||
<Plus></Plus>
|
||||
</el-icon>
|
||||
<span
|
||||
v-if="imgUrl"
|
||||
style="position: absolute; top: -52px; right: -20px"
|
||||
>
|
||||
<el-icon size="20" @click.stop="deletImg">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<el-form-item prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="listQuery.ssbm"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
clearable
|
||||
filterable
|
||||
:options="depList"
|
||||
:props="props"
|
||||
v-model:modelValue="listQuery.gldwdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号">
|
||||
<el-input
|
||||
v-model="listQuery.sbbh"
|
||||
placeholder="请输入设备编号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="scode" label="装备类型">
|
||||
<el-cascader
|
||||
v-model="listQuery.sblx"
|
||||
:options="dict.D_BZ_ZBLX_LZ"
|
||||
:props="propsTree"
|
||||
clearable
|
||||
:show-all-levels="false"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbmc" label="装备名称">
|
||||
<el-input
|
||||
v-model="listQuery.sbmc"
|
||||
placeholder="请输入装备名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备型号">
|
||||
<el-input
|
||||
v-model="listQuery.xh"
|
||||
placeholder="请输入装备型号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联GPSID">
|
||||
<el-input
|
||||
v-model="listQuery.glgpsid"
|
||||
placeholder="请输入装备型号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备sim卡号">
|
||||
<el-input
|
||||
v-model="listQuery.sbsim"
|
||||
placeholder="请输入装备型号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备网络类型">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.sbwllx"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_JCGL_TCSB_WLLX"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="装备厂商">
|
||||
<el-input
|
||||
v-model="listQuery.sccs"
|
||||
placeholder="请输入装备厂商"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cgrq" label="购置日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="listQuery.cgrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
:disabledDate="disableCgrq"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dqsj" label="到期日期">
|
||||
<el-date-picker
|
||||
@focus="cgrqTs"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="listQuery.dqsj"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
:disabledDate="disableDqsj"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item class="tiaos" prop="sbbh" label="设备编号">
|
||||
<el-input
|
||||
v-model="listQuery.sbbh"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item prop="zbzt" label="设备状态">
|
||||
<el-select
|
||||
v-model="listQuery.zbzt"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_ZDY_SBZT"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item prop="sfrh" label="是否融合">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="listQuery.sfrh"
|
||||
placeholder="请选择是否融合"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_SF"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sfzy" label="是否专业">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="listQuery.sfzy"
|
||||
placeholder="请选择是否专业"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_SF"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sfxt" label="是否通讯">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="listQuery.sfxt"
|
||||
placeholder="请选择是否通讯"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in D_BZ_SF"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { TcsbsaveTcsbsave, Tcsbupdate } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入辅警姓名"
|
||||
}
|
||||
],
|
||||
sfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号码"
|
||||
}
|
||||
],
|
||||
xbdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择性别",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
mzdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择民族"
|
||||
}
|
||||
],
|
||||
zzmm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择政治面貌"
|
||||
}
|
||||
],
|
||||
hyzk: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择婚姻状况"
|
||||
}
|
||||
],
|
||||
whcddm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择学历"
|
||||
}
|
||||
],
|
||||
lxdh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入联系电话"
|
||||
}
|
||||
],
|
||||
lx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择人员类别"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const propsTree = ref({
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
const changeZblx = (val) => {
|
||||
listQuery.value.sblx = val ? val : "";
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
TcsbsaveTcsbsave(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
Tcsbupdate(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
src/views/backOfficeSystem/peopleManag/Intelligent/index.vue
Normal file
216
src/views/backOfficeSystem/peopleManag/Intelligent/index.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="智能装备管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sblx="{ row }">
|
||||
<dict-tag :options="zbAllList" :value="row.sblx" :tag="false" />
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
<!-- <el-link type="primary" @click="down(row)">附件下载</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_ZBLX_LZ, D_BZ_SF, D_ZDY_SBZT, D_JCGL_TCSB_WLLX }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { TcsbselectList, TcsbtbJczTcsb } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const {
|
||||
D_JCGL_TCSB_SBLX,
|
||||
D_BZ_SF,
|
||||
D_ZDY_SBZT,
|
||||
D_JCGL_TCSB_WLLX,
|
||||
D_BZ_ZBLX_LZ
|
||||
} = proxy.$dict(
|
||||
"D_JCGL_TCSB_SBLX",
|
||||
"D_BZ_SF",
|
||||
"D_ZDY_SBZT",
|
||||
"D_JCGL_TCSB_WLLX",
|
||||
"D_BZ_ZBLX_LZ"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
label: "设备名称",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入设备名称",
|
||||
showType: "input"
|
||||
}
|
||||
// {
|
||||
// label: "装备类型",
|
||||
// prop: "sblx",
|
||||
// placeholder: "装备类型",
|
||||
// showType: "cascader",
|
||||
// options: D_BZ_ZBLX_LZ
|
||||
// }
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "设备名称", prop: "sbmc" },
|
||||
{ label: "使用单位名称", prop: "sydwmc" },
|
||||
{ label: "设备类型", prop: "sblx", showSolt: true },
|
||||
{ label: "设备sim卡号", prop: "sbsim" },
|
||||
{ label: "设备编号", prop: "sbbh" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
TcsbselectList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
TcsbtbJczTcsb(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
const zbAllList = ref([]);
|
||||
watch(
|
||||
() => D_BZ_ZBLX_LZ.value,
|
||||
(val) => {
|
||||
val.forEach((p) => {
|
||||
zbAllList.value.push(p);
|
||||
if (p.itemList && p.itemList.length > 0) {
|
||||
getChildren(p);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
// 递归处理数据
|
||||
const getChildren = (item) => {
|
||||
zbAllList.value.push(item);
|
||||
if (item.itemList && item.itemList.length > 0) {
|
||||
item.itemList.forEach((v) => {
|
||||
getChildren(v);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="图片" style="width: 10%">
|
||||
<img
|
||||
class="imgBox"
|
||||
:src="
|
||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
||||
listQuery.sfzh
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="listQuery.ssbm"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
clearable
|
||||
filterable
|
||||
:options="depList"
|
||||
:props="props"
|
||||
v-model:modelValue="listQuery.gldwdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="盘查民警姓名">
|
||||
<el-input
|
||||
v-model="listQuery.pcmjXm"
|
||||
placeholder="盘查民警姓名"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查民警警号" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcmjJh"
|
||||
placeholder="盘查民警警号"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人身份证号" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.sfzh"
|
||||
placeholder="请输入被盘查人身份证号"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人性别" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.sexmc"
|
||||
placeholder="请输入被盘查人性别"
|
||||
disabled
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人出生日期" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.csrq"
|
||||
disabled
|
||||
placeholder="被盘查人出生日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人民族" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.mzmc"
|
||||
disabled
|
||||
placeholder="被盘查人民族"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人学历" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.whcdmc"
|
||||
disabled
|
||||
placeholder="被盘查人学历"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="被盘查人籍贯" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.jgdm"
|
||||
disabled
|
||||
placeholder="被盘查人籍贯"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="被盘查人住址详址" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.zzxz"
|
||||
disabled
|
||||
placeholder="被盘查人住址详址"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="被盘查人联系电话" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.lxdh"
|
||||
disabled
|
||||
placeholder="被盘查人联系电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查日期" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcrq" disabled placeholder="盘查日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="盘查时间" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcsj" disabled placeholder="盘查时间" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查输入类型" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcsrlxmc"
|
||||
disabled
|
||||
placeholder="盘查输入类型"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员标签" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.bqxxsj"
|
||||
disabled
|
||||
placeholder="人员标签"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查处理结果" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcclJgmc"
|
||||
disabled
|
||||
placeholder="盘查处理结果"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="移交单位" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcclYjdw"
|
||||
disabled
|
||||
placeholder="移交单位"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="移交原因" style="width: 100%">
|
||||
<el-input
|
||||
placeholder="移交原因"
|
||||
v-model="listQuery.pcclYjyy"
|
||||
disabled
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="head_box">
|
||||
<span class="title">盘查图片</span>
|
||||
</div>
|
||||
<el-form :model="listQuery" :inline="true" label-position="top">
|
||||
<div v-if="listQuery.tpList && listQuery.tpList.length > 0">
|
||||
<el-image
|
||||
class="image"
|
||||
v-for="(item, index) in listQuery.tpList"
|
||||
:key="index"
|
||||
:src="`/mosty-api/mosty-base/minio/image/download/${item.fjid}`"
|
||||
/>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="head_box">
|
||||
<span class="title">盘查物品</span>
|
||||
</div>
|
||||
<div v-if="listQuery.wpVoList && listQuery.wpVoList.length > 0">
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="物品图片" prop="name">
|
||||
<div style="height: 120px; display: inline-block">
|
||||
<el-image
|
||||
v-for="(item, index) in listQuery.wpVoList[0]?.wpTpIdList"
|
||||
:key="index"
|
||||
:src="`/mosty-api/mosty-base/minio/image/download/${item}`"
|
||||
class="image"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品描述" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wpms"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品数量" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wpsl"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品类型" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wplx"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { TcsbsaveTcsbsave, Tcsbupdate } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const propsTree = ref({
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const DX = ref();
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit" || type == "detail") {
|
||||
DX.value = row.yjRyxm ? row.yjRyxm : row.yjClcph;
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
DX.value = "";
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.imgBox {
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
}
|
||||
.image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px 0 10px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
176
src/views/backOfficeSystem/peopleManag/InventoryManage/index.vue
Normal file
176
src/views/backOfficeSystem/peopleManag/InventoryManage/index.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人员盘查">
|
||||
<!-- <el-link type="primary" @click="addEdit('detail', row)">详情</el-link> -->
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #yjTp="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.tp" :src="urlImg + row.yjTp" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<template #yjLx="{ row }">
|
||||
<dict-tag :options="D_BZ_YJLX" :value="row.yjLx" :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>
|
||||
<!-- 编辑详情 -->
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm ref="detailDiloag" :dict="{ D_BZ_YJLX, D_BZ_YJJB }" />
|
||||
</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 EditAddForm from "./components/editAddForm.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { BpcryselectCrewList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_YJLX, D_BZ_YJJB } = proxy.$dict("D_BZ_YJLX", "D_BZ_YJJB");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "身份证号",
|
||||
prop: "sfzh",
|
||||
placeholder: "请输入预警对象",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "startTime",
|
||||
placeholder: "日期",
|
||||
showType: "datetimerange"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "xm" },
|
||||
{ label: "所属部门", prop: "ssbm" },
|
||||
{ label: "盘查民警", prop: "pcmjXm" },
|
||||
{ label: "被盘查人", prop: "xm" },
|
||||
{ label: "被盘查人身份证", prop: "sfzh" },
|
||||
{ label: "被盘查人电话", prop: "lxdh" },
|
||||
{ label: "盘查日期", prop: "pcrq", showSolt: true },
|
||||
{ label: "盘查时间", prop: "pcsj", showSolt: true },
|
||||
{ label: "被盘输入类型", prop: "yjLx", showSolt: true },
|
||||
{ label: "人员标签名称", prop: "bqmc", showSolt: true },
|
||||
{ label: "盘查结果", prop: "pcclJgmc", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
BpcryselectCrewList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
const promes = {
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
};
|
||||
if (val.startTime) {
|
||||
promes.startTime = val.startTime[0];
|
||||
promes.endTime = val.startTime[1];
|
||||
} else {
|
||||
promes.startTime = "";
|
||||
promes.endTime = "";
|
||||
}
|
||||
queryCondition.value = { ...queryCondition.value, ...val, ...promes };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="xm" label="姓名">
|
||||
<el-input
|
||||
v-model="listQuery.xm"
|
||||
placeholder="请输入姓名"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="gmsfzhm" label="公民身份证号码">
|
||||
<el-input
|
||||
v-model="listQuery.gmsfzhm"
|
||||
placeholder="请输入公民身份证号码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="jrsj" label="加入时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.jrsj"
|
||||
type="datetime"
|
||||
placeholder="请选中结束时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 40%"
|
||||
prop="zdryflgklbdm"
|
||||
label="重点人员分类管控类别代码"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.zdryflgklbdm"
|
||||
placeholder="请输入重点人员分类管控类别代码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sfjc" style="width: 40%" label="省份简称">
|
||||
<el-select
|
||||
v-model="listQuery.sfjc"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_XZQHDM"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" label="检查站名称">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.kkMc">{{ listQuery.kkMc }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import { RymdinsertEntity, RymdeditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
}
|
||||
],
|
||||
gmsfzhm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号"
|
||||
}
|
||||
],
|
||||
jrsj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入加入时间",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {});
|
||||
let pageType = ref("add");
|
||||
//打开弹窗
|
||||
const showJcz = ref(false);
|
||||
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.kkMc = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
listQuery.value.type = "01";
|
||||
if (pageType.value == "add") {
|
||||
RymdinsertEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
RymdeditEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
201
src/views/backOfficeSystem/peopleManag/PeoplePerson/index.vue
Normal file
201
src/views/backOfficeSystem/peopleManag/PeoplePerson/index.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人员白名单">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sfjc="{ row }">
|
||||
<dict-tag :value="row.sfjc" :options="D_BZ_XZQHDM" :tag="false" />
|
||||
</template>
|
||||
<template #type="{ row }">
|
||||
{{ row.type == "02" ? "黑名单" : "白名单" }}
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_XZQHDM }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { RymdselectPage, RymddeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_XZQHDM } = proxy.$dict("D_BZ_XZQHDM");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "重点人员分类管控类别代码",
|
||||
prop: "zdryflgklbdm",
|
||||
placeholder: "请输入重点人员分类管控类别代码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "公民身份证号码",
|
||||
prop: "gmsfzhm",
|
||||
placeholder: "请输入公民身份证号码",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
||||
{ label: "公民身份证号码", prop: "gmsfzhm", showOverflowTooltip: true },
|
||||
{ label: "加入时间", prop: "jrsj", showOverflowTooltip: true },
|
||||
{ label: "卡口名称", prop: "kkMc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "省份简称",
|
||||
prop: "sfjc",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{
|
||||
label: "名单类型",
|
||||
prop: "type",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{
|
||||
label: "重点人员分类管控类别代码",
|
||||
prop: "zdryflgklbdm",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({ type: "01" });
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
RymdselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
RymddeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="sbmc" label="感知源名称">
|
||||
<el-input
|
||||
v-model="listQuery.sbmc"
|
||||
placeholder="请输入感知源名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="sbbh" label="感知源编号">
|
||||
<el-input
|
||||
v-model="listQuery.sbbh"
|
||||
placeholder="请输入感知源编号"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 40%" prop="sblx" label="感知源类型">
|
||||
<el-select v-model="listQuery.sblx" placeholder="请选择感知源类型">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_SBLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="sblxdm" label="摄像机类型">
|
||||
<el-select v-model="listQuery.sblxdm" placeholder="请选择摄像机类型">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_GZSBLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="csmc" label="来源厂商">
|
||||
<el-input
|
||||
v-model="listQuery.csmc"
|
||||
placeholder="请输入来源厂商"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="dzmc" label="感知源地址">
|
||||
<el-input
|
||||
v-model="listQuery.dzmc"
|
||||
placeholder="请输入感知源地址"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="sklList" label="标签">
|
||||
<el-select
|
||||
v-model="listQuery.sklList"
|
||||
placeholder="请选择标签"
|
||||
multiple
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_DWFL"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
|
||||
<div class="latlng flex">
|
||||
<el-input
|
||||
v-model="listQuery.jd"
|
||||
clearable
|
||||
placeholder="请选择坐标"
|
||||
style="width: 42%"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="listQuery.wd"
|
||||
clearable
|
||||
placeholder="请选择坐标"
|
||||
style="width: 42%; margin-left: 1%"
|
||||
></el-input>
|
||||
|
||||
<el-button @click="selectLocation">选择定位</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="mapbox"><GdMap /></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { TtbJczSxtAdd, Ttbgetupdate } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
sbmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源名称"
|
||||
}
|
||||
],
|
||||
sblx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择感知源类型"
|
||||
}
|
||||
],
|
||||
sbbh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源编号",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
wd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入维度"
|
||||
}
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经度"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({ fl: "02" });
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
chackLat();
|
||||
}
|
||||
});
|
||||
});
|
||||
let pageType = ref("add");
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
TtbJczSxtAdd(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
Ttbgetupdate(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log();
|
||||
};
|
||||
//选择定位地图
|
||||
const selectLocation = () => {
|
||||
emitter.emit("drawShape", {
|
||||
flag: "select_point",
|
||||
type: "point",
|
||||
isclear: true
|
||||
});
|
||||
};
|
||||
//获取经纬度
|
||||
const chackLat = (type) => {
|
||||
const { jd, wd } = listQuery.value;
|
||||
emitter.emit("deletePointArea", "jczMap_Gzy");
|
||||
if (jd && wd) {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [{ jd, wd }],
|
||||
icon: require("@/assets/images/bi/gzy.png"),
|
||||
flag: "jczMap_Gzy"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapbox {
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="感知源管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sblx="{ row }">
|
||||
<dict-tag :value="row.sblx" :options="D_BZ_SBLX" :tag="false" />
|
||||
</template>
|
||||
<template #sblxdm="{ row }">
|
||||
<dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
|
||||
</template>
|
||||
<template #sklList="{ row }">
|
||||
<span v-if="row.sklList && row.sklList.length > 0">
|
||||
<span class="bqmc" v-for="iv in row.sklList" :key="iv">{{
|
||||
iv.bqmc
|
||||
}}</span>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_SF, D_BZ_SBLX, D_BZ_DWFL, D_BZ_GZSBLX }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { TtbgetPageList, jczdeleteList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_SBLX, D_BZ_SF, D_BZ_DWFL, D_BZ_GZSBLX } = proxy.$dict(
|
||||
"D_BZ_SBLX",
|
||||
"D_BZ_SF",
|
||||
"D_BZ_DWFL",
|
||||
"D_BZ_GZSBLX"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "编号",
|
||||
prop: "sbbh",
|
||||
placeholder: "请输入编号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "感知源名称",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入感知源名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "感知源类型",
|
||||
prop: "sblx",
|
||||
placeholder: "感知源类型",
|
||||
showType: "select",
|
||||
options: D_BZ_GZSBLX
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "感知源名称", prop: "sbmc", showOverflowTooltip: true },
|
||||
{ label: "编号", prop: "sbbh", showOverflowTooltip: true },
|
||||
{ label: "地址", prop: "dzmc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "感知源类型",
|
||||
prop: "sblx",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "摄像机类型",
|
||||
prop: "sblxdm",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
TtbgetPageList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
jczdeleteList(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div style="position: relative; width: 90px; height: 100px">
|
||||
<el-upload
|
||||
action="/mosty-api/mosty-base/minio/image/upload/id"
|
||||
:on-change="upImgFile"
|
||||
:on-success="upImg"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
|
||||
<el-icon v-else>
|
||||
<Plus></Plus>
|
||||
</el-icon>
|
||||
<span
|
||||
v-if="imgUrl"
|
||||
style="position: absolute; top: -52px; right: -20px"
|
||||
>
|
||||
<el-icon size="20" @click.stop="deletImg">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item style="width: 20%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkmc" label="布控名称">
|
||||
<el-input
|
||||
v-model="listQuery.bkmc"
|
||||
placeholder="请输入布控名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bksfzh" label="身份证号">
|
||||
<el-input
|
||||
v-model="listQuery.bksfzh"
|
||||
placeholder="请输入布控人身份证号"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bklb" label="布控类别">
|
||||
<el-select v-model="listQuery.bklb" placeholder="请选择布控类别">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_RYBKLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkkssj" label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.bkkssj"
|
||||
type="datetime"
|
||||
placeholder="请选中开始时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkjssj" label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.bkjssj"
|
||||
type="datetime"
|
||||
placeholder="请选中结束时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 40%" prop="bkqy" label="布控区域">
|
||||
<el-input
|
||||
v-model="listQuery.bkqy"
|
||||
placeholder="请输入布控区域"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkzt" label="布控状态">
|
||||
<el-select v-model="listQuery.bkzt" placeholder="请选择布控状态">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_RCBKZT"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkfw" label="布控范围">
|
||||
<el-select v-model="listQuery.bkfw" placeholder="请选择布控状态">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_RCBKFW"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkczlx" label="布控操作类型">
|
||||
<el-input
|
||||
v-model="listQuery.bkczlx"
|
||||
placeholder="请输入布控区域"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkdxtzm" label="布控对象特征码">
|
||||
<el-input
|
||||
v-model="listQuery.bkdxtzm"
|
||||
placeholder="请输入布控区域"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkkk" label="布控卡口">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.bkkk">{{ listQuery.bkkk }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { BkrwinsertEntity, BkrweditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
bkdxtzm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控对象特征码"
|
||||
}
|
||||
],
|
||||
bkbsm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控标识码"
|
||||
}
|
||||
],
|
||||
bkkk: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控卡口"
|
||||
}
|
||||
],
|
||||
bkjssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控结束时间"
|
||||
}
|
||||
],
|
||||
bkkssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控开始时间"
|
||||
}
|
||||
],
|
||||
bkzt: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控状态"
|
||||
}
|
||||
],
|
||||
bksfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控身份证号"
|
||||
}
|
||||
],
|
||||
bkqy: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控区域",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bkmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控名称"
|
||||
}
|
||||
],
|
||||
bklb: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控类别"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
|
||||
let pageType = ref("add");
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
const promes = { ...listQuery.value, bklx: "01" };
|
||||
if (pageType.value == "add") {
|
||||
BkrwinsertEntity(promes).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
BkrweditEntity(promes).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log();
|
||||
};
|
||||
// 图片上传
|
||||
const imgUrl = ref();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const upImg = (row) => {
|
||||
listQuery.value.bkzp = row.data;
|
||||
imgUrl.value = urlImg.value + row.data;
|
||||
};
|
||||
|
||||
//打开弹窗
|
||||
const showJcz = ref(false);
|
||||
|
||||
const JczMsg = (val) => {
|
||||
console.log(val);
|
||||
|
||||
listQuery.value.bkkk = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapbox {
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
::v-deep .el-icon svg {
|
||||
color: #000000 !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人员布控">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #bklb="{ row }">
|
||||
<dict-tag :value="row.bklb" :options="D_BZ_RYBKLX" :tag="false" />
|
||||
</template>
|
||||
<template #bkzt="{ row }">
|
||||
<dict-tag :value="row.bkzt" :options="D_BZ_RCBKZT" :tag="false" />
|
||||
</template>
|
||||
<template #bkfw="{ row }">
|
||||
<dict-tag :value="row.bkfw" :options="D_BZ_RCBKFW" :tag="false" />
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{
|
||||
D_BZ_RCBKZT,
|
||||
D_BZ_RCBKFW,
|
||||
D_BZ_RYBKLX
|
||||
}"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { BkrwselectPage, BkrwdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_RCBKZT, D_BZ_RCBKFW, D_BZ_RYBKLX } = proxy.$dict(
|
||||
"D_BZ_RCBKZT",
|
||||
"D_BZ_RCBKFW",
|
||||
"D_BZ_RYBKLX"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "布控名称",
|
||||
prop: "bkmc",
|
||||
placeholder: "请输入布控名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "bksfzh",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "布控状态",
|
||||
prop: "bkzt",
|
||||
placeholder: "布控状态",
|
||||
showType: "select",
|
||||
options: D_BZ_RCBKZT
|
||||
},
|
||||
{
|
||||
label: "布控类别",
|
||||
prop: "bklb",
|
||||
placeholder: "布控类别",
|
||||
showType: "select",
|
||||
options: D_BZ_RYBKLX
|
||||
},
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{
|
||||
label: "布控区域",
|
||||
prop: "bkqy",
|
||||
showOverflowTooltip: true
|
||||
// showSolt: true
|
||||
},
|
||||
{
|
||||
label: "布控名称",
|
||||
prop: "bkmc",
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "布控类别",
|
||||
prop: "bklb",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "布控状态",
|
||||
prop: "bkzt",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "布控范围",
|
||||
prop: "bkfw",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{ label: "布控开始时间", prop: "bkkssj", showOverflowTooltip: true },
|
||||
{
|
||||
label: "布控结束时间",
|
||||
prop: "bkjssj",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({ bklx: "01" });
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
BkrwselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
BkrwdeleteById({ ids: ids })
|
||||
.then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div style="position: relative; width: 90px; height: 100px">
|
||||
<el-upload
|
||||
action="/mosty-api/mosty-base/minio/image/upload/id"
|
||||
:on-change="upImgFile"
|
||||
:on-success="upImg"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
|
||||
<el-icon v-else>
|
||||
<Plus></Plus>
|
||||
</el-icon>
|
||||
<span
|
||||
v-if="imgUrl"
|
||||
style="position: absolute; top: -52px; right: -20px"
|
||||
>
|
||||
<el-icon size="20" @click.stop="deletImg">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item style="width: 20%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bklb" label="布控类别">
|
||||
<el-select v-model="listQuery.bklb" placeholder="请选择布控类别">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_CLBKLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkcph" label="车牌号">
|
||||
<el-input
|
||||
v-model="listQuery.bkcph"
|
||||
placeholder="请输入布控车辆车牌号"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 40%" prop="bkkssj" label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.bkkssj"
|
||||
type="datetime"
|
||||
placeholder="请选中开始时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkjssj" label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.bkjssj"
|
||||
type="datetime"
|
||||
placeholder="请选中结束时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 40%" prop="bkqy" label="布控区域">
|
||||
<el-input
|
||||
v-model="listQuery.bkqy"
|
||||
placeholder="请输入布控区域"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkzt" label="布控状态">
|
||||
<el-select v-model="listQuery.bkzt" placeholder="请选择布控状态">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_RCBKZT"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkfw" label="布控范围">
|
||||
<el-select v-model="listQuery.bkfw" placeholder="请选择布控状态">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_RCBKFW"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkczlx" label="布控操作类型">
|
||||
<el-input
|
||||
v-model="listQuery.bkczlx"
|
||||
placeholder="请输入布控区域"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkdxtzm" label="布控对象特征码">
|
||||
<el-input
|
||||
v-model="listQuery.bkdxtzm"
|
||||
placeholder="请输入布控区域"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="bkkk" label="布控卡口">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.bkkk">{{ listQuery.bkkk }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { BkrwinsertEntity, BkrweditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
bkdxtzm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控对象特征码"
|
||||
}
|
||||
],
|
||||
bkbsm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控标识码"
|
||||
}
|
||||
],
|
||||
bkkk: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控卡口"
|
||||
}
|
||||
],
|
||||
bkjssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控结束时间"
|
||||
}
|
||||
],
|
||||
bkkssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控开始时间"
|
||||
}
|
||||
],
|
||||
bkzt: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择布控状态"
|
||||
}
|
||||
],
|
||||
bkcph: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控车辆车牌号"
|
||||
}
|
||||
],
|
||||
bkqy: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控区域",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bklb: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控类别",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bkmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入布控名称"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
|
||||
let pageType = ref("add");
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
const promes = { ...listQuery.value, bklx: "02" };
|
||||
if (pageType.value == "add") {
|
||||
BkrwinsertEntity(promes).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
BkrweditEntity(promes).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log();
|
||||
};
|
||||
// 图片上传
|
||||
const imgUrl = ref();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const upImg = (row) => {
|
||||
listQuery.value.bkzp = row.data;
|
||||
imgUrl.value = urlImg.value + row.data;
|
||||
};
|
||||
|
||||
//打开弹窗
|
||||
const showJcz = ref(false);
|
||||
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.bkkk = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapbox {
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
::v-deep .el-icon svg {
|
||||
color: #000000 !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆布控">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #bklb="{ row }">
|
||||
<dict-tag :value="row.bklb" :options="D_BZ_CLBKLX" :tag="false" />
|
||||
</template>
|
||||
<template #bkzt="{ row }">
|
||||
<dict-tag :value="row.bkzt" :options="D_BZ_RCBKZT" :tag="false" />
|
||||
</template>
|
||||
<template #bkfw="{ row }">
|
||||
<dict-tag :value="row.bkfw" :options="D_BZ_RCBKFW" :tag="false" />
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{
|
||||
D_BZ_RCBKZT,
|
||||
D_BZ_RCBKFW,
|
||||
D_BZ_CLBKLX
|
||||
}"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { BkrwselectPage, BkrwdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_RCBKZT, D_BZ_RCBKFW, D_BZ_CLBKLX } = proxy.$dict(
|
||||
"D_BZ_RCBKZT",
|
||||
"D_BZ_RCBKFW",
|
||||
"D_BZ_CLBKLX"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "车牌号",
|
||||
prop: "bkcph",
|
||||
placeholder: "请输入车牌号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "布控状态",
|
||||
prop: "bkzt",
|
||||
placeholder: "布控状态",
|
||||
showType: "select",
|
||||
options: D_BZ_RCBKZT
|
||||
},
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{
|
||||
label: "布控区域",
|
||||
prop: "bkqy",
|
||||
showOverflowTooltip: true
|
||||
// showSolt: true
|
||||
},
|
||||
{
|
||||
label: "布控车牌号",
|
||||
prop: "bkcph",
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "布控类别",
|
||||
prop: "bklb",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "布控状态",
|
||||
prop: "bkzt",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "布控范围",
|
||||
prop: "bkfw",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{ label: "布控开始时间", prop: "bkkssj", showOverflowTooltip: true },
|
||||
{
|
||||
label: "布控结束时间",
|
||||
prop: "bkjssj",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({ bklx: "02" });
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
BkrwselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
BkrwdeleteById({ ids: ids })
|
||||
.then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="图片" style="width: 10%">
|
||||
<div v-if="listQuery.tpList && listQuery.tpList.length > 0">
|
||||
<el-image
|
||||
:preview-src-list="[
|
||||
`/mosty-api/mosty-base/minio/image/download/${listQuery.tpList?.[0].fjid}`
|
||||
]"
|
||||
style="width: 100px"
|
||||
:append-to-body="true"
|
||||
:src="`/mosty-api/mosty-base/minio/image/download/${listQuery.tpList?.[0].fjid}`"
|
||||
fit="cover"
|
||||
lazy
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="listQuery.ssbm"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
clearable
|
||||
filterable
|
||||
:options="depList"
|
||||
:props="props"
|
||||
v-model:modelValue="listQuery.gldwdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="盘查民警姓名">
|
||||
<el-input
|
||||
v-model="listQuery.pcmjXm"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查民警警号" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcmjJh"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车牌号码" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.hphm"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="号牌种类" style="width: 40%">
|
||||
<el-select v-model="listQuery.bkzt" disabled>
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_HPZL"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车架号" style="width: 40%">
|
||||
<el-input v-model="listQuery.clsbdh" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="机动车所有人" style="width: 40%">
|
||||
<el-input v-model="listQuery.jdcsyr" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车所有人身份证号" style="width: 40%">
|
||||
<el-input v-model="listQuery.jdcsyrsfzh" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="盘查输入类型" style="width: 40%">
|
||||
<el-select v-model="listQuery.pcsrlxmc" disabled>
|
||||
<el-option
|
||||
v-for="dict in dict.D_YDJW_PCCLYJYY_CL"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆标签" style="width: 40%">
|
||||
<el-input v-model="listQuery.bqmc" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查日期" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcrq" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="盘查时间" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcsj" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查处理结果" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcclJgmc" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="移交单位" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcclYjdw" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="移交原因" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.pcclYjyy"
|
||||
disabled
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="head_box">
|
||||
<span class="title">盘查图片</span>
|
||||
</div>
|
||||
<el-form :model="listQuery" :inline="true" label-position="top">
|
||||
<div v-if="listQuery.tpList && listQuery.tpList.length > 0">
|
||||
<el-image
|
||||
class="image"
|
||||
v-for="(item, index) in listQuery.tpList"
|
||||
:key="index"
|
||||
:src="`/mosty-api/mosty-base/minio/image/download/${item.fjid}`"
|
||||
/>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="head_box">
|
||||
<span class="title">盘查物品</span>
|
||||
</div>
|
||||
<div v-if="listQuery.wpVoList && listQuery.wpVoList.length > 0">
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="物品图片" prop="name">
|
||||
<div style="height: 120px; display: inline-block">
|
||||
<el-image
|
||||
v-for="(item, index) in listQuery.wpVoList[0]?.wpTpIdList"
|
||||
:key="index"
|
||||
:src="`/mosty-api/mosty-base/minio/image/download/${item}`"
|
||||
class="image"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品描述" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wpms"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品数量" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wpsl"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品类型" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wplx"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { TcsbsaveTcsbsave, Tcsbupdate } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const propsTree = ref({
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const DX = ref();
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit" || type == "detail") {
|
||||
DX.value = row.yjRyxm ? row.yjRyxm : row.yjClcph;
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
DX.value = "";
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.imgBox {
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
}
|
||||
.image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px 0 10px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆盘查"> </PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #yjLx="{ row }">
|
||||
<dict-tag :value="row.yjLx" :options="D_BZ_PCSRLX" :tag="false" />
|
||||
</template>
|
||||
<template #hpzl="{ row }">
|
||||
<dict-tag :value="row.hpzl" :options="D_BZ_HPZL" :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>
|
||||
<!-- 编辑详情 -->
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_PCSRLX, D_BZ_HPZL, D_YDJW_PCCLYJYY_CL }"
|
||||
/>
|
||||
</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 EditAddForm from "./components/editAddForm.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { BpcryselectCrewList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_PCSRLX, D_BZ_HPZL, D_YDJW_PCCLYJYY_CL } = proxy.$dict(
|
||||
"D_BZ_PCSRLX",
|
||||
"D_BZ_HPZL",
|
||||
"D_YDJW_PCCLYJYY_CL"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "车牌号",
|
||||
prop: "hphm",
|
||||
placeholder: "请输入车牌号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "startTime",
|
||||
placeholder: "日期",
|
||||
showType: "datetimerange"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "xm" },
|
||||
{ label: "所属部门", prop: "ssbm" },
|
||||
{ label: "盘查民警", prop: "pcmjXm" },
|
||||
{ label: "号牌号码", prop: "hphm" },
|
||||
{ label: "号牌种类", prop: "hpzl", howSolt: true }, //D_BZ_HPZL
|
||||
{ label: "机动车所有人", prop: "jdcsyr" },
|
||||
{ label: "盘查日期", prop: "pcrq", showSolt: true },
|
||||
{ label: "盘查时间", prop: "pcsj", showSolt: true },
|
||||
{ label: "被盘输入类型", prop: "yjLx", showSolt: true }, //D_BZ_PCSRLX
|
||||
{ label: "盘查结果", prop: "pcclJgmc", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
BpcryselectCrewList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
const promes = {
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
};
|
||||
if (val.startTime) {
|
||||
promes.startTime = val.startTime[0];
|
||||
promes.endTime = val.startTime[1];
|
||||
} else {
|
||||
promes.startTime = "";
|
||||
promes.endTime = "";
|
||||
}
|
||||
queryCondition.value = { ...queryCondition.value, ...val, ...promes };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,470 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div style="position: relative; width: 90px; height: 100px">
|
||||
<el-upload
|
||||
action="/mosty-api/mosty-base/minio/image/upload/id"
|
||||
:on-change="upImgFile"
|
||||
:on-success="upImg"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
|
||||
<el-icon v-else>
|
||||
<Plus></Plus>
|
||||
</el-icon>
|
||||
<span
|
||||
v-if="imgUrl"
|
||||
style="position: absolute; top: -52px; right: -20px"
|
||||
>
|
||||
<el-icon size="20" @click.stop="deletImg">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="身份证号码" prop="sfzh">
|
||||
<el-input
|
||||
v-model="listQuery.sfzh"
|
||||
placeholder="请输入身份证号码"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="辅警姓名" prop="xm">
|
||||
<el-input
|
||||
v-model="listQuery.xm"
|
||||
placeholder="请输入辅警姓名"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="xbdm">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.xbdm"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_XB"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族" prop="mzdm">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.mzdm"
|
||||
placeholder="请选择民族"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_MZ"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="政治面貌" prop="zzmm">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.zzmm"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_ZZMM"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="婚姻状况" prop="hyzk">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.hyzk"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_HYZK"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学历" prop="whcddm">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.whcddm"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_WHCD"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="辅警编号" prop="jh">
|
||||
<el-input
|
||||
v-model="listQuery.jh"
|
||||
placeholder="请输入辅警编号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="lxdh">
|
||||
<el-input
|
||||
v-model="listQuery.lxdh"
|
||||
placeholder="请输入联系电话"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="rzsj" label="入职时间">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="listQuery.rzsj"
|
||||
type="date"
|
||||
placeholder="请选择入职时间"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="警衔" prop="jx">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.jx"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_FJJX"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="考核情况" prop="khqk">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.khqk"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_SF"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- :rules="{ required: true, message: '请选择部门' }" -->
|
||||
<el-form-item label="所属部门" prop="ssbmdm">
|
||||
<MOSTY.Department
|
||||
:placeholder="listQuery.ssbm"
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="人员类别" prop="lx">
|
||||
<el-select clearable v-model="listQuery.lx" placeholder="请选择" style="width: 100%" disabled>
|
||||
<el-option value="02" label="辅警"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item
|
||||
style="width: 100%"
|
||||
label="专业技能"
|
||||
prop="sklList"
|
||||
@change="selectJnbq"
|
||||
>
|
||||
<el-select
|
||||
v-model="listQuery.sklList"
|
||||
multiple
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
@change="onChangeBQ"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in bqList"
|
||||
:key="item.id"
|
||||
:label="item.bqmc"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jcztbQwXfll, jcztbQwXfllUpdete } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入辅警姓名"
|
||||
}
|
||||
],
|
||||
sfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号码"
|
||||
}
|
||||
],
|
||||
xbdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择性别",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
mzdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择民族"
|
||||
}
|
||||
],
|
||||
zzmm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择政治面貌"
|
||||
}
|
||||
],
|
||||
hyzk: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择婚姻状况"
|
||||
}
|
||||
],
|
||||
whcddm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择学历"
|
||||
}
|
||||
],
|
||||
lxdh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入联系电话"
|
||||
}
|
||||
],
|
||||
lx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择人员类别"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({ fl: "02" });
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
jcztbQwXfll(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
jcztbQwXfllUpdete(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log();
|
||||
};
|
||||
// 图片上传
|
||||
const imgUrl = ref();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const upImg = (row) => {
|
||||
listQuery.value.tp = row.data;
|
||||
imgUrl.value = urlImg.value + row.data;
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000 !important;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
199
src/views/backOfficeSystem/peopleManag/auxiliaryPolice/index.vue
Normal file
199
src/views/backOfficeSystem/peopleManag/auxiliaryPolice/index.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="巡防辅警">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #tp="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.tp" :src="urlImg + row.tp" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
<!-- <el-link type="primary" @click="down(row)">附件下载</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_SF, D_BZ_MZ, D_BZ_XB, D_BZ_ZZMM }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { jczgetXfllList, jczdeleteList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_SF, D_BZ_MZ, D_BZ_XB, D_BZ_ZZMM } = proxy.$dict(
|
||||
"D_BZ_SF",
|
||||
"D_BZ_MZ",
|
||||
"D_BZ_XB",
|
||||
"D_BZ_ZZMM"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "sfzh",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "是否离职",
|
||||
prop: "xtSjzt",
|
||||
placeholder: "是否离职",
|
||||
showType: "select",
|
||||
options: D_BZ_SF
|
||||
},
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "图片", prop: "tp", showSolt: true },
|
||||
{ label: "民警姓名", prop: "xm" },
|
||||
{ label: "身份证号码", prop: "sfzh" },
|
||||
{ label: "警号", prop: "jh" },
|
||||
{ label: "专业技能", prop: "zyjn" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({
|
||||
jllx: "02"
|
||||
});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
jczgetXfllList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
jczdeleteList(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="jczmc" label="检查站名称">
|
||||
<el-input
|
||||
v-model="listQuery.jczmc"
|
||||
placeholder="请输入检查站名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 40%" prop="zqlx" label="执勤类型">
|
||||
<el-select v-model="listQuery.zqlx" placeholder="请选择执勤类型">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_ZQLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="jczlx" label="检查站类型">
|
||||
<el-select v-model="listQuery.jczlx" placeholder="请选择检查站类型">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_JCZLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="jczjb" label="检查站级别">
|
||||
<el-select v-model="listQuery.jczjb" placeholder="请选择检查站级别">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_JCZJB"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="fzr" label="负责人">
|
||||
<el-input
|
||||
v-model="listQuery.fzr"
|
||||
placeholder="请输入负责人"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="lxdh" label="联系电话">
|
||||
<el-input
|
||||
v-model="listQuery.lxdh"
|
||||
placeholder="请输入联系电话"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="dllx" label="道路类型">
|
||||
<el-select v-model="listQuery.dllx" placeholder="请选择道路类型">
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_DLLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="dzmc" label="检查站地址">
|
||||
<el-input
|
||||
v-model="listQuery.dzmc"
|
||||
placeholder="请输入检查站地址"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="示意图(最多3张)" prop="fjid" style="width: 40%">
|
||||
<MOSTY.Upload
|
||||
:isImg="true"
|
||||
width="100%"
|
||||
:limit="3"
|
||||
v-model="listQuery.fjid"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="全景图(正面、侧面、俯视共3张)"
|
||||
prop="qjfjid"
|
||||
style="width: 48%"
|
||||
>
|
||||
<MOSTY.Upload
|
||||
width="100%"
|
||||
:isImg="true"
|
||||
:limit="3"
|
||||
v-model="listQuery.qjfjid"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
|
||||
<div class="latlng flex">
|
||||
<el-input
|
||||
v-model="listQuery.jd"
|
||||
clearable
|
||||
placeholder="请选择坐标"
|
||||
style="width: 42%"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="listQuery.wd"
|
||||
clearable
|
||||
placeholder="请选择坐标"
|
||||
style="width: 42%; margin-left: 1%"
|
||||
></el-input>
|
||||
|
||||
<el-button @click="selectLocation">选择定位</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="mapbox"><GdMap /></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { JczaddJcz, JczupdateJcz } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
sbmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源名称"
|
||||
}
|
||||
],
|
||||
sblx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择感知源类型"
|
||||
}
|
||||
],
|
||||
sbbh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源编号",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
wd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入维度"
|
||||
}
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经度"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({ fl: "02" });
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
chackLat();
|
||||
}
|
||||
});
|
||||
});
|
||||
let pageType = ref("add");
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
JczaddJcz(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
JczupdateJcz(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log();
|
||||
};
|
||||
//选择定位地图
|
||||
const selectLocation = () => {
|
||||
emitter.emit("drawShape", {
|
||||
flag: "select_point",
|
||||
type: "point",
|
||||
isclear: true
|
||||
});
|
||||
};
|
||||
//获取经纬度
|
||||
const chackLat = (type) => {
|
||||
const { jd, wd } = listQuery.value;
|
||||
emitter.emit("deletePointArea", "jczMap_Gzy");
|
||||
if (jd && wd) {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [{ jd, wd }],
|
||||
icon: require("@/assets/images/bi/zsdw.png"),
|
||||
flag: "jczMap_Gzy"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapbox {
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
214
src/views/backOfficeSystem/peopleManag/checkpoint/index.vue
Normal file
214
src/views/backOfficeSystem/peopleManag/checkpoint/index.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="检查站管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #jczlx="{ row }">
|
||||
<dict-tag :value="row.jczlx" :options="D_BZ_JCZLX" :tag="false" />
|
||||
</template>
|
||||
<template #zqlx="{ row }">
|
||||
<dict-tag :options="D_BZ_ZQLX" :value="row.zqlx" :tag="false" />
|
||||
</template>
|
||||
<template #jczjb="{ row }">
|
||||
<dict-tag :options="D_BZ_JCZJB" :value="row.jczjb" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_JCZLX, D_BZ_ZQLX, D_BZ_DLLX, D_BZ_JCZJB }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { JczselectJczList, JczdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JCZLX, D_BZ_ZQLX, D_BZ_DLLX, D_BZ_JCZJB } = proxy.$dict(
|
||||
"D_BZ_JCZLX",
|
||||
"D_BZ_ZQLX",
|
||||
"D_BZ_DLLX",
|
||||
"D_BZ_JCZJB"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
label: "检查站名称",
|
||||
prop: "jczmc",
|
||||
placeholder: "请输入检查站名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "执勤类型",
|
||||
prop: "zqlx",
|
||||
placeholder: "请选择执勤类型",
|
||||
showType: "select",
|
||||
options: D_BZ_ZQLX
|
||||
},
|
||||
|
||||
{
|
||||
label: "检查站类型",
|
||||
prop: "jczlx",
|
||||
placeholder: "请选择检查站类型",
|
||||
showType: "select",
|
||||
options: D_BZ_JCZLX
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "检查站名称", prop: "jczmc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "检查站类型",
|
||||
prop: "jczlx",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
|
||||
{
|
||||
label: "执勤类型",
|
||||
prop: "zqlx",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "检查站地址",
|
||||
prop: "dzmc",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
JczselectJczList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
JczdeleteById({ id: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 40%" prop="ajwjwp" label="安检违禁物品">
|
||||
<el-input
|
||||
v-model="listQuery.ajwjwp"
|
||||
placeholder="请输入安检违禁物品"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 40%"
|
||||
prop="gajczbsm"
|
||||
label="公安检查站标识码"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.gajczbsm"
|
||||
placeholder="请输入公安检查站标识码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="txsjbsm" label="通行事件标识码">
|
||||
<el-input
|
||||
v-model="listQuery.txsjbsm"
|
||||
placeholder="请输入通行事件标识码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 40%"
|
||||
prop="wjwplbdm"
|
||||
label="安检违禁物品类别代码"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.wjwplbdm"
|
||||
placeholder="请输入通行事件标识码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="wptzms" label="物品特征描述">
|
||||
<el-input
|
||||
v-model="listQuery.wptzms"
|
||||
placeholder="物品特征描述"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="cjsj" label="采集时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.cjsj"
|
||||
type="datetime"
|
||||
placeholder="请选中结束时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="cjsj" label="数量">
|
||||
<el-input-number v-model="listQuery.sl" min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 40%" label="检查站名称">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.kkMc">{{ listQuery.kkMc }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import { WjwpnsertEntity, WjwpeditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
sbmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源名称"
|
||||
}
|
||||
],
|
||||
sblx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择感知源类型"
|
||||
}
|
||||
],
|
||||
sbbh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入感知源编号",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
wd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入维度"
|
||||
}
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经度"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({ fl: "02" });
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
chackLat();
|
||||
}
|
||||
});
|
||||
});
|
||||
let pageType = ref("add");
|
||||
//打开弹窗
|
||||
const showJcz = ref(false);
|
||||
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.kkMc = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
WjwpnsertEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
WjwpeditEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
console.log();
|
||||
};
|
||||
//选择定位地图
|
||||
const selectLocation = () => {
|
||||
emitter.emit("drawShape", {
|
||||
flag: "select_point",
|
||||
type: "point",
|
||||
isclear: true
|
||||
});
|
||||
};
|
||||
//获取经纬度
|
||||
const chackLat = (type) => {
|
||||
const { jd, wd } = listQuery.value;
|
||||
emitter.emit("deletePointArea", "jczMap_Gzy");
|
||||
if (jd && wd) {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [{ jd, wd }],
|
||||
icon: require("@/assets/images/bi/gzy.png"),
|
||||
flag: "jczMap_Gzy"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
src/views/backOfficeSystem/peopleManag/forbiddenObject/index.vue
Normal file
195
src/views/backOfficeSystem/peopleManag/forbiddenObject/index.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="违禁物品管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sblx="{ row }">
|
||||
<dict-tag :value="row.sblx" :options="D_BZ_SBLX" :tag="false" />
|
||||
</template>
|
||||
<template #sblxdm="{ row }">
|
||||
<dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
|
||||
</template>
|
||||
<template #sklList="{ row }">
|
||||
<span v-if="row.sklList && row.sklList.length > 0">
|
||||
<span class="bqmc" v-for="iv in row.sklList" :key="iv">{{
|
||||
iv.bqmc
|
||||
}}</span>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_SF, D_BZ_SBLX, D_BZ_DWFL, D_BZ_GZSBLX }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { WjwpselectPage, WjwpdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_SBLX, D_BZ_SF, D_BZ_DWFL, D_BZ_GZSBLX } = proxy.$dict(
|
||||
"D_BZ_SBLX",
|
||||
"D_BZ_SF",
|
||||
"D_BZ_DWFL",
|
||||
"D_BZ_GZSBLX"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "安检违禁物品",
|
||||
prop: "ajwjwp",
|
||||
placeholder: "请输入安检违禁物品",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "安检违禁物品类别代码",
|
||||
prop: "wjwplbdm",
|
||||
placeholder: "请输入安检违禁物品类别代码",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "安检违禁物品", prop: "ajwjwp", showOverflowTooltip: true },
|
||||
{ label: "卡口名称", prop: "kkMc", showOverflowTooltip: true },
|
||||
{ label: "采集时间", prop: "cjsj", showOverflowTooltip: true },
|
||||
{ label: "物品特征描述", prop: "wptzms", showOverflowTooltip: true },
|
||||
{ label: "数量", prop: "sl", showOverflowTooltip: true },
|
||||
{
|
||||
label: "安检违禁物品类别代码",
|
||||
prop: "wjwplbdm",
|
||||
showOverflowTooltip: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
WjwpselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
WjwpdeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form ref="elform" :model="form" :inline="true" label-position="top">
|
||||
<el-form-item prop="ssbmdm" label="预警类型" style="width: 40%">
|
||||
<el-select
|
||||
clearable
|
||||
disabled
|
||||
v-model="listQuery.yjLx"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_YJLX"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="感知源名称" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.yjGzymc"
|
||||
placeholder="感知源名称"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="scode" label="预警发生时间" style="width: 40%">
|
||||
<el-date-picker
|
||||
v-model="listQuery.yjSj"
|
||||
type="datetime"
|
||||
placeholder="请选中开始时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
disabled
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbmc" label="预警对象" style="width: 40%">
|
||||
<el-input
|
||||
v-model="DX"
|
||||
placeholder="请输入装备名称"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警地址" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.yjDz"
|
||||
placeholder="请输入预警地址"
|
||||
disabled
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警级别" style="width: 40%">
|
||||
<el-select
|
||||
clearable
|
||||
disabled
|
||||
v-model="listQuery.yjJb"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_YJJB"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警内容" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.yjNr"
|
||||
disabled
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警图片">
|
||||
<el-image
|
||||
:preview-src-list="[listQuery.yjTp]"
|
||||
fit="cover"
|
||||
style="width: 100px; height: 100px"
|
||||
:src="listQuery.yjTp"
|
||||
></el-image>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { TcsbsaveTcsbsave, Tcsbupdate } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const propsTree = ref({
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const DX = ref();
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit" || type == "detail") {
|
||||
DX.value = row.yjRyxm ? row.yjRyxm : row.yjClcph;
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
DX.value = "";
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
src/views/backOfficeSystem/peopleManag/forewarning/index.vue
Normal file
159
src/views/backOfficeSystem/peopleManag/forewarning/index.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="预警管理"> </PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #yjTp="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.tp" :src="urlImg + row.yjTp" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<template #yjLx="{ row }">
|
||||
<dict-tag :options="D_BZ_YJLX" :value="row.yjLx" :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>
|
||||
<!-- 编辑详情 -->
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm ref="detailDiloag" :dict="{ D_BZ_YJLX, D_BZ_YJJB }" />
|
||||
</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 EditAddForm from "./components/editAddForm.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_YJLX, D_BZ_YJJB } = proxy.$dict("D_BZ_YJLX", "D_BZ_YJJB");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "预警类型",
|
||||
prop: "yjLx",
|
||||
placeholder: "预警类型",
|
||||
showType: "select",
|
||||
options: D_BZ_YJLX
|
||||
},
|
||||
{
|
||||
label: "发生时间",
|
||||
prop: "startTime",
|
||||
placeholder: "发生时间",
|
||||
showType: "datetimerange"
|
||||
}
|
||||
// {
|
||||
// label: "预警对象",
|
||||
// prop: "yjLx",
|
||||
// placeholder: "请输入预警对象",
|
||||
// showType: "input"
|
||||
// }
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "预警图片", prop: "yjTp", showSolt: true },
|
||||
{ label: "感知源名称", prop: "yjGzymc" },
|
||||
{ label: "预警时间", prop: "yjSj" },
|
||||
{ label: "预警人员", prop: "yjRyxm" },
|
||||
{ label: "预警车牌号", prop: "yjClcph" },
|
||||
{ label: "预警类型", prop: "yjLx", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
jczgetPageList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div style="position: relative; width: 90px; height: 100px">
|
||||
<el-upload
|
||||
action="/mosty-api/mosty-base/minio/image/upload/id"
|
||||
:on-change="upImgFile"
|
||||
:on-success="upImg"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
|
||||
<el-icon v-else>
|
||||
<Plus></Plus>
|
||||
</el-icon>
|
||||
<span
|
||||
v-if="imgUrl"
|
||||
style="position: absolute; top: -52px; right: -20px"
|
||||
>
|
||||
<el-icon size="20" @click.stop="deletImg">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<el-form-item prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="listQuery.ssbm"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
clearable
|
||||
filterable
|
||||
:props="props"
|
||||
v-model:modelValue="listQuery.gldwdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号" prop="qxbh">
|
||||
<el-input
|
||||
v-model="listQuery.qxbh"
|
||||
placeholder="请输入设备编号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="装备类型" prop="qxlx">
|
||||
<el-select v-model="listQuery.qxlx" placeholder="请选择性别">
|
||||
<el-option
|
||||
v-for="item in dict.D_JCGL_JYQX_QXLX"
|
||||
:key="item"
|
||||
:label="item.zdmc"
|
||||
:value="item.dm"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="qxMc" label="装备名称">
|
||||
<el-input
|
||||
v-model="listQuery.qxMc"
|
||||
placeholder="请输入装备名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备型号">
|
||||
<el-input
|
||||
v-model="listQuery.xh"
|
||||
placeholder="请输入装备型号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量" prop="sl">
|
||||
<el-input-number v-model="listQuery.sl" :step="1" :min="0" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="设备sim卡号">
|
||||
<el-input
|
||||
v-model="listQuery.sbsim"
|
||||
placeholder="请输入装备型号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="装备状态">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.zbzt"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_ZDY_SBZT"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备厂商">
|
||||
<el-input
|
||||
v-model="listQuery.sccs"
|
||||
placeholder="请输入装备厂商"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cgrq" label="购置日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="listQuery.cgrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dqsj" label="到期日期">
|
||||
<el-date-picker
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="listQuery.dqsj"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { tbJczXfbbJczXfbb, tbJczXfbbdeleteJyQxzb } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
qxMc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入器械名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
qxlx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择器械类型",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
sl: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入器械名称",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const propsTree = ref({
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
const changeZblx = (val) => {
|
||||
listQuery.value.sblx = val ? val : "";
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
tbJczXfbbJczXfbb(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
tbJczXfbbdeleteJyQxzb(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
src/views/backOfficeSystem/peopleManag/instrument/index copy.vue
Normal file
216
src/views/backOfficeSystem/peopleManag/instrument/index copy.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="智能装备管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sblx="{ row }">
|
||||
<dict-tag :options="zbAllList" :value="row.sblx" :tag="false" />
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
<!-- <el-link type="primary" @click="down(row)">附件下载</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_ZBLX_LZ, D_BZ_SF, D_ZDY_SBZT, D_JCGL_TCSB_WLLX }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { TcsbselectList, TcsbtbJczTcsb } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const {
|
||||
D_JCGL_TCSB_SBLX,
|
||||
D_BZ_SF,
|
||||
D_ZDY_SBZT,
|
||||
D_JCGL_TCSB_WLLX,
|
||||
D_BZ_ZBLX_LZ
|
||||
} = proxy.$dict(
|
||||
"D_JCGL_TCSB_SBLX",
|
||||
"D_BZ_SF",
|
||||
"D_ZDY_SBZT",
|
||||
"D_JCGL_TCSB_WLLX",
|
||||
"D_BZ_ZBLX_LZ"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
label: "设备名称",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入设备名称",
|
||||
showType: "input"
|
||||
}
|
||||
// {
|
||||
// label: "装备类型",
|
||||
// prop: "sblx",
|
||||
// placeholder: "装备类型",
|
||||
// showType: "cascader",
|
||||
// options: D_BZ_ZBLX_LZ
|
||||
// }
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "设备名称", prop: "sbmc" },
|
||||
{ label: "使用单位名称", prop: "sydwmc" },
|
||||
{ label: "设备类型", prop: "sblx", showSolt: true },
|
||||
{ label: "设备sim卡号", prop: "sbsim" },
|
||||
{ label: "设备编号", prop: "sbbh" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
TcsbselectList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
TcsbtbJczTcsb(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
const zbAllList = ref([]);
|
||||
watch(
|
||||
() => D_BZ_ZBLX_LZ.value,
|
||||
(val) => {
|
||||
val.forEach((p) => {
|
||||
zbAllList.value.push(p);
|
||||
if (p.itemList && p.itemList.length > 0) {
|
||||
getChildren(p);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
// 递归处理数据
|
||||
const getChildren = (item) => {
|
||||
zbAllList.value.push(item);
|
||||
if (item.itemList && item.itemList.length > 0) {
|
||||
item.itemList.forEach((v) => {
|
||||
getChildren(v);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
223
src/views/backOfficeSystem/peopleManag/instrument/index.vue
Normal file
223
src/views/backOfficeSystem/peopleManag/instrument/index.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="警用器械管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sblx="{ row }">
|
||||
<dict-tag :options="zbAllList" :value="row.sblx" :tag="false" />
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
<!-- <el-link type="primary" @click="down(row)">附件下载</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{
|
||||
D_BZ_ZBLX_LZ,
|
||||
D_BZ_SF,
|
||||
D_ZDY_SBZT,
|
||||
D_JCGL_TCSB_WLLX,
|
||||
D_JCGL_JYQX_QXLX,
|
||||
D_ZDY_SBZT
|
||||
}"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { tbJczXfbbselectJyqx, TcsbtbJczTcsb } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const {
|
||||
D_JCGL_JYQX_QXLX,
|
||||
D_BZ_SF,
|
||||
D_ZDY_SBZT,
|
||||
D_JCGL_TCSB_WLLX,
|
||||
D_BZ_ZBLX_LZ
|
||||
} = proxy.$dict(
|
||||
"D_JCGL_JYQX_QXLX",
|
||||
"D_BZ_SF",
|
||||
"D_ZDY_SBZT",
|
||||
"D_JCGL_TCSB_WLLX",
|
||||
"D_BZ_ZBLX_LZ"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
label: "设备名称",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入设备名称",
|
||||
showType: "input"
|
||||
}
|
||||
// {
|
||||
// label: "装备类型",
|
||||
// prop: "sblx",
|
||||
// placeholder: "装备类型",
|
||||
// showType: "cascader",
|
||||
// options: D_BZ_ZBLX_LZ
|
||||
// }
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNo: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "设备名称", prop: "sbmc" },
|
||||
{ label: "使用单位名称", prop: "sydwmc" },
|
||||
{ label: "设备类型", prop: "sblx", showSolt: true },
|
||||
{ label: "设备sim卡号", prop: "sbsim" },
|
||||
{ label: "设备编号", prop: "sbbh" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
tbJczXfbbselectJyqx(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNo = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
TcsbtbJczTcsb(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageNo = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
const zbAllList = ref([]);
|
||||
watch(
|
||||
() => D_BZ_ZBLX_LZ.value,
|
||||
(val) => {
|
||||
val.forEach((p) => {
|
||||
zbAllList.value.push(p);
|
||||
if (p.itemList && p.itemList.length > 0) {
|
||||
getChildren(p);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
// 递归处理数据
|
||||
const getChildren = (item) => {
|
||||
zbAllList.value.push(item);
|
||||
if (item.itemList && item.itemList.length > 0) {
|
||||
item.itemList.forEach((v) => {
|
||||
getChildren(v);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item
|
||||
style="width: 40%"
|
||||
prop="jdcsysmc"
|
||||
label="机动车所有人姓名"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.jdcsysmc"
|
||||
placeholder="请输入机动车所有人姓名"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item style="width: 40%" prop="gmsfzhm" label="公民身份证号码">
|
||||
<el-input
|
||||
v-model="listQuery.gmsfzhm"
|
||||
placeholder="请输入公民身份证号码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item style="width: 40%" prop="clxh" label="车辆型号">
|
||||
<el-input
|
||||
v-model="listQuery.clxh"
|
||||
placeholder="请输入车辆型号"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="hphm" label="机动车号牌号码">
|
||||
<el-input
|
||||
v-model="listQuery.hphm"
|
||||
placeholder="请输入机动车号牌号码"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" prop="jrsj" label="加入时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.jrsj"
|
||||
type="datetime"
|
||||
placeholder="请选中结束时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="sfjc" style="width: 40%" label="省份简称">
|
||||
<el-select
|
||||
v-model="listQuery.sfjc"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_XZQHDM"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cllxdm" style="width: 40%" label="机动车车辆类型">
|
||||
<el-select
|
||||
v-model="listQuery.cllxdm"
|
||||
class="m-2"
|
||||
placeholder="请选择机动车车辆类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_CLLX"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="csysdm" style="width: 40%" label="机动车车身颜色">
|
||||
<el-select
|
||||
v-model="listQuery.csysdm"
|
||||
class="m-2"
|
||||
placeholder="请选择机动车车身颜色"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_BZ_CLYS"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="hpzldm"
|
||||
style="width: 40%"
|
||||
label="机动车号牌种类颜色"
|
||||
>
|
||||
<el-select
|
||||
v-model="listQuery.hpzldm"
|
||||
class="m-2"
|
||||
placeholder="请选择机动车号牌种类颜色"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_JCGL_JYCL_HPYSLB"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 40%" label="检查站名称">
|
||||
<div class="diviput" @click="showJcz = true">
|
||||
<span v-if="listQuery.kkMc">{{ listQuery.kkMc }}</span>
|
||||
<span class="placeholder" v-else> 请选择布控卡口</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Jczloder from "@/components/loder/Jczloder.vue";
|
||||
import { ClbmdinsertEntity, ClbmdeditEntity } from "@/api/mosty-jcz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
}
|
||||
],
|
||||
gmsfzhm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号"
|
||||
}
|
||||
],
|
||||
jrsj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入加入时间",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
onMounted(() => {});
|
||||
let pageType = ref("add");
|
||||
//打开弹窗
|
||||
const showJcz = ref(false);
|
||||
|
||||
const JczMsg = (val) => {
|
||||
listQuery.value.kkMc = val.jczmc;
|
||||
listQuery.value.kkId = val.id;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
ClbmdinsertEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
ClbmdeditEntity(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diviput {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
.placeholder {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
198
src/views/backOfficeSystem/peopleManag/listedVehicles/index.vue
Normal file
198
src/views/backOfficeSystem/peopleManag/listedVehicles/index.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆白名单">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sfjc="{ row }">
|
||||
<dict-tag :value="row.sfjc" :options="D_BZ_XZQHDM" :tag="false" />
|
||||
</template>
|
||||
<template #csysdm="{ row }">
|
||||
<dict-tag :value="row.csysdm" :options="D_BZ_CLYS" :tag="false" />
|
||||
</template>
|
||||
|
||||
<template #type="{ row }">
|
||||
{{ row.type == "02" ? "黑名单" : "白名单" }}
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_XZQHDM, D_BZ_CLLX, D_BZ_CLYS, D_JCGL_JYCL_HPYSLB }"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { ClbmdselectPage, ClbmdeleteById } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_XZQHDM, D_BZ_CLLX, D_BZ_CLYS, D_JCGL_JYCL_HPYSLB } = proxy.$dict(
|
||||
"D_BZ_XZQHDM",
|
||||
"D_BZ_CLLX",
|
||||
"D_BZ_CLYS",
|
||||
"D_JCGL_JYCL_HPYSLB"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "车牌号",
|
||||
prop: "hphm",
|
||||
placeholder: "请输入车牌号",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
|
||||
{ label: "机动车号牌号码", prop: "hphm", showOverflowTooltip: true },
|
||||
{ label: "车辆型号", prop: "clxh", showOverflowTooltip: true },
|
||||
{
|
||||
label: "机动车车身颜色代码",
|
||||
prop: "csysdm",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{ label: "卡口名称", prop: "kkMc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "省份简称",
|
||||
prop: "sfjc",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
},
|
||||
{
|
||||
label: "名单类型",
|
||||
prop: "type",
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true
|
||||
}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref();
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
ClbmdselectPage(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
ClbmdeleteById({ ids: [ids] }).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<div class="my_transfer">
|
||||
<div class="tree">
|
||||
<MOSTY.DepartmentTree
|
||||
width="300px"
|
||||
placeholder="管理部门ID"
|
||||
clearable
|
||||
filterable
|
||||
:isBmId="true"
|
||||
v-model="listQuery.deptId"
|
||||
/>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="serch">
|
||||
<el-form :model="searchConfiger" ref="formRef" :inline="true">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
v-model="searchConfiger.loginName"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码">
|
||||
<el-input
|
||||
placeholder="请输入电话"
|
||||
v-model="searchConfiger.phone"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码">
|
||||
<el-input
|
||||
v-model="searchConfiger.idEntityCard"
|
||||
placeholder="请输入身份证号码"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否包含下级">
|
||||
<el-select v-model="searchConfiger.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 type="success" @click="getBaseselectPage"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div
|
||||
class="tableBox"
|
||||
:style="{ height: tableHeight1 + 'px' }"
|
||||
style="border: 1px solid #07376d"
|
||||
>
|
||||
<el-table
|
||||
:data="tableLeftData"
|
||||
border
|
||||
row-key="id"
|
||||
height="100%"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChangeLeft"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column
|
||||
prop="deptName"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
label="用户姓名"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="idEntityCard"
|
||||
label="身份证号"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="mobile" label="电话号码" align="center" />
|
||||
<el-table-column
|
||||
prop="inDustRialId"
|
||||
label="警号"
|
||||
align="center"
|
||||
/>
|
||||
</el-table>
|
||||
<div>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChangeUser"
|
||||
@current-change="handleCurrentChangeUser"
|
||||
:current-page="linQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="linQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalUser"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button :icon="Back" circle @click="upLeft" />
|
||||
<el-button :icon="Right" circle @click="upRight" />
|
||||
</div>
|
||||
<div class="right" style="height: 700px; border: 1px solid #07376d">
|
||||
<el-table
|
||||
:data="tableRightData"
|
||||
ref="multipleTableRef"
|
||||
border
|
||||
row-key="id"
|
||||
height="100%"
|
||||
@selection-change="handleSelectionChangeRight"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column
|
||||
prop="deptName"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
label="用户姓名"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="inDustRialId"
|
||||
label="警号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jcztbQwXfll } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
|
||||
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
file: "",
|
||||
spbt: ""
|
||||
});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const tableLeftData = ref([]);
|
||||
const tableRightData = ref([]);
|
||||
//查询条件
|
||||
const searchConfiger = ref({
|
||||
loginName: "",
|
||||
phone: "",
|
||||
idEntityCard: "",
|
||||
fzzt: ""
|
||||
});
|
||||
const linQuery = reactive({ pageSize: 10, pageCurrent: 1 });
|
||||
const totalUser = ref(0);
|
||||
const getBaseselectPage = () => {
|
||||
const promes = { ...linQuery, ...searchConfiger.value };
|
||||
baseselectPage(promes).then((res) => {
|
||||
totalUser.value = res.total;
|
||||
tableLeftData.value = res.records;
|
||||
});
|
||||
};
|
||||
getBaseselectPage();
|
||||
//左边选中数据
|
||||
const leftdata = ref([]);
|
||||
//右边选中数据
|
||||
const rightData = ref([]);
|
||||
//列表身份证集合，穿梭框去重
|
||||
const idEntityList = ref([]);
|
||||
//报格
|
||||
const multipleTableRef = ref();
|
||||
const handleSelectionChangeLeft = (val) => {
|
||||
leftdata.value = val;
|
||||
};
|
||||
const handleSelectionChangeRight = (val) => {
|
||||
rightData.value = val;
|
||||
};
|
||||
const upLeft = () => {
|
||||
rightData.value.forEach((v) => {
|
||||
const index = tableLeftData.value.indexOf(v);
|
||||
const i = tableRightData.value.indexOf(v);
|
||||
if (index == -1) {
|
||||
tableLeftData.value.push(v);
|
||||
tableRightData.value.splice(i, 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const upRight = () => {
|
||||
let num = leftdata.value.length;
|
||||
leftdata.value.forEach((v) => {
|
||||
const index = tableRightData.value.indexOf(v);
|
||||
const i = tableLeftData.value.indexOf(v);
|
||||
if (index == -1 && idEntityList.value.indexOf(v.idEntityCard) == -1) {
|
||||
tableRightData.value.push(v);
|
||||
multipleTableRef.value.toggleRowSelection(v, true);
|
||||
tableLeftData.value.splice(i, 1);
|
||||
num--;
|
||||
}
|
||||
});
|
||||
if (num != 0) {
|
||||
ElMessage({ message: "请勿重复添加", type: "warning" });
|
||||
}
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
const allData = tableRightData.value.map((item) => {
|
||||
const itemForm = {
|
||||
ryid: item.id,
|
||||
ssbmid: item.deptId,
|
||||
ssbm: item.deptName,
|
||||
ssbmdm: item.deptCode,
|
||||
lxdh: item.mobile,
|
||||
xm: item.userName,
|
||||
sfzh: item.idEntityCard,
|
||||
whcddm: item.whcd,
|
||||
fl: "01",
|
||||
jh: item.inDustRialId,
|
||||
zzmm: item.politic,
|
||||
hyzk: item.marital,
|
||||
lx: item.type,
|
||||
xbdm: item.sex,
|
||||
mzdm: item.nation
|
||||
};
|
||||
return jcztbQwXfll(itemForm);
|
||||
});
|
||||
Promise.all(allData).then((res) => {
|
||||
ElMessage({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
// chooseUserVisible.value = false;
|
||||
// dialogFormVisible.value = false;
|
||||
close();
|
||||
// getListData();
|
||||
});
|
||||
};
|
||||
|
||||
// 分页查询
|
||||
const handleSizeChangeUser = (e) => {
|
||||
linQuery.pageSize = e;
|
||||
getBaseselectPage;
|
||||
};
|
||||
const handleCurrentChangeUser = (e) => {
|
||||
linQuery.pageCurrent = e;
|
||||
getBaseselectPage;
|
||||
};
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
// console.log(formRef.value.offsetHeight);
|
||||
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
184
src/views/backOfficeSystem/peopleManag/peoplePolice/index.vue
Normal file
184
src/views/backOfficeSystem/peopleManag/peoplePolice/index.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="巡防民警">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #tp="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.tp" :src="urlImg + row.tp" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="addEdit('detail', row)"
|
||||
>人员档案</el-link
|
||||
>
|
||||
<!-- <el-link type="primary" @click="down(row)">附件下载</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{ D_BZ_SF, D_BZ_MZ, D_BZ_XB, D_BZ_ZZMM }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { jczgetXfllList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SF, D_BZ_MZ, D_BZ_XB, D_BZ_ZZMM } = proxy.$dict(
|
||||
"D_BZ_SF",
|
||||
"D_BZ_MZ",
|
||||
"D_BZ_XB",
|
||||
"D_BZ_ZZMM"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "sfzh",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "是否离职",
|
||||
prop: "xtSjzt",
|
||||
placeholder: "是否离职",
|
||||
showType: "select",
|
||||
options: D_BZ_SF
|
||||
},
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "图片", prop: "tp", showSolt: true },
|
||||
{ label: "民警姓名", prop: "xm" },
|
||||
{ label: "身份证号码", prop: "sfzh" },
|
||||
{ label: "警号", prop: "jh" },
|
||||
{ label: "专业技能", prop: "zyjn" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({
|
||||
jllx: "01"
|
||||
});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
jczgetXfllList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item prop="cph" label="车牌号">
|
||||
<el-input
|
||||
v-model="listQuery.cph"
|
||||
placeholder="请输入车牌号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="listQuery.ssbm"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
filterable
|
||||
v-model="listQuery.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cplx" label="号牌种类">
|
||||
<el-select
|
||||
v-model="listQuery.cplx"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_HPZL"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbzt" label="车辆状态">
|
||||
<el-select
|
||||
v-model="listQuery.zbzt"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.D_ZDY_SBZT"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="clpp" label="车辆品牌">
|
||||
<el-select
|
||||
v-model="listQuery.clpp"
|
||||
class="m-2"
|
||||
filterable
|
||||
placeholder="请选择车辆品牌"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_CLPP"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clxh" label="车辆型号">
|
||||
<el-input
|
||||
placeholder="请输入车辆型号"
|
||||
v-model="listQuery.clxh"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clnk" label="车辆年款">
|
||||
<el-date-picker
|
||||
type="year"
|
||||
v-model="listQuery.clnk"
|
||||
format="YYYY"
|
||||
value-format="YYYY"
|
||||
placeholder="请选择车辆年款"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="gmrq" label="车辆生产日期">
|
||||
<el-date-picker
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="listQuery.gmrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
:disabledDate="disableCgrq"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bfrq" label="车辆报废日期">
|
||||
<el-date-picker
|
||||
@focus="cgrqTs"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="listQuery.bfrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
:disabledDate="disableDqsj"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cllx" label="车辆类型">
|
||||
<el-select
|
||||
v-model="listQuery.cllx"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_CLLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clys" label="车辆颜色">
|
||||
<el-select
|
||||
v-model="listQuery.clys"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.D_BZ_CLYS"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="GPS">
|
||||
<el-input
|
||||
v-model="listQuery.gpsId"
|
||||
placeholder="请输入GPS"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 新增的电台和监控 -->
|
||||
<el-form-item label="车载电台">
|
||||
<el-input
|
||||
v-model="listQuery.czdt"
|
||||
placeholder="请输入车载电台"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车载监控">
|
||||
<el-input
|
||||
v-model="listQuery.czjk"
|
||||
placeholder="请输入车载监控"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 100%"
|
||||
prop="jyqxList"
|
||||
label="警用器械"
|
||||
@click.stop="jyqxVisible = true"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.jyqx"
|
||||
placeholder="请选择警用器械"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
readonly
|
||||
suffix-icon="ArrowDown"
|
||||
v-if="jyqxData.length <= 0"
|
||||
/>
|
||||
<template v-else>
|
||||
<el-tag
|
||||
v-for="tag in jyqxData"
|
||||
:key="tag.id"
|
||||
closable
|
||||
:type="tag.type"
|
||||
@close.stop="handleClose(tag)"
|
||||
>
|
||||
{{ tag.qxMc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="器械数量"
|
||||
style="width: 100%"
|
||||
v-if="jyqxData.length > 0"
|
||||
>
|
||||
<span
|
||||
v-for="(item, idx) in jyqxData"
|
||||
:key="idx"
|
||||
style="margin: 10px 10px 10px 0"
|
||||
>
|
||||
{{ item.qxMc }}
|
||||
<el-input-number
|
||||
:min="0"
|
||||
:max="1000"
|
||||
v-model="item.sl"
|
||||
></el-input-number>
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.textarea"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jczaddXfcl, jczupdateXfcl } from "@/api/mosty-jcz.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emit = defineEmits(["getjczgetXfllList"]);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const jyqxData = ref([]);
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "blur" }],
|
||||
cplx: [{ required: true, message: "请选择号牌种类", trigger: "change" }],
|
||||
cph: [{ required: true, message: "请输入车牌号", trigger: "change" }],
|
||||
clpp: [{ required: true, message: "请输入车辆品牌", trigger: "change" }],
|
||||
clnk: [{ required: true, message: "请选择车辆年款", trigger: "change" }],
|
||||
bfrq: [{ required: true, message: "请选择车辆报废日期", trigger: "change" }],
|
||||
gmrq: [{ required: true, message: "请选择车辆生产日期", trigger: "change" }]
|
||||
});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit") {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
//保存
|
||||
const _onSave = () => {
|
||||
if (!formRef) return;
|
||||
formRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (pageType.value == "add") {
|
||||
jczaddXfcl(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
} else {
|
||||
jczupdateXfcl(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("getjczgetXfllList");
|
||||
close();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #000000;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="addEdit('add', row)"
|
||||
>新增</span
|
||||
>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #zbzt="{ row }">
|
||||
<dict-tag :value="row.zbzt" :options="D_ZDY_SBZT"></dict-tag>
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||||
<el-link type="primary" @click="delDictItem(row.cid)">删除</el-link>
|
||||
<!-- <el-link type="primary" @click="down(row)">附件下载</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
ref="detailDiloag"
|
||||
:dict="{
|
||||
D_ZDY_SBZT,
|
||||
D_JCGL_JYCL_HPYSLB,
|
||||
D_BZ_HPZL,
|
||||
D_BZ_CLPP,
|
||||
D_BZ_CLLX,
|
||||
D_BZ_CLYS
|
||||
}"
|
||||
@getjczgetXfllList="getjczgetXfllList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { jczgetXfclList, jczdeleteXfcl } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDY_SBZT, D_BZ_HPZL, D_BZ_CLPP, D_BZ_CLLX, D_BZ_CLYS } = proxy.$dict(
|
||||
"D_ZDY_SBZT",
|
||||
"D_BZ_HPZL",
|
||||
"D_BZ_CLPP",
|
||||
"D_BZ_CLLX",
|
||||
"D_BZ_CLYS"
|
||||
);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
{
|
||||
label: "车牌号",
|
||||
prop: "cph",
|
||||
placeholder: "请输入车牌号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "车辆品牌",
|
||||
prop: "clpp",
|
||||
placeholder: "请输入车辆品牌",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "所属部门", prop: "ssbm" },
|
||||
{ label: "车牌号", prop: "cph" },
|
||||
{ label: "状态", prop: "zbzt", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
jczgetXfclList(promes)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
// 删除
|
||||
const delDictItem = (ids) => {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
jczdeleteXfcl(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getjczgetXfllList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
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>
|
||||
1417
src/views/home/components/511202.json
Normal file
1417
src/views/home/components/511202.json
Normal file
File diff suppressed because it is too large
Load Diff
149
src/views/home/components/CarWarning.vue
Normal file
149
src/views/home/components/CarWarning.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div
|
||||
class="waning-cards noScollLine"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="warning-image">
|
||||
<img :src="item.yjTp" alt="预警图片" />
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item">
|
||||
<span class="label">车牌号：</span>
|
||||
<span>{{ item.yjClcph }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">相似度：</span>
|
||||
<span class="highlight">{{ item.xsd }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span>{{ item.yjSj }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.yjDz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList.data.length == 0" :imgSize="100" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance } from "vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 2,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
jczid: props.jczId
|
||||
});
|
||||
// 获取预警数据
|
||||
const getPageList = () => {
|
||||
loading.value = true;
|
||||
jczgetPageList(linkQuery.value)
|
||||
.then((res) => {
|
||||
warningList.data =
|
||||
linkQuery.value.pageNum == 1
|
||||
? res.records
|
||||
: warningList.data.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("预警数据请求错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//滚动
|
||||
const rollingLoading = () => {
|
||||
if (warningList.data.length < warningList.total) {
|
||||
linkQuery.value.pageNum++;
|
||||
getPageList();
|
||||
}
|
||||
};
|
||||
getPageList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.waning-cards {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/bg_10.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(250, 177, 21, 0.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffac26;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
158
src/views/home/components/PeoWarning.vue
Normal file
158
src/views/home/components/PeoWarning.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div
|
||||
class="waning-cards noScollLine"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="warning-image">
|
||||
<img :src="item.yjTp" alt="预警图片" />
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item">
|
||||
<span class="label">姓名：</span>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item flex">
|
||||
<span class="label">性别：</span>
|
||||
<dict-tag
|
||||
:options="D_BZ_XB"
|
||||
:value="IdCard(item.yjRysfzh, 3)"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">相似度：</span>
|
||||
<span class="highlight">{{ item.xsd }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span>{{ item.yjSj }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.yjDz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList.data.length == 0" :imgSize="100" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance } from "vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import { IdCard } from "@/utils/dict.js";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
jczid: props.jczId
|
||||
});
|
||||
// 获取预警数据
|
||||
const getPageList = () => {
|
||||
loading.value = true;
|
||||
jczgetPageList(linkQuery.value)
|
||||
.then((res) => {
|
||||
warningList.data =
|
||||
linkQuery.value.pageNum == 1
|
||||
? res.records
|
||||
: warningList.data.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("预警数据请求错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//滚动
|
||||
const rollingLoading = () => {
|
||||
if (warningList.data.length < warningList.total) {
|
||||
linkQuery.value.pageNum++;
|
||||
getPageList();
|
||||
}
|
||||
};
|
||||
getPageList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.waning-cards {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/bg_10.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(250, 177, 21, 0.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffac26;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
102
src/views/home/components/beonDuty.vue
Normal file
102
src/views/home/components/beonDuty.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="checkpoint-list noScollLine" v-loading="loading">
|
||||
<div
|
||||
class="checkpoint-item"
|
||||
v-for="(item, index) in checkpoints"
|
||||
:key="index"
|
||||
>
|
||||
<div class="checkpoint-icon">
|
||||
<img src="@/assets/images/bg_11.png" alt="检查站" />
|
||||
</div>
|
||||
<div class="checkpoint-info">
|
||||
<span class="checkpoint-name">{{ item.kkMc }}：</span>
|
||||
<span class="checkpoint-count">{{ item.personSl }} 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="checkpoints.length == 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
import { jczjczCount } from "@/api/mosty-jcz";
|
||||
const loading = ref(false);
|
||||
|
||||
const checkpoints = ref([]);
|
||||
const jczjczCountList = () => {
|
||||
loading.value = true;
|
||||
jczjczCount()
|
||||
.then((res) => {
|
||||
if (res.length == 0) checkpoints.value = [];
|
||||
checkpoints.value = res.map((item) => {
|
||||
return {
|
||||
personSl: item.mjsl + item.fjsl,
|
||||
kkMc: item.kkMc
|
||||
};
|
||||
});
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("检查站备勤错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
jczjczCountList();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.checkpoint-list {
|
||||
margin-top: 20px;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.checkpoint-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
padding: 4px 10px 4px 22px;
|
||||
}
|
||||
|
||||
.checkpoint-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.checkpoint-icon img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.checkpoint-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkpoint-name {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.checkpoint-count {
|
||||
color: #00f0ff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
194
src/views/home/components/collection.vue
Normal file
194
src/views/home/components/collection.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="data-statistics">
|
||||
<!-- 人员数据采集 -->
|
||||
<div class="data-collection">
|
||||
<h2 class="section-title">人员数据采集</h2>
|
||||
<div class="statistics-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.rzhy }}</div>
|
||||
<div class="f14">人证核验</div>
|
||||
<div><img src="@/assets/images/bg_03.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.wgtx }}</div>
|
||||
<div class="f14">无感通行</div>
|
||||
<div><img src="@/assets/images/bg_04.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.sczd }}</div>
|
||||
<div class="f14">手持终端登记</div>
|
||||
<div><img src="@/assets/images/bg_05.png" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流入流出统计 -->
|
||||
<div class="flow-statistics">
|
||||
<h2 class="section-title">流入流出统计</h2>
|
||||
<div class="flow-grid">
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_06.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林人员</span>
|
||||
<span class="flow-number">{{ carAccess.rlsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_06.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林人员</span>
|
||||
<span class="flow-number">{{ carAccess.clsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_07.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林车辆</span>
|
||||
<span class="flow-number">{{ personneAccess.rlsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_07.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林车辆</span>
|
||||
<span class="flow-number">{{ personneAccess.clsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以在这里添加需要的响应式数据和方法
|
||||
import { jczCountWay, jczgetcountCrl, jczGzrycountCrl } from "@/api/mosty-jcz";
|
||||
import { ref } from "vue";
|
||||
const personnelData = ref({
|
||||
rzhy: 0,
|
||||
sczd: 0,
|
||||
wgtx: 0
|
||||
});
|
||||
const personneAccess = ref({
|
||||
clsl: 0,
|
||||
rlsl: 0
|
||||
});
|
||||
const carAccess = ref({
|
||||
clsl: 0,
|
||||
rlsl: 0
|
||||
});
|
||||
const countWay = () => {
|
||||
jczCountWay()
|
||||
.then((res) => {
|
||||
personnelData.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
const getcountCrl = () => {
|
||||
jczgetcountCrl()
|
||||
.then((res) => {
|
||||
personneAccess.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
const GzrycountCrl = () => {
|
||||
jczGzrycountCrl()
|
||||
.then((res) => {
|
||||
carAccess.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
countWay();
|
||||
GzrycountCrl();
|
||||
getcountCrl();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-statistics {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 90%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: url("~@/assets/images/bg_02.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.statistics-cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
color: #00f0ff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.flow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.flow-icon {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.flow-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flow-label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flow-number {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
320
src/views/home/components/entrance.vue
Normal file
320
src/views/home/components/entrance.vue
Normal file
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="entrance">
|
||||
<div class="cloes" @click="cloes">
|
||||
<img src="@/assets/images/tc/close.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="flex just-between align-center bt">
|
||||
<div class="headline">{{ BbMag?.jczmc }}</div>
|
||||
<div class="headbut" style="" @click="enterLevel">进入检查站</div>
|
||||
</div>
|
||||
<div class="flex just-between content">
|
||||
<div class="contentLeft">
|
||||
<div class="flex">
|
||||
<div class="leftImg">
|
||||
<img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="leftMag">
|
||||
<div class="ld">值班领导</div>
|
||||
<div class="name">{{ BbMag.fzrXm }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="leftImg">
|
||||
<img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="leftMag">
|
||||
<div class="ld">联系电话</div>
|
||||
<div class="name">{{ BbMag.fzrLxdh }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dutyList flex just-between align-center">
|
||||
<div class="dutyImg">
|
||||
<img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="occupation">
|
||||
值班民警：<span class="number">{{ BbMag.ryList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dutyList flex just-between align-center">
|
||||
<div class="dutyImg">
|
||||
<img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="occupation">
|
||||
值班武警：<span class="number">{{ BbMag.ryList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dutyList flex just-between align-center">
|
||||
<div class="dutyImg">
|
||||
<img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="occupation">
|
||||
值班民警：<span class="number">{{ BbMag.ryList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentRight">
|
||||
<div
|
||||
class="flex align-center right just-between"
|
||||
v-for="(item, index) in ArrList"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="number">
|
||||
<span>{{ item.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
jczqueryById,
|
||||
jczCountWay,
|
||||
jczgetcountCrl,
|
||||
jczGzrycountCrl
|
||||
} from "@/api/mosty-jcz";
|
||||
import { useRouter } from "vue-router";
|
||||
const props = defineProps({
|
||||
JczData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const BbMag = ref({ ryList: [] });
|
||||
const getjczqueryByIdFeign = () => {
|
||||
jczqueryById({ jczid: props.JczData.id }).then((res) => {
|
||||
BbMag.value = res;
|
||||
});
|
||||
};
|
||||
getjczqueryByIdFeign();
|
||||
const router = useRouter();
|
||||
const enterLevel = () => {
|
||||
const hrefs = router.resolve({
|
||||
name: "StationLevel",
|
||||
path: "/StationLevel",
|
||||
query: { id: props.JczData.id, name: props.JczData.jczmc }
|
||||
});
|
||||
window.open(hrefs.href, "_blank");
|
||||
};
|
||||
const cloes = () => {
|
||||
emitter.emit("showJcz");
|
||||
};
|
||||
let ArrList = ref([
|
||||
{
|
||||
name: "人证核验:",
|
||||
count: 0,
|
||||
key: "rzhy"
|
||||
},
|
||||
{
|
||||
name: "无感通行:",
|
||||
count: 0,
|
||||
key: "wgtx"
|
||||
},
|
||||
{
|
||||
name: "手持终端登记:",
|
||||
count: 0,
|
||||
key: "sczd"
|
||||
},
|
||||
{
|
||||
name: "进林人员:",
|
||||
count: 0,
|
||||
key: "crlrlsl"
|
||||
},
|
||||
{
|
||||
name: "出林人员:",
|
||||
count: 0,
|
||||
key: "crlclsl"
|
||||
},
|
||||
{
|
||||
name: "进林车辆:",
|
||||
count: 0,
|
||||
key: "rlsl"
|
||||
},
|
||||
{
|
||||
name: "出林车辆:",
|
||||
count: 0,
|
||||
key: "clsl"
|
||||
},
|
||||
{
|
||||
name: "人员预警:",
|
||||
count: 0,
|
||||
key: "xxx"
|
||||
},
|
||||
{
|
||||
name: "车辆预警:",
|
||||
count: 0,
|
||||
key: "xx"
|
||||
}
|
||||
]);
|
||||
const countWays = async () => {
|
||||
const way = await jczCountWay({ kkId: props.JczData.id });
|
||||
const crl = await jczgetcountCrl({ kkId: props.JczData.id });
|
||||
const gzry = await jczGzrycountCrl({ kkId: props.JczData.id });
|
||||
const crlData = {
|
||||
crlrlsl: gzry.rlsl,
|
||||
crlclsl: gzry.clsl
|
||||
};
|
||||
const data = { ...way, ...crl, ...crlData };
|
||||
ArrList.value = ArrList.value.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
count: data[item.key] ? data[item.key] : 0
|
||||
};
|
||||
});
|
||||
};
|
||||
countWays();
|
||||
// const countWay = () => {
|
||||
// jczCountWay({ kkId: props.JczData.id })
|
||||
// .then((res) => {
|
||||
// ArrList.value = ArrList.value.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// count: res[item.key] ? res[item.key] : 0
|
||||
// };
|
||||
// });
|
||||
// console.log(ArrList.value);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log(err);
|
||||
// });
|
||||
// };
|
||||
|
||||
// const getcountCrl = () => {
|
||||
// jczgetcountCrl({ kkid: props.JczData.id })
|
||||
// .then((res) => {
|
||||
// ArrList.value = ArrList.value.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// count: res[item.key] ? res[item.key] : 0
|
||||
// };
|
||||
// });
|
||||
// })
|
||||
// .catch((err) => {});
|
||||
// };
|
||||
// const GzrycountCrl = () => {
|
||||
// jczGzrycountCrl({ kkid: props.JczData.id })
|
||||
// .then((res) => {
|
||||
// ArrList.value = ArrList.value.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// count: res[item.key] ? res[item.key] : 0
|
||||
// };
|
||||
// });
|
||||
// })
|
||||
// .catch((err) => {});
|
||||
// };
|
||||
// countWay();
|
||||
// GzrycountCrl();
|
||||
// getcountCrl();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.entrance {
|
||||
position: absolute;
|
||||
width: 596px;
|
||||
height: 471px;
|
||||
background: url("~@/assets/images/tc/bg.png");
|
||||
z-index: 9999;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px 0;
|
||||
.cloes {
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 92%;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.bt {
|
||||
margin-top: 14px;
|
||||
|
||||
.headline {
|
||||
width: 70%;
|
||||
background: url("~@/assets/images/tc/bt.png");
|
||||
line-height: 38px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 35px;
|
||||
font-size: 16px;
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 700;
|
||||
}
|
||||
.headbut {
|
||||
width: 159px;
|
||||
margin-right: 20px;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/streetBi/wxz.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.contentLeft {
|
||||
width: 50%;
|
||||
.leftImg {
|
||||
width: 97px;
|
||||
height: 98px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.leftMag {
|
||||
font-size: 20px;
|
||||
height: 98px;
|
||||
align-content: space-around;
|
||||
margin-left: 10px;
|
||||
|
||||
.ld {
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.name {
|
||||
font-family: "方正黑体";
|
||||
}
|
||||
}
|
||||
.dutyList {
|
||||
padding-left: 16px;
|
||||
margin-bottom: 5px;
|
||||
.dutyImg {
|
||||
width: 27px;
|
||||
}
|
||||
.occupation {
|
||||
font-size: 20px;
|
||||
font-family: "方正黑体";
|
||||
width: calc(100% - 70px);
|
||||
.number {
|
||||
color: #02fafb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentRight {
|
||||
width: 50%;
|
||||
padding: 0 20px;
|
||||
.right {
|
||||
font-size: 18px;
|
||||
font-family: "方正黑体";
|
||||
margin-bottom: 11px;
|
||||
.number {
|
||||
width: 40%;
|
||||
color: #02fafb;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
src/views/home/components/mapecharts.vue
Normal file
145
src/views/home/components/mapecharts.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="map-container">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chart = null
|
||||
|
||||
const initChart = async () => {
|
||||
// 使用require方式导入静态资源
|
||||
const baseImg = require('@/assets/images/map-marker.svg')
|
||||
|
||||
try {
|
||||
// 确保图片加载完成
|
||||
await new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.onload = resolve
|
||||
img.onerror = reject
|
||||
img.src = baseImg
|
||||
})
|
||||
|
||||
let geoJson = require('./511202.json')
|
||||
chart = echarts.init(chartRef.value)
|
||||
echarts.registerMap('myMap', geoJson)
|
||||
|
||||
// 异步加载撒点数据
|
||||
const markerData = [
|
||||
{ name: '站点1', value: [102.651727, 30.117088, 3] },
|
||||
{ name: '站点2', value: [102.527442, 30.108846, 3] },
|
||||
{ name: '站点3', value: [102.801965, 30.100063, 3] },
|
||||
{ name: '站点4', value: [102.711411, 30.158424, 3] },
|
||||
{ name: '站点5', value: [102.579582, 30.174818, 3] }
|
||||
]
|
||||
|
||||
const option = {
|
||||
geo3D: {
|
||||
map: 'myMap',
|
||||
regionHeight: 6,
|
||||
shading: 'realistic',
|
||||
realisticMaterial: {
|
||||
roughness: 0.2,
|
||||
metalness: 0
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.2)',
|
||||
opacity: 0.9,
|
||||
borderWidth: 1,
|
||||
borderColor: '#61CFF8',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.5)',
|
||||
borderWidth: 10,
|
||||
borderColor: 'rgba(10,148,184,1)'
|
||||
}
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25,
|
||||
beta: 20
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
}
|
||||
},
|
||||
viewControl: {
|
||||
distance: 150,
|
||||
alpha: 46,
|
||||
beta: 30,
|
||||
},
|
||||
postEffect: {
|
||||
enable: true,
|
||||
bloom: {
|
||||
enable: true,
|
||||
intensity: 0.1
|
||||
}
|
||||
},
|
||||
temporalSuperSampling: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'scatter3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
symbol: 'image://' + baseImg,
|
||||
symbolSize: [40, 40],
|
||||
itemStyle: {
|
||||
color: '#00f0ff',
|
||||
opacity: 1
|
||||
},
|
||||
data: markerData
|
||||
}]
|
||||
}
|
||||
|
||||
// 确保DOM已经渲染完成
|
||||
await nextTick()
|
||||
chart.setOption(option)
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
chart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
280
src/views/home/components/wanringAnyse.vue
Normal file
280
src/views/home/components/wanringAnyse.vue
Normal file
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="warning-analysis">
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">车辆预警分析</h2>
|
||||
<div ref="vehicleChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">人员预警分析</h2>
|
||||
<div ref="personChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { choseRbgb } from "@/utils/tools";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { jczgetYjbqtj } from "@/api/mosty-jcz";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const vehicleChartRef = ref(null);
|
||||
const personChartRef = ref(null);
|
||||
let vehicleChart = null;
|
||||
let personChart = null;
|
||||
|
||||
const createChartOption = (data, colors) => {
|
||||
return {
|
||||
title: {
|
||||
text: "100",
|
||||
subtext: "总数",
|
||||
left: "20%",
|
||||
top: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "60%",
|
||||
top: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
value: {
|
||||
color: "#fff"
|
||||
},
|
||||
percentage: {
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
blue: {
|
||||
color: colors[0]
|
||||
},
|
||||
lightBlue: {
|
||||
color: colors[1]
|
||||
},
|
||||
orange: {
|
||||
color: colors[2]
|
||||
},
|
||||
green: {
|
||||
color: colors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (name) => {
|
||||
const item = data.find((d) => d.name === name);
|
||||
return `${name} ${item.value} {${item.colorType}|(${item.value}%)}`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55%", "70%"],
|
||||
center: ["28%", "50%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color[0] },
|
||||
{ offset: 1, color: item.color[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "85%"],
|
||||
center: ["28%", "50%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color1[0] },
|
||||
{ offset: 1, color: item.color1[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
const randomHexColor = () => {
|
||||
return "#" + Math.floor(Math.random() * 16777215).toString(16);
|
||||
};
|
||||
|
||||
const initCharts = async () => {
|
||||
vehicleChart = echarts.init(vehicleChartRef.value);
|
||||
personChart = echarts.init(personChartRef.value);
|
||||
const colors = ["#00f0ff", "#0066ff", "#ff9900", "#00cc66"];
|
||||
// 车辆预警数据
|
||||
const res = await jczgetYjbqtj({ yjLx: 1 });
|
||||
const res2 = await jczgetYjbqtj({ yjLx: 2 });
|
||||
console.log(res);
|
||||
const vehicleData = res.map((item) => {
|
||||
const color = randomHexColor();
|
||||
const color2 = randomHexColor();
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.yjbq,
|
||||
// colorType: color,
|
||||
color: [color, color2],
|
||||
color1: [choseRbgb(color, 0.3), choseRbgb(color2, 0.3)]
|
||||
};
|
||||
});
|
||||
|
||||
// [
|
||||
// {
|
||||
// value: 25,
|
||||
// name: "盗窃车辆",
|
||||
// colorType: "blue",
|
||||
// color: ["#00f0ff", "#00a0cc"],
|
||||
// color1: [choseRbgb("#00f0ff", 0.3), choseRbgb("#00a0cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 30,
|
||||
// name: "车牌与车辆不符",
|
||||
// colorType: "lightBlue",
|
||||
// color: ["#0066ff", "#0044cc"],
|
||||
// color1: [choseRbgb("#0066ff", 0.3), choseRbgb("#0044cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 17,
|
||||
// name: "车辆超高",
|
||||
// colorType: "orange",
|
||||
// color: ["#ff9900", "#cc7a00"],
|
||||
// color1: [choseRbgb("#ff9900", 0.3), choseRbgb("#cc7a00", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 28,
|
||||
// name: "车辆超限",
|
||||
// colorType: "green",
|
||||
// color: ["#00cc66", "#009944"],
|
||||
// color1: [choseRbgb("#00cc66", 0.3), choseRbgb("#009944", 0.3)]
|
||||
// }
|
||||
// ];
|
||||
|
||||
// 人员预警数据
|
||||
const personData = res2.map((item) => {
|
||||
const color = randomHexColor();
|
||||
const color2 = randomHexColor();
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.yjbq,
|
||||
// colorType: color,
|
||||
color: [color, color2],
|
||||
color1: [choseRbgb(color, 0.3), choseRbgb(color2, 0.3)]
|
||||
};
|
||||
});
|
||||
// [
|
||||
// {
|
||||
// value: 25,
|
||||
// name: "涉稳人员",
|
||||
// colorType: "blue",
|
||||
// color: ["#00f0ff", "#00a0cc"],
|
||||
// color1: [choseRbgb("#00f0ff", 0.3), choseRbgb("#00a0cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 30,
|
||||
// name: "涉毒人员",
|
||||
// colorType: "lightBlue",
|
||||
// color: ["#0066ff", "#0044cc"],
|
||||
// color1: [choseRbgb("#0066ff", 0.3), choseRbgb("#0044cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 17,
|
||||
// name: "涉黄人员",
|
||||
// colorType: "orange",
|
||||
// color: ["#ff9900", "#cc7a00"],
|
||||
// color1: [choseRbgb("#ff9900", 0.3), choseRbgb("#cc7a00", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 28,
|
||||
// name: "前科人员",
|
||||
// colorType: "green",
|
||||
// color: ["#00cc66", "#009944"],
|
||||
// color1: [choseRbgb("#00cc66", 0.3), choseRbgb("#009944", 0.3)]
|
||||
// }
|
||||
// ];
|
||||
vehicleChart.setOption(createChartOption(vehicleData, colors));
|
||||
personChart.setOption(createChartOption(personData, colors));
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
vehicleChart?.resize();
|
||||
personChart?.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
vehicleChart?.dispose();
|
||||
personChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-analysis {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 90%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: url("~@/assets/images/bg_02.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
220
src/views/home/components/warning.vue
Normal file
220
src/views/home/components/warning.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="warning-container">
|
||||
<!-- 标签切换 -->
|
||||
<div class="tab-container">
|
||||
<div class="tab-item" :class="linkQuery.yjLx == 2 ? 'active' : ''">
|
||||
<div class="tab-content" @click="clickData(2)">车辆预警</div>
|
||||
</div>
|
||||
<div class="tab-item" :class="linkQuery.yjLx == 1 ? 'active' : ''">
|
||||
<div class="tab-content" @click="clickData(1)">人员预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预警列表 -->
|
||||
<div
|
||||
class="warning-list noScollLine"
|
||||
v-loading="loading"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
>
|
||||
<div
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="warning-image">
|
||||
<img :src="item.yjTp" alt="预警图片" />
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item" v-if="linkQuery.yjLx == 2">
|
||||
<span class="label">车牌号：</span>
|
||||
<span>{{ item.yjClcph }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-else>
|
||||
<span class="label">姓名：</span>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item flex" v-if="linkQuery.yjLx == 1">
|
||||
<span class="label">性别：</span>
|
||||
<dict-tag
|
||||
:options="D_BZ_XB"
|
||||
:value="IdCard(item.yjRysfzh, 3)"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">相似度：</span>
|
||||
<span class="highlight">{{ item.xsd }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span>{{ item.yjSj }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.yjDz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList.data.length == 0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance } from "vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import { IdCard } from "@/utils/dict.js";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 2,
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
// 获取预警数据
|
||||
const clickData = (val) => {
|
||||
linkQuery.value.yjLx = val;
|
||||
linkQuery.value.pageNum = 1;
|
||||
getPageList();
|
||||
};
|
||||
const getPageList = () => {
|
||||
loading.value = true;
|
||||
jczgetPageList(linkQuery.value)
|
||||
.then((res) => {
|
||||
warningList.data =
|
||||
linkQuery.value.pageNum == 1
|
||||
? res.records
|
||||
: warningList.data.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("预警数据请求错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//滚动
|
||||
const rollingLoading = () => {
|
||||
if (warningList.data.length < warningList.total) {
|
||||
linkQuery.value.pageNum++;
|
||||
getPageList();
|
||||
}
|
||||
};
|
||||
getPageList();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-container {
|
||||
height: 100%;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
width: 159px;
|
||||
height: 43px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 8px 30px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg_08.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab-item.active::before {
|
||||
background: url("~@/assets/images/bg_09.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.warning-list {
|
||||
height: calc(100% - 64px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/bg_10.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(250, 177, 21, 0.9);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
149
src/views/home/index.vue
Normal file
149
src/views/home/index.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<!-- 头部 -->
|
||||
<Head></Head>
|
||||
<!-- 左边 内容-->
|
||||
<div class="home-aside asideL">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">数据采集</div>
|
||||
<div class="comom-cnt">
|
||||
<Collection></Collection>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">人员预警</div>
|
||||
<div class="comom-cnt">
|
||||
<!-- <Warning></Warning> -->
|
||||
<PeoWarning />
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">车辆预警</div>
|
||||
<div class="comom-cnt">
|
||||
<!-- <Warning></Warning> -->
|
||||
<CarWarning />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边 内容-->
|
||||
<div class="home-aside asideR">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">值班备勤</div>
|
||||
<div class="comom-cnt">
|
||||
<BeOnDuty></BeOnDuty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">预警统计分析</div>
|
||||
<div class="comom-cnt">
|
||||
<WanringAnyse></WanringAnyse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Entrance v-if="showEntrance" :JczData="JczData" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import Head from "./layout/head.vue";
|
||||
import Collection from "./components/collection.vue";
|
||||
// import Warning from "./components/warning.vue";
|
||||
import CarWarning from "./components/CarWarning.vue";
|
||||
import PeoWarning from "./components/PeoWarning.vue";
|
||||
import BeOnDuty from "./components/beonDuty.vue";
|
||||
import Entrance from "./components/entrance.vue";
|
||||
import WanringAnyse from "./components/wanringAnyse.vue";
|
||||
import { jczgetJczList } from "@/api/mosty-jcz";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
|
||||
import { ref, onMounted } from "vue";
|
||||
//获取所有检查站
|
||||
const getjczgetJczList = () => {
|
||||
jczgetJczList({}).then((res) => {
|
||||
const point = res.filter((item) => item.jd && item.wd);
|
||||
const icon = require("@/assets/images/z.png");
|
||||
emitter.emit("addPointArea", { coords: point, icon, flag: "jczMap_hm" });
|
||||
});
|
||||
};
|
||||
getjczgetJczList();
|
||||
const JczData = ref();
|
||||
const showEntrance = ref(false);
|
||||
onMounted(() => {
|
||||
emitter.on("showJcz", (res) => {
|
||||
if (res) {
|
||||
showEntrance.value = true;
|
||||
JczData.value = res;
|
||||
} else {
|
||||
showEntrance.value = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.homeBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.home-aside {
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
width: 442px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
height: calc(100vh - 67px);
|
||||
top: 65px;
|
||||
background: #0e1b29;
|
||||
}
|
||||
// 左边
|
||||
.asideL {
|
||||
left: 0;
|
||||
.asideL-top {
|
||||
height: 480px;
|
||||
background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.asideL-bottom {
|
||||
height: calc((100% - 505px) / 2);
|
||||
margin-top: 10px;
|
||||
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
||||
// background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
// 右边
|
||||
.asideR {
|
||||
right: 0;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
.asideL-top {
|
||||
height: 40%;
|
||||
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.asideL-bottom {
|
||||
height: 60%;
|
||||
background: url("~@/assets/images/border_R_B.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 公用
|
||||
.common-title {
|
||||
padding: 0 54px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.comom-cnt {
|
||||
height: calc(100% - 30px);
|
||||
padding: 4px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
178
src/views/home/layout/head.vue
Normal file
178
src/views/home/layout/head.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="home-head-box relative">
|
||||
<div class="time absolute">
|
||||
<div class="f20">{{ datatime }}</div>
|
||||
<div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
|
||||
</div>
|
||||
<div class="title absolute" @click="goPath">{{ props.title }}</div>
|
||||
<div class="wd absolute">
|
||||
<el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
|
||||
<span> 温度 1~7°C </span>
|
||||
</div>
|
||||
<div class="zbbb" v-if="query" @click="show = true">值班报备</div>
|
||||
</div>
|
||||
<el-dialog v-model="show" title="Shipping address">
|
||||
<div style="height: 50vh; overflow: auto">
|
||||
<zbbb
|
||||
:row="row"
|
||||
@close="close"
|
||||
:dic="{
|
||||
D_BZ_RYMFJLB,
|
||||
D_BZ_JYQXFL,
|
||||
D_BZ_XFQDJ,
|
||||
D_BZ_SF,
|
||||
D_BZ_JLLX,
|
||||
D_QW_BBZT,
|
||||
D_QW_BC_KTS
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import { getRecentDay, timeValidate } from "@/utils/tools.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
defineProps,
|
||||
onUnmounted,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_RYMFJLB,
|
||||
D_BZ_JYQXFL,
|
||||
D_BZ_XFQDJ,
|
||||
D_BZ_SF,
|
||||
D_BZ_JLLX,
|
||||
D_QW_BBZT,
|
||||
D_QW_BC_KTS
|
||||
} = proxy.$dict(
|
||||
"D_BZ_RYMFJLB",
|
||||
"D_BZ_JYQXFL",
|
||||
"D_BZ_XFQDJ",
|
||||
"D_BZ_SF",
|
||||
"D_BZ_JLLX",
|
||||
"D_QW_BBZT",
|
||||
"D_QW_BC_KTS"
|
||||
);
|
||||
import zbbb from "./zbbb.vue";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "林芝市检查站综合管理"
|
||||
},
|
||||
query: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const show = ref(false);
|
||||
const close = () => {
|
||||
show.value = false;
|
||||
};
|
||||
const datatime = ref(getRecentDay(0));
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref(0);
|
||||
const timersfm = ref(null);
|
||||
|
||||
const router = useRouter();
|
||||
const row = ref();
|
||||
onMounted(() => {
|
||||
emitter.on("chengZ", (res) => {
|
||||
row.value = res;
|
||||
console.log(res);
|
||||
});
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
|
||||
function goPath() {
|
||||
router.push("/editPassword");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zdybg {
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
}
|
||||
.home-head-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
z-index: 2;
|
||||
background: #0e1b29;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
height: 138px;
|
||||
z-index: -1;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.title {
|
||||
font-size: 36px;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
transform: translateX(-50%);
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time {
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
left: 25%;
|
||||
top: 10px;
|
||||
}
|
||||
.wd {
|
||||
right: 25%;
|
||||
top: 12px;
|
||||
font-size: 16px;
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
}
|
||||
.zbbb {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
font-size: 16px;
|
||||
width: 162px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
background: url("~@/assets/images/btnbb.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
620
src/views/home/layout/zbbb.vue
Normal file
620
src/views/home/layout/zbbb.vue
Normal file
@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<div></div>
|
||||
|
||||
<div class="cntinfo">
|
||||
<div class="flex align-center just-between box">
|
||||
<div class="flex align-center">
|
||||
报备单位：
|
||||
<MOSTY.Department
|
||||
v-model="listQuery.ssbmdm"
|
||||
placeholder="请选择部门"
|
||||
@getDepValue="changeDep"
|
||||
/>
|
||||
</div>
|
||||
<!-- v-if="['add', 'edit'].includes(pageType)" -->
|
||||
<el-button size="small" type="primary" @click="_onSave">保存</el-button>
|
||||
</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
class="info"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
:rules="rules"
|
||||
>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">检查站设置</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 800,
|
||||
lx: 'jcz',
|
||||
isRadio: true
|
||||
}"
|
||||
v-model="listQuery.jczList"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
|
||||
<div class="peolist" v-if="listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{
|
||||
listQuery.jczList.jczmc
|
||||
}}</el-tag>
|
||||
</div>
|
||||
<div class="peolist" v-if="listQuery.jczmc && !listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{ listQuery.jczmc }}</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">班次设置</div>
|
||||
<div class="info">
|
||||
<el-form-item prop="kssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcKssj"
|
||||
:disabled="isDetail"
|
||||
placeholder="开始时间"
|
||||
format="HH:mm:ss"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bcKts">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.bcKtsDict"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dic.D_QW_BC_KTS"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcJssj"
|
||||
:disabled="isDetail"
|
||||
format="HH:mm:ss"
|
||||
placeholder="结束时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">负责人</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
@change="handleFzr"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 700,
|
||||
lx: 'mj',
|
||||
rowKey: 'id',
|
||||
isRadio: true
|
||||
}"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrXm">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrXm"
|
||||
placeholder="负责人"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrSfzh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrSfzh"
|
||||
placeholder="身份证"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrLxdh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrLxdh"
|
||||
placeholder="负责人电话"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">当班人员</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="mjData" label="当班民警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ mjData ? mjData.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'mj',
|
||||
rowKey: 'ryid',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="mjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in mjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="fjData" label="当班辅警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ fjData ? fjData.length : 0 }}
|
||||
</div>
|
||||
<!-- :deptment="props.dep"
|
||||
:dic="props.dic" -->
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:configer="{ lx: 'fj', placement: 'top-start' }"
|
||||
v-model="fjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in fjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">装备</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="zdList" label="智能装备">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.zdList ? listQuery.zdList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:deptment="deptment"
|
||||
:configer="{
|
||||
lx: 'znzb',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.zdList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.zdList"
|
||||
:key="item"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <div style="width: 100%">
|
||||
<el-form-item prop="jyqxList" label="警用器械">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.jyqxList ? listQuery.jyqxList.length : 0 }}
|
||||
</div>
|
||||
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{ lx: 'jyqx', placement: 'top-start' }"
|
||||
v-model="listQuery.jyqxList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.jyqxList"
|
||||
:key="item"
|
||||
>{{ item.qxMc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item
|
||||
v-for="(item, idx) in listQuery.jyqxList"
|
||||
:key="idx"
|
||||
:label="item.qxMc"
|
||||
>
|
||||
<el-input-number
|
||||
:disabled="isDetail"
|
||||
style="width: 100%"
|
||||
v-model="item.qxsl"
|
||||
class="mx-4"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div> -->
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="clList" label="巡防车辆">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.clList ? listQuery.clList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'cl',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.clList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.clList"
|
||||
:key="item"
|
||||
>{{ item.cph }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">警用器械</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<div
|
||||
v-for="(item, index) in listQuery.qxList"
|
||||
:key="index"
|
||||
style="width: 50%; margin-bottom: 10px"
|
||||
>
|
||||
<div class="flex">
|
||||
<div style="width: 30%">{{ item.qxmc }}：</div>
|
||||
<el-input-number v-model="item.qxsl" :step="1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import ChooseTable from "@/components/chooseList/chooseTable.vue";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
// const { D_BZ_JYQXFL } = proxy.$dict("D_BZ_JYQXFL");
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isDetail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
row: { type: Object, default: () => {} }
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const mjData = ref([]);
|
||||
const fjData = ref([]);
|
||||
const ChegeMj = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
xfllld: item.id,
|
||||
ryXm: item.xm,
|
||||
rysfzh: item.sfzh,
|
||||
ryJzlx: item.fl,
|
||||
ryMfjilb: item.ryid,
|
||||
ryLxdh: item.lxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
const fz = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
id: item.xfllld,
|
||||
xm: item.ryXm,
|
||||
sfzh: item.rysfzh,
|
||||
fl: item.ryJzlx,
|
||||
ryid: item.ryMfjilb,
|
||||
lxdh: item.ryLxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
console.log(props.row, "=====================================");
|
||||
|
||||
if (props.row) {
|
||||
listQuery.value = { ...props.row };
|
||||
if (props.row.ryList.length > 0) {
|
||||
const data = fz(props.row.ryList);
|
||||
mjData.value = data.filter((item) => item.fl == "01");
|
||||
fjData.value = data.filter((item) => item.fl == "02");
|
||||
}
|
||||
if (listQuery.value.qxList.length == 0) {
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
} else {
|
||||
pageType.value = "add";
|
||||
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => props.row,
|
||||
() => {
|
||||
init();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
// 验证规则
|
||||
const rules = ref({
|
||||
spbt: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标题",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
//保存
|
||||
|
||||
const _onSave = () => {
|
||||
const data = [...mjData.value, ...fjData.value];
|
||||
|
||||
listQuery.value.ryList = ChegeMj(data);
|
||||
const time = new Date();
|
||||
listQuery.value.bbSjBbrq = timeValidate(time);
|
||||
switch (listQuery.value.bcKtsDict) {
|
||||
case "01":
|
||||
listQuery.value.bcKts = 1;
|
||||
break;
|
||||
case "02":
|
||||
listQuery.value.bcKts = 2;
|
||||
case "03":
|
||||
listQuery.value.bcKts = 4;
|
||||
case "04":
|
||||
listQuery.value.bcKts = 5;
|
||||
case "05":
|
||||
listQuery.value.bcKts = 6;
|
||||
case "06":
|
||||
listQuery.value.bcKts = 7;
|
||||
case "07":
|
||||
listQuery.value.bcKts = 8;
|
||||
}
|
||||
if (listQuery.value.jczList) {
|
||||
listQuery.value.jczid = listQuery.value.jczList.id;
|
||||
listQuery.value.jczmc = listQuery.value.jczList.jczmc;
|
||||
}
|
||||
|
||||
if (pageType.value == "add") {
|
||||
jczsavel(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("close");
|
||||
});
|
||||
} else {
|
||||
Xfbbupdate(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("close");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const JczShow = ref(false);
|
||||
//负责人
|
||||
const handleFzr = (val) => {
|
||||
listQuery.value.fzrXm = val.xm;
|
||||
listQuery.value.fzrId = val.ryid;
|
||||
listQuery.value.fzrSfzh = val.sfzh;
|
||||
listQuery.value.fzrLxdh = val.lxdh;
|
||||
};
|
||||
const deptment = ref({});
|
||||
const changeDep = (val) => {
|
||||
deptment.value = val;
|
||||
};
|
||||
const changeJCZ = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.file {
|
||||
height: 400px;
|
||||
border: 1px solid #e9e9e9;
|
||||
// border-radius: ;
|
||||
color: #777575;
|
||||
// border-left: 0;
|
||||
}
|
||||
|
||||
: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;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.bblxItem {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
color: #000;
|
||||
.btItem {
|
||||
width: 180px;
|
||||
padding: 7px 0;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.gapline {
|
||||
height: 1px;
|
||||
border-top: 1px dashed #66cbff;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.dl-car {
|
||||
min-width: 200px;
|
||||
display: inline-block;
|
||||
border: solid 1px #66cbff;
|
||||
margin: 20px 30px 0 0;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
dt {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #0380c0;
|
||||
padding: 0 10px 0 40px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px #66cbff;
|
||||
background: #e3f5ff;
|
||||
height: 30px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.peo {
|
||||
border-bottom: solid 1px #01d608;
|
||||
background: #dbf3cf;
|
||||
color: #339d00;
|
||||
}
|
||||
}
|
||||
.dl-car::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -18px;
|
||||
left: -18px;
|
||||
width: 52px;
|
||||
height: 49px;
|
||||
background: url("~@/assets/images/peo.png");
|
||||
}
|
||||
}
|
||||
.num {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid #bebebe;
|
||||
// background-color: #1b294c;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.subBtn {
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--default {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.deBtn {
|
||||
padding: 0px 10px;
|
||||
background: rgb(35, 176, 241);
|
||||
border-radius: 18px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
345
src/views/login/index.vue
Normal file
345
src/views/login/index.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form
|
||||
class="login-form"
|
||||
ref="loginFromRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<div class="title-container">
|
||||
<h3 class="title">用户登录</h3>
|
||||
</div>
|
||||
<el-form-item prop="userName">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon="user" />
|
||||
</span>
|
||||
<el-input
|
||||
placeholder="请输入账号"
|
||||
name="userName"
|
||||
type="text"
|
||||
v-model="loginForm.userName"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password1">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon="password" />
|
||||
</span>
|
||||
<el-input
|
||||
placeholder="请输入密码"
|
||||
name="password"
|
||||
:type="passwordType"
|
||||
v-model="loginForm.password"
|
||||
/>
|
||||
<span class="show-pwd">
|
||||
<svg-icon
|
||||
@click="onChangePwdType"
|
||||
:icon="passwordType === 'password' ? 'eye' : 'eye-open'"
|
||||
/>
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="isShowKaptCha" prop="kaptcha">
|
||||
<span class="svg-container"><svg-icon icon="kaptcha" /></span>
|
||||
<el-input
|
||||
@keydown.enter="handleLogin()"
|
||||
v-model="loginForm.kaptcha"
|
||||
placeholder="请输入验证码"
|
||||
name="kaptcha"
|
||||
type="text"
|
||||
/>
|
||||
<span @click="getKaptchaImg">
|
||||
<el-image class="show-kaptcha" :src="kaptchaUrl" fit="cover">
|
||||
<template #error>
|
||||
<div class="image-slot"><svg-icon icon="errorImg" /></div>
|
||||
</template>
|
||||
</el-image>
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<!---登录按钮-->
|
||||
<el-form-item style="height: 49px" v-if="!loginDialog">
|
||||
<el-button
|
||||
@click="handleLogin"
|
||||
type="primary"
|
||||
style="width: 520px; height: 49px"
|
||||
:loading="loading"
|
||||
native-type="submit"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="choosedept-wrap" v-if="loginDialog">
|
||||
<el-select
|
||||
v-model="deptId"
|
||||
@change="refreshToken"
|
||||
placeholder="请选择部门"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "login"
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import { setItem } from "@/utils/storage";
|
||||
import { ElNotification } from "element-plus";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getKaptcha } from "@/api/sys";
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import { validatePassword } from "./rules";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
import { useRouter, onBeforeRouteLeave } from "vue-router";
|
||||
const store = useStore();
|
||||
const kaptchaUrl = ref("");
|
||||
// 数据源
|
||||
const loginForm = ref({
|
||||
userName: "admin",
|
||||
password: "111111",
|
||||
kaptcha: ""
|
||||
});
|
||||
const loginDialog = ref(false);
|
||||
const deptList = ref([]);
|
||||
const deptId = ref("");
|
||||
const authorization = ref("");
|
||||
const isShowKaptCha = ref(false);
|
||||
|
||||
// 验证规则
|
||||
const loginRules = ref({
|
||||
userName: [{ required: true, trigger: "blur", message: "用户名为必填项" }],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", validator: validatePassword() }
|
||||
],
|
||||
kaptcha: [{ required: true, trigger: "blur", message: "验证码为必填项" }]
|
||||
});
|
||||
|
||||
const handleClose = () => {};
|
||||
const refreshToken = (e) => {
|
||||
store
|
||||
.dispatch("user/refreshToken", { deptId: e, jwtToken: authorization.value })
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
store.commit("user/setDeptId", e);
|
||||
window.location.href = "/"; // 登录后操作
|
||||
router.push("/");
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 处理密码框文本显示状态
|
||||
const passwordType = ref("password");
|
||||
const onChangePwdType = () => {
|
||||
if (passwordType.value === "password") {
|
||||
passwordType.value = "text";
|
||||
} else {
|
||||
passwordType.value = "password";
|
||||
}
|
||||
};
|
||||
|
||||
// 登录动作处理
|
||||
const loading = ref(false);
|
||||
const loginFromRef = ref(null);
|
||||
const router = useRouter();
|
||||
const handleLogin = () => {
|
||||
loginFromRef.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// setItem("token", "1255555888");
|
||||
// setItem("isOatuh", 0);
|
||||
// router.push("/VideoLibrary");
|
||||
loading.value = true;
|
||||
store
|
||||
.dispatch("user/login", loginForm.value)
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
// 登录后操作;
|
||||
if (res.deptList.length === 1) {
|
||||
window.location.href = "/";
|
||||
} else {
|
||||
deptList.value = [...res.deptList];
|
||||
loginDialog.value = true;
|
||||
authorization.value = res.jwtToken;
|
||||
ElNotification({
|
||||
title: "提示",
|
||||
message: "请选择部门",
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
const logout = () => {
|
||||
store.dispatch("user/logout");
|
||||
};
|
||||
onMounted(() => {});
|
||||
const getKaptchaImg = () => {
|
||||
const res =
|
||||
`${process.env.VUE_APP_GATEWAY_BASE_URL}/mosty-api/mosty-base/kaptcha?date=` +
|
||||
new Date();
|
||||
kaptchaUrl.value = res;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg: #2d3a4b;
|
||||
$dark_gray: #889aa4;
|
||||
$light_gray: #eee;
|
||||
$cursor: #fff;
|
||||
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: $bg;
|
||||
overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 160px 35px 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
&::v-deep .el-input__inner {
|
||||
-webkit-box-shadow: 0 0 0 1000px #283443 inset;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
&::v-deep .el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
&::v-deep .el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
caret-color: $cursor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .lang-select {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
font-size: 22px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.show-kaptcha {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.choosedept-wrap {
|
||||
.el-form-item__content {
|
||||
width: 100%;
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// .el-dialog{
|
||||
// background: #293444;
|
||||
// color: white;
|
||||
// .el-dialog__title{
|
||||
// color: #fff;
|
||||
// }
|
||||
// .el-select{
|
||||
// width: 300px;
|
||||
// padding-bottom: 40px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
9
src/views/login/rules.js
Normal file
9
src/views/login/rules.js
Normal file
@ -0,0 +1,9 @@
|
||||
export const validatePassword = () => {
|
||||
return (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('密码不能少于6位'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user