test: 1
This commit is contained in:
514
src/App.vue
Normal file
514
src/App.vue
Normal file
@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<router-view v-if="isRouterAlive" />
|
||||
<div ref="box" @mousedown="startDrag" class="topapps" :style="{ top: `${boxTop}px`, left: `${boxLeft}px` }">
|
||||
|
||||
网络状态：{{ isOnline ? netWorkStatus.effectiveType : '离线' }}<br>
|
||||
|
||||
延迟：{{ isOnline ? netWorkStatus.rtt + 'ms' : '离线' }}<br>
|
||||
|
||||
带宽：{{ isOnline ? netWorkStatus.downlink + 'mb/s' : '离线' }}<br>
|
||||
|
||||
</div>
|
||||
<el-dialog v-model="dialogTableVisible" title="上报结果" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:before-close="handleClose">
|
||||
<el-descriptions class="mb10" :title="item.dataname" :column="3" :size="size" border
|
||||
v-for="(item, index) in dialogTableData" :key="index">
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">上报人</div>
|
||||
</template>
|
||||
{{ item.username }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">上报时间</div>
|
||||
</template>
|
||||
{{ item.sbsj }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item width="110px">
|
||||
<template #label>
|
||||
<div class="cell-item">上报结果</div>
|
||||
</template>
|
||||
<span v-if="item.returnHttpCode == '200'" style="color: green">上报成功</span>
|
||||
<span v-else style="color: red">上报失败</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.returnHttpCode != '200'" width="110px">
|
||||
<template #label>
|
||||
<div class="cell-item">
|
||||
<el-icon>
|
||||
<office-building />
|
||||
</el-icon>
|
||||
失败原因
|
||||
</div>
|
||||
</template>
|
||||
{{ item.returnOperationResult }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, provide, onMounted, reactive, onBeforeUnmount } from "vue"
|
||||
import { useStore } from "vuex"
|
||||
import { getItem } from "@/utils/storage"
|
||||
import { filterqx } from "@/utils/auth.js"
|
||||
import { getApi } from "./api/tobAcco_api"
|
||||
import { ElMessageBox, ElMessage } from "element-plus"
|
||||
import { generateNewStyle, writeNewStyle } from "@/utils/theme"
|
||||
const BGcolor = ref(getItem("ZtColor") ? getItem("ZtColor") : 'rgba(0, 116, 87, 1)')
|
||||
const dialogTableVisible = ref(false)
|
||||
const dialogTableData = ref([])
|
||||
const store = useStore()
|
||||
const timer = ref(null)
|
||||
const visible = ref(true)
|
||||
const iSTrue = ref(false)
|
||||
const boxTop = ref(2)
|
||||
const boxLeft = ref(-9)
|
||||
const startX = ref(0)
|
||||
const startY = ref(0)
|
||||
const startBoxLeft = ref(0)
|
||||
const startBoxTop = ref(0)
|
||||
const isDragging = ref(false)
|
||||
const box = ref(null);
|
||||
const isRouterAlive = ref(true)
|
||||
//网络监控
|
||||
const netWorkStatus = reactive({
|
||||
effectiveType: null,
|
||||
rtt: null,
|
||||
downlink: null,
|
||||
})
|
||||
const isOnline = ref(true)
|
||||
function startDrag(event) {
|
||||
isDragging.value = true;
|
||||
startX.value = event.clientX;
|
||||
startY.value = event.clientY;
|
||||
startBoxLeft.value = boxLeft.value;
|
||||
startBoxTop.value = boxTop.value;
|
||||
document.addEventListener('mousemove', onDrag);
|
||||
document.addEventListener('mouseup', stopDrag);
|
||||
}
|
||||
function onDrag(event) {
|
||||
if (!isDragging.value) return;
|
||||
const deltaX = event.clientX - startX.value;
|
||||
const deltaY = event.clientY - startY.value;
|
||||
boxLeft.value = startBoxLeft.value + deltaX;
|
||||
boxTop.value = startBoxTop.value + deltaY;
|
||||
}
|
||||
function stopDrag() {
|
||||
isDragging.value = false;
|
||||
document.removeEventListener('mousemove', onDrag);
|
||||
document.removeEventListener('mouseup', stopDrag);
|
||||
}
|
||||
|
||||
//网络发生变动
|
||||
navigator.connection.addEventListener('change', function (e) {
|
||||
updateNetWorkStatus(e.target)
|
||||
})
|
||||
//在线状态
|
||||
window.addEventListener('online', (e) => {
|
||||
isOnline.value = true
|
||||
})
|
||||
//离线状态
|
||||
window.addEventListener('offline', () => {
|
||||
isOnline.value = false
|
||||
ElMessage({
|
||||
message: "网络链接失败，请检查网络是否正常",
|
||||
type: "warning",
|
||||
duration: 5e3
|
||||
})
|
||||
})
|
||||
//获取网络参数
|
||||
function updateNetWorkStatus(data) {
|
||||
netWorkStatus.effectiveType = data.effectiveType
|
||||
netWorkStatus.rtt = data.rtt
|
||||
netWorkStatus.downlink = data.downlink
|
||||
}
|
||||
generateNewStyle(store.getters.mainColor).then(newStyle => {
|
||||
writeNewStyle(newStyle)
|
||||
})
|
||||
|
||||
const reload = () => {
|
||||
isRouterAlive.value = false
|
||||
nextTick(() => {
|
||||
isRouterAlive.value = true
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = done => {
|
||||
ElMessageBox.confirm("你确定要关闭弹窗吗？").then(() => {
|
||||
done()
|
||||
})
|
||||
}
|
||||
provide("reload", reload)
|
||||
const platformTip = () => {
|
||||
let platform = window.navigator.platform.toLowerCase()
|
||||
if (platform.includes("mac")) {
|
||||
if (window.devicePixelRatio !== 2)
|
||||
ElMessage({
|
||||
message: "当前显示不处于100%缩放状态！",
|
||||
type: "warning",
|
||||
duration: 5e3
|
||||
})
|
||||
} else if (platform.includes("win")) {
|
||||
if (window.devicePixelRatio !== 1)
|
||||
ElMessage({
|
||||
message: "当前显示不处于100%缩放状态！",
|
||||
type: "warning",
|
||||
duration: 5e3
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//获取网络参数
|
||||
updateNetWorkStatus(navigator.connection)
|
||||
// 生产
|
||||
// if (process.env.NODE_ENV === 'production') {
|
||||
timer.value = setInterval(() => {
|
||||
if (getItem("deptId")) {
|
||||
if (filterqx("isaqbm") == "1" && filterqx("isSgs") == "1") {
|
||||
getApi({}, "/mosty-jcgl/dataCommon/getDataForRedis").then(res => {
|
||||
if (res && res.length) {
|
||||
dialogTableVisible.value = true
|
||||
dialogTableData.value = res
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}, 1e4)
|
||||
// }
|
||||
document.title = "六盘水烟草商业安全管理系统"
|
||||
if (BGcolor.value && BGcolor.value != null) {
|
||||
getcolorinit()
|
||||
}
|
||||
platformTip()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer.value)
|
||||
updateNetWorkStatus(navigator.connection)
|
||||
})
|
||||
function getcolorinit() {
|
||||
const html = document.documentElement
|
||||
html.style.setProperty("--el-color-primary", BGcolor.value)
|
||||
html.style.setProperty("--el-button-bg-color", BGcolor.value)
|
||||
html.style.setProperty("--el-bg-color", BGcolor.value)
|
||||
// const match = BGcolor.value.match(/\(([^)]+)\)/)[1].split(',');
|
||||
const match = BGcolor.value.substring(5, BGcolor.value.indexOf(")")).split(",")
|
||||
if (match) {
|
||||
const boderColor = `rgba(${match[0]}, ${match[1]}, ${match[2]}, ${0.75})` // 更新第四个参数的值
|
||||
const tabbackgroundColor = `rgba(${match[0]}, ${match[1]}, ${match[2]}, ${0.2})` // 更新第四个参数的值
|
||||
html.style.setProperty("--el-table-border-color", boderColor)
|
||||
html.style.setProperty("--el-border-color-lighter", boderColor)
|
||||
html.style.setProperty("--el-table-row-hover-bg-color", boderColor)
|
||||
html.style.setProperty("--el-table-cell-bmx-backgroundcolor", tabbackgroundColor)
|
||||
} else {
|
||||
return 1 // 如果匹配失败，返回默认值
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
|
||||
// @import '@/assets/style/main.scss';
|
||||
@font-face {
|
||||
font-family: "DigifaceWide";
|
||||
src: url("~@/assets/font/DigifaceWide.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DINAlternateBold";
|
||||
src: url("~@/assets/font/DINAlternateBold.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "title_family";
|
||||
src: url("~@/assets/font/交通标志专用字体.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#app {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
background: #efefef;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
width: 69px !important;
|
||||
}
|
||||
|
||||
.el-button>span>i {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
// 弹窗主题颜色
|
||||
.el-dialog__header {
|
||||
background: var(--el-color-primary) !important;
|
||||
box-shadow: 0px 9px 16px 0px rgba(159, 162, 191, 0.1) !important;
|
||||
border-radius: 0px 0px 6px 6px !important;
|
||||
opacity: 1 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
--el-input-placeholder-color: #75777b !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--el-table-cell-bmx-backgroundcolor) !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.container-dialog {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
.el-form-item__label {
|
||||
color: #060606;
|
||||
}
|
||||
}
|
||||
|
||||
.qx-dialog {
|
||||
.el-dialog {
|
||||
height: 550px !important;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__body {
|
||||
height: 80%;
|
||||
|
||||
.el-tree {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #fff;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
//全局最外层盒子padding 字体 样式
|
||||
.overall {
|
||||
font-size: 15px;
|
||||
|
||||
// padding:0 20px;
|
||||
.titleBox {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
//只显示两排内容
|
||||
.text_detail {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
//只显示一排内容
|
||||
.one_text_detail {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
//指令列表与时间样式
|
||||
.bh_and_sj {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.fx_yh_model {
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-top: 10px solid #2b836b;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
// padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
// background: url("~@/assets/system/bg1.png") no-repeat;
|
||||
// background-position: -300px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-cascader-menu__empty-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
border-bottom-color: var(--el-color-primary);
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell div span {}
|
||||
|
||||
.el-button--default {
|
||||
--el-button-hover-text-color: #fff !important;
|
||||
}
|
||||
|
||||
//删除
|
||||
.operdel {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
line-height: 19px;
|
||||
color: #e71111 !important;
|
||||
}
|
||||
|
||||
//下载
|
||||
.operedown {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
line-height: 19px;
|
||||
color: #234fa0 !important;
|
||||
}
|
||||
|
||||
//修改
|
||||
.operedit {
|
||||
cursor: pointer;
|
||||
line-height: 19px;
|
||||
color: #dc9507 !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
//详情
|
||||
.operesee {
|
||||
cursor: pointer;
|
||||
line-height: 19px;
|
||||
color: #0b6c51 !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
// 复制
|
||||
.operecopy {
|
||||
cursor: pointer;
|
||||
line-height: 19px;
|
||||
color: #23a07d !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.pageRight {
|
||||
padding: 0 14px 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.bigBox,
|
||||
.usermanage {
|
||||
.title {
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.model_box {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-menu-item {
|
||||
color: #e71111 !important;
|
||||
}
|
||||
|
||||
.el-menu--vertical {
|
||||
|
||||
.el-tooltip__trigger,
|
||||
.el-menu-item {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.but_bg {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.topapps {
|
||||
z-index: 20003;
|
||||
position: absolute;
|
||||
inset: 0px auto auto 0px;
|
||||
cursor: pointer;
|
||||
margin: 0px;
|
||||
transform: translate(1743px, 81px);
|
||||
padding: 5px 11px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
min-width: 10px;
|
||||
word-wrap: break-word;
|
||||
visibility: visible;
|
||||
color: #000;
|
||||
background-color: #d9d3d369 !important;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
box-shadow: 0 0 2px var(--el-color-primary),
|
||||
/* 左上角 */
|
||||
0 0 2px var(--el-color-primary),
|
||||
/* 右下角 */
|
||||
0 0 2px var(--el-color-primary),
|
||||
/* 右上角 */
|
||||
0 0 2px var(--el-color-primary);
|
||||
/* 左下角 */
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: var(--el-color-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
69
src/api/base.js
Normal file
69
src/api/base.js
Normal file
@ -0,0 +1,69 @@
|
||||
import request from "@/utils/request";
|
||||
//获取用户所属区域数据
|
||||
export function getUserArea(params = {}) {
|
||||
return request({
|
||||
url: "/mosty-api/mosty-base/other/getGajg",
|
||||
method: "post",
|
||||
params
|
||||
});
|
||||
}
|
||||
//获取分值列表数据
|
||||
export function getSelectPzfz(params = {}) {
|
||||
return request({
|
||||
url: "/mosty-api/mosty-jcgl/fzpz/selectPzfzByPzrxm",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
//新增分值数据
|
||||
export function addPzfz(data = {}) {
|
||||
return request({
|
||||
url: "/mosty-api/mosty-jcgl/fzpz/addPzfz",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
//修改分值数据
|
||||
export function updatePzfz(data = {}) {
|
||||
return request({
|
||||
url: "/mosty-api/mosty-jcgl/fzpz/editEntity",
|
||||
method: "put",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
//删除分值数据
|
||||
export function deletePzfz(id) {
|
||||
return request({
|
||||
url: `/mosty-api/mosty-jcgl/fzpz/deleteEntity/${id}`,
|
||||
method: "delete"
|
||||
});
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
export function getFileList(params) {
|
||||
return request({
|
||||
url: "/mosty-api/mosty-base//minio/file/getFileList",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
//文件下载 获取文件信息
|
||||
export function FileListonload(id) {
|
||||
return request({
|
||||
url: `/mosty-api/mosty-base/minio/file/download/${id}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
//获取文件地址
|
||||
//01：内网
|
||||
//02：外网
|
||||
export function getFileUrlById(id) {
|
||||
return request({
|
||||
url: `/mosty-api/mosty-base/minio/image/downloadUrl/${id}`,
|
||||
method: "get"
|
||||
});
|
||||
};
|
||||
30
src/api/editPassword.js
Normal file
30
src/api/editPassword.js
Normal file
@ -0,0 +1,30 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api/mosty-base";
|
||||
|
||||
/**
|
||||
* 消息列表
|
||||
* @param {*} params
|
||||
* @returns
|
||||
*/
|
||||
export const getPageList = (params = {}) => {
|
||||
return request({
|
||||
url: api + "/sysMessage/getPageList",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
export const sendMsg = (data) => {
|
||||
return request({
|
||||
url: api + "/sysMessage/sendMsg",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
47
src/api/menu.js
Normal file
47
src/api/menu.js
Normal file
@ -0,0 +1,47 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api/mosty-base";
|
||||
|
||||
// 查询菜单信息
|
||||
export const selectMenuList = (params) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/selectMenuList",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 添加菜单信息
|
||||
export const addSysMenu = (data) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/addSysMenu",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 修改菜单信息
|
||||
export const editSysMenu = (data) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/updateSysMenu",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 删除菜单信息
|
||||
export const deleteSysMenu = (data) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/deleteSysMenu",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 上下移动
|
||||
export const changeOrderno = (params) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/changeOrderno",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
33
src/api/noapi.js
Normal file
33
src/api/noapi.js
Normal file
@ -0,0 +1,33 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api";
|
||||
export const getApifj = (params = {}, url = "") => {
|
||||
return request({
|
||||
url: url,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
export const postApifj = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: url,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
export const putApifj = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: url,
|
||||
method: "PUT",
|
||||
params: data
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteApifj = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: url,
|
||||
method: "DELETE",
|
||||
data
|
||||
});
|
||||
};
|
||||
129
src/api/sys.js
Normal file
129
src/api/sys.js
Normal file
@ -0,0 +1,129 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api/mosty-base";
|
||||
const jcgl = "/mosty-api/mosty-jcgl";
|
||||
/*
|
||||
* 登录
|
||||
* return promise 实例对象
|
||||
*/
|
||||
export const login = (data) => {
|
||||
return request({
|
||||
url: api + "/login",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 获取用户信息
|
||||
* return promise 实例对象
|
||||
*/
|
||||
export const getUserInfo = () => {
|
||||
return request({
|
||||
url: api + "/sys/profile",
|
||||
method: "GET"
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 获取用户信息
|
||||
* return promise 实例对象
|
||||
*/
|
||||
export const getKaptcha = () => {
|
||||
return request({
|
||||
url: api + "/kaptcha",
|
||||
method: "GET"
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 多部门时候 切换部门刷新token
|
||||
* return promise 实例对象
|
||||
*/
|
||||
export const refreshToken = (data) => {
|
||||
return request({
|
||||
url: api + `/token`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
登出
|
||||
* return promise 实例对象
|
||||
*/
|
||||
export const loginOut = (data) => {
|
||||
return request({
|
||||
url: api + "/loginOut",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
修改密码
|
||||
*/
|
||||
export const editPassword = (data) => {
|
||||
return request({
|
||||
url: api + "/sysUser/editPassword",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 人员排名统计TOP10
|
||||
export const ryStatistics = (data) => {
|
||||
return request({
|
||||
url: api + "/monitor/operlog/ryStatistics",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 部门排名统计TOP10
|
||||
export const bmStatistics = (data) => {
|
||||
return request({
|
||||
url: api + "/monitor/operlog/bmStatistics",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 模块排名统计
|
||||
export const mkStatistics = (data) => {
|
||||
return request({
|
||||
url: api + "/monitor/operlog/mkStatistics",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 系统使用情况统计数字
|
||||
export const useStatistics = (data) => {
|
||||
return request({
|
||||
url: api + "/monitor/operlog/statistics",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
//获取单位下的安全部门
|
||||
//data={orgcode}
|
||||
export const getaqbm = (params) => {
|
||||
return request({
|
||||
url: api + `/deptFeign/getAqbmById`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
//获取部门下的安全人员
|
||||
//data={deptid}
|
||||
export const getaqry = (params) => {
|
||||
return request({
|
||||
url: jcgl + "/securitychild/getAqyByDeptid",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
156
src/api/sysDict.js
Normal file
156
src/api/sysDict.js
Normal file
@ -0,0 +1,156 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api/mosty-base";
|
||||
/*
|
||||
* 登录
|
||||
* return promise 实例对象
|
||||
*/
|
||||
export const login = (data) => {
|
||||
return request({
|
||||
url: api + "/sys/login",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 分页查询所有字典信息
|
||||
*
|
||||
*/
|
||||
export const getAllSysDict = (params) => {
|
||||
return request({
|
||||
url: api + "/sysDict/selectPage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 根据字典组件枚举，查询字典信息
|
||||
*
|
||||
*/
|
||||
export const getDictInfoByDictEnum = (params) => {
|
||||
return request({
|
||||
url: api + `/sysDict/getElementSysDict`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 查询普通树形接口字典
|
||||
* @param {params} params
|
||||
* @returns
|
||||
*/
|
||||
export const getDictTree = (params) => {
|
||||
return request({
|
||||
url: api + `/sysDict/getDictTree`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
/*
|
||||
* 修改字典信息
|
||||
*
|
||||
*/
|
||||
export const updateSysDict = (data) => {
|
||||
return request({
|
||||
url: api + `/sysDict/updateSysDict`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 新增字典信息
|
||||
*
|
||||
*/
|
||||
export const addSysDict = (data) => {
|
||||
return request({
|
||||
url: api + `/sysDict/addSysDict`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
* 删除字典信息
|
||||
*
|
||||
*/
|
||||
export const deleteSysDict = (data) => {
|
||||
return request({
|
||||
url: api + `/sysDict/deleteSysDict`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
根据字典明细编号，查询所有子字典明细信息
|
||||
*
|
||||
*/
|
||||
export const getAllChildItemByCode = (params) => {
|
||||
return request({
|
||||
url: api + "/sys-dict-item/getAllChildItemByCode",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 根据字典明细编号查询子字典明细信息
|
||||
*
|
||||
*/
|
||||
export const getChildItemByCode = (params) => {
|
||||
return request({
|
||||
url: api + "/sys-dict-item/getChildItemByCode",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 根据字典编号查询字典信息
|
||||
*
|
||||
*/
|
||||
export const getSysDictByCode = (params) => {
|
||||
return request({
|
||||
url: api + "/sysDict/getSysDictByCode",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 修改字典明细信息
|
||||
*
|
||||
*/
|
||||
export const updateSysDictItem = (data) => {
|
||||
return request({
|
||||
url: api + "/sys-dict-item/updateSysDictItem",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
*
|
||||
添加字典明细信息 item
|
||||
*
|
||||
*/
|
||||
export const addSysDictItem = (data) => {
|
||||
return request({
|
||||
url: api + `/sys-dict-item/addSysDictItem`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 删除字典信息
|
||||
*
|
||||
*/
|
||||
export const deleteSysDictItem = (data) => {
|
||||
return request({
|
||||
url: api + `/sys-dict-item/deleteSysDictItem`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
52
src/api/tobAcco_api.js
Normal file
52
src/api/tobAcco_api.js
Normal file
@ -0,0 +1,52 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api";
|
||||
export const getApi = (params = {}, url = "") => {
|
||||
return request({
|
||||
url: api + url,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
export const postApi = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: api + url,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
export const putApi = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: api + url,
|
||||
method: "PUT",
|
||||
params: data
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteApi = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: api + url,
|
||||
method: "DELETE",
|
||||
data
|
||||
});
|
||||
};
|
||||
export const uploadfilApi = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: api + url,
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data
|
||||
});
|
||||
};
|
||||
//导出为excel
|
||||
export const uploadExcel = (data = {}, url = "") => {
|
||||
return request({
|
||||
url: api + url,
|
||||
method: "Get",
|
||||
responseType: 'blob',
|
||||
data
|
||||
});
|
||||
};
|
||||
102
src/api/tool/gen.js
Normal file
102
src/api/tool/gen.js
Normal file
@ -0,0 +1,102 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api/mosty-base";
|
||||
// 查询生成表数据
|
||||
export function listTable(params) {
|
||||
return request({
|
||||
url: api + '/gen/list',
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询db数据库列表
|
||||
export function listDbTable(query) {
|
||||
return request({
|
||||
url: api + '/gen/db/list',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询表详细信息
|
||||
export function getGenTable11(tableId) {
|
||||
return request({
|
||||
url: api + '/gen/' + tableId,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 修改代码生成信息
|
||||
export function updateGenTable(data) {
|
||||
return request({
|
||||
url: api + '/gen',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 导入表
|
||||
export function importTable(data) {
|
||||
return request({
|
||||
url: api + '/gen/importTable',
|
||||
method: 'POST',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 预览生成代码
|
||||
export function previewTable(tableId) {
|
||||
return request({
|
||||
url: api + '/gen/preview/' + tableId,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除表数据
|
||||
export function delTable(tableId) {
|
||||
return request({
|
||||
url: api + '/gen/' + tableId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 生成代码（自定义路径）
|
||||
export function genCode(tableName) {
|
||||
return request({
|
||||
url: api + '/gen/genCode/' + tableName,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 同步数据库
|
||||
export function synchDb(tableName) {
|
||||
return request({
|
||||
url: api + '/gen/synchDb/' + tableName,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取字典选择框列表
|
||||
export function getDictOptionselect() {
|
||||
return request({
|
||||
url: '/system/dict/type/optionselect',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询菜单列表
|
||||
export function listMenu(query) {
|
||||
return request({
|
||||
url: '/system/menu/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 根据经纬度获取位置信息 /other/getAddress
|
||||
export function getAddress(query) {
|
||||
return request({
|
||||
url: api + '/other/getAddress',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
657
src/api/user-manage.js
Normal file
657
src/api/user-manage.js
Normal file
@ -0,0 +1,657 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api/mosty-base";
|
||||
export const getbaseApi = (params = {}, url = "") => {
|
||||
return request({
|
||||
url: api + url,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
/*
|
||||
* 登录
|
||||
* return promise 实例对象
|
||||
*/
|
||||
export const login = (data) => {
|
||||
return request({
|
||||
url: api + "/sys/login",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 获取所有角色
|
||||
*
|
||||
*/
|
||||
export const getRoleList = (params) => {
|
||||
return request({
|
||||
url: api + "/sysRole/selectPage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 新增角色
|
||||
*/
|
||||
export const addSysRole = (data) => {
|
||||
return request({
|
||||
url: api + "/sysRole/addSysRole",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 修改角色信息
|
||||
*/
|
||||
export const updateSysRole = (data) => {
|
||||
return request({
|
||||
url: api + "/sysRole/updateSysRole",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 删除角色信息
|
||||
export const deleteSysRole = (data) => {
|
||||
return request({
|
||||
url: api + "/sysRole/deleteSysRole",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 删除用户
|
||||
export const deleteSysUser = (data) => {
|
||||
return request({
|
||||
url: api + "/sysUser/deleteSysUser",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
分页查询岗位信息
|
||||
*
|
||||
*/
|
||||
export const selectJobPage = (params) => {
|
||||
return request({
|
||||
url: api + "/sysPosition/selectPage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 修改岗位
|
||||
*/
|
||||
export const updateSysPosition = (data) => {
|
||||
return request({
|
||||
url: api + "/sysPosition/updateSysPosition",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* 修改岗位
|
||||
*/
|
||||
export const addSysPosition = (data) => {
|
||||
return request({
|
||||
url: api + "/sysPosition/addSysPosition",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
删除角色信息
|
||||
*/
|
||||
export const deleteSysPosition = (data) => {
|
||||
return request({
|
||||
url: api + "/sysPosition/deleteSysPosition",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*分页查询菜单信息
|
||||
*
|
||||
*/
|
||||
export const getSystemMeny = (params) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/selectPage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*添加菜单
|
||||
*
|
||||
*/
|
||||
export const addSysMenu = (data) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/addSysMenu",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
*编辑菜单
|
||||
*
|
||||
*/
|
||||
export const updateSysMenu = (data) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/updateSysMenu",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
*删除菜单
|
||||
*
|
||||
*/
|
||||
export const deleteSysMenu = (data) => {
|
||||
return request({
|
||||
url: api + "/sysMenu/deleteSysMenu",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*分页查询菜单信息
|
||||
*
|
||||
*/
|
||||
export const getSysConfigList = (params) => {
|
||||
return request({
|
||||
url: api + "/sys-config/selectPage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
添加系统配置
|
||||
*
|
||||
*/
|
||||
export const addSysConfig = (data) => {
|
||||
return request({
|
||||
url: api + "/sys-config/addSysConfig",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
*
|
||||
删除系统配置信息
|
||||
*
|
||||
*/
|
||||
export const deleteSysConfig = (data) => {
|
||||
return request({
|
||||
url: api + "/sys-config/deleteSysConfig",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
*
|
||||
修改系统配置信息
|
||||
*
|
||||
*/
|
||||
export const updateSysConfig = (data) => {
|
||||
return request({
|
||||
url: api + "/sys-config/updateSysConfig",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/* 部门 */
|
||||
|
||||
/*
|
||||
*
|
||||
添加部门
|
||||
*
|
||||
*/
|
||||
export const addSysDept = (data) => {
|
||||
return request({
|
||||
url: api + "/sysDept/addSysDept",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
*
|
||||
删除部门
|
||||
*
|
||||
*/
|
||||
export const deleteSysDept = (data) => {
|
||||
return request({
|
||||
url: api + "/sysDept/deleteSysDept",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
修改部门
|
||||
*
|
||||
*/
|
||||
export const updateSysDept = (data) => {
|
||||
return request({
|
||||
url: api + "/sysDept/updateSysDept",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
分页查询部门信息
|
||||
*
|
||||
*/
|
||||
export const selectDeptPage = (params) => {
|
||||
return request({
|
||||
// url: api + "/sysDept/selectPage",
|
||||
url: api + "/sysDept/selectDept",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
添加系统版本管理
|
||||
*
|
||||
*/
|
||||
export const addVersionManage = (data) => {
|
||||
return request({
|
||||
url: api + "/sys-version-manage/addVersionManage",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*
|
||||
*
|
||||
删除系统版本管理信息
|
||||
*
|
||||
*/
|
||||
export const deleteVersionManage = (params) => {
|
||||
return request({
|
||||
url: api + "/sys-version-manage/deleteVersionManage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
*
|
||||
|
||||
修改系统版本管理
|
||||
*
|
||||
*/
|
||||
export const updateVersionManage = (data) => {
|
||||
return request({
|
||||
url: api + "/sys-version-manage/updateVersionManage",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/* 系统版本管理*/
|
||||
export const getSysVersionList = (params) => {
|
||||
return request({
|
||||
url: api + "/sys-version-manage/selectPage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/* 部门 end*/
|
||||
|
||||
/*操作日志 */
|
||||
export const getOperlogList = (data) => {
|
||||
return request({
|
||||
url: api + "/monitor/operlog/list",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*删除日志 */
|
||||
export const operlogRemove = (data) => {
|
||||
return request({
|
||||
url: api + "/monitor/operlog/remove",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*clean日志 */
|
||||
export const operlogClean = (data) => {
|
||||
return request({
|
||||
url: api + "/monitor/operlog/clean",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
//详情
|
||||
export const operlogDetail = (id) => {
|
||||
return request({
|
||||
url: api + `/monitor/operlog/detail/${id}`,
|
||||
method: "GET"
|
||||
});
|
||||
};
|
||||
|
||||
/*日志 end*/
|
||||
|
||||
/*登录日志 */
|
||||
export const getSysLoginLogList = (data) => {
|
||||
return request({
|
||||
url: api + "/sysLoginLog/list",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*删除日志 */
|
||||
export const sysLogRemove = (data) => {
|
||||
return request({
|
||||
url: api + "/sysLoginLog/remove",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
/*clean日志 */
|
||||
export const LoginlogClean = (data) => {
|
||||
return request({
|
||||
url: api + "/sysLoginLog/clean",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
//详情
|
||||
export const sysLoginogDetail = (id) => {
|
||||
return request({
|
||||
url: api + `/sysLoginLog/detail/${id}`,
|
||||
method: "POST"
|
||||
});
|
||||
};
|
||||
|
||||
/*登录日志 end*/
|
||||
|
||||
/*用户模块*/
|
||||
/*分页查询用户信息 */
|
||||
export const getSysUserList = (params) => {
|
||||
return request({
|
||||
url: api + "/sysUser/selectPage",
|
||||
method: "GET",
|
||||
params: {
|
||||
...params,
|
||||
}
|
||||
});
|
||||
};
|
||||
// 分页查询停用账号用户列表
|
||||
export const gettyzhUserList = (params) => {
|
||||
return request({
|
||||
url: api + "/sysUser/getNoDeptUser",
|
||||
method: "GET",
|
||||
params: {
|
||||
...params,
|
||||
}
|
||||
});
|
||||
};
|
||||
export const getSysUserList2 = (params) => {
|
||||
return request({
|
||||
url: api + "/sysUser/selectUserInfoPage",
|
||||
method: "GET",
|
||||
params: {
|
||||
...params,
|
||||
}
|
||||
});
|
||||
};
|
||||
/*编辑用户信息 */
|
||||
export const editSysUser = (data) => {
|
||||
return request({
|
||||
url: api + "/sysUser/editSysUser",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*添加用户信息 */
|
||||
export const addUser = (data) => {
|
||||
return request({
|
||||
url: api + "/sysUser/addUser",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*编辑密码 */
|
||||
export const editPassword = (data) => {
|
||||
return request({
|
||||
url: api + "/sysUser/editPassword",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*根据id查询用户信息 */
|
||||
export const getUserInfoToId = (id) => {
|
||||
return request({
|
||||
url: api + `/sysUser/getUserInfo/${id}`,
|
||||
method: "GET"
|
||||
});
|
||||
};
|
||||
/*用户模块end*/
|
||||
|
||||
// 查询所有子部门树
|
||||
|
||||
export const getAllChildDeptList = (data) => {
|
||||
return request({
|
||||
url: api + `/sysDept/getAllChildDeptList`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* //通过 userId获取 角色列表
|
||||
*
|
||||
*/
|
||||
export const getUserRoleList = (params) => {
|
||||
return request({
|
||||
url: api + `/sysRole/getUserRoleList/${params}`,
|
||||
method: "GET"
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* //通过 部门id 获取 角色列表
|
||||
*
|
||||
*/
|
||||
export const selectRolePageByDept = (params) => {
|
||||
return request({
|
||||
url: api + `/sysDept/selectRolePageByDept`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
//为用户 授予角色
|
||||
export const grantRoleToUser = (data) => {
|
||||
return request({
|
||||
url: api + `/sysRole/grantRoleToUser`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
//为部门 授予角色
|
||||
export const saveRoleDeptInfo = (data) => {
|
||||
return request({
|
||||
url: api + `/sysDept/saveRoleDeptInfo`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 添加数据权限
|
||||
export const saveDataPermission = (data) => {
|
||||
return request({
|
||||
url: api + `/sysRole/saveDataPermission`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/*分页查询 所有用户
|
||||
未绑定当前角色的用户 传当前角色id
|
||||
*/
|
||||
export const selectUnAccreditPage = (params) => {
|
||||
return request({
|
||||
url: api + "/sysUser/selectUnAccreditPage",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 查询当前角色下 的所有用户
|
||||
export const getRoleUserList = (params) => {
|
||||
return request({
|
||||
url: api + `/sysRole/getRoleUserList`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 查询当前部门 的所有用户
|
||||
export const selectUserPageByDept = (params) => {
|
||||
return request({
|
||||
url: api + `/sysDept/selectUserPageByDept`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 批量解绑用户角色
|
||||
export const batchUnboundUserRole = (data) => {
|
||||
return request({
|
||||
url: api + `/sysRole/batchUnboundUserRole`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 重置密码
|
||||
export const resetPassword = (params) => {
|
||||
return request({
|
||||
url: api + `/sysUser/resetPassword`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 为角色授予用户
|
||||
export const grantUserToRole = (data) => {
|
||||
return request({
|
||||
url: api + `/sysRole/grantUserToRole`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 获取角色对应权限
|
||||
export const getRoleMenuIds = (roleId) => {
|
||||
return request({
|
||||
url: api + `/sysRole/getRoleMenuIds/${roleId}`,
|
||||
method: "GET"
|
||||
});
|
||||
};
|
||||
|
||||
// 获取所有菜单权限
|
||||
export const getMenuTree = (params) => {
|
||||
return request({
|
||||
url: api + `/sysMenu/selectList`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 为角色修改权限
|
||||
export const saveRoleMenuInfo = (data) => {
|
||||
return request({
|
||||
url: api + `/sysRole/saveRoleMenuInfo`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 获取用户列表
|
||||
export const getPasswordLevel = (params) => {
|
||||
return request({
|
||||
url: api + `/sysUser/getPasswordLevel`,
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 获取带部门的用户列表
|
||||
export const selectUserDeptPage = (data = {}) => {
|
||||
return request({
|
||||
url: api + `/sysUser/selectUserDeptPage`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
///unifiedLogin
|
||||
export const unifiedLogin = (data) => {
|
||||
return request({
|
||||
url: api + `/unifiedLogin`,
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
//查询所有的警种或派出所
|
||||
export const getQtjzAndPcs = (params) => {
|
||||
return request({
|
||||
url: api + `/deptFeign/getJzOrPcs`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
// 查询部门树形
|
||||
export const getDept = (params) => {
|
||||
return request({
|
||||
url: api + `/deptFeign/getDept`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
// 查询部门树形，不包含安全部门权限
|
||||
export const selectDept = (params) => {
|
||||
return request({
|
||||
url: api + `/deptFeign/selectDept`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
//部门树查询
|
||||
export const getOrgTree = (params) => {
|
||||
return request({
|
||||
url: api + `/sysDept/getOrgTree`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
48
src/api/ysCenter.js
Normal file
48
src/api/ysCenter.js
Normal file
@ -0,0 +1,48 @@
|
||||
import request from "@/utils/request";
|
||||
const api = "/mosty-api/mosty-yszx";
|
||||
|
||||
/**
|
||||
* 预警列表
|
||||
* @param {*} params
|
||||
* @returns
|
||||
*/
|
||||
export const getYsList = (data = {}) => {
|
||||
return request({
|
||||
url: api + "/tbYsGajg/getList",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 公安机关要素新增
|
||||
export const getYsAdd = (data = {}) => {
|
||||
return request({
|
||||
url: api + "/tbYsGajg/addGajg",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 公安机关要素修改
|
||||
export const getYsUpdate = (data = {}) => {
|
||||
return request({
|
||||
url: api + "/tbYsGajg/editGajg",
|
||||
method: "POST",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 删除公安机关要素 /tbYsGajg/{id}
|
||||
export const getYsDelete = (id) => {
|
||||
return request({
|
||||
url: `${api}/tbYsGajg/${id}`,
|
||||
method: "DELETE"
|
||||
});
|
||||
};
|
||||
// 通过id查询详情
|
||||
export const getYsInfo = (id) => {
|
||||
return request({
|
||||
url: api + `/tbYsGajg/${id}`,
|
||||
method: "GET"
|
||||
});
|
||||
};
|
||||
413
src/assets/css/element-plus.css
Normal file
413
src/assets/css/element-plus.css
Normal file
@ -0,0 +1,413 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/* */
|
||||
::v-deep .el-image {
|
||||
border: 1px solid (220, 222, 224);
|
||||
background-color: rgb(220, 222, 224);
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-button--default {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-button--default:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
--el-button-bg-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-button:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-button:focus,
|
||||
::v-deep .el-button:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
:v-deep .el-card {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: #00143d;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-date-table td.disabled .el-date-table-cell {
|
||||
background-color: #f6fafa !important;
|
||||
}
|
||||
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:focus,
|
||||
.el-button.is-disabled:hover {
|
||||
color: var(--el-button-disabled-text-color);
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #808596;
|
||||
border-color: var(--el-button-disabled-border-color);
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-dialog {
|
||||
margin-top: 5vh !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba(0, 128, 0, 0) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
background: rgba(251, 252, 251, 0.6);
|
||||
color: #040404;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button:disabled {
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-pager .number.active {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__sizes {
|
||||
margin: 0px 21px 0 21px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button {
|
||||
margin: 0 10px;
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li {
|
||||
/* background: transparent; */
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li.active {
|
||||
/* background: transparent; */
|
||||
border-radius: 12%;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
/* ::v-deep .el-tree {
|
||||
color: #fff;
|
||||
--el-tree-node-hover-bg-color: #2e9f2e !important;
|
||||
} */
|
||||
|
||||
.el-tree__empty-block {
|
||||
background-color: #0d480d;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
color: #fff;
|
||||
--el-checkbox-checked-bg-color: var(--el-color-primary);
|
||||
--el-checkbox-input-border-color-hover: var(--el-color-primary);
|
||||
--el-checkbox-checked-input-border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content {
|
||||
background: #40976c;
|
||||
}
|
||||
|
||||
::v-deep .is-focusable {
|
||||
background: #02163b !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__label {
|
||||
background: #1d5c21 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content:hover {
|
||||
color: #fff;
|
||||
background: #47eb47;
|
||||
}
|
||||
|
||||
/* ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
color: #fff !important;
|
||||
background-color: var(--el-color-primary) !important;
|
||||
} */
|
||||
|
||||
.el-button--default {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-button--default:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
background: var(--el-color-primary);
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary:hover {
|
||||
background: #20c54c;
|
||||
border: 1px solid #20c54c;
|
||||
}
|
||||
|
||||
::v-deep .el-button--edit {
|
||||
background: orange;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-button--edit:hover {
|
||||
background: #ecb349;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-button--delete {
|
||||
background: #ed5454;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-button--delete:hover {
|
||||
background: #f67b7b;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-dialog__header,
|
||||
::v-deep .el-dialog__body,
|
||||
::v-deep .el-dialog__footer,
|
||||
::v-deep .el-card__body {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .user-main-wrap {
|
||||
border: 1px solid #07376d;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
background: #073e24 !important;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner:focus {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
box-shadow: 0px 0px 8px var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-input .el-input__count .el-input__count-inner {
|
||||
background: transparent;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea .el-input__count {
|
||||
background: transparent;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-select__popper.el-popper {
|
||||
background: #16284c;
|
||||
border: #16284c;
|
||||
}
|
||||
|
||||
::v-deep .el-range-input {
|
||||
background: transparent;
|
||||
color: #0a0909;
|
||||
}
|
||||
|
||||
::v-deep .el-range-separator {
|
||||
color: #080808;
|
||||
}
|
||||
|
||||
::v-deep .el-button--danger {
|
||||
background: #f56c6c;
|
||||
border: 1px solid #f56c6c;
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
--el-tree-node-hover-bg-color: #083960;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__label {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-card {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
--el-collapse-header-bg-color: transparent;
|
||||
--el-collapse-header-text-color: #fff;
|
||||
--el-collapse-content-bg-color: transparent;
|
||||
--el-collapse-content-text-color: #fff;
|
||||
--el-collapse-border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__active-bar {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
/* background: var(--el-color-primary); */
|
||||
}
|
||||
|
||||
::v-deep .el-upload--picture-card {
|
||||
background-color: #D3D5DB;
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list--picture-card .el-upload-list__item {
|
||||
background-color: #F0F3F4;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.toastui-editor-defaultUI {
|
||||
position: relative;
|
||||
border: 1px solid #dadde6;
|
||||
height: 100%;
|
||||
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial",
|
||||
"나눔바른고딕", "Nanum Barun Gothic", "맑은고딕", "Malgun Gothic",
|
||||
sans-serif;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
::v-deep .el-select__popper.el-popper[role="tooltip"] {
|
||||
background: #03163c;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total,
|
||||
::v-deep .el-pagination__jump {
|
||||
color: #bdc7da;
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
color: #ced0dc;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #03163c;
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
background: transparent;
|
||||
border: 1px solid #19538a;
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-select__tags .el-tag--info {
|
||||
background: transparent;
|
||||
border: 1px solid #19538a;
|
||||
color: #0065d8;
|
||||
}
|
||||
|
||||
/* ::v-deep .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body .tabBox {
|
||||
height: 450px;
|
||||
} */
|
||||
|
||||
::v-deep .el-date-editor .el-range-separator {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor .el-range-input {
|
||||
color: #080808;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-input-number__decrease {
|
||||
border-right: 1px solid #23466d;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__increase {
|
||||
border-left: 1px solid #23466d;
|
||||
}
|
||||
|
||||
.el-input-number.is-disabled ::v-deep .el-input-number__decrease,
|
||||
.el-input-number.is-disabled ::v-deep .el-input-number__increase {
|
||||
border-color: #23466d;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-step__title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
::v-deep .el-step__description {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-mask {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor.is-disabled input {
|
||||
background-color: #e6e8eb !important;
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor.is-disabled {
|
||||
background-color: #e6e8eb !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-input {
|
||||
--el-input-placeholder-color: #9fa2a1 !important;
|
||||
}
|
||||
352
src/assets/css/element-plus.min.css
vendored
Normal file
352
src/assets/css/element-plus.min.css
vendored
Normal file
@ -0,0 +1,352 @@
|
||||
::v-deep .el-button--default {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-button--default:hover {
|
||||
border: 1px solid #20c54c
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
--el-button-bg-color: var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-button:hover {
|
||||
border: 1px solid #20c54c
|
||||
}
|
||||
|
||||
::v-deep .el-button:focus,
|
||||
::v-deep .el-button:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
:v-deep .el-card {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: #00143d;
|
||||
padding: 10px 0
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:focus,
|
||||
.el-button.is-disabled:hover {
|
||||
color: var(--el-button-disabled-text-color);
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #808596;
|
||||
border-color: var(--el-button-disabled-border-color)
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff !important
|
||||
}
|
||||
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba(0, 128, 0, 0) !important
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
background: rgba(18, 52, 25, 0.6);
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button:disabled {
|
||||
background-color: var(--el-table-cell-bmx-backgroundcolor);
|
||||
color: #000
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__sizes {
|
||||
margin: 0px 21px 0 21px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button {
|
||||
margin: 0 10px;
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li.active {
|
||||
border-radius: 12%;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
|
||||
.el-tree__empty-block {
|
||||
background-color: #0d480d
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
color: #fff;
|
||||
--el-checkbox-checked-bg-color: var(--el-color-primary);
|
||||
--el-checkbox-input-border-color-hover: var(--el-color-primary);
|
||||
--el-checkbox-checked-input-border-color: var(--el-color-primary)
|
||||
}
|
||||
|
||||
|
||||
::v-deep .is-focusable {
|
||||
background: #02163b !important
|
||||
}
|
||||
|
||||
.el-button--default {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--el-color-primary)
|
||||
}
|
||||
|
||||
.el-button--default:hover {
|
||||
border: 1px solid var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
background: var(--el-color-primary);
|
||||
border: 1px solid var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary:hover {
|
||||
background: #20c54c;
|
||||
border: 1px solid #20c54c
|
||||
}
|
||||
|
||||
::v-deep .el-button--edit {
|
||||
background: orange;
|
||||
border: 0
|
||||
}
|
||||
|
||||
::v-deep .el-button--edit:hover {
|
||||
background: #ecb349;
|
||||
border: 0;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::v-deep .el-button--delete {
|
||||
background: #ed5454;
|
||||
border: 0
|
||||
}
|
||||
|
||||
::v-deep .el-button--delete:hover {
|
||||
background: #f67b7b;
|
||||
border: 0;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body,
|
||||
::v-deep .el-dialog__footer,
|
||||
::v-deep .el-card__body {
|
||||
background: #092d2d !important;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::v-deep .user-main-wrap {
|
||||
border: 1px solid #07376d
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
background: #073e24 !important;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner:hover {
|
||||
border: 1px solid var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner:focus {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
box-shadow: 0px 0px 8px var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-input .el-input__count .el-input__count-inner {
|
||||
background: transparent;
|
||||
color: #000
|
||||
}
|
||||
|
||||
::v-deep .el-textarea .el-input__count {
|
||||
background: transparent;
|
||||
color: #000
|
||||
}
|
||||
|
||||
::v-deep .el-select__popper.el-popper {
|
||||
background: #16284c;
|
||||
border: #16284c
|
||||
}
|
||||
|
||||
::v-deep .el-range-input {
|
||||
background: transparent;
|
||||
color: #141414
|
||||
}
|
||||
|
||||
::v-deep .el-range-separator {
|
||||
color: #201f1f
|
||||
}
|
||||
|
||||
::v-deep .el-button--danger {
|
||||
background: #f56c6c;
|
||||
border: 1px solid #f56c6c
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-card {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #fff
|
||||
}
|
||||
|
||||
::v-deep .el-collapse {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
--el-collapse-header-bg-color: transparent;
|
||||
--el-collapse-header-text-color: #fff;
|
||||
--el-collapse-content-bg-color: transparent;
|
||||
--el-collapse-content-text-color: #fff;
|
||||
--el-collapse-border-color: var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__active-bar {
|
||||
background-color: var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
color: var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
color: #333
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item:hover {
|
||||
color: var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
/* background: var(--el-color-primary) */
|
||||
}
|
||||
|
||||
::v-deep .el-upload--picture-card {
|
||||
background-color: #D3D5DB;
|
||||
border: 1px dashed var(--el-color-primary)
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list--picture-card .el-upload-list__item {
|
||||
background-color: #F0F3F4;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.toastui-editor-defaultUI {
|
||||
position: relative;
|
||||
border: 1px solid #dadde6;
|
||||
height: 100%;
|
||||
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial",
|
||||
"나눔바른고딕", "Nanum Barun Gothic", "맑은고딕", "Malgun Gothic",
|
||||
sans-serif;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #303133
|
||||
}
|
||||
|
||||
::v-deep .el-select__popper.el-popper[role="tooltip"] {
|
||||
background: #03163c
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 10px 20px
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total,
|
||||
::v-deep .el-pagination__jump {
|
||||
color: #bdc7da
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
color: #ced0dc
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #03163c
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
background: transparent;
|
||||
border: 1px solid #19538a;
|
||||
margin: 0 0.2rem
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-select__tags .el-tag--info {
|
||||
background: transparent;
|
||||
border: 1px solid #19538a;
|
||||
color: #0065d8
|
||||
}
|
||||
|
||||
::v-deep .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body .tabBox {
|
||||
height: 450px
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor .el-range-separator {
|
||||
color: #111010
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor .el-range-input {
|
||||
color: #0c0c0c
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-input-number__decrease {
|
||||
border-right: 1px solid #23466d
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__increase {
|
||||
border-left: 1px solid #23466d
|
||||
}
|
||||
|
||||
.el-input-number.is-disabled ::v-deep .el-input-number__decrease,
|
||||
.el-input-number.is-disabled ::v-deep .el-input-number__increase {
|
||||
border-color: #23466d
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
::v-deep .el-step__title {
|
||||
font-size: 13px
|
||||
}
|
||||
|
||||
::v-deep .el-step__description {
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
::v-deep .el-loading-mask {
|
||||
background-color: rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--el-color-primary)
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-table .ascending .sort-caret.ascending {
|
||||
border-bottom-color: var(--el-color-primary)
|
||||
}
|
||||
|
||||
.el-dropdown__popper {
|
||||
--el-dropdown-menuItem-hover-color: #13bf13
|
||||
}
|
||||
556
src/assets/css/element-plus.scss
Normal file
556
src/assets/css/element-plus.scss
Normal file
@ -0,0 +1,556 @@
|
||||
::v-deep .el-button--default {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--el-color-primary);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
//在全局设置
|
||||
input[aria-hidden=true] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
//图片样式
|
||||
::v-deep .el-image {
|
||||
border: 1px solid (220, 222, 224);
|
||||
background-color: rgb(220, 222, 224);
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
border: 1px solid (220, 222, 224);
|
||||
background-color: rgb(220, 222, 224);
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
//表格超出展示省略号的样式（有效）
|
||||
::v-deep .el-table .cell.el-tooltip {
|
||||
white-space: nowrap;
|
||||
min-width: 50px;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
--el-button-bg-color: var(--el-color-primary);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-radio__input.is-disabled .el-radio__inner {
|
||||
background: none;
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: var(--el-color-primary);
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-radio__inner:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-radio__input.is-checked+.el-radio__label {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-button:focus,
|
||||
::v-deep .el-button:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
:v-deep .el-card {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: #00143d;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #1a1919;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #0b0b0b;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
box-shadow: 0px 0px 8px var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:focus,
|
||||
.el-button.is-disabled:hover {
|
||||
color: var(--el-button-disabled-text-color);
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #808596;
|
||||
border-color: var(--el-button-disabled-border-color);
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-select:hover:not(.el-select--disabled) .el-input__inner {
|
||||
border: 1px solid #9acac8;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-input.is-focus .el-input__inner {
|
||||
border-color: #9acac8 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-input__inner {
|
||||
&:focus {
|
||||
border-color: #9acac8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table.has-footer .el-table__inner-wrapper::before {
|
||||
bottom: 0px !important;
|
||||
border: 0.5px solid #dedcdc96 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
border: 0.5px solid #ececec !important;
|
||||
overflow: auto;
|
||||
--el-table-border: 1px solid #ececec !important;
|
||||
--el-table-border-color: 1px solid #ececec !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
|
||||
background: #e8e8e8 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #f5f5f5 !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba($color: var(--el-color-primary), $alpha: 0) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
background: var(--el-table-cell-bmx-backgroundcolor);
|
||||
color: #070707;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button:disabled {
|
||||
background-color: var(--el-table-cell-bmx-backgroundcolor);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-pager .number.active {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__sizes {
|
||||
margin: 0px 21px 0 21px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button {
|
||||
margin: 0 10px;
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li.active {
|
||||
border-radius: 12%;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
line-height: 18px;
|
||||
// background: rgb(61, 93, 61,0.3);
|
||||
// color: #1f1d1d;
|
||||
--el-tree-node-hover-bg-color: var(--el-color-primary) !important;
|
||||
--el-tree-node-hover-color: #ffffff !important;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
color: #fff;
|
||||
--el-checkbox-checked-bg-color: var(--el-color-primary);
|
||||
--el-checkbox-input-border-color-hover: var(--el-color-primary);
|
||||
--el-checkbox-checked-input-border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
|
||||
::v-deep .is-current {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__label {
|
||||
background: rgb(29, 92, 33) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content:hover {
|
||||
color: #fff !important;
|
||||
background: var(--el-color-primary); //有用的
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content>div:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-button--default {
|
||||
color: #fff;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--el-color-primary);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
background: var(--el-color-primary);
|
||||
border: 1px solid var(--el-color-primary);
|
||||
|
||||
&:hover {
|
||||
background: rgba(15, 142, 135, 0.5);
|
||||
border: 1px solid rgba(15, 142, 135, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button--edit {
|
||||
background: orange;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgb(236, 179, 73);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button--delete {
|
||||
background: rgb(237, 84, 84);
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgb(246, 123, 123);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
--el-dialog-margin-top: 8vh !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body,
|
||||
::v-deep .el-dialog__footer,
|
||||
::v-deep .el-card__body {
|
||||
background: rgb(252, 254, 254) !important;
|
||||
color: #302d2d;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
// height: 70vh !important;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
// .el-table {
|
||||
// height: 100% !important;
|
||||
// }
|
||||
}
|
||||
|
||||
::v-deep .able-box-radio {
|
||||
height: 100% !important;
|
||||
border: 1px solid red !important;
|
||||
}
|
||||
|
||||
::v-deep .user-main-wrap {
|
||||
border: 1px solid #07376d;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
// background: #d3dbdd !important;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
background: #fff !important;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #131313;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
box-shadow: 0px 0px 8px var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input .el-input__count .el-input__count-inner {
|
||||
background: transparent;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea .el-input__count {
|
||||
background: transparent;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-select__popper.el-popper {
|
||||
background: #16284c;
|
||||
border: #16284c;
|
||||
}
|
||||
|
||||
::v-deep .el-range-input {
|
||||
background: transparent;
|
||||
color: #0c0c0c;
|
||||
}
|
||||
|
||||
::v-deep .el-range-separator {
|
||||
color: #070707;
|
||||
}
|
||||
|
||||
::v-deep .el-button--danger {
|
||||
background: #f56c6c;
|
||||
border: 1px solid #f56c6c;
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
--el-tree-node-hover-bg-color: #083960;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__label {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-card {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
--el-collapse-header-bg-color: transparent;
|
||||
--el-collapse-header-text-color: #fff;
|
||||
--el-collapse-content-bg-color: transparent;
|
||||
--el-collapse-content-text-color: #fff;
|
||||
--el-collapse-border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__active-bar {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
// background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-upload--picture-card {
|
||||
background-color: #eeeeee;
|
||||
border: 1px dashed #d3d5db;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list--picture-card .el-upload-list__item {
|
||||
background-color: #f0f3f4;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.toastui-editor-defaultUI {
|
||||
position: relative;
|
||||
border: 1px solid #dadde6;
|
||||
height: 100%;
|
||||
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial",
|
||||
"나눔바른고딕", "Nanum Barun Gothic", "맑은고딕", "Malgun Gothic",
|
||||
sans-serif;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
::v-deep .el-select__popper.el-popper[role="tooltip"] {
|
||||
background: #03163c;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total,
|
||||
::v-deep .el-pagination__jump {
|
||||
color: #606367;
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
// color: rgb(206, 208, 220);
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
background: transparent;
|
||||
// border: 1px solid #19538a;
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-select__tags .el-tag--info {
|
||||
background: transparent;
|
||||
border: 1px solid #19538a;
|
||||
color: #0065d8;
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
// ::v-deep .el-overlay .el-overlay-dialog .el-dialog{
|
||||
// border: 1px solid red;
|
||||
// }
|
||||
// ::v-deep .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body .tabBox {
|
||||
// height: 450px;
|
||||
// }
|
||||
|
||||
::v-deep .el-date-editor .el-range-separator {
|
||||
color: #0c0c0c;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor .el-range-input {
|
||||
color: #070707;
|
||||
}
|
||||
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
background-color: #d3dbdd;
|
||||
border-color: var(--el-color-primary);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__decrease {
|
||||
border-right: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__increase {
|
||||
border-left: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-input-number.is-disabled ::v-deep .el-input-number__decrease,
|
||||
.el-input-number.is-disabled ::v-deep .el-input-number__increase {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-step__title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
::v-deep .el-step__description {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-mask {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-dropdown__popper {
|
||||
--el-dropdown-menuItem-hover-color: rgb(19, 191, 19);
|
||||
}
|
||||
|
||||
::v-deep .el-collapse {
|
||||
border: none;
|
||||
--el-collapse-border-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse-item__header {
|
||||
border: none;
|
||||
background-color: #e0e0e0;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px dotted var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-cascader-node:not(.is-disabled):focus,
|
||||
::v-deep .el-cascader-node:not(.is-disabled):hover,
|
||||
::v-deep .el-cascader-node.is-active {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor.is-disabled input {
|
||||
background-color: #e6e8eb !important;
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor.is-disabled {
|
||||
background-color: #e6e8eb !important;
|
||||
}
|
||||
1396
src/assets/css/largeScreen.scss
Normal file
1396
src/assets/css/largeScreen.scss
Normal file
File diff suppressed because it is too large
Load Diff
358
src/assets/css/layout.scss
Normal file
358
src/assets/css/layout.scss
Normal file
@ -0,0 +1,358 @@
|
||||
header {
|
||||
height: 67px;
|
||||
// background-color: var(--el-color-primary);
|
||||
// background-color: #0f8e87;
|
||||
background-color: var(--el-color-primary);
|
||||
// background: url("~@/assets/system/header.png") rgb(17, 24, 24) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.logo {
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
|
||||
.txBox {
|
||||
.el-icon {
|
||||
margin: 4px 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
span>i {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
//新增弹窗样式
|
||||
.total {
|
||||
color: #fff;
|
||||
height: 34px;
|
||||
line-height: 44px;
|
||||
|
||||
.numb {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog::-webkit-scrollbar-track {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.dialog::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.dialog::-webkit-scrollbar-thumb {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor.is-disabled input {
|
||||
background-color: #e6e8eb !important;
|
||||
}
|
||||
|
||||
::v-deep .el-range-editor.is-disabled {
|
||||
background-color: #e6e8eb !important;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: absolute;
|
||||
height: calc(100vh - 114px);
|
||||
overflow: auto;
|
||||
// border: 1px solid #027533;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
background-color: #fafbfd;
|
||||
z-index: 998;
|
||||
color: #0c0c0c;
|
||||
|
||||
.zqjl {
|
||||
box-sizing: border-box;
|
||||
padding: 40px 40px 20px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zqjl::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: #3f6bc2;
|
||||
top: 10px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.zqjl::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
top: 10px;
|
||||
left: 16px;
|
||||
bottom: -10px;
|
||||
background-color: #3f6bc2;
|
||||
}
|
||||
|
||||
.txmap {
|
||||
height: calc(100vh - 167px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zqjlinfo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-color: #052f57;
|
||||
|
||||
>span {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -28px;
|
||||
}
|
||||
|
||||
>div {
|
||||
padding: 8px 16px;
|
||||
color: rgb(45, 74, 238);
|
||||
|
||||
>span {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head_box {
|
||||
height: 48px;
|
||||
margin: 0 20px;
|
||||
border-bottom: 1px solid #07376d;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
&::v-deep .el-form--inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
&::v-deep .el-form-item--default {
|
||||
width: 23%;
|
||||
padding-bottom: 20px;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
&::v-deep .el-form-item--default.two {
|
||||
width: 46%;
|
||||
padding-bottom: 20px;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
&::v-deep .el-form-item--default.one {
|
||||
width: 92%;
|
||||
padding-bottom: 20px;
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 7.5em;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
// background: rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 15px 0 15px;
|
||||
border-radius: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
// height: calc(100vh - 57px - 40px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// padding: 0px 10px 10px 0;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
margin-right: 16px;
|
||||
|
||||
.titleBox {
|
||||
height: 39px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.title {
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #0f3916;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabBox {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.forbidden {
|
||||
background-color: rgba(194, 158, 92, 0.3);
|
||||
border: 1px solid rgb(194, 158, 92);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
cursor: default;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.operation p {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.operation p:hover {
|
||||
color: rgb(49, 195, 49);
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// .top {
|
||||
// line-height: 40px;
|
||||
// }
|
||||
|
||||
::v-deep .el-card {
|
||||
--el-card-border-color: #143578;
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 20px;
|
||||
--el-card-bg-color: #17096130;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
.treeBox {
|
||||
flex-shrink: 0;
|
||||
border: solid var(--el-color-primary);
|
||||
border-width: 1px 1px 1px 1px;
|
||||
}
|
||||
|
||||
.tabBox {
|
||||
margin-top: 0;
|
||||
width: calc(100% - 1px);
|
||||
}
|
||||
|
||||
.user-main-wrap {
|
||||
// overflow: hidden;
|
||||
width: calc(100% - 260px);
|
||||
|
||||
.el-table--fit {
|
||||
float: right;
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-box-sun {
|
||||
display: flex;
|
||||
|
||||
.org-box {
|
||||
flex: 1;
|
||||
|
||||
.org-content-box {
|
||||
width: 95%;
|
||||
|
||||
.org-search-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tree-box {
|
||||
height: 722px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box-sun {
|
||||
flex: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.titleBoxs {
|
||||
height: 39px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.title {
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.operate {
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgb(32, 75, 54);
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.line2 {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgb(32, 75, 54);
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.redStar {
|
||||
color: red;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
}
|
||||
584
src/assets/css/public.scss
Normal file
584
src/assets/css/public.scss
Normal file
@ -0,0 +1,584 @@
|
||||
/*********相对定位********/
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*********滚动********/
|
||||
.scrollbar {
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
/*********浮动********/
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*********手型********/
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*********文字位置********/
|
||||
.tl {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tc {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tr {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*********flex********/
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-grow1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.shrink0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-warp {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dir-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.just-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.just-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.just-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.just-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/*********文字省略********/
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.texx1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.texx2 {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.texx3 {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*********字体大小和边距********/
|
||||
@for $i from 1 through 100 {
|
||||
|
||||
//字体大小
|
||||
.f#{$i} {
|
||||
font-size: #{$i}px;
|
||||
}
|
||||
|
||||
//外边距
|
||||
.mg#{$i} {
|
||||
margin: #{$i}px;
|
||||
}
|
||||
|
||||
.mt#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
}
|
||||
|
||||
.mr#{$i} {
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.ml#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
}
|
||||
|
||||
.mb#{$i} {
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
//内边距
|
||||
.pd#{$i} {
|
||||
padding: #{$i}px;
|
||||
}
|
||||
|
||||
.pt#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
}
|
||||
|
||||
.pl#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
}
|
||||
|
||||
.pr#{$i} {
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
|
||||
.pb#{$i} {
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
//宽度
|
||||
.w#{$i} {
|
||||
width: #{$i}px;
|
||||
}
|
||||
|
||||
.ww#{$i} {
|
||||
width: #{$i}+"%";
|
||||
}
|
||||
|
||||
//高度
|
||||
.h#{$i} {
|
||||
height: #{$i}px;
|
||||
}
|
||||
|
||||
.hh#{$i} {
|
||||
height: #{$i}+"%";
|
||||
}
|
||||
|
||||
.lh#{$i} {
|
||||
line-height: #{$i}px;
|
||||
}
|
||||
|
||||
//圆角
|
||||
.brad#{$i} {
|
||||
border-radius: #{$i}px;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
//右侧区
|
||||
.stage-wrapper {
|
||||
height: calc(100vh - 145px);
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// background: #7cd0ec;
|
||||
.tip {
|
||||
color: var(--el-color-primary);
|
||||
display: inline-block;
|
||||
|
||||
.el-icon {
|
||||
margin: 13px 3px 0 0;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.no-file {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
color: #c40000;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: 73vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-link.el-link--primary {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&+.el-link {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.el-link--primary:hover {
|
||||
color: var(--el-color-primary);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 94px;
|
||||
background: #fff;
|
||||
|
||||
.topper {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding: 0 13px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 9px solid #006e4a;
|
||||
border-right: 9px solid transparent;
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.base {
|
||||
font-weight: bold;
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
|
||||
.el-icon {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 48px;
|
||||
padding: 8px 63px 0 13px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.el-tabs {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
background: var(--el-table-cell-bmx-backgroundcolor);
|
||||
border-top: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
line-height: 38px;
|
||||
margin: 0 1px;
|
||||
|
||||
&.is-active {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff;
|
||||
border-top: 2px solid var(--el-color-primary);
|
||||
border-bottom: 2px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: var(--el-color-primary);
|
||||
right: 13px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
z-index: 9;
|
||||
|
||||
.el-icon {
|
||||
margin-left: 5px;
|
||||
float: right;
|
||||
margin-top: 14px;
|
||||
transform: rotate(90deg);
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.el-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
// padding-left: 10px; // 这个会导致点击不到展开树
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: #006e4a;
|
||||
height: 16px;
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
.el-button+.el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
.has-update {
|
||||
.el-badge__content {
|
||||
font-size: 9px;
|
||||
background: #c40000;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
// flex: 1;
|
||||
padding-top: 10px;
|
||||
|
||||
.topper,
|
||||
.bottom {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.query {
|
||||
padding: 10px 13px;
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
|
||||
.countdown {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
// .tip {
|
||||
// .el-icon {
|
||||
// margin-top: 18px;
|
||||
// }
|
||||
// }
|
||||
.el-select {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.pt8 {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bases {
|
||||
.item {
|
||||
width: 347px;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
|
||||
.inner {
|
||||
background: #d2f2e5;
|
||||
border-radius: 4px;
|
||||
padding: 5px 20px;
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: none;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
padding-left: 30px;
|
||||
margin: 0;
|
||||
|
||||
&.name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.count {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.devices {
|
||||
.k-line {
|
||||
background: #eef6f6;
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
padding: 5px 3px;
|
||||
|
||||
.inner {
|
||||
background: #eef6f6;
|
||||
border-radius: 4px;
|
||||
padding: 5px 20px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
&.name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.count {
|
||||
font-size: 26px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mergeTable .el-table__body tr:hover>td.el-table__cell {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.edit-excel-pop {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
.edit-excel-hd {
|
||||
height: 44px;
|
||||
padding: 0 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.edit-excel-bd {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.luckysheet_info_detail {
|
||||
|
||||
/* display: none!important; */
|
||||
.luckysheet_info_detail_back,
|
||||
.luckysheet-share-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.luckysheet-sheets-scroll {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#luckysheet-sheets-leftscroll,
|
||||
#luckysheet-sheets-rightscroll {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.luckysheet-sheet-area {
|
||||
line-height: 31px;
|
||||
}
|
||||
1047
src/assets/css/system/index.css
Normal file
1047
src/assets/css/system/index.css
Normal file
File diff suppressed because it is too large
Load Diff
1
src/assets/css/system/index.min.css
vendored
Normal file
1
src/assets/css/system/index.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1089
src/assets/css/system/index.scss
Normal file
1089
src/assets/css/system/index.scss
Normal file
File diff suppressed because it is too large
Load Diff
296
src/assets/css/system/newsystem.css
Normal file
296
src/assets/css/system/newsystem.css
Normal file
@ -0,0 +1,296 @@
|
||||
.pubDataBox {
|
||||
border: 1px solid #1b6731;
|
||||
background: linear-gradient(180deg, #FFFFFF 67%, var(--el-table-cell-bmx-backgroundcolor) 100%);
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.pubDataBox>.lt,
|
||||
.pubDataBox>.rt,
|
||||
.pubDataBox>.lb,
|
||||
.pubDataBox>.rb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
border: solid #1b6753;
|
||||
}
|
||||
|
||||
.pubDataBox>.lt {
|
||||
border-width: 2px 0 0 2px;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.pubDataBox>.rt {
|
||||
border-width: 2px 2px 0 0;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.pubDataBox>.lb {
|
||||
border-width: 0 0 2px 2px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.pubDataBox>.rb {
|
||||
border-width: 0 2px 2px 0;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.pubDataBox>.title {
|
||||
height: 42px;
|
||||
background: url("~@/assets/images/layout/pubDataTitleBg.png") no-repeat center bottom;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pubDataBox>.title .text {
|
||||
color: #5effd4;
|
||||
font-size: 18px;
|
||||
padding: 0 24px;
|
||||
display: inline-block;
|
||||
margin-top: 7px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pubDataBox>.title .text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
background: url("~@/assets/images/layout/title-l.png") no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.pubDataBox>.title .text::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0px;
|
||||
background: url("~@/assets/images/layout/title-r.png") no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.statistics li {
|
||||
width: 118px;
|
||||
height: 98px;
|
||||
border: 1px solid #2b836b;
|
||||
margin: 7px 3.5px 0;
|
||||
background: rgba(35, 135, 96, 0.14);
|
||||
}
|
||||
|
||||
.statistics li>.title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
background: rgba(0, 212, 224, 0.1);
|
||||
}
|
||||
|
||||
.statistics li .item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: calc(100% - 34px);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.statistics li .item .numb {
|
||||
color: #07c8bd;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.statistics li .item .ten_thousand::before {
|
||||
content: "";
|
||||
font-size: 10px !important;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.statistics .next {
|
||||
width: 236px;
|
||||
}
|
||||
|
||||
.statistics .next .item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: calc(100% - 34px);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
ul.indexTabs {
|
||||
overflow: hidden;
|
||||
padding: 8px 0 0 10px;
|
||||
}
|
||||
|
||||
ul.indexTabs li {
|
||||
float: left;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
text-align: center;
|
||||
color: #07c8bd;
|
||||
background: url("~@/assets/system/indexTab-m.png") repeat-x;
|
||||
position: relative;
|
||||
margin: 0 14px 6px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul.indexTabs li::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -8px;
|
||||
width: 8px;
|
||||
height: 29px;
|
||||
background: url("~@/assets/system/indexTab-l.png") no-repeat;
|
||||
}
|
||||
|
||||
ul.indexTabs li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -8px;
|
||||
width: 8px;
|
||||
height: 29px;
|
||||
background: url("~@/assets/system/indexTab-r.png") no-repeat;
|
||||
}
|
||||
|
||||
ul.indexTabs li.four {
|
||||
width: 146px;
|
||||
}
|
||||
|
||||
ul.indexTabs li.five {
|
||||
width: 79px;
|
||||
}
|
||||
|
||||
ul.indexTabs li.active {
|
||||
background: url("~@/assets/system/indexTab-active-m.png") repeat-x;
|
||||
color: #f5f72d;
|
||||
}
|
||||
|
||||
ul.indexTabs li.active::after {
|
||||
background: url("~@/assets/system/indexTab-active-l.png") repeat-x;
|
||||
}
|
||||
|
||||
ul.indexTabs li.active::before {
|
||||
background: url("~@/assets/system/indexTab-active-r.png") repeat-x;
|
||||
}
|
||||
|
||||
.indexTabsContent {
|
||||
height: calc(100vh - 426px);
|
||||
}
|
||||
|
||||
.indexTabsContent>.title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
margin: 0 8px;
|
||||
background: rgba(0, 212, 224, 0.15);
|
||||
}
|
||||
|
||||
.indexTabsContent .chartsBox {
|
||||
height: calc((100% - 173px) / 2);
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.custom-dialog {
|
||||
background-color: #022d2d;
|
||||
z-index: 99999999999;
|
||||
display: block;
|
||||
width: 1358px;
|
||||
}
|
||||
|
||||
.dialogClass {
|
||||
z-index: 999999999999;
|
||||
}
|
||||
|
||||
.items {
|
||||
text-align: center !important;
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.el-dialog__title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-overlay {
|
||||
display: flex !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.exportButton {
|
||||
margin-left: 767px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: -54px;
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.el-pager li {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
|
||||
.el-dialog--center .el-dialog__body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
::v-deep .el-dialog--center .el-dialog__body {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
::v-deep .el-button {
|
||||
background: var(--el-color-primary) !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.exportButton {
|
||||
margin-top: -56px !important;
|
||||
}
|
||||
|
||||
.back_btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
285
src/assets/css/system/newsystem.min.css
vendored
Normal file
285
src/assets/css/system/newsystem.min.css
vendored
Normal file
@ -0,0 +1,285 @@
|
||||
.pubDataBox {
|
||||
border: 1px solid #1b6731;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
margin-top: 15px
|
||||
}
|
||||
|
||||
.pubDataBox>.lt,
|
||||
.pubDataBox>.rt,
|
||||
.pubDataBox>.lb,
|
||||
.pubDataBox>.rb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
border: solid #1b6753
|
||||
}
|
||||
|
||||
.pubDataBox>.lt {
|
||||
border-width: 2px 0 0 2px;
|
||||
top: -1px;
|
||||
left: -1px
|
||||
}
|
||||
|
||||
.pubDataBox>.rt {
|
||||
border-width: 2px 2px 0 0;
|
||||
top: -1px;
|
||||
right: -1px
|
||||
}
|
||||
|
||||
.pubDataBox>.lb {
|
||||
border-width: 0 0 2px 2px;
|
||||
bottom: -1px;
|
||||
left: -1px
|
||||
}
|
||||
|
||||
.pubDataBox>.rb {
|
||||
border-width: 0 2px 2px 0;
|
||||
bottom: -1px;
|
||||
right: -1px
|
||||
}
|
||||
|
||||
.pubDataBox>.title {
|
||||
height: 42px;
|
||||
background: url("~@/assets/images/layout/pubDataTitleBg.png") no-repeat center bottom;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pubDataBox>.title .text {
|
||||
color: #5effd4;
|
||||
font-size: 18px;
|
||||
padding: 0 24px;
|
||||
display: inline-block;
|
||||
margin-top: 7px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pubDataBox>.title .text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
background: url("~@/assets/images/layout/title-l.png") no-repeat;
|
||||
width: 20px;
|
||||
height: 20px
|
||||
}
|
||||
|
||||
.pubDataBox>.title .text::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0px;
|
||||
background: url("~@/assets/images/layout/title-r.png") no-repeat;
|
||||
width: 20px;
|
||||
height: 20px
|
||||
}
|
||||
|
||||
ul.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 8px 0
|
||||
}
|
||||
|
||||
ul.statistics li>div {
|
||||
width: 118px;
|
||||
height: 98px;
|
||||
border: 1px solid #2b836b;
|
||||
margin: 7px 3.5px 0;
|
||||
background: rgba(35, 135, 96, 0.14)
|
||||
}
|
||||
|
||||
ul.statistics li>div>.title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
background: rgba(0, 212, 224, 0.1)
|
||||
}
|
||||
|
||||
ul.statistics li>div .item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: calc(100% - 34px);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
ul.statistics li>div .item .numb {
|
||||
color: #07c8bd;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding-top: 10px
|
||||
}
|
||||
|
||||
ul.statistics li>div .item .ten_thousand::before {
|
||||
content: "";
|
||||
font-size: 10px !important;
|
||||
position: absolute;
|
||||
right: 0
|
||||
}
|
||||
|
||||
ul.statistics .next {
|
||||
width: 236px
|
||||
}
|
||||
|
||||
ul.statistics .next .item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: calc(100% - 34px);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
ul.indexTabs {
|
||||
overflow: hidden;
|
||||
padding: 8px 0 0 10px
|
||||
}
|
||||
|
||||
ul.indexTabs li {
|
||||
float: left;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
text-align: center;
|
||||
color: #07c8bd;
|
||||
background: url("~@/assets/system/indexTab-m.png") repeat-x;
|
||||
position: relative;
|
||||
margin: 0 14px 6px 8px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
ul.indexTabs li::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -8px;
|
||||
width: 8px;
|
||||
height: 29px;
|
||||
background: url("~@/assets/system/indexTab-l.png") no-repeat
|
||||
}
|
||||
|
||||
ul.indexTabs li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -8px;
|
||||
width: 8px;
|
||||
height: 29px;
|
||||
background: url("~@/assets/system/indexTab-r.png") no-repeat
|
||||
}
|
||||
|
||||
ul.indexTabs li.four {
|
||||
width: 146px
|
||||
}
|
||||
|
||||
ul.indexTabs li.five {
|
||||
width: 79px
|
||||
}
|
||||
|
||||
ul.indexTabs li.active {
|
||||
background: url("~@/assets/system/indexTab-active-m.png") repeat-x;
|
||||
color: #f5f72d
|
||||
}
|
||||
|
||||
ul.indexTabs li.active::after {
|
||||
background: url("~@/assets/system/indexTab-active-l.png") repeat-x
|
||||
}
|
||||
|
||||
ul.indexTabs li.active::before {
|
||||
background: url("~@/assets/system/indexTab-active-r.png") repeat-x
|
||||
}
|
||||
|
||||
.indexTabsContent {
|
||||
height: calc(100vh - 426px)
|
||||
}
|
||||
|
||||
.indexTabsContent>.title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
margin: 0 8px;
|
||||
background: rgba(0, 212, 224, 0.15)
|
||||
}
|
||||
|
||||
.indexTabsContent .chartsBox {
|
||||
height: calc((100% - 173px) / 2);
|
||||
margin: 0 8px
|
||||
}
|
||||
|
||||
.custom-dialog {
|
||||
background-color: #022d2d;
|
||||
z-index: 99999999999;
|
||||
display: block;
|
||||
width: 1358px
|
||||
}
|
||||
|
||||
.dialogClass {
|
||||
z-index: 999999999999
|
||||
}
|
||||
|
||||
.items {
|
||||
text-align: center !important;
|
||||
float: none !important;
|
||||
width: 100% !important
|
||||
}
|
||||
|
||||
|
||||
.el-dialog__title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background-color: #075e3a;
|
||||
z-index: 9999
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-dialog__footer {
|
||||
background-color: #022d2d
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
::v-deep .el-overlay {
|
||||
display: flex !important;
|
||||
z-index: 99999 !important
|
||||
}
|
||||
|
||||
.exportButton {
|
||||
margin-left: 767px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: -54px;
|
||||
background-color: #2b643e;
|
||||
color: #07c8bd;
|
||||
border: 1px solid #2b643e;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
::v-deep .el-dialog--center .el-dialog__body {
|
||||
width: 100% !important
|
||||
}
|
||||
|
||||
|
||||
|
||||
.el-table--border .el-table__footer-wrapper tr:first-child td:first-child {
|
||||
width: 250px
|
||||
}
|
||||
|
||||
|
||||
.exportButton {
|
||||
margin-top: -56px !important
|
||||
}
|
||||
|
||||
.back_btn {
|
||||
cursor: pointer
|
||||
}
|
||||
339
src/assets/css/system/newsystem.scss
Normal file
339
src/assets/css/system/newsystem.scss
Normal file
@ -0,0 +1,339 @@
|
||||
// 公共容器
|
||||
.pubDataBox {
|
||||
background: linear-gradient(180deg, #FFFFFF 67%, var(--el-table-cell-bmx-backgroundcolor) 100%);
|
||||
position: relative;
|
||||
margin-top: -5px;
|
||||
|
||||
>.lt,
|
||||
>.rt,
|
||||
>.lb,
|
||||
>.rb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
border: solid #1b6753;
|
||||
}
|
||||
|
||||
>.lt {
|
||||
border-width: 2px 0 0 2px;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
>.rt {
|
||||
border-width: 2px 2px 0 0;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
>.lb {
|
||||
border-width: 0 0 2px 2px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
>.rb {
|
||||
border-width: 0 2px 2px 0;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
>.title {
|
||||
line-height: 39px;
|
||||
height: 43px;
|
||||
background: url("~@/assets/newImg/title-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: -5px;
|
||||
padding-left: 25px;
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-select .select-trigger .el-select__tags {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.operdel {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
line-height: 19px;
|
||||
color: #e71111 !important;
|
||||
}
|
||||
|
||||
.operedown {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
line-height: 19px;
|
||||
color: #234fa0 !important;
|
||||
}
|
||||
|
||||
//修改
|
||||
.operedit {
|
||||
cursor: pointer;
|
||||
line-height: 19px;
|
||||
color: #dc9507 !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
//详情
|
||||
.operesee {
|
||||
cursor: pointer;
|
||||
line-height: 19px;
|
||||
color: #0b6c51 !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
// 统计样式
|
||||
.statistics {
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 8px 0;
|
||||
|
||||
li {
|
||||
width: 120px;
|
||||
height: 74px;
|
||||
margin: 7px 3.5px 0;
|
||||
color: #191919;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
zoom: 0.8;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
// background: rgba(0, 212, 224, 0.1);
|
||||
}
|
||||
|
||||
.cont-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
|
||||
.numb {
|
||||
color: var(--el-color-primary);
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
padding-top: 4px;
|
||||
|
||||
padding-bottom: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ten_thousand::before {
|
||||
content: "";
|
||||
font-size: 10px !important;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// &:nth-last-child(1) {
|
||||
// width: 121px;
|
||||
// background: url("~@/assets/newImg/yxkz-last-bg.png")no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
li>div {
|
||||
width: 120px;
|
||||
height: 74px;
|
||||
background: url("~@/assets/newImg/yxkz-last-bg.png")no-repeat;
|
||||
// background: url("~@/assets/newImg/jcsj-bg.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.next {
|
||||
width: 236px;
|
||||
|
||||
.item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: calc(100% - 34px);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 首页数据统计
|
||||
ul.indexTabs {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0px;
|
||||
justify-content: space-between;
|
||||
|
||||
.four {
|
||||
width: 120.13px;
|
||||
height: 20.79px;
|
||||
line-height: 22px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #191919;
|
||||
background: url("~@/assets/newImg/sjtj-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.four {
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li.five {
|
||||
width: 79px;
|
||||
}
|
||||
|
||||
// li.active {
|
||||
// background: url("~@/assets/system/indexTab-active-m.png") repeat-x;
|
||||
// color: #f5f72d;
|
||||
// }
|
||||
}
|
||||
|
||||
.indexTabsContent {
|
||||
height: calc(100vh - 426px);
|
||||
|
||||
>.title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
margin: 0 8px;
|
||||
background: rgba(0, 212, 224, 0.15);
|
||||
}
|
||||
|
||||
.new-title {
|
||||
line-height: 39px;
|
||||
height: 30px;
|
||||
background: url("~@/assets/newImg/title-bg.png") no-repeat;
|
||||
background-size: 100%;
|
||||
margin-left: -5px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.chartsBox {
|
||||
height: calc((100% - 173px) / 2);
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//表格
|
||||
|
||||
.custom-dialog {
|
||||
// background-color: #022d2d;
|
||||
z-index: 99999999999;
|
||||
display: block;
|
||||
// width: 1045px;
|
||||
width: 1358px;
|
||||
}
|
||||
|
||||
.dialogClass {
|
||||
z-index: 999999999999;
|
||||
}
|
||||
|
||||
.items {
|
||||
text-align: center !important;
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.el-dialog__title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-overlay {
|
||||
display: flex !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.exportButton {
|
||||
margin-left: 767px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: -54px;
|
||||
text-align: center;
|
||||
background: var(--el-color-primary);
|
||||
color: #f8fbf8;
|
||||
border-radius: 6px 6px 6px 6px px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.el-pager li {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.el-dialog--center .el-dialog__body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog--center .el-dialog__body {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-button {
|
||||
background: var(--el-color-primary) !important;
|
||||
color: #f8fbf8 !important;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
// border-color: #025c29 !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 10px;
|
||||
color: #0c0c0c !important;
|
||||
}
|
||||
|
||||
.el-table--border .el-table__footer-wrapper tr:first-child td:first-child {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.exportButton {
|
||||
margin-top: -56px !important;
|
||||
}
|
||||
|
||||
|
||||
//返回按钮的样式
|
||||
.back_btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
18
src/assets/css/system/yxkztab.scss
Normal file
18
src/assets/css/system/yxkztab.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.el-icon-download {
|
||||
color: aliceblue !important;
|
||||
}
|
||||
|
||||
.el-dialog--center .el-dialog__body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.binBox {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.binBox .left {
|
||||
width: 50%;
|
||||
}
|
||||
BIN
src/assets/css/健康证@1x.png
Normal file
BIN
src/assets/css/健康证@1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/font/DIN Alternate Bold.ttf
Normal file
BIN
src/assets/font/DIN Alternate Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/DINAlternateBold.ttf
Normal file
BIN
src/assets/font/DINAlternateBold.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/DigifaceWide.ttf
Normal file
BIN
src/assets/font/DigifaceWide.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/交通标志专用字体.ttf
Normal file
BIN
src/assets/font/交通标志专用字体.ttf
Normal file
Binary file not shown.
BIN
src/assets/images/bg.png
Normal file
BIN
src/assets/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/bt_active_bg.png
Normal file
BIN
src/assets/images/bt_active_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/btn_bg.png
Normal file
BIN
src/assets/images/btn_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
BIN
src/assets/images/exam/bj.png
Normal file
BIN
src/assets/images/exam/bj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1006 KiB |
BIN
src/assets/images/exam/icon_01.png
Normal file
BIN
src/assets/images/exam/icon_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
BIN
src/assets/images/exam/icon_02.png
Normal file
BIN
src/assets/images/exam/icon_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 B |
BIN
src/assets/images/footer.png
Normal file
BIN
src/assets/images/footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/images/gb.jpg
Normal file
BIN
src/assets/images/gb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/images/home2-title-bg.png
Normal file
BIN
src/assets/images/home2-title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/images/icon10.png
Normal file
BIN
src/assets/images/icon10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/images/jcgl_bj.png
Normal file
BIN
src/assets/images/jcgl_bj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/images/jcgl_bj2.png
Normal file
BIN
src/assets/images/jcgl_bj2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/images/long-title.png
Normal file
BIN
src/assets/images/long-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
src/assets/images/mask.png
Normal file
BIN
src/assets/images/mask.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 435 KiB |
BIN
src/assets/images/qdewm.png
Normal file
BIN
src/assets/images/qdewm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/images/qinwudengji.png
Normal file
BIN
src/assets/images/qinwudengji.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/assets/images/title.png
Normal file
BIN
src/assets/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
src/assets/images/title2.png
Normal file
BIN
src/assets/images/title2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/zhixiang.png
Normal file
BIN
src/assets/images/zhixiang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 599 B |
BIN
src/assets/images/zhixiang_1.png
Normal file
BIN
src/assets/images/zhixiang_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 624 B |
BIN
src/assets/images/zsbg.png
Normal file
BIN
src/assets/images/zsbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 793 KiB |
BIN
src/assets/map/Icon_road_green_arrow.png
Normal file
BIN
src/assets/map/Icon_road_green_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 449 B |
BIN
src/assets/map/blue.png
Normal file
BIN
src/assets/map/blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
BIN
src/assets/map/blue_marker.png
Normal file
BIN
src/assets/map/blue_marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/assets/map/green_marker.png
Normal file
BIN
src/assets/map/green_marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 653 B |
BIN
src/assets/map/yujing.png
Normal file
BIN
src/assets/map/yujing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 480 B |
BIN
src/assets/newImg/bg.png
Normal file
BIN
src/assets/newImg/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/newImg/fxyj-bg.png
Normal file
BIN
src/assets/newImg/fxyj-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/newImg/home2-title-bg.png
Normal file
BIN
src/assets/newImg/home2-title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/newImg/icon06.gif
Normal file
BIN
src/assets/newImg/icon06.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/newImg/icon07.gif
Normal file
BIN
src/assets/newImg/icon07.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 B |
BIN
src/assets/newImg/sjtj-bg.png
Normal file
BIN
src/assets/newImg/sjtj-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/newImg/title-bg.png
Normal file
BIN
src/assets/newImg/title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
src/assets/newImg/yan.png
Normal file
BIN
src/assets/newImg/yan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/newImg/yxkz-last-bg.png
Normal file
BIN
src/assets/newImg/yxkz-last-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
44
src/components/DictTag/index.vue
Normal file
44
src/components/DictTag/index.vue
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(item, index) in options">
|
||||
<template v-if="values.includes(item.value)">
|
||||
<span :style="{ color: color, background: bgc }" v-if="item.elTagType == 'default' || item.elTagType == '' || tag == false
|
||||
" :key="item.value" :index="index" :class="item.elTagType">{{ item.label }}</span>
|
||||
<el-tag v-else :style="{ color: color, background: bgc }" :disable-transitions="true" :key="item.value + ''"
|
||||
:index="index" :type="item.elTagType === 'primary' ? '' : item.elTagType" :class="item.elTagType">{{
|
||||
item.label
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
// 数据
|
||||
options: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
tag: false,
|
||||
value: [Number, String, Array],
|
||||
color: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
bgc: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,0)'
|
||||
},
|
||||
});
|
||||
const values = computed(() => {
|
||||
if (props.value !== null && typeof props.value !== "undefined") {
|
||||
return Array.isArray(props.value) ? props.value : [String(props.value)];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
244
src/components/Echarts_view/defaultConfiger.js
Normal file
244
src/components/Echarts_view/defaultConfiger.js
Normal file
@ -0,0 +1,244 @@
|
||||
// 圆饼
|
||||
export function pieOption(option) {
|
||||
console.log('option.legend?.icon', option.legend?.icon)
|
||||
return {
|
||||
title: {
|
||||
show: option.title?.text ? true: false,
|
||||
text: option.title?.text, // 圆饼的title
|
||||
y: option.title?.y || "75%",
|
||||
x: option.title?.x || "center",
|
||||
textStyle: option.title?.textStyle || {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: option?.tooltip || {
|
||||
trigger: "item",
|
||||
formatter: "{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
icon: option.legend?.icon || "circle", // ’circle’(圆形), ‘rect’(长方形), ‘roundRect’(带圆角长方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(也是圆形), ‘arrow’(箭头), ‘none’，
|
||||
// y: option.legend?.y || '', // y 有值top就不会生效
|
||||
top: option.legend?.top || null, // 标注里图表的距离
|
||||
bottom: option.legend?.bottom || null, // bottom:"20%" // 组件离容器的距离
|
||||
right: option.legend?.right || null, //left:"10%" // // 组件离容器的距离
|
||||
left: option.legend?.left || null, //left:"10%" // // 组件离容器的距离
|
||||
width: option.legend?.width || "auto", // 图例组件的宽度
|
||||
height: option.legend?.height || "auto", // 图例组件的高度
|
||||
orient: option.legend?.orient || "horizontal", // 图例列表的布局朝向。 'horizontal' 水平 'vertical'垂直
|
||||
|
||||
align: "auto", // 图例标记和文本的对齐
|
||||
textStyle: option.legend?.textStyle || {
|
||||
color: "#999",
|
||||
fontSize: 12
|
||||
},
|
||||
formatter: option.legend?.formatter || null
|
||||
|
||||
// formatter: function (name) {
|
||||
// let data = option.series[0].data
|
||||
// console.log(data, 'data')
|
||||
// let total = 0
|
||||
// let tarValue
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// total += data[i].value
|
||||
// if (data[i].name == name) {
|
||||
// tarValue = data[i].value
|
||||
// }
|
||||
// }
|
||||
// let v = tarValue
|
||||
// return '{a|'+name+'}'+'{b|'+v+'}'+'{a|个}'
|
||||
// },
|
||||
// textStyle:{
|
||||
// rich:{
|
||||
// a:{
|
||||
// color:'red',
|
||||
// },
|
||||
// b:{
|
||||
// color:'#66FFcc',
|
||||
// fontSize:19,
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: option.series[0]?.radius || ["30%", "50%"],
|
||||
center: option.series[0]?.center || ['50%', '50%'], // 调整饼图的位置
|
||||
avoidLabelOverlap: option.series[0]?.avoidLabelOverlap || false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: option.series[0]?.data || [],
|
||||
emphasis: option?.emphasis || {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0,0,0,0.5)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
// center: ["10%", "50%"] // 这个属性调整图像的位置！！！！！
|
||||
}
|
||||
|
||||
}
|
||||
// 柱状
|
||||
export function barOption(option) {
|
||||
const grid = Object.assign({}, { containLabel: true }, option?.grid)
|
||||
const tooltip = Object.assign({}, {
|
||||
trigger: "axis", // 设置鼠标滑动到柱上显示柱上的所有的,可选值: axis item none
|
||||
axisPointer: { // 设置鼠标滑动上去的效果是
|
||||
type: "shadow" // 有阴影 可选值：line shadow none cross（十字准星指示器）
|
||||
}}, option?.tooltip)
|
||||
const series = option.series.map(item => {
|
||||
const obj = {
|
||||
name: item.name,
|
||||
type: item?.type || "bar",
|
||||
// stack: "total", // 所有的值都显示在一个柱上面
|
||||
stack: item?.stack || null,
|
||||
label: item?.label || {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
showSymbol: item?.showSymbol || false,
|
||||
areaStyle: item?.areaStyle || {},
|
||||
barWidth: item?.barWidth || "auto", // 柱状的宽度
|
||||
data: item.data
|
||||
}
|
||||
return obj
|
||||
})
|
||||
|
||||
|
||||
return {
|
||||
title: {
|
||||
show: option.title?.text ? true: false,
|
||||
text: option.title?.text,
|
||||
y: option.title?.y || "75%",
|
||||
x: option.title?.x || "center",
|
||||
textStyle: option.title?.textStyle || {
|
||||
color: "#999",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip,
|
||||
// 标注
|
||||
legend: {
|
||||
icon: option.legend?.icon || "circle", // ’circle’(圆形), ‘rect’(长方形), ‘roundRect’(带圆角长方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(也是圆形), ‘arrow’(箭头), ‘none’，
|
||||
top: option.legend?.top || null, // 标注里图表的距离
|
||||
bottom: option.legend?.bottom || null, // bottom:"20%" // 组件离容器的距离
|
||||
right: option.legend?.right || null, //left:"10%" // // 组件离容器的距离
|
||||
left: option.legend?.left || "center", //left:"10%" // // 组件离容器的距离
|
||||
width: option.legend?.width || "auto", // 图例组件的宽度
|
||||
height: option.legend?.height || "auto", // 图例组件的高度
|
||||
orient: option.legend?.orient || "horizontal", // 图例列表的布局朝向。 'horizontal' 水平 'vertical'垂直
|
||||
align: "auto", // 图例标记和文本的对齐
|
||||
textStyle: option.legend?.textStyle || {
|
||||
color: "#999",
|
||||
fontSize: 12
|
||||
},
|
||||
},
|
||||
grid,
|
||||
xAxis: {
|
||||
type: option.xAxis?.type || "category", // 设置x柱表示类目柱还是 value柱
|
||||
data: option.xAxis?.data || null,
|
||||
axisLabel: option.xAxis?.axisLabel || {},
|
||||
// { // 设置字体倾斜
|
||||
// interval:0,
|
||||
// rotate:-30 //倾斜的程度
|
||||
// }
|
||||
boundaryGap: option.xAxis?.boundaryGap || true
|
||||
},
|
||||
yAxis: {
|
||||
type: option.yAxis?.type || "value",
|
||||
data: option.yAxis?.data || null,
|
||||
axisLabel: option.yAxis?.axisLabel || {
|
||||
// 设置字体倾斜
|
||||
// interval:0,
|
||||
// rotate:-30 //倾斜的程度
|
||||
}
|
||||
},
|
||||
series
|
||||
}
|
||||
}
|
||||
// 折线
|
||||
export function lineOption(option) {
|
||||
const grid = Object.assign({}, {left:'3%',right: '3%', bottom:'3%', containLabel: true }, option?.grid)
|
||||
const tooltip = Object.assign({}, {
|
||||
trigger: "axis", // 设置鼠标滑动到柱上显示柱上的所有的,可选值: axis item none
|
||||
axisPointer: { // 设置鼠标滑动上去的效果是
|
||||
type: "shadow" // 有阴影 可选值：line shadow none cross（十字准星指示器）
|
||||
}
|
||||
}, option?.tooltip)
|
||||
|
||||
const series = option.series.map(item => {
|
||||
const obj = {
|
||||
name: item.name,
|
||||
type: item?.type || "line",
|
||||
stack: item?.stack || null,
|
||||
smooth: item?.smooth || false,
|
||||
lineAtyle: item?.lineAtyle || {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: item?.showSymbol || false,
|
||||
areaStyle: item?.areaStyle || null,
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: item.data
|
||||
}
|
||||
return obj
|
||||
})
|
||||
return {
|
||||
color: option?.color || ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074','#546570', '#c4ccd3'],
|
||||
tooltip,
|
||||
// 标注
|
||||
legend: {
|
||||
icon: option.legend?.icon || "circle", // ’circle’(圆形), ‘rect’(长方形), ‘roundRect’(带圆角长方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(也是圆形), ‘arrow’(箭头), ‘none’，
|
||||
top: option.legend?.top || null, // 标注里图表的距离
|
||||
bottom: option.legend?.bottom || null, // bottom:"20%" // 组件离容器的距离
|
||||
right: option.legend?.right || null, //left:"10%" // // 组件离容器的距离
|
||||
left: option.legend?.left || "center", //left:"10%" // // 组件离容器的距离
|
||||
width: option.legend?.width || "auto", // 图例组件的宽度
|
||||
height: option.legend?.height || "auto", // 图例组件的高度
|
||||
orient: option.legend?.orient || "horizontal", // 图例列表的布局朝向。 'horizontal' 水平 'vertical'垂直
|
||||
align: "auto", // 图例标记和文本的对齐
|
||||
textStyle: option.legend?.textStyle || {
|
||||
color: "#999",
|
||||
fontSize: 12
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
// 是否显示下载
|
||||
// feature:{
|
||||
// saveAsImage:{}
|
||||
// }
|
||||
},
|
||||
grid,
|
||||
xAxis: {
|
||||
type: option.xAxis?.type || "category", // 设置x柱表示类目柱还是 value柱
|
||||
data: option.xAxis?.data || null,
|
||||
axisLabel: option.xAxis?.axisLabel || {},
|
||||
// { // 设置字体倾斜
|
||||
// interval:0,
|
||||
// rotate:-30 //倾斜的程度
|
||||
// }
|
||||
boundaryGap: option.xAxis?.boundaryGap || true
|
||||
},
|
||||
yAxis: {
|
||||
type: option.yAxis?.type || "value",
|
||||
data: option.yAxis?.data || null,
|
||||
axisLabel: option.yAxis?.axisLabel || {
|
||||
// 设置字体倾斜
|
||||
// interval:0,
|
||||
// rotate:-30 //倾斜的程度
|
||||
}
|
||||
},
|
||||
series: series
|
||||
}
|
||||
}
|
||||
69
src/components/Echarts_view/index.vue
Normal file
69
src/components/Echarts_view/index.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2023-06-28 09:51:38
|
||||
* @LastEditTime: 2023-06-29 10:46:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath:
|
||||
-->
|
||||
<template>
|
||||
<div class="ecahrtsBox">
|
||||
<div class="title font16" v-if="props.config.title">{{props.config.title}}</div>
|
||||
<div class="account" :style="`height:${config.echartHeight?config.echartHeight:280}px`">
|
||||
<div ref="echarBox"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import * as echartsConfiger from "./defaultConfiger"
|
||||
import { ref, onMounted, defineProps, watch, watchEffect } from "vue";
|
||||
const props= defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
title: '',
|
||||
ecahrtType: '', //报表类型
|
||||
echartHeight: 280, // 报表高度
|
||||
option:{}
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
let option= {}
|
||||
|
||||
//echarts容器
|
||||
const echarBox = ref(null);
|
||||
//初始化
|
||||
function upEchares() {
|
||||
echarts.init(echarBox.value).setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
upEchares();
|
||||
});
|
||||
|
||||
watchEffect(()=>{
|
||||
if(props.config.ecahrtType){
|
||||
option = echartsConfiger[props.config.ecahrtType + 'Option'](props.config.option)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ecahrtsBox {
|
||||
.title{
|
||||
margin: 5px 5px 20px 5px;
|
||||
}
|
||||
.account{
|
||||
width: 100%;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
91
src/components/From/Email/index.vue
Normal file
91
src/components/From/Email/index.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-form ref="formRef" :model="groupData" :rules="rules">
|
||||
<el-form-item
|
||||
:label-width="LABEL_WIDTH"
|
||||
prop="modelValue"
|
||||
label="邮箱"
|
||||
>
|
||||
<el-input
|
||||
v-bind="$attrs"
|
||||
v-model="groupData.modelValue"
|
||||
@input="onInput()"
|
||||
@blur="validate()"
|
||||
max="11"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { LABEL_WIDTH } from '@/constant';
|
||||
import { ref, defineProps, defineEmits, defineExpose } from 'vue'
|
||||
const formRef = ref(null);
|
||||
const props = defineProps({
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// import { validateIdentity } from './rules'
|
||||
const groupData = ref({
|
||||
modelValue: ''
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const onInput = (e) => {
|
||||
emits('update:modelValue', groupData.value.modelValue)
|
||||
}
|
||||
const isBX = ref(false)
|
||||
|
||||
const validateIdentity = () => {
|
||||
return (rule, value, callback) => {
|
||||
const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
|
||||
if (!value) {
|
||||
} else {
|
||||
if (!reg.test(value)) {
|
||||
return callback(new Error('请输入正确的邮箱地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 验证规则
|
||||
const rules = ref({
|
||||
modelValue: [
|
||||
{
|
||||
required: props.isRequired,
|
||||
message: '请输入邮箱',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
trigger: 'blur',
|
||||
validator: validateIdentity()
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 校验是否 符合规则 。 把当前组件名通过 emits分发出去
|
||||
const validate = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
emits('validateStatus', { 'Email': true })
|
||||
} else {
|
||||
emits('validateStatus', { 'Email': false })
|
||||
}
|
||||
})
|
||||
if (!props.isRequired && groupData.value.modelValue.length === 0) {
|
||||
emits('validateStatus', { 'Email': true })
|
||||
}
|
||||
}
|
||||
|
||||
const childMethod = () => {
|
||||
groupData.value.modelValue = ""
|
||||
}
|
||||
// 主动暴露childMethod方法
|
||||
defineExpose({ childMethod })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
69
src/components/From/IdentityCard/index.vue
Normal file
69
src/components/From/IdentityCard/index.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<el-form ref="formRef" :model="groupData" :rules="rules">
|
||||
<el-form-item :label-width="props.label ? LABEL_WIDTH : ''" prop="modelValue" :label="props.label ? '身份证号' : ''"
|
||||
style=" margin-bottom: 14px;">
|
||||
<el-input v-bind="$attrs" v-model="groupData.modelValue" @input="onInput()" @blur="validate()"
|
||||
style="width: 100%;"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { LABEL_WIDTH } from "@/constant";
|
||||
import { ref, defineProps, defineEmits, defineExpose } from "vue";
|
||||
import { validateIdentity } from "./rules";
|
||||
const props = defineProps({
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
const groupData = ref({
|
||||
modelValue: ""
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const emits = defineEmits(["videoListShowFn"]);
|
||||
const onInput = (e) => {
|
||||
emits("update:modelValue", groupData.value.modelValue);
|
||||
};
|
||||
// 验证规则
|
||||
const rules = ref({
|
||||
modelValue: [
|
||||
{
|
||||
required: props.isRequired,
|
||||
message: "请输入身份证",
|
||||
trigger: "blur"
|
||||
},
|
||||
{
|
||||
trigger: "change",
|
||||
validator: validateIdentity()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 校验是否 符合规则 。 把当前组件名通过 emits分发出去
|
||||
const validate = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
emits("validateStatus", { IdentityCard: true });
|
||||
} else {
|
||||
emits("validateStatus", { IdentityCard: false });
|
||||
}
|
||||
});
|
||||
if (!props.isRequired && groupData.value.modelValue.length === 0) {
|
||||
emits("validateStatus", { IdentityCard: true });
|
||||
}
|
||||
};
|
||||
|
||||
const childMethod = () => {
|
||||
groupData.value.modelValue = "";
|
||||
};
|
||||
// 主动暴露childMethod方法
|
||||
defineExpose({ childMethod });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
79
src/components/From/IdentityCard/rules.js
Normal file
79
src/components/From/IdentityCard/rules.js
Normal file
@ -0,0 +1,79 @@
|
||||
export const validateIdentity = () => {
|
||||
return (rule, value, callback) => {
|
||||
if (!value) {
|
||||
// return callback(new Error('身份证号不能为空'));
|
||||
} else if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
|
||||
callback(new Error('输入的身份证长度或格式错误'));
|
||||
}
|
||||
|
||||
//身份证城市
|
||||
var aCity = {
|
||||
11: '北京',
|
||||
12: '天津',
|
||||
13: '河北',
|
||||
14: '山西',
|
||||
15: '内蒙古',
|
||||
21: '辽宁',
|
||||
22: '吉林',
|
||||
23: '黑龙江',
|
||||
31: '上海',
|
||||
32: '江苏',
|
||||
33: '浙江',
|
||||
34: '安徽',
|
||||
35: '福建',
|
||||
36: '江西',
|
||||
37: '山东',
|
||||
41: '河南',
|
||||
42: '湖北',
|
||||
43: '湖南',
|
||||
44: '广东',
|
||||
45: '广西',
|
||||
46: '海南',
|
||||
50: '重庆',
|
||||
51: '四川',
|
||||
52: '贵州',
|
||||
53: '云南',
|
||||
54: '西藏',
|
||||
61: '陕西',
|
||||
62: '甘肃',
|
||||
63: '青海',
|
||||
64: '宁夏',
|
||||
65: '新疆',
|
||||
71: '台湾',
|
||||
81: '香港',
|
||||
82: '澳门',
|
||||
91: '国外'
|
||||
};
|
||||
if (!aCity[parseInt(value.substr(0, 2))]) {
|
||||
callback(new Error('身份证地区非法'));
|
||||
}
|
||||
// 出生日期验证
|
||||
var sBirthday = (
|
||||
value.substr(6, 4) +
|
||||
'-' +
|
||||
Number(value.substr(10, 2)) +
|
||||
'-' +
|
||||
Number(value.substr(12, 2))
|
||||
).replace(/-/g, '/'),
|
||||
d = new Date(sBirthday);
|
||||
if (
|
||||
sBirthday !==
|
||||
d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()
|
||||
) {
|
||||
callback(new Error('身份证上的出生日期非法'));
|
||||
}
|
||||
|
||||
// 身份证号码校验
|
||||
var sum = 0,
|
||||
weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
|
||||
codes = '10X98765432';
|
||||
for (var i = 0; i < value.length - 1; i++) {
|
||||
sum += value[i] * weights[i];
|
||||
}
|
||||
var last = codes[sum % 11]; //计算出来的最后一位身份证号码
|
||||
if (value[value.length - 1] !== last) {
|
||||
callback(new Error('输入的身份证号非法'));
|
||||
}
|
||||
callback();
|
||||
};
|
||||
};
|
||||
99
src/components/From/Phone/index.vue
Normal file
99
src/components/From/Phone/index.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<el-form ref="formRef" :model="groupData" :rules="rules">
|
||||
<el-form-item :label-width="LABEL_WIDTH" prop="modelValue" label="手机号">
|
||||
<el-input v-bind="$attrs" v-model="groupData.modelValue" @input="onInput()" @blur="validate()" max="11">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { LABEL_WIDTH } from '@/constant';
|
||||
import { ref, defineProps, defineEmits, defineExpose } from 'vue'
|
||||
const formRef = ref(null);
|
||||
const props = defineProps({
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const isOk = ref()
|
||||
|
||||
// import { validateIdentity } from './rules'
|
||||
const groupData = ref({
|
||||
modelValue: ''
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const onInput = (e) => {
|
||||
emits('update:modelValue', groupData.value.modelValue)
|
||||
}
|
||||
const isBX = ref(false)
|
||||
|
||||
const validateIdentity = () => {
|
||||
return (rule, value, callback) => {
|
||||
if (!value) {
|
||||
} else {
|
||||
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
|
||||
if (reg.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
return callback(new Error('请输入正确的手机号'));
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 验证规则
|
||||
const rules = ref({
|
||||
modelValue: [
|
||||
{
|
||||
required: props.isRequired,
|
||||
message: '请输入手机号',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 11,
|
||||
message: '手机号格式不正确',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
trigger: 'blur',
|
||||
validator: validateIdentity()
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 校验是否 符合规则 。 把当前组件名通过 emits分发出去
|
||||
const validate = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
emits('validateStatus', { Phone: true })
|
||||
isOk.value = true
|
||||
} else {
|
||||
emits('validateStatus', { Phone: false })
|
||||
isOk.value = false
|
||||
}
|
||||
})
|
||||
if (!props.isRequired && groupData.value.modelValue.length === 0) {
|
||||
emits('validateStatus', { Phone: true })
|
||||
isOk.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const childMethod = () => {
|
||||
groupData.value.modelValue = ""
|
||||
}
|
||||
// 主动暴露childMethod方法
|
||||
defineExpose({ childMethod })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.is-success {
|
||||
.el-form-item__content .el-input {
|
||||
.el-input__inner {
|
||||
// background-color: var(--el-color-primary-light-7); 不定义背景色
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
src/components/Hamburger/index.vue
Normal file
43
src/components/Hamburger/index.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<!-- 折叠菜单组件 -->
|
||||
<template>
|
||||
<div class="hamburger-container" @click="toggleClick">
|
||||
<SvgIcon id="guide-hamburger" class="hamburger" :icon="icon" color="#333"></SvgIcon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed, getCurrentInstance, ref
|
||||
} from "vue";
|
||||
import {
|
||||
useStore
|
||||
} from "vuex";
|
||||
const { proxy } = getCurrentInstance()
|
||||
const keyIndex = ref(1);
|
||||
const store = useStore();
|
||||
|
||||
const toggleClick = () => {
|
||||
store.commit("app/triggerSidebarOpened");
|
||||
proxy.mittBus.emit('mittFn', keyIndex.value++)
|
||||
// store.commit('system/setWidth')
|
||||
};
|
||||
|
||||
const icon = computed(() =>
|
||||
store.getters.sidebarOpened ? "hamburger-opened" : "hamburger-closed"
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hamburger-container {
|
||||
padding: 0 8px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
src/components/Map/BMapGlUtils.js
Normal file
187
src/components/Map/BMapGlUtils.js
Normal file
@ -0,0 +1,187 @@
|
||||
import { getImgUrl } from "@/utils/tools.js"
|
||||
class MapUtils {
|
||||
constructor(props) {
|
||||
this.mapGL = props
|
||||
}
|
||||
/**
|
||||
* 添加点标记 或者 标记+弹窗（默认）
|
||||
* @param {*} lng 经度
|
||||
* @param {*} lat 维度
|
||||
* @param {*} val 展示内容
|
||||
*/
|
||||
showMarker(lng, lat, icon, val) {
|
||||
const that = this
|
||||
let myIcon
|
||||
//如果没有自定义图标显示默认图标
|
||||
if (icon) myIcon = new BMapGL.Icon(icon, new BMapGL.Size(52, 62))
|
||||
//创建图标
|
||||
const point = new BMapGL.Point(lng, lat)
|
||||
let marker
|
||||
if (myIcon) {
|
||||
marker = new BMapGL.Marker(point, { icon: myIcon })
|
||||
} else {
|
||||
marker = new BMapGL.Marker(point)
|
||||
}
|
||||
this.mapGL.addOverlay(marker)
|
||||
// 将标注添加到地图
|
||||
this.mapGL.addOverlay(marker)
|
||||
if (!val) return false
|
||||
let html = this.getModel() //模拟的弹窗内容
|
||||
const infoWindow = new BMapGL.InfoWindow(html.content, html.opts) // 创建信息窗口对象
|
||||
marker.addEventListener("click", function () {
|
||||
that.mapGL.openInfoWindow(infoWindow, point) //开启信息窗口
|
||||
})
|
||||
}
|
||||
/** */
|
||||
/**
|
||||
* 清除全部覆盖物
|
||||
*/
|
||||
removeOverlay() {
|
||||
this.mapGL.clearOverlays()
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置中心点位置以及层级
|
||||
* @param {*} lng 经度 116.404
|
||||
* @param {*} lat 维度 39.925
|
||||
* @param {*} lev 地图层级 15
|
||||
*/
|
||||
setCenterLevel(lng, lat, lev) {
|
||||
const point = new BMapGL.Point(lng, lat)
|
||||
return this.mapGL.centerAndZoom(point, lev)
|
||||
}
|
||||
/**
|
||||
* 获取坐标点
|
||||
* @returns
|
||||
*/
|
||||
getPoint(fun) {
|
||||
this.mapGL.addEventListener("click", function (e) {
|
||||
fun(e.latlng)
|
||||
})
|
||||
}
|
||||
|
||||
//撒点弹窗模板
|
||||
getModel(item) {
|
||||
let data = {}
|
||||
data.opts = {
|
||||
width: 200, // 信息窗口宽度
|
||||
height: 100, // 信息窗口高度
|
||||
title: "故宫博物院", // 信息窗口标题
|
||||
message: "这里是故宫"
|
||||
}
|
||||
// 创建图文信息窗口
|
||||
data.content = `
|
||||
<h4 style='margin:0 0 5px 0;'>天安门</h4>
|
||||
<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
|
||||
天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...
|
||||
</p>`
|
||||
return data
|
||||
}
|
||||
/**
|
||||
*某省某市行政区划
|
||||
* @param {*} cityJosn 城市数据 一般为省份数据
|
||||
* @param {*} colors 需要设置填充颜色的 城市数据 ["match",["get", "name"],"海淀区","#ce4848","朝阳区", "blue","通州区","blue","丰台区", "#6704ff","orange"]
|
||||
* @param {*} selectedColor 鼠标选中或者悬停的颜色
|
||||
* @param {*} strokeColor 区域边框颜色
|
||||
*/
|
||||
drawRegion({ cityJosn, colors, selectedColor, strokeColor }) {
|
||||
let fillLayer
|
||||
const that = this
|
||||
fillLayer = new BMapGL.FillLayer({
|
||||
crs: "GCJ02",
|
||||
enablePicked: true,
|
||||
autoSelect: true,
|
||||
pickWidth: 30,
|
||||
pickHeight: 30,
|
||||
selectedColor, // 悬浮选中项颜色
|
||||
border: true,
|
||||
style: {
|
||||
fillColor: ["case", ["boolean", ["feature-state", "picked"], false], "red", colors],
|
||||
fillOpacity: 0.3,
|
||||
strokeWeight: 1,
|
||||
strokeColor
|
||||
}
|
||||
})
|
||||
fillLayer.addEventListener("click", function (e) {
|
||||
if (e.value.dataIndex !== -1 && e.value.dataItem) {
|
||||
that.areaTotalModel(e.value.dataItem.properties)
|
||||
}
|
||||
})
|
||||
// fillLayer.addEventListener("mousemove", function (e) {
|
||||
// if (e.value.dataIndex !== -1 && e.value.dataItem) {
|
||||
// that.areaTotalModel(e.value.dataItem.properties);
|
||||
// }
|
||||
// });
|
||||
this.mapGL.addNormalLayer(fillLayer)
|
||||
fillLayer.setData(cityJosn)
|
||||
}
|
||||
//区域统计弹窗模板
|
||||
areaTotalModel(item) {
|
||||
this.mapGL.closeInfoWindow()
|
||||
let data = {}
|
||||
data.opts = {
|
||||
width: 200, // 信息窗口宽度
|
||||
height: 100, // 信息窗口高度
|
||||
title: item.name, // 信息窗口标题
|
||||
message: ""
|
||||
}
|
||||
// 创建图文信息窗口
|
||||
data.content = `
|
||||
<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
|
||||
风险1:1258
|
||||
</p>
|
||||
<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
|
||||
风险2:1258
|
||||
</p>
|
||||
<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
|
||||
风险3:1258
|
||||
</p>`
|
||||
const infoWindow = new BMapGL.InfoWindow(data.content, data.opts) // 创建信息窗口对象
|
||||
const point = new BMapGL.Point(item.center[0], item.center[1])
|
||||
this.mapGL.openInfoWindow(infoWindow, point) //开启信息窗口
|
||||
}
|
||||
/**
|
||||
* 绘制轨迹数据
|
||||
* @param {*} data 坐标数据
|
||||
* @param {*} startIcon 起点图标
|
||||
* @param {*} endIcon 终点图标
|
||||
*/
|
||||
drawRoutePlanning(data, startIcon, endIcon) {
|
||||
const icon = getImgUrl("map/Icon_road_green_arrow.png")
|
||||
let lineLayer
|
||||
lineLayer = new BMapGL.LineLayer({
|
||||
enablePicked: true,
|
||||
autoSelect: true,
|
||||
pickWidth: 30,
|
||||
pickHeight: 30,
|
||||
opacity: 1,
|
||||
selectedColor: "blue", // 选中项颜色
|
||||
style: {
|
||||
marginLength: 8, // 间隔距离，默认16，单位像素
|
||||
borderColor: "#999",
|
||||
borderWeight: 0, // 描边宽度，可以设置负值
|
||||
strokeWeight: 10, // 描边线宽度，默认0
|
||||
strokeLineJoin: "miter", //描边线连接处类型, 可选'miter', 'round', 'bevel'
|
||||
strokeLineCap: "square", // 描边线端头类型，可选'round', 'butt', 'square'，默认round
|
||||
// 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
|
||||
strokeTextureUrl: icon,
|
||||
strokeTextureWidth: 16,
|
||||
strokeTextureHeight: 64
|
||||
}
|
||||
})
|
||||
//加载初始点位
|
||||
const pointArr = data.features[0].geometry.coordinates
|
||||
const start = pointArr[0]
|
||||
const end = pointArr[pointArr.length - 1]
|
||||
this.showMarker(start[0], start[1], startIcon)
|
||||
this.showMarker(end[0], end[1], endIcon)
|
||||
//点击时间
|
||||
lineLayer.addEventListener("click", function (e) {
|
||||
if (e.value.dataIndex !== -1 && e.value.dataItem) {
|
||||
}
|
||||
})
|
||||
lineLayer.setData(data)
|
||||
this.mapGL.addNormalLayer(lineLayer)
|
||||
}
|
||||
}
|
||||
export default MapUtils
|
||||
297
src/components/Map/BMapUtils.js
Normal file
297
src/components/Map/BMapUtils.js
Normal file
@ -0,0 +1,297 @@
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getImgUrl } from "@/utils/tools.js"
|
||||
class MapUtils {
|
||||
constructor(props) {
|
||||
this.map = props;
|
||||
}
|
||||
allAreaList = []; //所有行政区域的点位实例化数据
|
||||
allAreaLabelList = []; //所有行政区域的弹窗实例化数据
|
||||
countyAllAreaList = []; //所有县级行政区域的点位实例化数据
|
||||
countyAllAreaLabelList = []; //所有县级行政区域的弹窗实例化数据
|
||||
/**
|
||||
* 添加点标记 或者 标记+弹窗（默认）
|
||||
* @param {*} lng 经度
|
||||
* @param {*} lat 维度
|
||||
* @param {*} icon 自定义标记图片
|
||||
* @param {*} isShowModel 是否点击展示模板
|
||||
* @param {*} html 模板内容
|
||||
*/
|
||||
showMarker(lng, lat, isShowModel, html, icon) {
|
||||
const that = this;
|
||||
let myIcon;
|
||||
//如果没有自定义图标显示默认图标
|
||||
if (icon) myIcon = new BMap.Icon(icon, new BMap.Size(52, 62));
|
||||
//创建图标
|
||||
const point = new BMap.Point(lng, lat);
|
||||
let marker;
|
||||
if (myIcon) {
|
||||
marker = new BMap.Marker(point, { icon: myIcon });
|
||||
} else {
|
||||
marker = new BMap.Marker(point);
|
||||
}
|
||||
this.map.addOverlay(marker);
|
||||
if (isShowModel) {
|
||||
// const infoWindow = new BMap.InfoWindow(html.content, html.opts); // 创建信息窗口对象
|
||||
marker.addEventListener("click", function () {
|
||||
// that.map.openInfoWindow(infoWindow, point); //开启信息窗口
|
||||
that.countyAllAreaLabelList.forEach((item) => {
|
||||
that.map.removeOverlay(item);
|
||||
});
|
||||
that.countyAreaTotalModel(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
/** */
|
||||
/**
|
||||
* 清除全部覆盖物
|
||||
*/
|
||||
removeOverlay() {
|
||||
this.map.clearOverlays();
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置中心点位置以及层级
|
||||
* @param {*} lng 经度 116.404
|
||||
* @param {*} lat 维度 39.925
|
||||
* @param {*} lev 地图层级 15
|
||||
*/
|
||||
setCenterLevel(lng, lat, lev) {
|
||||
const point = new BMap.Point(lng, lat);
|
||||
return this.map.centerAndZoom(point, lev);
|
||||
}
|
||||
/**
|
||||
* 获取坐标点
|
||||
* @returns
|
||||
*/
|
||||
getPoint(fun) {
|
||||
this.map.addEventListener("click", function (e) {
|
||||
fun(e);
|
||||
});
|
||||
}
|
||||
|
||||
//撒点弹窗模板 暂时不用这个方法
|
||||
getModel(obj) {
|
||||
const that = this;
|
||||
const { point, orgObj, yhs, fxs, dcl } = obj;
|
||||
const p = new BMap.Point(point[0], point[1]);
|
||||
const marker = new BMap.Marker(p);
|
||||
let data = {};
|
||||
data.opts = {
|
||||
width: 200, // 信息窗口宽度
|
||||
height: 100, // 信息窗口高度
|
||||
title: orgObj.name // 信息窗口标题
|
||||
};
|
||||
// 创建图文信息窗口
|
||||
data.content = `
|
||||
<div>
|
||||
<p>隐患数：${yhs}</p>
|
||||
<p>隐患数：${fxs}</p>
|
||||
<p>待处理隐患：${dcl}</p>
|
||||
</div>
|
||||
`;
|
||||
that.map.addOverlay(marker);
|
||||
const infoWindow = new BMap.InfoWindow(data.content, data.opts); // 创建信息窗口对象
|
||||
that.map.openInfoWindow(infoWindow, p); //开启信息窗口
|
||||
}
|
||||
/**
|
||||
* 绘制行政区划轮廓
|
||||
* @param {*} areaCoords 行政区域数据
|
||||
* @param {*} colors 颜色
|
||||
* @param {*} name 行政区域名称
|
||||
* @param {*} point 中心点位
|
||||
* @param {*} icon 自定义标记图片
|
||||
*/
|
||||
drawPolygon(areaCoords, colors) {
|
||||
var pointArray = [];
|
||||
var ply = new BMap.Polygon(areaCoords, {
|
||||
fillColor: colors,
|
||||
fillOpacity: 0.3,
|
||||
strokeWeight: 2,
|
||||
strokeColor: "#ce4848",
|
||||
fillOpacity: 0.3,
|
||||
selectedColor: "green",
|
||||
enableClicking: true,
|
||||
enableMassClear: false
|
||||
});
|
||||
this.map.addOverlay(ply);
|
||||
pointArray = pointArray.concat(ply.getPath());
|
||||
// this.map.setViewport(pointArray); //调整视野
|
||||
}
|
||||
/**
|
||||
* 添加点位标题 暂时不用这个方法
|
||||
* @param {*} name 名称
|
||||
* @param {*} poin 点位
|
||||
* @param {*} icon 自定义标记图片
|
||||
*/
|
||||
addlabel(name, poin, icon) {
|
||||
var lng = poin[0];
|
||||
var lat = poin[1];
|
||||
var point = new BMap.Point(lng, lat);
|
||||
var pointArray = [point];
|
||||
var optsArray = [{}];
|
||||
var labelArray = [];
|
||||
var contentArray = [name];
|
||||
var myIcon = new BMap.Icon(icon, new BMap.Size(30, 50));
|
||||
if (icon) {
|
||||
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
|
||||
} else {
|
||||
var marker = new BMap.Marker(point);
|
||||
}
|
||||
for (var i = 0; i < pointArray.length; i++) {
|
||||
optsArray[i].position = pointArray[i];
|
||||
optsArray[i].offset = new BMap.Size(-20, -55);
|
||||
labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]);
|
||||
labelArray[i].setStyle({
|
||||
color: "#001238",
|
||||
fontSize: "12px",
|
||||
linehight: "22px",
|
||||
height: "22px",
|
||||
fontFamily: "微软雅黑"
|
||||
});
|
||||
|
||||
this.map.addOverlay(labelArray[i]);
|
||||
}
|
||||
this.map.addOverlay(marker);
|
||||
//信息窗口
|
||||
this.map.centerAndZoom(point, 8);
|
||||
var opts = {
|
||||
width: 50, // 信息窗口宽度
|
||||
height: 30, // 信息窗口高度
|
||||
title: name, // 信息窗口标题
|
||||
// enableMessage:true,//设置允许信息窗发送短息
|
||||
message: ""
|
||||
};
|
||||
var infoWindow = new BMap.InfoWindow("风险1:1258,隐患：123", opts); // 创建信息窗口对象
|
||||
marker.addEventListener("click", function () {
|
||||
this.map.openInfoWindow(infoWindow, point); //开启信息窗口
|
||||
});
|
||||
}
|
||||
//市级区域统计弹窗模板
|
||||
areaTotalModel(obj) {
|
||||
const that = this;
|
||||
//删除县级点位
|
||||
that.countyAllAreaList.forEach((item) => {
|
||||
that.map.removeOverlay(item);
|
||||
});
|
||||
that.countyAllAreaLabelList.forEach((item) => {
|
||||
that.map.removeOverlay(item);
|
||||
});
|
||||
//设置市级数据
|
||||
const { point, orgObj, bgColor, icon } = obj;
|
||||
const p = new BMap.Point(point[0], point[1]);
|
||||
var newicon = "";
|
||||
if (icon) {
|
||||
newicon = new BMap.Icon(icon, new BMap.Size(30, 50));
|
||||
}
|
||||
const marker = new BMap.Marker(p, { icon: newicon });
|
||||
const content = `<div class="fx_yh_model">${orgObj.name}</br>隐患数：${orgObj.yhsl}</br>风险数：${orgObj.fxsl}</br>待处理隐患:${orgObj.dclsl}</div>`;
|
||||
let label = new BMap.Label(content, {
|
||||
// 创建文本标注
|
||||
position: p, // 设置标注的地理位置
|
||||
offset: new BMap.Size(-55, -122) // 设置标注的偏移量
|
||||
});
|
||||
label.setStyle({
|
||||
// 设置label的样式
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
background: bgColor
|
||||
});
|
||||
label.setZIndex(100);
|
||||
that.map.addOverlay(label);
|
||||
that.map.addOverlay(marker);
|
||||
that.allAreaList.push(marker);
|
||||
that.allAreaLabelList.push(label);
|
||||
marker.addEventListener("click", function (e) {
|
||||
emitter.emit("clickAreaPoint", orgObj);
|
||||
that.setCenterLevel(orgObj.centroid[0], orgObj.centroid[1], 9);
|
||||
that.allAreaList.forEach((item) => {
|
||||
that.map.removeOverlay(item);
|
||||
});
|
||||
that.allAreaLabelList.forEach((item) => {
|
||||
that.map.removeOverlay(item);
|
||||
});
|
||||
});
|
||||
}
|
||||
//县级区域统计弹窗模板
|
||||
countyAreaTotalModel(obj) {
|
||||
const { point, orgObj, bgColor, icon } = obj;
|
||||
const that = this;
|
||||
const p = new BMap.Point(point[0], point[1]);
|
||||
var newicon = "";
|
||||
if (icon) {
|
||||
newicon = new BMap.Icon(icon, new BMap.Size(30, 50));
|
||||
}
|
||||
const marker = new BMap.Marker(p, { icon: newicon });
|
||||
|
||||
that.map.addOverlay(marker);
|
||||
that.countyAllAreaList.push(marker);
|
||||
//点击后只创建一个弹窗
|
||||
marker.addEventListener("click", function () {
|
||||
if (that.countyAllAreaLabelList.length > 0) {
|
||||
that.countyAllAreaLabelList.forEach((item) => {
|
||||
that.map.removeOverlay(item);
|
||||
});
|
||||
}
|
||||
// that.map.removeOverlay(item);
|
||||
const content = `<div class="fx_yh_model">${orgObj.placename}</br>隐患数：${orgObj.yhsl}</br>风险数：${orgObj.fxsl}</br>待处理隐患:${0}</div>`;
|
||||
let label = new BMap.Label(content, {
|
||||
// 创建文本标注
|
||||
position: p, // 设置标注的地理位置
|
||||
offset: new BMap.Size(-55, -122) // 设置标注的偏移量
|
||||
});
|
||||
label.setStyle({
|
||||
// 设置label的样式
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
background: bgColor
|
||||
});
|
||||
label.setZIndex(100);
|
||||
that.map.addOverlay(label);
|
||||
that.countyAllAreaLabelList = [label];
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 绘制轨迹数据
|
||||
* @param {*} data 坐标数据
|
||||
* @param {*} startIcon 起点图标
|
||||
* @param {*} endIcon 终点图标
|
||||
*/
|
||||
drawRoutePlanning(data, startIcon, endIcon) {
|
||||
const icon = getImgUrl("map/Icon_road_green_arrow.png")
|
||||
let lineLayer;
|
||||
lineLayer = new BMap.LineLayer({
|
||||
enablePicked: true,
|
||||
autoSelect: true,
|
||||
pickWidth: 30,
|
||||
pickHeight: 30,
|
||||
opacity: 1,
|
||||
selectedColor: "blue", // 选中项颜色
|
||||
style: {
|
||||
marginLength: 8, // 间隔距离，默认16，单位像素
|
||||
borderColor: "#999",
|
||||
borderWeight: 0, // 描边宽度，可以设置负值
|
||||
strokeWeight: 10, // 描边线宽度，默认0
|
||||
strokeLineJoin: "miter", //描边线连接处类型, 可选'miter', 'round', 'bevel'
|
||||
strokeLineCap: "square", // 描边线端头类型，可选'round', 'butt', 'square'，默认round
|
||||
// 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
|
||||
strokeTextureUrl: icon,
|
||||
strokeTextureWidth: 16,
|
||||
strokeTextureHeight: 64
|
||||
}
|
||||
});
|
||||
//加载初始点位
|
||||
const pointArr = data.features[0].geometry.coordinates;
|
||||
const start = pointArr[0];
|
||||
const end = pointArr[pointArr.length - 1];
|
||||
// this.showMarker(start[0], start[1], startIcon);
|
||||
// this.showMarker(end[0], end[1], endIcon);
|
||||
//点击时间
|
||||
lineLayer.addEventListener("click", function (e) {
|
||||
if (e.value.dataIndex !== -1 && e.value.dataItem) {
|
||||
}
|
||||
});
|
||||
lineLayer.setData(data);
|
||||
this.map.addNormalLayer(lineLayer);
|
||||
}
|
||||
}
|
||||
export default MapUtils;
|
||||
5859
src/components/Map/cityJSON/gz.json
Normal file
5859
src/components/Map/cityJSON/gz.json
Normal file
File diff suppressed because it is too large
Load Diff
43
src/components/Map/cityJSON/line.json
Normal file
43
src/components/Map/cityJSON/line.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[
|
||||
105.68137944759518,
|
||||
28.82668507552891
|
||||
],
|
||||
[
|
||||
105.72682926605133,
|
||||
28.83692378731151
|
||||
],
|
||||
[
|
||||
105.80715917774124,
|
||||
28.85088402675648
|
||||
],
|
||||
[
|
||||
105.92131221014269,
|
||||
28.902985522574028
|
||||
],
|
||||
[
|
||||
106.01115487453274,
|
||||
28.957849593046888
|
||||
],
|
||||
[
|
||||
106.08619992361147,
|
||||
29.015471727921224
|
||||
],
|
||||
[
|
||||
106.17181469791257,
|
||||
29.099058996361496
|
||||
],
|
||||
[
|
||||
106.22360635150211,
|
||||
29.163096174368103
|
||||
]
|
||||
]
|
||||
}
|
||||
}]
|
||||
}
|
||||
144
src/components/Map/index.vue
Normal file
144
src/components/Map/index.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="map_container" id="map_container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getImgUrl } from "@/utils/tools.js"
|
||||
import MapUtil from "./BMapUtils.js";
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import cityJosn from "./cityJSON/gz.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
const map = ref(null);
|
||||
const MapUtils = ref(null);
|
||||
const isArea = ref(false);
|
||||
onMounted(() => {
|
||||
try {
|
||||
map.value = new BMap.Map("map_container"); // 创建Map实例
|
||||
MapUtils.value = new MapUtil(map.value); // 注入地图方法
|
||||
initMap(); // 地图初始化
|
||||
_setArea();
|
||||
_setAreaPintAndModel();
|
||||
//监听地图层级
|
||||
map.value.addEventListener("zoomend", function (e) {
|
||||
var ZoomNum = map.value.getZoom();
|
||||
//小于8级 显示省级数据
|
||||
if (ZoomNum < 8 && !isArea.value) {
|
||||
isArea.value = true;
|
||||
_setAreaPintAndModel();
|
||||
} else {
|
||||
isArea.value = false;
|
||||
}
|
||||
});
|
||||
// 初始化地图,设置中心点坐标和地图级别
|
||||
MapUtils.value.setCenterLevel(106.713478, 26.578343, 8);
|
||||
//显示场所点位
|
||||
emitter.on("showSitePoint", (val) => {
|
||||
val.forEach((item) => {
|
||||
MapUtils.value.countyAreaTotalModel({
|
||||
point: [item.jd, item.wd],
|
||||
orgObj: item,
|
||||
icon: getImgUrl('map/blue.png'),
|
||||
bgColor: "#2b836b"
|
||||
});
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showSitePoint");
|
||||
});
|
||||
//设置行政区域统计模板
|
||||
const _setAreaPintAndModel = () => {
|
||||
//获取市州统计数据(隐患、风险)
|
||||
getApi({}, "/mosty-jcgl/yhb/getPlaceCount").then((res) => {
|
||||
if (res && res.length > 0) {
|
||||
for (let j = 0; j < res.length; j++) {
|
||||
for (let i = 0; i < cityJosn.features.length; i++) {
|
||||
let item = cityJosn.features[i];
|
||||
if (res[j].cityCode == item.properties.adcode) {
|
||||
item.properties.fxsl = res[j].yzg; //风险数
|
||||
item.properties.yhsl = res[j].yhsum; //隐患数
|
||||
item.properties.dclsl = res[j].wzg //待处理
|
||||
//中心坐标
|
||||
let point = item.properties.centroid;
|
||||
MapUtils.value.areaTotalModel({
|
||||
point,
|
||||
icon: getImgUrl('map/blue.png'),
|
||||
orgObj: item.properties,
|
||||
bgColor: "#2b836b"
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
//绘制行政区域
|
||||
const _setArea = () => {
|
||||
let count = cityJosn.features.length;
|
||||
for (let i = 0; i < count; i++) {
|
||||
let name = cityJosn.features[i].properties.name;
|
||||
let color = "orange";
|
||||
// if (name == "贵阳市") {
|
||||
// color = "#ce4848";
|
||||
// } else if (name == "遵义市") {
|
||||
// color = "blue";
|
||||
// } else {
|
||||
// color = "orange";
|
||||
// }
|
||||
let coordinates = cityJosn.features[i].geometry.coordinates[0];
|
||||
let str = "";
|
||||
coordinates.forEach((item) => {
|
||||
str += item.join(";");
|
||||
});
|
||||
MapUtils.value.drawPolygon(str, color);
|
||||
//如果市毕节市 画出威宁自治县区域
|
||||
if (name == "毕节市") {
|
||||
let coords = "";
|
||||
let coordinates = cityJosn.features[i].geometry.coordinates[1];
|
||||
coordinates.forEach((item) => {
|
||||
coords += item.join(";");
|
||||
});
|
||||
MapUtils.value.drawPolygon(coords, color);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 初始化地图
|
||||
const initMap = () => {
|
||||
//开启鼠标滚轮缩放
|
||||
map.value.enableScrollWheelZoom(true);
|
||||
map.value.disableDoubleClickZoom();
|
||||
//2D 时打开
|
||||
map.value.addControl(
|
||||
new BMap.NavigationControl({
|
||||
offset: new BMap.Size(0, 200),
|
||||
enableGeolocation: true,
|
||||
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
|
||||
})
|
||||
);
|
||||
map.value.addControl(
|
||||
new BMap.MapTypeControl({
|
||||
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
|
||||
anchor: BMAP_ANCHOR_TOP_RIGHT,
|
||||
offset: new BMap.Size(150, -200)
|
||||
})
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#map_container {
|
||||
height: 98vh;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
::v-deep .BMapLabel {
|
||||
// background:none !important;
|
||||
border: 1px solid #000 !important;
|
||||
border-radius: 5px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
</style>
|
||||
161
src/components/Map/placemap.vue
Normal file
161
src/components/Map/placemap.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bigBox">
|
||||
<div class="titleBox">
|
||||
<div class="title">地图描点</div>
|
||||
<div class="btnBox">
|
||||
<el-button style="margin-left: 10px" type="primary" :loading="loading" @click="searchHander">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>保存</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="CloseEvent">
|
||||
<el-icon>
|
||||
<Back />
|
||||
</el-icon>
|
||||
<span>返回</span>
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="map_container" id="map_container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getImgUrl } from "@/utils/tools.js"
|
||||
import MapUtil from "./BMapUtils.js";
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import cityJosn from "./cityJSON/gz.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const emits = defineEmits(["close", "point"]);
|
||||
const lngs = ref(null)
|
||||
const lats = ref(null)
|
||||
const map = ref(null);
|
||||
const MapUtils = ref(null);
|
||||
const isArea = ref(false);
|
||||
onMounted(() => {
|
||||
map.value = new BMap.Map("map_container"); // 创建Map实例
|
||||
MapUtils.value = new MapUtil(map.value); // 注入地图方法
|
||||
initMap(); // 地图初始化
|
||||
_setArea();
|
||||
|
||||
//监听地图层级
|
||||
map.value.addEventListener("zoomend", function (e) {
|
||||
var ZoomNum = map.value.getZoom();
|
||||
//小于8级 显示省级数据
|
||||
if (ZoomNum < 8 && !isArea.value) {
|
||||
isArea.value = true;
|
||||
} else {
|
||||
isArea.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化地图,设置中心点坐标和地图级别
|
||||
MapUtils.value.setCenterLevel(106.713478, 26.578343, 8);
|
||||
//显示场所点位
|
||||
emitter.on("showSitePoint", (val) => {
|
||||
val.forEach((item) => {
|
||||
MapUtils.value.countyAreaTotalModel({
|
||||
point: [item.jd, item.wd],
|
||||
orgObj: item,
|
||||
icon: getImgUrl('map/blue.png'),
|
||||
bgColor: "#2b836b"
|
||||
});
|
||||
});
|
||||
});
|
||||
//监听地图点击事件
|
||||
map.value.addEventListener('click', function (e) {
|
||||
MapUtils.value.removeOverlay();//清除前一个撒点
|
||||
lngs.value = e.sf.lng;
|
||||
lats.value = e.sf.lat;
|
||||
MapUtils.value.showMarker(e.sf.lng, e.sf.lat, getImgUrl('map/blue.png'))
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showSitePoint");
|
||||
});
|
||||
|
||||
//绘制行政区域
|
||||
const _setArea = () => {
|
||||
let count = cityJosn.features.length;
|
||||
for (let i = 0; i < count; i++) {
|
||||
let name = cityJosn.features[i].properties.name;
|
||||
let color = "orange";
|
||||
// if (name == "贵阳市") {
|
||||
// color = "#ce4848";
|
||||
// } else if (name == "遵义市") {
|
||||
// color = "blue";
|
||||
// } else {
|
||||
// color = "orange";
|
||||
// }
|
||||
let coordinates = cityJosn.features[i].geometry.coordinates[0];
|
||||
let str = "";
|
||||
coordinates.forEach((item) => {
|
||||
str += item.join(";");
|
||||
});
|
||||
MapUtils.value.drawPolygon(str, color);
|
||||
//如果市毕节市 画出威宁自治县区域
|
||||
if (name == "毕节市") {
|
||||
let coords = "";
|
||||
let coordinates = cityJosn.features[i].geometry.coordinates[1];
|
||||
coordinates.forEach((item) => {
|
||||
coords += item.join(";");
|
||||
});
|
||||
MapUtils.value.drawPolygon(coords, color);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 初始化地图
|
||||
const initMap = () => {
|
||||
//开启鼠标滚轮缩放
|
||||
map.value.enableScrollWheelZoom(true);
|
||||
map.value.disableDoubleClickZoom();
|
||||
//2D 时打开
|
||||
map.value.addControl(
|
||||
new BMap.NavigationControl({
|
||||
offset: new BMap.Size(0, 200),
|
||||
enableGeolocation: true,
|
||||
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
|
||||
})
|
||||
);
|
||||
map.value.addControl(
|
||||
new BMap.MapTypeControl({
|
||||
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
|
||||
anchor: BMAP_ANCHOR_TOP_RIGHT,
|
||||
offset: new BMap.Size(150, -200)
|
||||
})
|
||||
);
|
||||
}
|
||||
function searchHander() {
|
||||
let obj = {
|
||||
lng: lngs.value,
|
||||
lat: lats.value
|
||||
}
|
||||
emits("point", obj);
|
||||
emits("close");
|
||||
}
|
||||
const CloseEvent = () => {
|
||||
emits("close");
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.titleBox {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#map_container {
|
||||
height: 80vh;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
::v-deep .BMapLabel {
|
||||
border: 1px solid #000 !important;
|
||||
border-radius: 5px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
</style>
|
||||
140
src/components/Map/yjMap.vue
Normal file
140
src/components/Map/yjMap.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="map_container" id="map_container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getImgUrl } from "@/utils/tools.js"
|
||||
import MapUtil from "./BMapUtils.js";
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import cityJosn from "./cityJSON/gz.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
const map = ref(null);
|
||||
const MapUtils = ref(null);
|
||||
const isArea = ref(false);
|
||||
onMounted(() => {
|
||||
map.value = new BMap.Map("map_container"); // 创建Map实例
|
||||
MapUtils.value = new MapUtil(map.value); // 注入地图方法
|
||||
initMap(); // 地图初始化
|
||||
_setArea();
|
||||
_setAreaPintAndModel();
|
||||
//监听地图层级
|
||||
map.value.addEventListener("zoomend", function (e) {
|
||||
var ZoomNum = map.value.getZoom();
|
||||
//小于8级 显示省级数据
|
||||
if (ZoomNum < 8 && !isArea.value) {
|
||||
isArea.value = true;
|
||||
_setAreaPintAndModel();
|
||||
} else {
|
||||
isArea.value = false;
|
||||
}
|
||||
});
|
||||
// 初始化地图,设置中心点坐标和地图级别
|
||||
MapUtils.value.setCenterLevel(107.013478, 27.178343, 8);
|
||||
//显示场所点位
|
||||
emitter.on("showSitePoint", (val) => {
|
||||
val.forEach((item) => {
|
||||
MapUtils.value.countyAreaTotalModel({
|
||||
point: [item.jd, item.wd],
|
||||
orgObj: item,
|
||||
icon: getImgUrl('map/blue.png'),
|
||||
bgColor: "#2b836b"
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showSitePoint");
|
||||
});
|
||||
//设置行政区域统计模板
|
||||
const _setAreaPintAndModel = () => {
|
||||
//获取市州统计数据(隐患、风险)
|
||||
getApi({}, "/mosty-jcgl/yhb/getPlaceCount").then((res) => {
|
||||
if (res && res.length > 0) {
|
||||
for (let j = 0; j < res.length; j++) {
|
||||
for (let i = 0; i < cityJosn.features.length; i++) {
|
||||
let item = cityJosn.features[i];
|
||||
if (res[j].cityCode == item.properties.adcode) {
|
||||
item.properties.fxsl = res[j].yzg; //风险数
|
||||
item.properties.yhsl = res[j].yhsum; //隐患数
|
||||
item.properties.dclsl = res[j].wzg //待处理
|
||||
//中心坐标
|
||||
let point = item.properties.centroid;
|
||||
MapUtils.value.areaTotalModel({
|
||||
point,
|
||||
icon: getImgUrl('map/blue.png'),
|
||||
orgObj: item.properties,
|
||||
bgColor: "#2b836b"
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
//绘制行政区域
|
||||
const _setArea = () => {
|
||||
let count = cityJosn.features.length;
|
||||
for (let i = 0; i < count; i++) {
|
||||
let name = cityJosn.features[i].properties.name;
|
||||
let color = "orange";
|
||||
// if (name == "贵阳市") {
|
||||
// color = "#ce4848";
|
||||
// } else if (name == "遵义市") {
|
||||
// color = "blue";
|
||||
// } else {
|
||||
// color = "orange";
|
||||
// }
|
||||
let coordinates = cityJosn.features[i].geometry.coordinates[0];
|
||||
let str = "";
|
||||
coordinates.forEach((item) => {
|
||||
str += item.join(";");
|
||||
});
|
||||
MapUtils.value.drawPolygon(str, color);
|
||||
//如果市毕节市 画出威宁自治县区域
|
||||
if (name == "毕节市") {
|
||||
let coords = "";
|
||||
let coordinates = cityJosn.features[i].geometry.coordinates[1];
|
||||
coordinates.forEach((item) => {
|
||||
coords += item.join(";");
|
||||
});
|
||||
MapUtils.value.drawPolygon(coords, color);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 初始化地图
|
||||
const initMap = () => {
|
||||
//开启鼠标滚轮缩放
|
||||
map.value.enableScrollWheelZoom(true);
|
||||
map.value.disableDoubleClickZoom();
|
||||
//2D 时打开
|
||||
map.value.addControl(
|
||||
new BMap.NavigationControl({
|
||||
offset: new BMap.Size(0, 200),
|
||||
enableGeolocation: true,
|
||||
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
|
||||
})
|
||||
);
|
||||
map.value.addControl(
|
||||
new BMap.MapTypeControl({
|
||||
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
|
||||
anchor: BMAP_ANCHOR_TOP_RIGHT,
|
||||
offset: new BMap.Size(150, -200)
|
||||
})
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#map_container {
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
::v-deep .BMapLabel {
|
||||
// background:none !important;
|
||||
border: 1px solid #000 !important;
|
||||
border-radius: 5px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
</style>
|
||||
344
src/components/MyComponents/AddressSelect/index.vue
Normal file
344
src/components/MyComponents/AddressSelect/index.vue
Normal file
@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="form-item-box zj-addressSelect-wrap" :style="{ width: width }">
|
||||
<el-select
|
||||
:placeholder="placeholder"
|
||||
:clearable="true"
|
||||
v-model="value"
|
||||
popper-class="adderss-select"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<el-option value="1" style="display: none"></el-option>
|
||||
<el-input
|
||||
v-if="filterable"
|
||||
v-model="filterText"
|
||||
style="margin-bottom: 5px; font-size: 12px"
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<el-tab-pane name="province" :label="province ? province : '请选择'">
|
||||
<div class="citylist">
|
||||
<ul>
|
||||
<li
|
||||
@click="chooseProvince(item)"
|
||||
v-for="item in provinceList"
|
||||
:key="item.code"
|
||||
:class="{ selected: provinceId == item.code }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
name="city"
|
||||
v-if="cityList.length > 0"
|
||||
:label="city ? city : '请选择'"
|
||||
>
|
||||
<div class="citylist">
|
||||
<ul>
|
||||
<li
|
||||
@click="chooseCity(item)"
|
||||
v-for="item in cityList"
|
||||
:class="{ selected: cityId == item.code }"
|
||||
:key="item.code"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
name="area"
|
||||
v-if="areaList.length > 0"
|
||||
:label="area ? area : '请选择'"
|
||||
>
|
||||
<div class="citylist">
|
||||
<ul>
|
||||
<li
|
||||
@click="chooseArea(item)"
|
||||
v-for="item in areaList"
|
||||
:key="item.code"
|
||||
:class="{ selected: areaId == item.code }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
name="street"
|
||||
v-if="streetList.length > 0"
|
||||
:label="street ? street : '请选择'"
|
||||
>
|
||||
<div class="citylist">
|
||||
<ul>
|
||||
<li
|
||||
@click="chooseStreet(item)"
|
||||
v-for="item in streetList"
|
||||
:key="item.code"
|
||||
:class="{ selected: streetId == item.code }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-select>
|
||||
<!-- <el-icon class="errorIcon">
|
||||
<circle-close-filled />
|
||||
</el-icon>
|
||||
<el-icon class="checkIcon">
|
||||
<circle-check-filled />
|
||||
</el-icon> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { COMPONENT_WIDTH } from "@/constant";
|
||||
import { nextTick, ref, watch } from "vue";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
default: "选择地址",
|
||||
type: String
|
||||
},
|
||||
filterable: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
address: {
|
||||
default: () => [],
|
||||
type: Array
|
||||
},
|
||||
defaultConf: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
children: "",
|
||||
label: "",
|
||||
id: ""
|
||||
})
|
||||
},
|
||||
width: {
|
||||
default: COMPONENT_WIDTH,
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const filterText = ref("");
|
||||
const activeName = ref("province");
|
||||
const value = ref("");
|
||||
const valueId = ref([]);
|
||||
const province = ref("");
|
||||
const provinceId = ref("");
|
||||
const provinceList = ref([]);
|
||||
provinceList.value = require("@/constant/pca-code.json");
|
||||
const city = ref("");
|
||||
const cityId = ref("");
|
||||
const cityList = ref([]);
|
||||
const area = ref("");
|
||||
const areaId = ref("");
|
||||
const areaList = ref([]);
|
||||
const street = ref("");
|
||||
const streetId = ref("");
|
||||
const streetList = ref([]);
|
||||
const provinceListFilter = ref([]);
|
||||
provinceListFilter.value = require("@/constant/pca-code.json");
|
||||
const cityListFilter = ref([]);
|
||||
const areaListFilter = ref([]);
|
||||
const streetListFilter = ref([]);
|
||||
nextTick(() => {
|
||||
if (props.address.length > 0) {
|
||||
init(props.address);
|
||||
}
|
||||
});
|
||||
watch(filterText, (val) => {
|
||||
filterNode(val);
|
||||
});
|
||||
const handleClick = () => {
|
||||
filterText.value = "";
|
||||
filterNode("");
|
||||
};
|
||||
const filterNode = (val) => {
|
||||
if (activeName.value === "province") {
|
||||
if (val !== "") {
|
||||
provinceList.value = provinceListFilter.value.filter(
|
||||
(item) => item[props.defaultConf.label].indexOf(val) !== -1
|
||||
);
|
||||
} else {
|
||||
provinceList.value = provinceListFilter.value;
|
||||
}
|
||||
} else if (activeName.value === "city") {
|
||||
if (val !== "") {
|
||||
cityList.value = cityListFilter.value.filter(
|
||||
(item) => item[props.defaultConf.label].indexOf(val) !== -1
|
||||
);
|
||||
} else {
|
||||
cityList.value = cityListFilter.value;
|
||||
}
|
||||
} else if (activeName.value === "area") {
|
||||
if (val !== "") {
|
||||
areaList.value = areaListFilter.value.filter(
|
||||
(item) => item[props.defaultConf.label].indexOf(val) !== -1
|
||||
);
|
||||
} else {
|
||||
areaList.value = areaListFilter.value;
|
||||
}
|
||||
} else if (activeName.value === "street") {
|
||||
if (val !== "") {
|
||||
streetList.value = streetListFilter.value.filter(
|
||||
(item) => item[props.defaultConf.label].indexOf(val) !== -1
|
||||
);
|
||||
} else {
|
||||
streetList.value = streetListFilter.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
const chooseProvince = (e) => {
|
||||
province.value = e[props.defaultConf.label];
|
||||
provinceId.value = e[props.defaultConf.id];
|
||||
value.value = province.value;
|
||||
valueId.value = [provinceId.value];
|
||||
emits("handleChange", valueId.value);
|
||||
city.value = "";
|
||||
cityId.value = "";
|
||||
cityList.value = [];
|
||||
areaList.value = [];
|
||||
streetList.value = [];
|
||||
filterText.value = "";
|
||||
provinceList.value.forEach((el) => {
|
||||
if (el[props.defaultConf.id] === e[props.defaultConf.id]) {
|
||||
if (el[props.defaultConf.children]) {
|
||||
activeName.value = "city";
|
||||
cityList.value = el[props.defaultConf.children];
|
||||
cityListFilter.value = el[props.defaultConf.children];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const chooseCity = (e) => {
|
||||
city.value = e[props.defaultConf.label];
|
||||
cityId.value = e[props.defaultConf.id];
|
||||
area.value = "";
|
||||
areaId.value = "";
|
||||
areaList.value = [];
|
||||
streetList.value = [];
|
||||
filterText.value = "";
|
||||
value.value = province.value + "/" + city.value;
|
||||
valueId.value = [provinceId.value, cityId.value];
|
||||
emits("handleChange", valueId.value);
|
||||
cityList.value.forEach((el) => {
|
||||
if (el[props.defaultConf.id] === e[props.defaultConf.id]) {
|
||||
if (el[props.defaultConf.children]) {
|
||||
activeName.value = "area";
|
||||
areaList.value = el[props.defaultConf.children];
|
||||
areaListFilter.value = el[props.defaultConf.children];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const chooseArea = (e) => {
|
||||
area.value = e[props.defaultConf.label];
|
||||
areaId.value = e[props.defaultConf.id];
|
||||
street.value = "";
|
||||
streetId.value = "";
|
||||
streetList.value = [];
|
||||
filterText.value = "";
|
||||
value.value = province.value + "/" + city.value + "/" + area.value;
|
||||
valueId.value = [provinceId.value, cityId.value, areaId.value];
|
||||
emits("handleChange", valueId.value);
|
||||
areaList.value.forEach((el) => {
|
||||
if (el[props.defaultConf.id] === e[props.defaultConf.id]) {
|
||||
if (el[props.defaultConf.children]) {
|
||||
streetList.value = el[props.defaultConf.children];
|
||||
activeName.value = "street";
|
||||
streetListFilter.value = el[props.defaultConf.children];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const chooseStreet = (e) => {
|
||||
street.value = e[props.defaultConf.label];
|
||||
streetId.value = e[props.defaultConf.id];
|
||||
value.value =
|
||||
province.value + "/" + city.value + "/" + area.value + "/" + street.value;
|
||||
valueId.value = [
|
||||
provinceId.value,
|
||||
cityId.value,
|
||||
areaId.value,
|
||||
streetId.value
|
||||
];
|
||||
emits("handleChange", valueId.value);
|
||||
};
|
||||
const handleClear = () => {
|
||||
activeName.value = "province";
|
||||
value.value = "";
|
||||
valueId.value = [];
|
||||
province.value = "";
|
||||
provinceId.value = "";
|
||||
city.value = "";
|
||||
cityId.value = "";
|
||||
cityList.value = [];
|
||||
area.value = "";
|
||||
areaId.value = "";
|
||||
areaList.value = [];
|
||||
street.value = "";
|
||||
streetId.value = "";
|
||||
streetList.value = [];
|
||||
cityListFilter.value = [];
|
||||
areaListFilter.value = [];
|
||||
streetListFilter.value = [];
|
||||
filterText.value = "";
|
||||
filterNode("");
|
||||
emits("handleChange", []);
|
||||
};
|
||||
const treeValueFind = (tree, arr, newArr = []) => {
|
||||
tree.forEach((el) => {
|
||||
if (el[props.defaultConf.id] === arr) {
|
||||
newArr.push(el);
|
||||
}
|
||||
if (el[props.defaultConf.children]) {
|
||||
treeValueFind(el[props.defaultConf.children], arr, newArr);
|
||||
}
|
||||
});
|
||||
return newArr;
|
||||
};
|
||||
const init = (data) => {
|
||||
let obj1 = treeValueFind(provinceList.value, data[0])[0];
|
||||
province.value = obj1[props.defaultConf.label];
|
||||
provinceId.value = obj1[props.defaultConf.id];
|
||||
cityList.value = obj1[props.defaultConf.children];
|
||||
cityListFilter.value = obj1[props.defaultConf.children];
|
||||
value.value = province.value;
|
||||
if (data[1]) {
|
||||
let obj2 = treeValueFind(provinceList.value, data[1])[0];
|
||||
city.value = obj2[props.defaultConf.label];
|
||||
cityId.value = obj2[props.defaultConf.id];
|
||||
areaList.value = obj2[props.defaultConf.children];
|
||||
areaListFilter.value = obj2[props.defaultConf.children];
|
||||
value.value = province.value + "/" + city.value;
|
||||
}
|
||||
if (data[2]) {
|
||||
let obj3 = treeValueFind(provinceList.value, data[2])[0];
|
||||
area.value = obj3[props.defaultConf.label];
|
||||
areaId.value = obj3[props.defaultConf.id];
|
||||
streetList.value = obj3[props.defaultConf.children];
|
||||
streetListFilter.value = obj3[props.defaultConf.children];
|
||||
value.value = province.value + "/" + city.value + "/" + area.value;
|
||||
}
|
||||
if (data[3]) {
|
||||
let obj4 = treeValueFind(provinceList.value, data[3])[0];
|
||||
street.value = obj4[props.defaultConf.label];
|
||||
streetId.value = obj4[props.defaultConf.id];
|
||||
value.value =
|
||||
province.value + "/" + city.value + "/" + area.value + "/" + street.value;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zj-addressSelect-wrap {
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
src/components/MyComponents/CarNumber/index.vue
Normal file
194
src/components/MyComponents/CarNumber/index.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="zj-carnumber-box form-item-box" :style="{ width: width }">
|
||||
<el-select :class="{ 'error-input': carProvinceError }" class="carnumber-select" v-model="editForm.carProvince"
|
||||
clearable :placeholder="placeholder" @change="carProvinceSelect" popper-class="carnumber-select">
|
||||
<el-option v-for="item in allKeyWord.province" :key="item" :label="item" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-popover placement="bottom" popper-class="alphabet-select-wrap" trigger="click">
|
||||
<template #reference>
|
||||
<el-input :class="{ 'error-input': carAlphabetError }" class="carnumber-input" style="text-transform:uppercase; "
|
||||
:maxlength="maxlength" @input="inputNumber" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
|
||||
@clear="clearCarAlphabet" v-model="editForm.carAlphabet" placeholder="请输入车牌号" />
|
||||
</template>
|
||||
|
||||
<div class="alphabet">
|
||||
<ul>
|
||||
<li @click="chooseNumber(item)" v-for="item in allKeyWord.alphabet" :key="item">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="error-tips" v-if="showErrorTips">{{ errorTips }}</div>
|
||||
<!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
|
||||
<el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { COMPONENT_WIDTH } from "@/constant";
|
||||
import { ref, reactive, nextTick } from "vue";
|
||||
const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
|
||||
const props = defineProps({
|
||||
//获取组件传值
|
||||
carnumber: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
nationOption: {
|
||||
default: () => [],
|
||||
type: Array
|
||||
},
|
||||
placeholder: {
|
||||
default: "请选择",
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: COMPONENT_WIDTH,
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const maxlength = 7;
|
||||
const showErrorTips = ref(false);
|
||||
const carProvinceError = ref(false);
|
||||
const carAlphabetError = ref(false);
|
||||
const errorTips = ref("");
|
||||
const editForm = reactive({
|
||||
carProvince: "",
|
||||
carAlphabet: ""
|
||||
});
|
||||
nextTick(() => {
|
||||
if (props.carnumber) {
|
||||
editForm.carProvince = props.carnumber.substr(0, 1);
|
||||
editForm.carAlphabet = props.carnumber.slice(1);
|
||||
numberList.value = editForm.carAlphabet.split("");
|
||||
}
|
||||
});
|
||||
const carNumber = ref("");
|
||||
const numberList = ref([]);
|
||||
const allKeyWord = {
|
||||
province: [
|
||||
"京",
|
||||
"津",
|
||||
"沪",
|
||||
"渝",
|
||||
"川",
|
||||
"新",
|
||||
"藏",
|
||||
"宁",
|
||||
"贵",
|
||||
"桂",
|
||||
"云",
|
||||
"黑",
|
||||
"吉",
|
||||
"辽",
|
||||
"晋",
|
||||
"翼",
|
||||
"青",
|
||||
"鲁",
|
||||
"豫",
|
||||
"苏",
|
||||
"皖",
|
||||
"浙",
|
||||
"闽",
|
||||
"赣",
|
||||
"湘",
|
||||
"鄂",
|
||||
"琼",
|
||||
"甘",
|
||||
"陕",
|
||||
"蒙",
|
||||
"粤"
|
||||
// '港',
|
||||
// '澳',
|
||||
// '台',
|
||||
// '使',
|
||||
// '领',
|
||||
// '警',
|
||||
// '学'
|
||||
],
|
||||
alphabet: [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
0,
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"E",
|
||||
"F",
|
||||
"G",
|
||||
"H",
|
||||
"J",
|
||||
"K",
|
||||
"L",
|
||||
"M",
|
||||
"N",
|
||||
"O",
|
||||
"P",
|
||||
"Q",
|
||||
"R",
|
||||
"S",
|
||||
"T",
|
||||
"U",
|
||||
"V",
|
||||
"W",
|
||||
"X",
|
||||
"Y",
|
||||
"Z"
|
||||
]
|
||||
};
|
||||
const carProvinceSelect = (data) => {
|
||||
carNumber.value = editForm.carProvince + editForm.carAlphabet;
|
||||
emits("handleChange", carNumber.value.toUpperCase());
|
||||
};
|
||||
const clearCarAlphabet = () => {
|
||||
editForm.carAlphabet = "";
|
||||
numberList.value = [];
|
||||
emits("handleChange", "");
|
||||
};
|
||||
const inputNumber = () => {
|
||||
carNumber.value = editForm.carProvince + editForm.carAlphabet;
|
||||
emits("handleChange", carNumber.value.toUpperCase());
|
||||
};
|
||||
const chooseNumber = (e) => {
|
||||
numberList.value = editForm.carAlphabet.split(",");
|
||||
numberList.value.push(e);
|
||||
editForm.carAlphabet = numberList.value.toString().replace(/,/g, "");
|
||||
carNumber.value = editForm.carProvince + editForm.carAlphabet;
|
||||
emits("handleChange", carNumber.value.toUpperCase());
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zj-carnumber-box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
::v-deep .carnumber-select {
|
||||
width: 88px !important;
|
||||
|
||||
.el-input {
|
||||
width: 88px !important;
|
||||
min-width: 88px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.carnumber-input {
|
||||
width: 100%;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/components/MyComponents/ChemicalNamePicker/index.vue
Normal file
142
src/components/MyComponents/ChemicalNamePicker/index.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<el-input v-model="codeName" clearable @clear="onReset" :style="{ width: props.width }">
|
||||
<template #append>
|
||||
<el-buttom @click="onShow">选择</el-buttom>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dialog append-to-body title="危险化学品名称查询" width="1200px" v-model="dialogVisible" @close="onClose">
|
||||
<el-input placeholder="请输入" v-model="listQuery.searchName" @clear="pageData" clearable
|
||||
style="width: 250px; margin: 0 10px 10px 0" />
|
||||
<el-button type="primary" @click="pageData"><el-icon>
|
||||
<Search />
|
||||
</el-icon> 查询
|
||||
</el-button>
|
||||
<div>
|
||||
<el-table :data="tableData" style="width: 100%" border v-loading="tableLoading" ref="tableRef"
|
||||
@row-click="onCurrentChange" height="500px">
|
||||
<el-table-column align="center" width="55" label="选择">
|
||||
<template #default="{ row }">
|
||||
<el-radio class="radio" v-model="currentRowId" :label="row.id"> </el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" type="index" align="center" width="150" />
|
||||
<el-table-column label="编码" property="code" align="center" width="250"> </el-table-column>
|
||||
<el-table-column label="名称" property="name" align="center"></el-table-column>
|
||||
<el-table-column label="别名" property="aliasName" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="fenye">
|
||||
<MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="onSave" :disabled="currentRowId === '' ? true : false"> 确定 </el-button>
|
||||
<el-button @click="onClose">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive, watch } from "vue";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const dialogVisible = ref(false);
|
||||
const codeName = defineModel();
|
||||
const tableData = ref([]);
|
||||
const tableRef = ref(null);
|
||||
const tableLoading = ref(false);
|
||||
const pageConfiger = reactive({
|
||||
pageSize: 10,
|
||||
pageCurrent: 1,
|
||||
total: 0
|
||||
});
|
||||
const listQuery = reactive({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
searchName: ""
|
||||
});
|
||||
const currentRowId = ref("");
|
||||
const onShow = () => {
|
||||
dialogVisible.value = true;
|
||||
pageData();
|
||||
};
|
||||
const onClose = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
const onReset = () => {
|
||||
emits("update:modelValue", "");
|
||||
};
|
||||
const onSave = () => {
|
||||
let name = tableData.value.find((item) => item.id === currentRowId.value).name;
|
||||
codeName.value = name;
|
||||
emits("update:modelValue", name);
|
||||
onClose();
|
||||
};
|
||||
const pageData = () => {
|
||||
tableLoading.value = true;
|
||||
tableData.value = [];
|
||||
getApi(listQuery, "/mosty-jcgl/hazardousChemicalsDict/list")
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
listQuery.total = res.total;
|
||||
tableData.value = res.records;
|
||||
let row = tableData.value.find((item) => item.name === codeName.value);
|
||||
if (row) tableRef.value.setCurrentRow(row), currentRowId.value = row.id;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
tableLoading.value = false;
|
||||
});
|
||||
};
|
||||
//分页
|
||||
const changeNo = (val) => {
|
||||
listQuery.pageCurrent = val;
|
||||
pageData();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
listQuery.pageSize = val;
|
||||
pageData();
|
||||
};
|
||||
const onCurrentChange = (row) => {
|
||||
currentRowId.value = row.id;
|
||||
};
|
||||
|
||||
// onMounted(() => {});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(n, o) => {
|
||||
if (n) {
|
||||
codeName.value = n;
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
// { immediate: true, deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
top: -60px !important;
|
||||
}
|
||||
</style>
|
||||
409
src/components/MyComponents/ChooseDept/Depart.vue
Normal file
409
src/components/MyComponents/ChooseDept/Depart.vue
Normal file
@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构选择" width="1200px" :close-on-click-modal="false" v-model="props.showDdld" @close="closeDialog"
|
||||
:show-close="false">
|
||||
<!-- <div class="search ww100">
|
||||
<div></div>
|
||||
<div class="flex ">
|
||||
<el-input placeholder="请输入关键词"></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box" style="height: 60vh;">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" class="filter-tree" :props="endProps" node-key="id" accordion
|
||||
:check-strictly="props.Isstrictly" :default-expanded-keys="treemrData" @node-click="nodeClick"
|
||||
:filter-node-method="filterNode" @check-change="checkChange" :data="treeData" show-checkbox
|
||||
@check="handleCheck" :default-checked-keys="ids" />
|
||||
</div>
|
||||
<div class="cskbox">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="listbox">
|
||||
<!-- 选中的组员 -->
|
||||
<ul>
|
||||
<li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
|
||||
@click="clicklist(item, index)">
|
||||
{{ item.orgname }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
|
||||
import {
|
||||
getDept,
|
||||
} from "@/api/user-manage";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
const treeData = ref([]); // 树的数据
|
||||
const node_had = ref([]);
|
||||
const treemrData = ref([]);
|
||||
const singleTableRef = ref();
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const resolve_had = ref([]);
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
deptcode: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
type: props.searchType ? props.searchType : null
|
||||
});
|
||||
const ids = ref([])
|
||||
|
||||
|
||||
|
||||
//根据外部传入ID查询部门信息
|
||||
watch(
|
||||
() => props.deptcode,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
listQuery.value.deptcode = newVal;
|
||||
listQuery.value.type = props.searchType;
|
||||
getTreeData();
|
||||
} else {
|
||||
listQuery.value.type = props.searchType;
|
||||
getTreeData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const currentRow = ref([]); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
onMounted(() => {
|
||||
// getTreeData();
|
||||
});
|
||||
watchEffect(() => {
|
||||
if (props.searchType) {
|
||||
listQuery.value.type = props.searchType;
|
||||
}
|
||||
})
|
||||
const endProps = {
|
||||
children: "children",
|
||||
value: "id",
|
||||
label: "orgname",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children && data.children.length > 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
};
|
||||
// 获取部门树的数据
|
||||
function getTreeData() {
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
treemrData.value = [element.id]
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children.length > 0 ? false : true;
|
||||
}
|
||||
if (res.length > 0) {
|
||||
treeData.value = res;
|
||||
}
|
||||
if (props.formInfo && props.formInfo.length > 0) {
|
||||
ids.value = props.formInfo;
|
||||
treemrData.value = props.formInfo;
|
||||
ids.value.forEach(item => {
|
||||
singleTableRef.value.setChecked(item, true);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgname.includes(value);
|
||||
};
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
let arr = checkedData.checkedNodes;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const e = arr[i];
|
||||
}
|
||||
currentRow.value = arr;
|
||||
}
|
||||
function checkChange(val, checkedData) {
|
||||
if (checkedData == true) {
|
||||
if (props.Single) {
|
||||
currentRow.value = [val]
|
||||
} else {
|
||||
currentRow.value.push(val)
|
||||
}
|
||||
} else {
|
||||
if (currentRow.value && currentRow.value.length > 0) {
|
||||
currentRow.value.forEach(el => {
|
||||
if (el.id == val.id) {
|
||||
currentRow.value.splice(val, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
function nodeClick(data, checkedData) {
|
||||
if (props.Single) {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
} else {
|
||||
if (currentRow.value && currentRow.value.length > 0) {
|
||||
let rowid = []
|
||||
rowid = currentRow.value.filter(it => { return it.id == data.id })
|
||||
if (rowid.length > 0) {
|
||||
singleTableRef.value.setChecked(data.id, false);
|
||||
|
||||
} else {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
}
|
||||
|
||||
} else {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//点击右箭头
|
||||
function pushRight() {
|
||||
rightList.value = currentRow.value;
|
||||
}
|
||||
//点击左箭头
|
||||
function pushLeft() {
|
||||
//遍历右边选中的数据
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const e = leftList.value[i];
|
||||
if (e.id) {
|
||||
singleTableRef.value.setChecked(e.id, false);
|
||||
}
|
||||
|
||||
rightList.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
rightList.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
currentRow.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
currentRow.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
//点击右边列表的每一项
|
||||
function clicklist(item, index) {
|
||||
item.active = !item.active;
|
||||
diIndex.value = index;
|
||||
if (item.active) {
|
||||
leftList.value.push(item);
|
||||
} else {
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const element = leftList.value[i];
|
||||
if (element.id == item.id) {
|
||||
leftList.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//点击清空列表
|
||||
function clearlist() {
|
||||
ids.value = []
|
||||
leftList.value = [];
|
||||
treemrData.value = []
|
||||
rightList.value = [];
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
const handleSave = () => {
|
||||
rightList.value.forEach(item => {
|
||||
item.orgName = item.orgname
|
||||
})
|
||||
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", rightList.value);
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox {
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
margin-right: 15px;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
width: 45%;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
464
src/components/MyComponents/ChooseDept/Departbm.vue
Normal file
464
src/components/MyComponents/ChooseDept/Departbm.vue
Normal file
@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<!-- 只查部门 -->
|
||||
<div>
|
||||
<el-dialog title="组织机构选择" width="50%" :close-on-click-modal="false" v-model="props.showDdld" @close="closeDialog"
|
||||
:show-close="false">
|
||||
<div class="search" v-if="!props.Single">
|
||||
<el-input></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- <el-form :model="listQuery" :rules="rules" label-width="100px" class="demo-ruleForm" :size="formSize" status-icon>
|
||||
</el-form> -->
|
||||
<!-- 组织机构信息 -->
|
||||
<div :class="props.Single ? 'box' : 'box border'">
|
||||
<div :class="props.Single ? 'treeBox' : 'treeBox with'">
|
||||
<el-tree ref="singleTableRef" class="filter-tree" :props="endProps" node-key="id" accordion
|
||||
:default-expanded-keys="treemrData" check-strictly @node-click="nodeClick" :filter-node-method="filterNode"
|
||||
@check-change="checkChange" :data="treeData" show-checkbox @check="handleCheck"
|
||||
:default-checked-keys="ids" />
|
||||
</div>
|
||||
<div class="cskbox" v-if="!props.Single">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="listbox" v-if="!props.Single">
|
||||
<!-- 选中的组员 -->
|
||||
<ul>
|
||||
<li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
|
||||
@click="clicklist(item, index)">
|
||||
{{ item.orgName }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist" v-if="!props.Single">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
|
||||
import {
|
||||
getDept
|
||||
} from "@/api/user-manage";
|
||||
import { getApi, postApi } from "@/api/tobAcco_api.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const treeData = ref([]); // 树的数据
|
||||
const node_had = ref([]);
|
||||
const treemrData = ref([]);
|
||||
const singleTableRef = ref();
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
const resolve_had = ref([]);
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zzlx: String,
|
||||
// 单位回显
|
||||
formInfo: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//单选/多选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
parentId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// orgLevels省部门：11，市部门：21，县部门：31,s市部门-县部门：21，30
|
||||
orgLevels: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
orgLevels: '',
|
||||
parentId: getItem('deptId').ssdwid
|
||||
});
|
||||
const ids = ref([])
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
ids.value = []
|
||||
currentRow.value = []
|
||||
rightList.value = []
|
||||
// listQuery.value.parentId = props.parentId;
|
||||
listQuery.value.orgLevels = props.orgLevels;
|
||||
getTreeData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// getTreeData();
|
||||
|
||||
});
|
||||
watchEffect(() => {
|
||||
if (props.orgLevels) {
|
||||
listQuery.value.orgLevels = props.orgLevels;
|
||||
}
|
||||
|
||||
})
|
||||
const endProps = {
|
||||
children: "children",
|
||||
value: "id",
|
||||
label: "orgName",
|
||||
isLeaf: "leaf"
|
||||
};
|
||||
// 获取部门树的数据
|
||||
function getTreeData() {
|
||||
// orgLevels省部门：11，市部门：21，县部门：31
|
||||
// orgLevels市部门-县部门：21，30
|
||||
postApi(listQuery.value, "/mosty-base/deptFeign/getOrgList").then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
element.orgname = element.orgName
|
||||
treemrData.value.push(element.id);
|
||||
emits("getdeptData", element);
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
if (res.length > 0) {
|
||||
treeData.value = res;
|
||||
}
|
||||
if (props.formInfo && props.formInfo.length > 0) {
|
||||
multipleUser(props.formInfo);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
listQuery.value.parentid = node.data.id;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgName.includes(value);
|
||||
};
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
let arr = checkedData.checkedNodes;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const e = arr[i];
|
||||
// if (e.hasChildren == true) {
|
||||
// arr.splice(i, 1);
|
||||
// }
|
||||
}
|
||||
currentRow.value = arr;
|
||||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||||
}
|
||||
function checkChange(val, checkedData) {
|
||||
if (checkedData == true) {
|
||||
if (props.Single) {
|
||||
currentRow.value = [val]
|
||||
treeData.value.forEach((treeVal) => {
|
||||
singleTableRef.value.setChecked(treeVal.id, treeVal.id == val.id);
|
||||
});
|
||||
} else {
|
||||
currentRow.value.push(val)
|
||||
}
|
||||
} else {
|
||||
if (currentRow.value && currentRow.value.length > 0) {
|
||||
currentRow.value.forEach(el => {
|
||||
if (el.id == val.id) {
|
||||
currentRow.value.splice(val, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
function nodeClick(data, checkedData) {
|
||||
if (props.Single) {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
} else {
|
||||
if (currentRow.value && currentRow.value.length > 0) {
|
||||
let rowid = []
|
||||
rowid = currentRow.value.filter(it => { return it.id == data.id })
|
||||
if (rowid.length > 0) {
|
||||
singleTableRef.value.setChecked(data.id, false);
|
||||
|
||||
} else {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
}
|
||||
|
||||
} else {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//点击右箭头
|
||||
function pushRight() {
|
||||
rightList.value = currentRow.value;
|
||||
}
|
||||
//点击左箭头
|
||||
function pushLeft() {
|
||||
//遍历右边选中的数据
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const e = leftList.value[i];
|
||||
if (e.id) {
|
||||
singleTableRef.value.setChecked(e.id, false);
|
||||
}
|
||||
|
||||
rightList.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
rightList.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
currentRow.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
currentRow.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
//点击右边列表的每一项
|
||||
function clicklist(item, index) {
|
||||
item.active = !item.active;
|
||||
diIndex.value = index;
|
||||
if (item.active) {
|
||||
leftList.value.push(item);
|
||||
} else {
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const element = leftList.value[i];
|
||||
if (element.id == item.id) {
|
||||
leftList.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// //处理回显问题
|
||||
function multipleUser(row) {
|
||||
|
||||
// 左右清除历史缓存
|
||||
rightList.value = []
|
||||
ids.value = []
|
||||
treeData.value.forEach((val) => {
|
||||
singleTableRef.value.setChecked(val.id, false);
|
||||
});
|
||||
if (row) {
|
||||
ids.value = row
|
||||
row.forEach((item) => {
|
||||
treeData.value.forEach((val) => {
|
||||
if (item == val.id) {
|
||||
singleTableRef.value.setChecked(val.id, true);
|
||||
}
|
||||
});
|
||||
//获取部门详情
|
||||
getApi({}, `/mosty-base/deptFeign/getDeptById/${item}`).then(res => {
|
||||
rightList.value.push(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
//点击清空列表
|
||||
function clearlist() {
|
||||
leftList.value = [];
|
||||
rightList.value = [];
|
||||
ids.value = []
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
const handleSave = () => {
|
||||
// rightList.value.forEach(item=>{
|
||||
// item.orgName=item.orgName
|
||||
// })
|
||||
emits("closezzjg", false);
|
||||
if (props.Single) {
|
||||
emits("listdata", ...currentRow.value);
|
||||
} else {
|
||||
emits("listdata", rightList.value);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-left: 65%;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.treeBox {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.with {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
485
src/components/MyComponents/ChooseDept/Departnobj.vue
Normal file
485
src/components/MyComponents/ChooseDept/Departnobj.vue
Normal file
@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 不含本级 -->
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<!-- <div class="search">
|
||||
<el-input style="width: 300px;" placeholder="输入关键字进行过滤"></el-input>
|
||||
<el-button type="primary" class="ml12">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div> -->
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<!-- 使用Element UI的el-tree组件展示树形结构数据，支持多选和操作子节点 -->
|
||||
<el-tree ref="singleTableRef" class="filter-tree" :props="endProps" lazy node-key="id" :load="loadNode"
|
||||
:default-expanded-keys="treemrData" :check-strictly="props.Isstrictly" :filter-node-method="filterNode"
|
||||
@check-change="checkChange" @node-click="nodeClick" :data="treeData" :default-checked-keys="ids">
|
||||
<!-- 自定义节点内容显示方式 -->
|
||||
<template #default="{ node }">
|
||||
<el-checkbox @click.stop :label="node.data.id" v-model="ids" @change="handleCheck(node)">
|
||||
<div @click.stop>
|
||||
{{ node.label
|
||||
}}
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</template>
|
||||
</el-tree>
|
||||
|
||||
</div>
|
||||
<div class="cskbox">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="listbox">
|
||||
<ul>
|
||||
<li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
|
||||
@click="clicklist(item, index)">
|
||||
{{ item.orgName }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="clearlist">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import { defineProps, watch, ref, defineEmits } from "vue";
|
||||
import { getDept } from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "childDeptList",
|
||||
value: "id",
|
||||
label: "orgName",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
data: {
|
||||
type: Object,
|
||||
default: []
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "02"
|
||||
},
|
||||
deptcode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
searchType: props.searchType
|
||||
});
|
||||
const currentRow = ref([]); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
const ids = ref([])
|
||||
const changelist = ref([])
|
||||
//根据外部传入ID查询部门信息
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
ids.value = []
|
||||
currentRow.value = []
|
||||
rightList.value = []
|
||||
listQuery.value.parentid = props.deptId
|
||||
listQuery.value.deptcode = props.deptcode;
|
||||
listQuery.value.searchType = props.searchType
|
||||
getTreeData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const getTreeData = () => {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
treemrData.value.push(element.id);
|
||||
});
|
||||
}
|
||||
|
||||
if (res.length > 0) {
|
||||
treeData.value = res;
|
||||
}
|
||||
if (props.data && props.data.length > 0) {
|
||||
ids.value = props.data
|
||||
treemrData.value = props.data
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
res[i].Checked = false;
|
||||
if (ids.value && ids.value.length > 0) {
|
||||
ids.value.forEach(item => {
|
||||
if (item == res[i].id) {
|
||||
res[i].Checked = true;
|
||||
currentRow.value.push(res[i])
|
||||
rightList.value.push(res[i])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgName.includes(value);
|
||||
};
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
listQuery.value.parentid = node.data.id;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
res[i].Checked = false;
|
||||
if (ids.value) {
|
||||
ids.value.forEach(item => {
|
||||
if (item == res[i].id) {
|
||||
res[i].Checked = true;
|
||||
currentRow.value.push(res[i])
|
||||
rightList.value.push(res[i])
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
|
||||
};
|
||||
function nodeClick(data, checkedData) {
|
||||
|
||||
if (currentRow.value && currentRow.value.length > 0) {
|
||||
let rowid = []
|
||||
rowid = currentRow.value.filter(it => { return it.id == data.id })
|
||||
if (rowid.length > 0) {
|
||||
singleTableRef.value.setChecked(data.id, false);
|
||||
|
||||
} else {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
}
|
||||
|
||||
} else {
|
||||
singleTableRef.value.setChecked(data, true);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function handleCheck(node, checkedData) {
|
||||
|
||||
node.data.Checked = !node.data.Checked;
|
||||
if (node.data.Checked) {
|
||||
currentRow.value.push(node.data)
|
||||
} else {
|
||||
for (let i = 0; i < currentRow.value.length; i++) {
|
||||
const element = currentRow.value[i];
|
||||
if (element.id == node.data.id) {
|
||||
currentRow.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
rightList.value = currentRow.value;
|
||||
}
|
||||
|
||||
//清空
|
||||
function clearlist() {
|
||||
ids.value = []
|
||||
leftList.value = [];
|
||||
// changelist.value = []
|
||||
rightList.value = [];
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.getCheckedNodes().forEach((node) => {
|
||||
node.Checked = false
|
||||
})
|
||||
}
|
||||
|
||||
//点击右箭头
|
||||
function pushRight() {
|
||||
rightList.value = currentRow.value;
|
||||
|
||||
// rightList.value = currentRow.value;
|
||||
|
||||
}
|
||||
//点击左箭头
|
||||
function pushLeft() {
|
||||
//遍历右边选中的数据
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const e = leftList.value[i];
|
||||
if (e.id) {
|
||||
singleTableRef.value.getCheckedNodes().forEach((node) => {
|
||||
if (e.id == node.id) {
|
||||
node.Checked = false
|
||||
}
|
||||
})
|
||||
singleTableRef.value.setChecked(e.id, false);
|
||||
}
|
||||
rightList.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
rightList.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
currentRow.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
currentRow.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
ids.value.forEach((item, index) => {
|
||||
if (e.id == item) {
|
||||
ids.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
//点击右边列表的每一项
|
||||
function clicklist(item, index) {
|
||||
item.active = !item.active;
|
||||
diIndex.value = index;
|
||||
if (item.active) {
|
||||
leftList.value.push(item);
|
||||
} else {
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const element = leftList.value[i];
|
||||
if (element.id == item.id) {
|
||||
leftList.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
const handleSave = () => {
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", rightList.value);
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// ::v-deep .el-overlay-dialog {
|
||||
// overflow: hidden !important;
|
||||
// }
|
||||
|
||||
// :v-deep .el-checkbox .el-checkbox__inner {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
// ::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: inline-block !important;
|
||||
// }
|
||||
// ::v-deep .el-tree-node__content .el-tree-node__expand-icon{
|
||||
// display: black ;
|
||||
// }
|
||||
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
// :v-deep .el-tree-node {
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// background: red !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
::v-deep .el-tree-node__expand-icon {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox {
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
335
src/components/MyComponents/ChooseDept/dwhasbj.vue
Normal file
335
src/components/MyComponents/ChooseDept/dwhasbj.vue
Normal file
@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<div class="search">
|
||||
<el-input></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" :data="treeData" :props="endProps" @node-click="handleNodeClicks" node-key="id"
|
||||
show-checkbox @check-change="checkChange" :check-strictly="props.Isstrictly" @check="handleCheck"
|
||||
:default-expanded-keys="treemrData" :default-checked-keys="[id]" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
onBeforeUnmount,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
|
||||
import { getDept } from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "children",
|
||||
value: "id",
|
||||
label: "orgname",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "02"
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
|
||||
type: props.searchType
|
||||
});
|
||||
const treemrs = ref(null);
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
onMounted(() => {
|
||||
// getTreeData()
|
||||
if (props.showDdld) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
// clearTimeout(treemrs.value)
|
||||
treemrs.value = null
|
||||
})
|
||||
// watch(
|
||||
// () => props.searchType,
|
||||
// (val) => {
|
||||
// listQuery.value.type = val
|
||||
// getTreeData()
|
||||
// }
|
||||
// )
|
||||
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(val) => {
|
||||
if (val == true) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 获取部门树的数据
|
||||
const getTreeData = () => {
|
||||
|
||||
treeData.value = []
|
||||
treemrData.value = []
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
// treemrs.value = setTimeout(() => { singleTableRef.value.setCurrentKey(element.id) }, 200)
|
||||
// treemrData.value.push(element.id);
|
||||
treemrData.value = [element.id]
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children.length > 0 ? false : true;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
});
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgname.includes(value);
|
||||
};
|
||||
};
|
||||
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
// listQuery.value.parentid = node.data.id ? node.data.id : props.deptId;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children ? false : true;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
if (isChecked) {
|
||||
const checked = [data.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
}
|
||||
};
|
||||
function handleNodeClicks(node, checkedData) {
|
||||
if (!props.Isstrictly && node.hasChildren) {
|
||||
return
|
||||
} else {
|
||||
const checked = [node.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
currentRow.value = node;
|
||||
}
|
||||
|
||||
}
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
// 这是选中的节点数组
|
||||
currentRow.value = checkedData.checkedNodes[0];
|
||||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||||
}
|
||||
|
||||
//清空
|
||||
function clearlist() {
|
||||
id.value = null
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
const id = ref("");
|
||||
watch(
|
||||
() => [props.formInfo, props.zzlx],
|
||||
(val) => {
|
||||
if (props.zzlx == "01") {
|
||||
id.value = props.formInfo.leaderid;
|
||||
} else {
|
||||
id.value = props.formInfo.zzid ? props.formInfo.zzid : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
const handleSave = () => {
|
||||
currentRow.value.orgName = currentRow.value.orgname
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", currentRow.value);
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
// // 表格多选
|
||||
// const handleSelectionChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// };
|
||||
// //选中
|
||||
// const handleCurrentChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// currentRow.value.zzlx = props.zzlx;
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content .el-tree-node__expand-icon {
|
||||
display: black;
|
||||
}
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
// :v-deep .el-tree-node {
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// background: red !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-tree-node__expand-icon {
|
||||
// display: block !important;
|
||||
// }
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-left: 65%;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
404
src/components/MyComponents/ChooseDept/dwhasbjMult.vue
Normal file
404
src/components/MyComponents/ChooseDept/dwhasbjMult.vue
Normal file
@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<!-- 查询单位包含本级（多选） -->
|
||||
<div>
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<div class="search">
|
||||
<el-input style="max-width: 400px;"></el-input>
|
||||
<el-button type="primary" style="margin-left: 10px;">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" :data="treeData" :props="endProps" @node-click="handleNodeClicks" node-key="id"
|
||||
show-checkbox @check-change="checkChange" :check-strictly="props.Isstrictly" @check="handleCheck"
|
||||
:default-expanded-keys="treemrData" :default-checked-keys="checkedKeys" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist(true)">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
|
||||
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
onBeforeUnmount,
|
||||
watchEffect,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
|
||||
import { getDept } from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "children",
|
||||
value: "id",
|
||||
label: "orgname",
|
||||
isLeaf: "leaf",
|
||||
disabled: function(data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.children) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
/** 选择的ids */
|
||||
const checkedKeys = ref([])
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const props = defineProps({
|
||||
/** 选择的数据 */
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "02"
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMult: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 选择的数据 */
|
||||
// selectData: {
|
||||
// type: Array,
|
||||
// default: []
|
||||
// }
|
||||
});
|
||||
const listQuery = ref({
|
||||
|
||||
type: props.searchType
|
||||
});
|
||||
const treemrs = ref(null);
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const checkedData = ref([])
|
||||
/** 选中的多个id */
|
||||
const checkedIds = ref([])
|
||||
/** 曾选中的对象 方便找数据用 */
|
||||
const checkObj = ref({})
|
||||
const emits = defineEmits(["closezzjg", "listdata", "update:modelValue"]);
|
||||
onMounted(() => {
|
||||
// getTreeData()
|
||||
if (props.showDdld) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
// clearTimeout(treemrs.value)
|
||||
treemrs.value = null
|
||||
})
|
||||
// watch(
|
||||
// () => props.searchType,
|
||||
// (val) => {
|
||||
// listQuery.value.type = val
|
||||
// getTreeData()
|
||||
// }
|
||||
// )
|
||||
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(val) => {
|
||||
if (val == true) {
|
||||
listQuery.value.type = props.searchType
|
||||
getTreeData()
|
||||
// checkedData.value = props.selectData
|
||||
nextTick(() => {
|
||||
if (props.isMult) {
|
||||
singleTableRef.value.setCheckedKeys(props.modelValue)
|
||||
checkedIds.value = props.modelValue
|
||||
}
|
||||
// checkedKeys.value = props.modelValue
|
||||
})
|
||||
//
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 获取部门树的数据
|
||||
const getTreeData = () => {
|
||||
|
||||
treeData.value = []
|
||||
treemrData.value = []
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
// treemrs.value = setTimeout(() => { singleTableRef.value.setCurrentKey(element.id) }, 200)
|
||||
// treemrData.value.push(element.id);
|
||||
treemrData.value = [element.id]
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children.length > 0 ? false : true;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
});
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgname.includes(value);
|
||||
};
|
||||
};
|
||||
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
// listQuery.value.parentid = node.data.id ? node.data.id : props.deptId;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getApi(listQuery.value, "/mosty-base/deptFeign/getDeptAndJgbm").then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = res[i].children ? false : true;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
checkObj.value[data.id] = {
|
||||
id: data.id,
|
||||
orgName: data.orgname, // 名称
|
||||
orgCode: data.orgcode, // 编码
|
||||
orgLevel: data.orglevel, // 级别
|
||||
parentid: data.parentid // 上级id
|
||||
};
|
||||
}
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
// 这是选中的节点数组
|
||||
currentRow.value = checkedData.checkedNodes[0];
|
||||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||||
if (props.isMult) {
|
||||
checkedIds.value = checkedData.checkedKeys; // checkedKeys
|
||||
|
||||
const arr = [...checkedData.checkedKeys]
|
||||
emits("update:modelValue", arr)
|
||||
}
|
||||
|
||||
}
|
||||
const handleNodeClicks = (node) => {
|
||||
if (!props.Isstrictly && node.hasChildren) {
|
||||
return
|
||||
} else {
|
||||
const checked = [node.id]; // id为tree的node-key属性
|
||||
if (props.isMult) {
|
||||
checkedIds.value = [node.id];
|
||||
emits("update:modelValue", checkedIds.value)
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
} else {
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
currentRow.value = node;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清空
|
||||
* @param {Boolean} isBtn 是否是点击按钮清空
|
||||
*/
|
||||
function clearlist(isBtn) {
|
||||
id.value = null
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
if (props.isMult) {
|
||||
checkedIds.value = [];
|
||||
if(isBtn) emits("update:modelValue", checkedIds.value)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
const id = ref("");
|
||||
watch(
|
||||
() => [props.formInfo, props.zzlx],
|
||||
(val) => {
|
||||
if (props.zzlx == "01") {
|
||||
id.value = props.formInfo.leaderid;
|
||||
} else {
|
||||
id.value = props.formInfo.zzid ? props.formInfo.zzid : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
// clearlist()
|
||||
};
|
||||
/** 根据ids找数据数组 */
|
||||
const findData = (ids) => {
|
||||
let arr = []
|
||||
ids.forEach(item => {
|
||||
arr.push(checkObj.value[item])
|
||||
})
|
||||
return arr
|
||||
}
|
||||
const handleSave = () => {
|
||||
// currentRow.value.orgName = currentRow.value.orgname
|
||||
emits("closezzjg", false);
|
||||
if (props.isMult) {
|
||||
let data = findData(checkedIds.value)
|
||||
emits("listdata", data);
|
||||
} else {
|
||||
emits("listdata", currentRow.value);
|
||||
}
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
// // 表格多选
|
||||
// const handleSelectionChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// };
|
||||
// //选中
|
||||
// const handleCurrentChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// currentRow.value.zzlx = props.zzlx;
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content .el-tree-node__expand-icon {
|
||||
display: black;
|
||||
}
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
// :v-deep .el-tree-node {
|
||||
// .el-checkbox .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// background: red !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-tree-node__expand-icon {
|
||||
// display: block !important;
|
||||
// }
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
//width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
// margin-left: 65%;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
311
src/components/MyComponents/ChooseDept/index.vue
Normal file
311
src/components/MyComponents/ChooseDept/index.vue
Normal file
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false"
|
||||
:show-close="false">
|
||||
<!-- <div class="search">
|
||||
<el-input></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div> -->
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" :data="treeData" :props="endProps" @node-click="handleNodeClicks" node-key="id"
|
||||
show-checkbox @check-change="checkChange" :load="loadNode" :check-strictly="props.Isstrictly"
|
||||
@check="handleCheck" lazy :default-expanded-keys="treemrData" :default-checked-keys="[id]" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import { defineProps, watch, onMounted, ref, defineEmits, watchEffect } from "vue";
|
||||
import { getDept } from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "childDeptList",
|
||||
value: "id",
|
||||
label: "orgName",
|
||||
isLeaf: "leaf",
|
||||
disabled: function (data, node) {//带子级的节点不能选中
|
||||
if (!props.Isstrictly && data.hasChildren) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const props = defineProps({
|
||||
/** 是否显示弹框 el-dialog原生show */
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否可选择本级true：可以 false:不可以
|
||||
Isstrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zzlx: String,
|
||||
/** 单选回显数据 zzlx:01时 formInfo.leaderid, 否则 formInfo.zzid */
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
/** @type { String } 01 部门（默认），02单位(省、市) 03 单位(省、市、县) */
|
||||
searchType: {
|
||||
type: String,
|
||||
default: "01"
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
//查询单位下的安全部门
|
||||
isAqbm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
searchType: props.searchType
|
||||
});
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
const id = ref("");
|
||||
watch(
|
||||
() => [props.formInfo, props.zzlx],
|
||||
(val) => {
|
||||
if (props.zzlx == "01") {
|
||||
id.value = props.formInfo.leaderid;
|
||||
} else {
|
||||
id.value = props.formInfo.zzid ? props.formInfo.zzid : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.searchType,
|
||||
(val) => {
|
||||
listQuery.value.searchType = val
|
||||
listQuery.value.parentid = props.deptId ? props.deptId.replace("XN", "") : '';
|
||||
getTreeData()
|
||||
}
|
||||
)
|
||||
//回调显示懒加载得部门
|
||||
watch(
|
||||
() => props.showDdld,
|
||||
(val) => {
|
||||
if (val) {
|
||||
listQuery.value.parentid = props.deptId ? props.deptId.replace("XN", "") : '';
|
||||
getTreeData()
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// 获取部门树的数据
|
||||
function getTreeData() {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach((element) => {
|
||||
treemrData.value.push(element.id);
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
|
||||
});
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgName.includes(value);
|
||||
};
|
||||
};
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
listQuery.value.parentid = node.data.id ? node.data.id : props.deptId;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
if (isChecked) {
|
||||
const checked = [data.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
}
|
||||
};
|
||||
function handleNodeClicks(node, checkedData) {
|
||||
if (!props.Isstrictly && node.hasChildren) {
|
||||
return
|
||||
} else {
|
||||
const checked = [node.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
currentRow.value = node;
|
||||
}
|
||||
|
||||
}
|
||||
// //获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
// 这是选中的节点数组
|
||||
currentRow.value = checkedData.checkedNodes[0];
|
||||
// currentRow.value.zzlx = props.zzlx?props.zzlx:null;
|
||||
}
|
||||
|
||||
//清空
|
||||
function clearlist() {
|
||||
currentRow.value = [];
|
||||
id.value = null
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
const handleSave = () => {
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", currentRow.value);
|
||||
clearlist()
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
clearlist()
|
||||
};
|
||||
// // 表格多选
|
||||
// const handleSelectionChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// };
|
||||
// //选中
|
||||
// const handleCurrentChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// currentRow.value.zzlx = props.zzlx;
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .is-leaf+.el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// ::v-deep .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
||||
// display: none !important;
|
||||
// }
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none !important;
|
||||
background: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
// :v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-tree-node__expand-icon {
|
||||
// display: block !important;
|
||||
// }
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-left: 65%;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
87
src/components/MyComponents/ChooseIcon/index.vue
Normal file
87
src/components/MyComponents/ChooseIcon/index.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<!--选择图标-->
|
||||
<div class="form-item-box choose-icon-zj" :style="{ width: width }">
|
||||
<el-autocomplete v-bind="$attrs" v-model="props.modelValue" :fetch-suggestions="querySearch"
|
||||
popper-class="choose-icon-zj-autocomplete" :placeholder="placeholder" @change="onInput" @select="handleSelect">
|
||||
<template #prefix>
|
||||
<SvgIcon :icon="props.modelValue"></SvgIcon>
|
||||
</template>
|
||||
<template #default="{ item }">
|
||||
<SvgIcon :icon="item.link"></SvgIcon>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
<!-- <el-icon class="errorIcon">
|
||||
<circle-close-filled />
|
||||
</el-icon>
|
||||
<el-icon class="checkIcon">
|
||||
<circle-check-filled />
|
||||
</el-icon> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { COMPONENT_WIDTH } from "@/constant";
|
||||
import { ref, defineProps, defineEmits, defineExpose, onMounted } from "vue";
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
default: "请输入图标名称",
|
||||
type: String
|
||||
},
|
||||
modelValue: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: COMPONENT_WIDTH,
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const links = ref([]);
|
||||
|
||||
const querySearch = (queryString, cb) => {
|
||||
const results = queryString
|
||||
? links.value.filter(createFilter(queryString))
|
||||
: links.value;
|
||||
cb(results);
|
||||
};
|
||||
const createFilter = (queryString) => {
|
||||
return (restaurant) => {
|
||||
return (
|
||||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const handleSelect = (item) => {
|
||||
emits("update:modelValue", item.value);
|
||||
};
|
||||
|
||||
const handleIconClick = (ev) => {
|
||||
};
|
||||
|
||||
const loadAll = () => {
|
||||
const svgRequire = require.context("@/icons/svg", false, /\.svg$/);
|
||||
const re = svgRequire.keys().map((svgIcon) => {
|
||||
const iconName = svgIcon.split("/")[1];
|
||||
const prefixIconName = iconName.split(".")[0];
|
||||
return { value: prefixIconName, link: prefixIconName };
|
||||
});
|
||||
return re;
|
||||
};
|
||||
const iconListShow = ref(false);
|
||||
const showIconList = () => {
|
||||
iconListShow.value = true;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
links.value = loadAll();
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const onInput = (e) => {
|
||||
emits("update:modelValue", e);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
380
src/components/MyComponents/ChooseOrg/Depart.vue
Normal file
380
src/components/MyComponents/ChooseOrg/Depart.vue
Normal file
@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构人员选择" width="50%" :close-on-click-modal="false" v-model="props.showDdld" @close="closeDialog">
|
||||
<div class="search">
|
||||
<el-input></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-form :model="listQuery" :rules="rules" label-width="100px" class="demo-ruleForm" :size="formSize" status-icon>
|
||||
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" class="filter-tree" :props="endProps" lazy node-key="id" :load="loadNode"
|
||||
:default-expanded-keys="treemrData" check-strictly @node-click="nodeClick" :filter-node-method="filterNode"
|
||||
@check-change="checkChange" :data="treeData" show-checkbox @check="handleCheck"
|
||||
:default-checked-keys="ids" />
|
||||
</div>
|
||||
<div class="cskbox">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="listbox">
|
||||
<!-- 选中的组员 -->
|
||||
<ul>
|
||||
<li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
|
||||
@click="clicklist(item, index)">
|
||||
{{ item.orgName }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
proxyRefs
|
||||
} from "vue";
|
||||
|
||||
import {
|
||||
getDept,
|
||||
} from "@/api/user-manage";
|
||||
const treeData = ref([]); // 树的数据
|
||||
const node_had = ref([]);
|
||||
const treemrData = ref([]);
|
||||
const singleTableRef = ref();
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
searchType: props.searchType
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
deptcode: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
|
||||
searchType: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const ids = ref([])
|
||||
watch(
|
||||
() => props.formInfo,
|
||||
(val) => {
|
||||
if (val.length > 0) {
|
||||
props.formInfo.userList.map((item) => {
|
||||
ids.value.push(item.userId)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
//根据外部传入ID查询部门信息
|
||||
watch(
|
||||
() => props.deptcode,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
listQuery.value.deptcode = newVal;
|
||||
getTreeData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
onMounted(() => {
|
||||
// geiUserData();
|
||||
getTreeData();
|
||||
});
|
||||
const endProps = {
|
||||
children: "childDeptList",
|
||||
value: "id",
|
||||
label: "orgName",
|
||||
isLeaf: "leaf"
|
||||
};
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
listQuery.value.parentid = node.data.id;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
|
||||
getDept(listQuery.value).then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
// 获取部门树的数据
|
||||
function getTreeData() {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach(element => {
|
||||
treemrData.value.push(element.id)
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
});
|
||||
}
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.orgName.includes(value);
|
||||
};
|
||||
|
||||
//只展示最后一节节点的复选框
|
||||
// const checkChange = (data, isChecked) => {
|
||||
// if (isChecked) {
|
||||
// const checked = [data.id] // id为tree的node-key属性
|
||||
// singleTableRef.value.setCheckedKeys(checked)
|
||||
// }
|
||||
|
||||
// }
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
let arr = checkedData.checkedNodes;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const e = arr[i];
|
||||
// if (e.hasChildren == true) {
|
||||
// arr.splice(i, 1);
|
||||
// }
|
||||
}
|
||||
currentRow.value = arr;
|
||||
currentRow.value.zzlx = props.zzlx;
|
||||
}
|
||||
|
||||
//点击右箭头
|
||||
function pushRight() {
|
||||
rightList.value = currentRow.value;
|
||||
}
|
||||
//点击左箭头
|
||||
function pushLeft() {
|
||||
//遍历右边选中的数据
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const e = leftList.value[i];
|
||||
if (e.id) {
|
||||
singleTableRef.value.setChecked(e.id, false);
|
||||
}
|
||||
|
||||
rightList.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
rightList.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
currentRow.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
currentRow.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
//点击右边列表的每一项
|
||||
function clicklist(item, index) {
|
||||
item.active = !item.active;
|
||||
diIndex.value = index;
|
||||
if (item.active) {
|
||||
leftList.value.push(item);
|
||||
} else {
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const element = leftList.value[i];
|
||||
if (element.id == item.id) {
|
||||
leftList.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//点击清空列表
|
||||
function clearlist() {
|
||||
leftList.value = [];
|
||||
rightList.value = [];
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
const handleSave = () => {
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", rightList.value);
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-left: 65%;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox {
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
// background-color: var(--el-color-primary) ;
|
||||
background: var(--el-color-primary);
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
242
src/components/MyComponents/ChooseOrg/index.vue
Normal file
242
src/components/MyComponents/ChooseOrg/index.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="组织机构部门选择" width="50%" v-model="props.showDdld" @close="closeDialog" :close-on-click-modal="false">
|
||||
<div class="search">
|
||||
<el-input></el-input>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="box">
|
||||
<div class="treeBox">
|
||||
<el-tree ref="singleTableRef" :data="treeData" :props="endProps" node-key="id" show-checkbox
|
||||
@check-change="checkChange" :load="loadNode" @check="handleCheck" lazy :default-expanded-keys="treemrData"
|
||||
:default-checked-keys="[id]" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="handleClose" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
|
||||
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
} from "vue";
|
||||
import {
|
||||
getDept,
|
||||
|
||||
} from "@/api/user-manage";
|
||||
const singleTableRef = ref();
|
||||
const endProps = {
|
||||
children: "childDeptList",
|
||||
value: "id",
|
||||
label: "orgName",
|
||||
isLeaf: "leaf"
|
||||
};
|
||||
const treemrData = ref([]);
|
||||
const node_had = ref([]);
|
||||
const resolve_had = ref([]);
|
||||
const treeData = ref([]); // 树的数据
|
||||
const listQuery = ref({
|
||||
deptcode: "",
|
||||
parentid: "",
|
||||
searchType: "03",
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const props = defineProps({
|
||||
showDdld: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zzlx: String,
|
||||
formInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["closezzjg", "listdata"]);
|
||||
onMounted(() => {
|
||||
getTreeData();
|
||||
});
|
||||
// 获取部门树的数据
|
||||
const getTreeData = () => {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
if (res.length == 1) {
|
||||
res.forEach(element => {
|
||||
treemrData.value.push(element.id)
|
||||
emits("getdeptData", element);
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
if (res.length > 0) treeData.value = res;
|
||||
});
|
||||
};
|
||||
//懒加载方法
|
||||
async function loadNode(node, resolve) {
|
||||
listQuery.value.parentid = node.data.id;
|
||||
if (node.level === 0) {
|
||||
node_had.value = node;
|
||||
resolve_had.value = resolve;
|
||||
getTreeData();
|
||||
}
|
||||
if (node.level >= 1) {
|
||||
getDept(listQuery.value).then((res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
res[i].leaf = !res[i].hasChildren;
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const checkChange = (data, isChecked) => {
|
||||
if (isChecked) {
|
||||
const checked = [data.id]; // id为tree的node-key属性
|
||||
singleTableRef.value.setCheckedKeys(checked);
|
||||
}
|
||||
};
|
||||
//获取复选框中被选中的值
|
||||
function handleCheck(data, checkedData) {
|
||||
// 这是选中的节点数组
|
||||
currentRow.value = checkedData.checkedNodes[0];
|
||||
currentRow.value.zzlx = props.zzlx;
|
||||
}
|
||||
|
||||
//清空
|
||||
function clearlist() {
|
||||
currentRow.value = [];
|
||||
singleTableRef.value.setCheckedKeys([], false);
|
||||
}
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
listQuery.value.deptId = value[value.length - 1];
|
||||
};
|
||||
const id = ref("");
|
||||
watch(
|
||||
() => [props.formInfo, props.zzlx],
|
||||
(val) => {
|
||||
if (props.zzlx == "01") {
|
||||
id.value = props.formInfo.leaderid;
|
||||
} else {
|
||||
id.value = props.formInfo.zzid;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
const handleSave = () => {
|
||||
emits("closezzjg", false);
|
||||
emits("listdata", currentRow.value);
|
||||
};
|
||||
const handleClose = () => {
|
||||
emits("closezzjg", false);
|
||||
};
|
||||
// // 表格多选
|
||||
// const handleSelectionChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// };
|
||||
// //选中
|
||||
// const handleCurrentChange = (val) => {
|
||||
// currentRow.value = val;
|
||||
// currentRow.value.zzlx = props.zzlx;
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+.el-checkbox .el-checkbox__inner {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-left: 65%;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
251
src/components/MyComponents/ChooseUser/Choosejsy.vue
Normal file
251
src/components/MyComponents/ChooseUser/Choosejsy.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="props.titleValue" width="1200px" v-model="props.modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 100%;">
|
||||
<el-form-item label="人员姓名:">
|
||||
<el-input v-model="listQuery.xm" clearable placeholder="请输入人员姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="tabBox" :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:90%">
|
||||
<el-table stripe ref="multipleUserRef" v-loading="tableloading" @selection-change="handleSelectionChange"
|
||||
:data="tableData" @row-click="changecoose" border :row-key="keyid" style="width: 100%" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
|
||||
<el-table-column width="55" type="selection" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column sortable align="center" property="nameaffiliation" width="300"
|
||||
label="所属单位"></el-table-column>
|
||||
<el-table-column sortable align="center" property="deptname" width="300" label="所属部门"></el-table-column>
|
||||
<el-table-column sortable align="center" property="userName" label="人员姓名"></el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button @click="closed" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
getCurrentInstance,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getApi, postApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const { proxy } = getCurrentInstance()
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const ridioIndex = ref(null);
|
||||
const multipleUserRef = ref(null);
|
||||
const tableloading = ref(false);
|
||||
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const selectObj = ref(null);//选中的对象
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择人员"
|
||||
},
|
||||
// 默认选中成员
|
||||
defaultData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//人员类型
|
||||
empnature: String,
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {
|
||||
D_BZ_RCLX: []
|
||||
}
|
||||
},
|
||||
orgid: String,//部门
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue", "confirm"]);
|
||||
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
});
|
||||
//重置
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
}
|
||||
getListData()
|
||||
}
|
||||
//确认
|
||||
const handleSave = () => {
|
||||
emits("confirm", [selectObj.value]);
|
||||
closed()
|
||||
}
|
||||
//每一项点击事件
|
||||
function changecoose(val) {
|
||||
ridioIndex.value = val.id
|
||||
selectObj.value = val
|
||||
}
|
||||
|
||||
//选中(多选)
|
||||
const handleSelectionChange = (val) => {
|
||||
}
|
||||
//关闭
|
||||
const closed = () => {
|
||||
multipleUserRef.value.clearSelection();
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
//
|
||||
};
|
||||
//列表信息
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
listQuery.value.empnature = props.empnature
|
||||
listQuery.value.nameaffiliationid = props.orgid
|
||||
postApi(listQuery.value, "/mosty-jcgl/driver/queryDriver").then(res => {
|
||||
if (res) {
|
||||
for (let i = 0; i < res.records.length; i++) {
|
||||
res.records[i].userName = res.records[i].drivername
|
||||
}
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser(tableData.value);
|
||||
}
|
||||
}).finally(() => {
|
||||
tableloading.value = false;
|
||||
})
|
||||
|
||||
};
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
props.defaultData.forEach(item => {
|
||||
tableData.value.forEach((val) => {
|
||||
if (item == val.id) {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
// width: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
298
src/components/MyComponents/ChooseUser/Choosexgf.vue
Normal file
298
src/components/MyComponents/ChooseUser/Choosexgf.vue
Normal file
@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="props.titleValue" width="1200px" v-model="props.modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 100%;">
|
||||
<el-form-item label="关键字:">
|
||||
<el-input v-model="listQuery.relatedname" clearable placeholder="请输入相关方名称或社会信用代码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="相关方类型:" prop="type" v-if="!props.type">
|
||||
<MOSTY.DictRidioAndSelect placeholder="请选择相关方类型" style='width:337px' :dictData="D_TB_RELATED_TYPE"
|
||||
v-model="listQuery.type" selectType="select" @getselect="handleSelectType" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="tabBox" :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:90%">
|
||||
<el-table stripe ref="multipleUserRef" v-loading="tableloading" @selection-change="handleSelectionChange"
|
||||
:data="tableData" @row-click="changecoose" border :row-key="keyid" style="width: 100%" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
|
||||
<el-table-column width="55" type="selection" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column sortable align="center" property="relatedname" width="300" label="相关方名称"></el-table-column>
|
||||
<el-table-column sortable align="center" property="orgname" label="所属单位"></el-table-column>
|
||||
<el-table-column sortable align="center" width="200" v-if="listQuery.type == '01'" property="businesslicense"
|
||||
label="社会信用代码"></el-table-column>
|
||||
<el-table-column sortable align="center" width="200" v-if="listQuery.type == '02'" property="idCard"
|
||||
label="身份证号"></el-table-column>
|
||||
<el-table-column sortable align="center" property="relatedtypes" width="300" label="业务类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_TB_RELATED" :value="row.relatedtypes" :tag="true" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button @click="closed" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
getCurrentInstance,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getApi, postApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_TB_RELATED, D_TB_RELATED_TYPE } = proxy.$dict("D_TB_RELATED", "D_TB_RELATED_TYPE");
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const ridioIndex = ref(null);
|
||||
const multipleUserRef = ref(null);
|
||||
const tableloading = ref(false);
|
||||
const type = ref('')
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const selectObj = ref(null);//选中的对象
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择相关方"
|
||||
},
|
||||
// 默认选中成员
|
||||
defaultData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
ids: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {
|
||||
D_BZ_RCLX: []
|
||||
}
|
||||
},
|
||||
deptid: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue", 'update:ids', "confirm"]);
|
||||
|
||||
onMounted(() => {
|
||||
ridioIndex.value = props.ids
|
||||
listQuery.value.type = props.type
|
||||
getListData()
|
||||
});
|
||||
//重置
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
}
|
||||
getListData()
|
||||
}
|
||||
function handleSelectType() {
|
||||
getListData()
|
||||
}
|
||||
//确认
|
||||
const handleSave = () => {
|
||||
emits("confirm", selectObj.value);
|
||||
closed()
|
||||
}
|
||||
//每一项点击事件
|
||||
function changecoose(val) {
|
||||
ridioIndex.value = val.id
|
||||
selectObj.value = val
|
||||
|
||||
}
|
||||
|
||||
//选中(多选)
|
||||
const handleSelectionChange = (val) => {
|
||||
}
|
||||
//关闭
|
||||
const closed = () => {
|
||||
multipleUserRef.value.clearSelection();
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
//
|
||||
};
|
||||
//列表信息
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
listQuery.value.deptid = props.deptid
|
||||
|
||||
if (props.type) {
|
||||
getApi(listQuery.value, '/mosty-jcgl/relatedpartyinfo/getXgfList').then(res => {
|
||||
if (res) {
|
||||
for (let i = 0; i < res.records.length; i++) {
|
||||
res.records[i].relatedtypes = res.records[i].relatedtype ? res.records[i].relatedtype.split(',') : []
|
||||
}
|
||||
tableData.value = res?.records;
|
||||
|
||||
total.value = Number(res.total);
|
||||
multipleUser(tableData.value);
|
||||
}
|
||||
}).finally(() => {
|
||||
tableloading.value = false;
|
||||
})
|
||||
} else {
|
||||
postApi(listQuery.value, '/mosty-jcgl/relatedpartyinfo/getPageList').then(res => {
|
||||
if (res) {
|
||||
for (let i = 0; i < res.records.length; i++) {
|
||||
res.records[i].relatedtypes = res.records[i].relatedtype ? res.records[i].relatedtype.split(',') : []
|
||||
}
|
||||
tableData.value = res?.records;
|
||||
|
||||
total.value = Number(res.total);
|
||||
multipleUser(tableData.value);
|
||||
}
|
||||
}).finally(() => {
|
||||
tableloading.value = false;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
props.defaultData.forEach(item => {
|
||||
tableData.value.forEach((val) => {
|
||||
if (item == val.id) {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
// width: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
251
src/components/MyComponents/ChooseUser/Choosexgfry.vue
Normal file
251
src/components/MyComponents/ChooseUser/Choosexgfry.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="props.titleValue" width="1200px" v-model="props.modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 100%;">
|
||||
<el-form-item label="人员姓名:">
|
||||
<el-input v-model="listQuery.xm" clearable placeholder="请输入人员姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="tabBox" :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:90%">
|
||||
<el-table stripe ref="multipleUserRef" v-loading="tableloading" @selection-change="handleSelectionChange"
|
||||
:data="tableData" @row-click="changecoose" border :row-key="keyid" style="width: 100%" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
|
||||
<el-table-column width="55" type="selection" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column sortable align="center" property="orgname" width="300" label="所属单位"></el-table-column>
|
||||
<el-table-column sortable align="center" property="deptname" width="300" label="所属部门"></el-table-column>
|
||||
<el-table-column sortable align="center" property="relatedname" width="300" label="所属相关方"></el-table-column>
|
||||
<el-table-column sortable align="center" property="xm" label="人员姓名"></el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button @click="closed" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
getCurrentInstance,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const { proxy } = getCurrentInstance()
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const ridioIndex = ref(null);
|
||||
const multipleUserRef = ref(null);
|
||||
const tableloading = ref(false);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
orgid: getItem("deptId").ssbmid,
|
||||
relatedtype: '15'
|
||||
});
|
||||
const selectObj = ref(null);//选中的对象
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择人员"
|
||||
},
|
||||
// 默认选中成员
|
||||
defaultData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {
|
||||
D_BZ_RCLX: []
|
||||
}
|
||||
},
|
||||
orgid: String,//部门
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue", "confirm"]);
|
||||
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
});
|
||||
//重置
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
}
|
||||
getListData()
|
||||
}
|
||||
//确认
|
||||
const handleSave = () => {
|
||||
emits("confirm", [selectObj.value]);
|
||||
closed()
|
||||
}
|
||||
//每一项点击事件
|
||||
function changecoose(val) {
|
||||
ridioIndex.value = val.id
|
||||
selectObj.value = val
|
||||
}
|
||||
|
||||
//选中(多选)
|
||||
const handleSelectionChange = (val) => {
|
||||
}
|
||||
//关闭
|
||||
const closed = () => {
|
||||
multipleUserRef.value.clearSelection();
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
//
|
||||
};
|
||||
//列表信息
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
getApi(listQuery.value, "/mosty-jcgl/relatedUser/getPageList").then(res => {
|
||||
if (res) {
|
||||
// for (let i = 0; i < res.records.length; i++) {
|
||||
// res.records[i].type = res.records[i].type.split(",")
|
||||
// }
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser(tableData.value);
|
||||
}
|
||||
}).finally(() => {
|
||||
tableloading.value = false;
|
||||
})
|
||||
|
||||
};
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
props.defaultData.forEach(item => {
|
||||
tableData.value.forEach((val) => {
|
||||
if (item == val.id) {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
watchEffect(() => {
|
||||
listQuery.value = { ...listQuery.value }
|
||||
getListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
// width: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
545
src/components/MyComponents/ChooseUser/Leader.vue
Normal file
545
src/components/MyComponents/ChooseUser/Leader.vue
Normal file
@ -0,0 +1,545 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="'组织机构人员选择'" width="1200px" v-model="props.modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 960px;"><!-- v-if="!props.deptId"
|
||||
-->
|
||||
<el-form-item label="所属部门" style="width: 300px;">
|
||||
<MOSTY.Department width="250px" clearable @depitem="changedept" :searchType="props.searchType"
|
||||
:deptId="props.deptId" v-model="listQuery.deptId" :key="keys" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" style="width: 300px;">
|
||||
<el-input placeholder="请输入用户名" v-model="listQuery.loginName" clearable style="width: 250px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="flex just-between treeBox2 ww100">
|
||||
<div class="tabBox" :class="Single ? 'table-box-radio' : ''" style="margin-top: 0px;height: 100%;">
|
||||
<el-table stripe ref="multipleUserRef" v-loading="tableloading" @selection-change="handleSelectionChange"
|
||||
@row-click="changecoose" :data="tableData" border :row-key="keyid" v-model="currentRow" height="540">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!Single" />
|
||||
<el-table-column width="55" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssdwmc" align="center" label="单位"></el-table-column>
|
||||
<el-table-column prop="deptName" align="center" label="部门"></el-table-column>
|
||||
<el-table-column prop="userName" align="center" label="用户名"></el-table-column>
|
||||
<!-- <el-table-column prop="sex" align="center" label="性别">
|
||||
<template #default="{ row }">
|
||||
<span> {{ row.sex == 1 ? "男" : "女" }}</span>
|
||||
<span> </span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="cskbox" v-if="!Single">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="listbox" v-if="!Single">
|
||||
<!-- 选中的组员 -->
|
||||
<ul>
|
||||
<li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
|
||||
@click="clicklist(item, index)">
|
||||
{{ item.userName }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist" v-if="!Single">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="closed" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import { defineProps, watch, ref, defineEmits, nextTick } from "vue";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getSysUserList } from "@/api/user-manage";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { get } from "lodash";
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const ridioIndex = ref(null);
|
||||
const multipleUserRef = ref(null);
|
||||
const tableloading = ref(false);
|
||||
const rightData = ref([])
|
||||
const keys = ref(1)
|
||||
/** 选中的数据 */
|
||||
const selectData = ref([])
|
||||
const listQuery = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择用户"
|
||||
},
|
||||
// 选择成员
|
||||
data: {
|
||||
type: [Array, String],
|
||||
default: []
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否只选择相同部门下的人员
|
||||
xtbmry: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选择领导的回显
|
||||
leaderid: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: () => getItem("deptId").ssdwid
|
||||
},
|
||||
// 选择组长的回显
|
||||
zzid: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/** key为vue保留字段，这里避免一直提示warning错误，注释了 */
|
||||
// key: {
|
||||
// type: Number,
|
||||
// default: 0
|
||||
// },
|
||||
// 部门树查询类型
|
||||
searchType: {
|
||||
type: String,
|
||||
defaule: "04"
|
||||
}
|
||||
});
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
const closed = () => {
|
||||
multipleUserRef.value.clearSelection();
|
||||
leftList.value = [];
|
||||
rightList.value = [];
|
||||
currentRow.value = [];
|
||||
rightData.value = []
|
||||
listQuery.value.loginName = []
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
listQuery.value.deptId = null
|
||||
multipleUserRef.value = null
|
||||
ridioIndex.value = null
|
||||
rightData.value = []
|
||||
if (!props.deptId) {
|
||||
listQuery.value.deptId = null;
|
||||
handleFilter();
|
||||
} else {
|
||||
listQuery.value.deptId = props.deptId;
|
||||
handleFilter();
|
||||
}
|
||||
keys.value++
|
||||
selectData.value = Array.isArray(props.data) ? props.data : [];
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.leaderid,
|
||||
(val) => {
|
||||
multipleUser(val);
|
||||
}
|
||||
);
|
||||
function reset() {
|
||||
listQuery.value.loginName = ''
|
||||
listQuery.value.deptId = props.deptId;
|
||||
listQuery.value.pageNum = 1;
|
||||
keys.value++
|
||||
getListData();
|
||||
}
|
||||
//获取查询值
|
||||
function changedept(val) {
|
||||
listQuery.value.deptId = val.orgCode ? val.orgCode : props.deptId;
|
||||
listQuery.value.pageNum = 1;
|
||||
getListData();
|
||||
}
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageNum = 1;
|
||||
getListData();
|
||||
};
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
const params = listQuery.value;
|
||||
|
||||
const res = await getSysUserList(params);
|
||||
if (res) {
|
||||
res.records.forEach(item => {
|
||||
let card = item.idEntityCard
|
||||
if (card) {
|
||||
if (card.length == 18) {
|
||||
item.sex = (card.substring(16, 17)) % 2 == 0 ? '2' : '1'
|
||||
} else {
|
||||
item.sex = '1'
|
||||
}
|
||||
} else {
|
||||
item.sex = null
|
||||
}
|
||||
})
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
tableloading.value = false;
|
||||
}
|
||||
if (selectData.value && selectData.value.length > 0 && rightData.value.length == 0) {
|
||||
multipleUser(selectData.value);
|
||||
}
|
||||
};
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
// 左右清除历史缓存
|
||||
rightList.value = []
|
||||
tableData.value.forEach((val) => {
|
||||
multipleUserRef.value.toggleRowSelection(val, false);
|
||||
});
|
||||
if (row) {
|
||||
if (props.Single) {
|
||||
ridioIndex.value = row;
|
||||
} else {
|
||||
row.forEach((item) => {
|
||||
getApi({ id: item }, `/mosty-base/userFeign/getUserDetail`).then(res => {
|
||||
if (res) {
|
||||
rightList.value.push(res)
|
||||
let map = new Map();
|
||||
for (let item of rightList.value) {
|
||||
map.set(item.id, item);
|
||||
}
|
||||
rightList.value = [...map.values()];
|
||||
}
|
||||
})
|
||||
tableData.value.forEach((val) => {
|
||||
if (item == val.id) {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (props.Single) {
|
||||
ridioIndex.value = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
|
||||
currentRow.value = val;
|
||||
};
|
||||
//每一项点击事件
|
||||
function changecoose(val) {
|
||||
if (props.Single) {
|
||||
ridioIndex.value = val.id
|
||||
} else {
|
||||
if (currentRow.value && currentRow.value.length > 0) {
|
||||
let rowid = []
|
||||
rowid = currentRow.value.filter(it => { return it.id == val.id })
|
||||
if (rowid.length > 0) {
|
||||
multipleUserRef.value.toggleRowSelection(val, false);
|
||||
|
||||
} else {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
|
||||
} else {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//点击右箭头
|
||||
function pushRight() {
|
||||
if (rightList.value.length == 0) {
|
||||
rightList.value = currentRow.value;
|
||||
} else {
|
||||
rightList.value.push(...currentRow.value)
|
||||
let map = new Map();
|
||||
for (let item of rightList.value) {
|
||||
map.set(item.id, item);
|
||||
}
|
||||
rightList.value = [...map.values()];
|
||||
}
|
||||
rightData.value = rightList.value
|
||||
selectData.value = rightList.value.map(item => item.id)
|
||||
}
|
||||
//点击左箭头
|
||||
function pushLeft() {
|
||||
//遍历右边选中的数据
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const e = leftList.value[i];
|
||||
if (e.id) {
|
||||
multipleUserRef.value.toggleRowSelection(e, false);
|
||||
}
|
||||
rightList.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
rightList.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
if (currentRow.value.length > 0) {
|
||||
currentRow.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
currentRow.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
rightData.value = rightList.value
|
||||
selectData.value = rightList.value.map(item => item.id)
|
||||
}
|
||||
//点击右边列表的每一项
|
||||
function clicklist(item, index) {
|
||||
item.active = !item.active;
|
||||
diIndex.value = index;
|
||||
if (item.active) {
|
||||
leftList.value.push(item);
|
||||
} else {
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const element = leftList.value[i];
|
||||
if (element.id == item.id) {
|
||||
leftList.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//点击清空列表
|
||||
function clearlist() {
|
||||
leftList.value = [];
|
||||
rightList.value = [];
|
||||
currentRow.value = [];
|
||||
rightData.value = []
|
||||
selectData.value = []
|
||||
multipleUserRef.value.clearSelection();
|
||||
}
|
||||
const handleSave = () => {
|
||||
const list = [...new Set(rightList.value.map(item => item.deptId))]
|
||||
if (props.xtbmry && list.length > 1) {
|
||||
ElMessage.error("请选择相同部门下的人员!");
|
||||
} else {
|
||||
if (props.Single) {
|
||||
const info = tableData.value.find((item) => {
|
||||
return item.id === ridioIndex.value;
|
||||
});
|
||||
emits("choosedUsers", [info]);
|
||||
closed();
|
||||
} else {
|
||||
emits("choosedUsers", rightList.value);
|
||||
closed();
|
||||
}
|
||||
multipleUserRef.value.clearSelection();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 516px;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox2 {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 45%;
|
||||
overflow-y: scroll;
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: auto !important;
|
||||
height: 610px !important;
|
||||
}
|
||||
</style>
|
||||
283
src/components/MyComponents/ChooseUser/Leader2.vue
Normal file
283
src/components/MyComponents/ChooseUser/Leader2.vue
Normal file
@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="'师资人员选择'" width="1200px" v-model="dialogTableVisible" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 960px;">
|
||||
<el-form-item label="师资名称" style="width: 300px;">
|
||||
<el-input v-model="listQuery.name" style="width: 250px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="师资类型" style="width: 300px;">
|
||||
<el-select class="pxdx_box ml6" placeholder="请选择师资类型" v-model="listQuery.teacherType" clearable
|
||||
style="width:250px">
|
||||
<el-option label="内部师资" value="0" />
|
||||
<el-option label="外部师资" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="flex just-between treeBox2 ww100">
|
||||
<div class="table-box-radio tabBox" style="margin-top: 0px;height: 100%;">
|
||||
<el-table stripe ref="multipleUserRef" class="conceal-btn" v-loading="tableloading"
|
||||
@current-change="handleSelectionChange" @row-click="changecoose" :data="tableData" border :row-key="keyid"
|
||||
height='57vh'>
|
||||
<el-table-column width="55" #default="{ row }">
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column label="姓名" property="name"></el-table-column>
|
||||
<el-table-column label="性别" property="sex">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.sex == '1'">男</span>
|
||||
<span v-else-if="row.sex == '2'">女</span>
|
||||
<span v-else>未知</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="身份证" property="idCode"></el-table-column>
|
||||
<el-table-column label="师资类型" property="teacherType">
|
||||
<template #default="{ row }">
|
||||
{{ row.teacherType == '1' ? '外部师资' : '内部师资' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="职称" property="position"></el-table-column>
|
||||
<el-table-column label="擅长领域" property="territory"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="closed">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
const dialogTableVisible = ref(true)
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
teacherType: '',
|
||||
name: ''
|
||||
});
|
||||
const tableData = ref([])
|
||||
const ridioIndex = ref(null)
|
||||
const currentRow = ref({})
|
||||
const tableloading = ref(false)
|
||||
const total = ref(0)
|
||||
const emits = defineEmits(["choosedUsers", "close"]);
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
function reset() {
|
||||
listQuery.value.teacherType = ''
|
||||
listQuery.value.name = ''
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
const closed = (val) => {
|
||||
emits("close", val ?? undefined);
|
||||
}
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
getApi(listQuery.value, "/mosty-jcgl/teacher/getList").then((res) => {
|
||||
if (res.records) {
|
||||
tableloading.value = false;
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
}
|
||||
}).catch(() => {
|
||||
tableData.value = [];
|
||||
tableloading.value = false;
|
||||
});
|
||||
};
|
||||
const handleSelectionChange = (val) => {
|
||||
currentRow.value = val;
|
||||
};
|
||||
//每一项点击事件
|
||||
function changecoose(val) {
|
||||
ridioIndex.value = val.id
|
||||
|
||||
}
|
||||
const handleSave = () => {
|
||||
emits("choosedUsers", currentRow.value);
|
||||
closed(true)
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 516px;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox2 {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 45%;
|
||||
overflow-y: scroll;
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: auto !important;
|
||||
height: 600px !important;
|
||||
}
|
||||
|
||||
.conceal-btn thead .el-table-column--selection .cell {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
524
src/components/MyComponents/ChooseUser/Leader3.vue
Normal file
524
src/components/MyComponents/ChooseUser/Leader3.vue
Normal file
@ -0,0 +1,524 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="'组织机构人员选择'" width="1200px" v-model="props.modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 960px;"><!-- v-if="!props.deptId"
|
||||
-->
|
||||
<el-form-item label="所属部门" style="width: 300px;">
|
||||
<MOSTY.Department width="250px" clearable @depitem="changedept" :searchType="props.searchType"
|
||||
:deptId="props.deptId" v-model="listQuery.deptId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" style="width: 300px;">
|
||||
<el-input placeholder="请输入用户名" v-model="listQuery.loginName" clearable style="width: 250px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="flex just-between treeBox2 ww100">
|
||||
<div class="tabBox" :class="Single ? 'table-box-radio' : ''" style="margin-top: 0px;height: 100%;">
|
||||
<el-table stripe ref="multipleUserRef" v-loading="tableloading" @row-click="changecoose"
|
||||
@selection-change="handleSelectionChange" :data="tableData" border :row-key="keyid" v-model="currentRow"
|
||||
height='57vh'>
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!Single" />
|
||||
<el-table-column width="55" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssdwmc" align="center" label="单位"></el-table-column>
|
||||
<el-table-column prop="deptName" align="center" label="部门"></el-table-column>
|
||||
<el-table-column prop="userName" align="center" label="用户名"></el-table-column>
|
||||
<el-table-column prop="sex" align="center" label="性别">
|
||||
<template #default="{ row }">
|
||||
<!-- <span> {{ row.sex == 1 ? "男" : "女" }}</span> -->
|
||||
<span> </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="cskbox" v-if="!Single">
|
||||
<!-- 穿梭按钮 -->
|
||||
<el-icon @click="pushRight">
|
||||
<DArrowRight />
|
||||
</el-icon>
|
||||
<el-icon @click="pushLeft">
|
||||
<DArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="listbox" v-if="!Single">
|
||||
<!-- 选中的组员 -->
|
||||
<ul>
|
||||
<li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
|
||||
@click="clicklist(item, index)">
|
||||
{{ item.userName }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button type="primary" @click="clearlist" v-if="!Single">
|
||||
<el-icon>
|
||||
<DocumentRemove />
|
||||
</el-icon>
|
||||
<span>清空</span>
|
||||
</el-button>
|
||||
<el-button @click="closed" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import { defineProps, watch, ref, defineEmits, nextTick } from "vue";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getSysUserList } from "@/api/user-manage";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { get } from "lodash";
|
||||
const rightList = ref([]); //右边列表数据
|
||||
const diIndex = ref(); //点击右边列表数据
|
||||
const leftList = ref([]); //存放右边被点击的数据
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const rightData=ref([])
|
||||
const ridioIndex = ref(null);
|
||||
const multipleUserRef = ref(null);
|
||||
const tableloading = ref(false);
|
||||
const listQuery = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择用户"
|
||||
},
|
||||
// 选择成员
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否只选择相同部门下的人员
|
||||
xtbmry: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选择领导的回显
|
||||
leaderid: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: () => getItem("deptId").ssdwid
|
||||
},
|
||||
// 选择组长的回显
|
||||
zzid: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
key: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 部门树查询类型
|
||||
searchType: {
|
||||
type: String,
|
||||
defaule: "04"
|
||||
}
|
||||
});
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
const closed = () => {
|
||||
multipleUserRef.value.clearSelection();
|
||||
leftList.value = [];
|
||||
rightList.value = [];
|
||||
rightData.value=[]
|
||||
currentRow.value = [];
|
||||
listQuery.value.loginName = []
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
multipleUserRef.value = null
|
||||
ridioIndex.value = null
|
||||
rightData.value=[]
|
||||
if (!props.deptId) {
|
||||
listQuery.value.deptId = null;
|
||||
handleFilter();
|
||||
} else {
|
||||
listQuery.value.deptId = props.deptId;
|
||||
handleFilter();
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.leaderid,
|
||||
(val) => {
|
||||
multipleUser(val);
|
||||
}
|
||||
);
|
||||
function reset() {
|
||||
listQuery.value.loginName = ''
|
||||
listQuery.value.deptId = null;
|
||||
listQuery.value.pageNum = 1;
|
||||
getListData();
|
||||
}
|
||||
//获取查询值
|
||||
function changedept(val) {
|
||||
listQuery.value.deptId = val.orgCode;
|
||||
listQuery.value.pageNum = 1;
|
||||
getListData();
|
||||
}
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageNum = 1;
|
||||
getListData();
|
||||
};
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
const params = listQuery.value;
|
||||
|
||||
const res = await getSysUserList(params);
|
||||
if (res) {
|
||||
res.records.forEach(item => {
|
||||
let card = item.idEntityCard
|
||||
if (card) {
|
||||
if (card.length == 18) {
|
||||
item.sex = (card.substring(16, 17)) % 2 == 0 ? '2' : '1'
|
||||
} else {
|
||||
item.sex = '1'
|
||||
}
|
||||
} else {
|
||||
item.sex = null
|
||||
}
|
||||
})
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
tableloading.value = false;
|
||||
}
|
||||
if (props.data && props.data.length > 0&&rightData.value.length==0) {
|
||||
multipleUser(props.data);
|
||||
}
|
||||
};
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
// 左右清除历史缓存
|
||||
rightList.value = []
|
||||
tableData.value.forEach((val) => {
|
||||
multipleUserRef.value.toggleRowSelection(val, false);
|
||||
});
|
||||
if (row) {
|
||||
if (props.Single) {
|
||||
ridioIndex.value = row;
|
||||
} else {
|
||||
row.forEach((item) => {
|
||||
getApi({ id: item }, `/mosty-base/userFeign/getUserDetail`).then(res => {
|
||||
if (res) {
|
||||
rightList.value.push(res)
|
||||
let map = new Map();
|
||||
for (let item of rightList.value) {
|
||||
map.set(item.id, item);
|
||||
}
|
||||
rightList.value = [...map.values()];
|
||||
}
|
||||
})
|
||||
tableData.value.forEach((val) => {
|
||||
if (item == val.id) {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (props.Single) {
|
||||
ridioIndex.value = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
currentRow.value = val;
|
||||
};
|
||||
function changecoose(val) {
|
||||
if (props.Single) {
|
||||
ridioIndex.value = val.id
|
||||
} else {
|
||||
if (currentRow.value && currentRow.value.length > 0) {
|
||||
let rowid = []
|
||||
rowid = currentRow.value.filter(it => { return it.id == val.id })
|
||||
if (rowid.length > 0) {
|
||||
multipleUserRef.value.toggleRowSelection(val, false);
|
||||
|
||||
} else {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
|
||||
} else {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//点击右箭头
|
||||
function pushRight() {
|
||||
if (rightList.value.length == 0) {
|
||||
rightList.value = currentRow.value;
|
||||
} else {
|
||||
rightList.value.push(...currentRow.value)
|
||||
let map = new Map();
|
||||
for (let item of rightList.value) {
|
||||
map.set(item.id, item);
|
||||
}
|
||||
rightList.value = [...map.values()];
|
||||
}
|
||||
rightData.value=rightList.value
|
||||
}
|
||||
//点击左箭头
|
||||
function pushLeft() {
|
||||
//遍历右边选中的数据
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const e = leftList.value[i];
|
||||
if (e.id) {
|
||||
multipleUserRef.value.toggleRowSelection(e, false);
|
||||
}
|
||||
rightList.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
rightList.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
if (currentRow.value.length > 0) {
|
||||
currentRow.value.forEach((item, index) => {
|
||||
if (e.id == item.id) {
|
||||
currentRow.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
rightData.value=rightList.value
|
||||
}
|
||||
//点击右边列表的每一项
|
||||
function clicklist(item, index) {
|
||||
item.active = !item.active;
|
||||
diIndex.value = index;
|
||||
if (item.active) {
|
||||
leftList.value.push(item);
|
||||
} else {
|
||||
for (let i = 0; i < leftList.value.length; i++) {
|
||||
const element = leftList.value[i];
|
||||
if (element.id == item.id) {
|
||||
leftList.value.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//点击清空列表
|
||||
function clearlist() {
|
||||
leftList.value = [];
|
||||
rightList.value = [];
|
||||
currentRow.value = [];
|
||||
rightData.value=[]
|
||||
multipleUserRef.value.clearSelection();
|
||||
}
|
||||
const handleSave = () => {
|
||||
const list = [...new Set(rightList.value.map(item => item.deptId))]
|
||||
if (props.xtbmry && list.length > 1) {
|
||||
ElMessage.error("请选择相同部门下的人员!");
|
||||
} else {
|
||||
if (props.Single) {
|
||||
const info = tableData.value.find((item) => {
|
||||
return item.id === ridioIndex.value;
|
||||
});
|
||||
emits("choosedUsers", [info]);
|
||||
closed();
|
||||
} else {
|
||||
emits("choosedUsers", rightList.value);
|
||||
closed();
|
||||
}
|
||||
multipleUserRef.value.clearSelection();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 516px;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox2 {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 45%;
|
||||
overflow-y: scroll;
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: auto !important;
|
||||
height: 600px !important;
|
||||
}
|
||||
</style>
|
||||
258
src/components/MyComponents/ChooseUser/Talents.vue
Normal file
258
src/components/MyComponents/ChooseUser/Talents.vue
Normal file
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="props.titleValue" width="1200px" v-model="props.modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 100%;">
|
||||
<el-form-item label="人员姓名:">
|
||||
<el-input v-model="listQuery.userName" clearable placeholder="请输入人员姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="人才类型:">
|
||||
<MOSTY.DictRidioAndSelect :dictData="D_BZ_RCLX" v-model="listQuery.type" :disabledItem="['03']"
|
||||
selectType="select" placeholder="请选择人才类型" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组织机构信息 -->
|
||||
<div class="tabBox" :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:90%">
|
||||
<el-table stripe ref="multipleUserRef" v-loading="tableloading" @selection-change="handleSelectionChange"
|
||||
:data="tableData" border @row-click="changecoose" :row-key="keyid" style="width: 100%" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
|
||||
<el-table-column width="55" type="selection" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id" @click="onClickRadio(row)"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column sortable align="center" property="orgName" width="300" label="所属单位"></el-table-column>
|
||||
<el-table-column sortable align="center" property="deptName" width="300" label="所属部门"></el-table-column>
|
||||
<el-table-column sortable align="center" property="userName" width="150" label="人员姓名"></el-table-column>
|
||||
<el-table-column sortable align="center" label="人才类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_RCLX" v-for="item in row.type" :key="item" :value="item" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button @click="closed" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入
|
||||
import {
|
||||
defineProps,
|
||||
onMounted,
|
||||
ref,
|
||||
defineEmits,
|
||||
getCurrentInstance,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { D_BZ_RCLX } = proxy.$dict("D_BZ_RCLX")
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const ridioIndex = ref(null);
|
||||
const multipleUserRef = ref(null);
|
||||
const tableloading = ref(false);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const selectObj = ref(null);//选中的对象
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择人员"
|
||||
},
|
||||
// 默认选中成员
|
||||
defaultData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: {
|
||||
D_BZ_RCLX: []
|
||||
}
|
||||
},
|
||||
orgid: String,//部门
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue", "confirm"]);
|
||||
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
});
|
||||
//重置
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
deptCode: props.orgid
|
||||
}
|
||||
getListData()
|
||||
}
|
||||
//确认
|
||||
const handleSave = () => {
|
||||
emits("confirm", selectObj.value);
|
||||
}
|
||||
//d单选
|
||||
const onClickRadio = (val) => {
|
||||
selectObj.value = val
|
||||
}
|
||||
//选中(多选)
|
||||
const handleSelectionChange = (val) => {
|
||||
}
|
||||
//关闭
|
||||
const closed = () => {
|
||||
multipleUserRef.value.clearSelection();
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
//
|
||||
};
|
||||
//列表信息
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
getApi(listQuery.value, "/mosty-jcgl/talents/selectPageOfTalents").then(res => {
|
||||
if (res) {
|
||||
for (let i = 0; i < res.records.length; i++) {
|
||||
res.records[i].type = res.records[i].type.split(",")
|
||||
}
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser(tableData.value);
|
||||
}
|
||||
}).finally(() => {
|
||||
tableloading.value = false;
|
||||
})
|
||||
|
||||
};
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
props.defaultData.forEach(item => {
|
||||
tableData.value.forEach((val) => {
|
||||
if (item == val.id) {
|
||||
multipleUserRef.value.toggleRowSelection(val, true);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
//每一项点击事件
|
||||
function changecoose(val) {
|
||||
ridioIndex.value = val.id
|
||||
selectObj.value = val
|
||||
}
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
watchEffect(() => {
|
||||
listQuery.value = { ...listQuery.value, deptCode: props.orgid }
|
||||
getListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
// width: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
208
src/components/MyComponents/ChooseUser/index.vue
Normal file
208
src/components/MyComponents/ChooseUser/index.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<el-dialog :title="titleValue" width="1200px" append-to-body :model-value="modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable :deptId="props.deptId" v-model="listQuery.deptId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input placeholder="请输入用户名" v-model="listQuery.userName" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" style="margin-top: 0px">
|
||||
<el-table ref="multipleUserRef" stripe @selection-change="handleSelectionChange" :data="tableData" border
|
||||
:row-key="keyid" style="width: 100%" height="400">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" />
|
||||
<el-table-column prop="userName" align="center" label="用户名"></el-table-column>
|
||||
<el-table-column prop="loginName" align="center" label="账号"></el-table-column>
|
||||
<el-table-column prop="deptName" align="center" label="部门"></el-table-column>
|
||||
<el-table-column prop="sex" align="center" label="性别">
|
||||
<template #default="{ row }">
|
||||
<span> {{ row.sex == 1 ? "男" : "女" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.current" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.size"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<div class="">
|
||||
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
<el-button @click="restab">清空</el-button>
|
||||
<el-button @click="closed">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import { selectUserDeptPage } from "@/api/user-manage";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择用户"
|
||||
},
|
||||
roleId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
current: 1,
|
||||
size: 20
|
||||
});
|
||||
const form = ref({});
|
||||
const tableData = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val === true) {
|
||||
|
||||
listQuery.value.deptId = props.deptId
|
||||
|
||||
handleFilter();
|
||||
} else {
|
||||
listQuery.value.deptId = null
|
||||
}
|
||||
}
|
||||
);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
loginName: "",
|
||||
phone: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
|
||||
let list = {
|
||||
type: props.LeaderType,
|
||||
userList: userList
|
||||
};
|
||||
if (props.Single) {
|
||||
if (userList.length > 1 && props.LeaderType != "MJ") {
|
||||
ElMessage({
|
||||
type: "warning",
|
||||
message: "请每次选择一人!"
|
||||
});
|
||||
} else {
|
||||
emits("choosedUsers", userList);
|
||||
emits("choosedUsersLeader", list);
|
||||
closed();
|
||||
}
|
||||
} else {
|
||||
emits("choosedUsers", userList);
|
||||
emits("choosedUsersLeader", list);
|
||||
closed();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.current = currentPage;
|
||||
getListData();
|
||||
};
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
if (props.roleId) {
|
||||
params.roleId = props.roleId;
|
||||
}
|
||||
const res = await selectUserDeptPage(params);
|
||||
res.records.forEach(item => {
|
||||
if (item.idEntityCard && item.idEntityCard.length >= 2) {
|
||||
item.sex = Number(item.idEntityCard.substring(item.idEntityCard.length - 2, item.idEntityCard.length - 1)) % 2 == 0 ? '2' : '1'
|
||||
}
|
||||
});
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser(props.data);
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelectionUser.value = val;
|
||||
};
|
||||
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
|
||||
if (row) {
|
||||
tableData.value.forEach((item) => {
|
||||
row.forEach((val) => {
|
||||
if (val.id == item.id) {
|
||||
multipleUserRef.value.toggleRowSelection(item, undefined);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
|
||||
|
||||
//清空
|
||||
function restab() {
|
||||
multipleUserRef.value.clearSelection();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
351
src/components/MyComponents/ChooseUser/sbss.vue
Normal file
351
src/components/MyComponents/ChooseUser/sbss.vue
Normal file
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="设备设施选择" width="1200px" v-model="props.modelValue" :before-close="closed">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 960px;">
|
||||
<el-form-item label="所属部门" style="width: 300px;">
|
||||
<MOSTY.Department width="250px" clearable @depitem="changedept" :searchType="props.searchType"
|
||||
:deptId="props.deptId" v-model="listQuery.deptId" :key="keys" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模糊查询" style="width: 300px;">
|
||||
<el-input placeholder="请输入名称或内部编号" v-model="listQuery.keywords" clearable style="width: 250px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 144px;">
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="success" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="flex just-between treeBox2 ww100">
|
||||
<div class="tabBox table-box-radio" style="margin-top: 0px;height: 100%;">
|
||||
<el-table stripe ref="sbssRef" v-loading="tableloading" @selection-change="handleSelectionChange"
|
||||
@row-click="changecoose" :data="tableData" border :row-key="keyid" v-model="currentRow" height="540">
|
||||
<el-table-column width="55" #default="{ row }">
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sitename" align="center" label="场所"></el-table-column>
|
||||
<el-table-column prop="partname" align="center" label="部位"></el-table-column>
|
||||
<el-table-column prop="name" align="center" label="设备名称"></el-table-column>
|
||||
<el-table-column prop="nbbh" align="center" label="内部编号"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-between">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<span>确定</span>
|
||||
</el-button>
|
||||
<el-button @click="closed" type="primary">
|
||||
<el-icon>
|
||||
<DocumentDelete />
|
||||
</el-icon>
|
||||
<span>关闭</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, watch, ref, defineEmits, nextTick } from "vue";
|
||||
import { getApi } from "@/api/tobAcco_api.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const total = ref(0);
|
||||
const tableData = ref([]);
|
||||
const ridioIndex = ref(null);
|
||||
const sbssRef = ref(null);
|
||||
const tableloading = ref(false);
|
||||
const rightData = ref([])
|
||||
const keys = ref(1)
|
||||
/** 选中的数据 */
|
||||
const selectData = ref([])
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
// 选中的
|
||||
data: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 选择设备的回显
|
||||
sbid: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 查询当前部门下的人员
|
||||
deptId: {
|
||||
type: String,
|
||||
default: () => getItem("deptId").ssdwid
|
||||
},
|
||||
// 部门树查询类型
|
||||
searchType: {
|
||||
type: String,
|
||||
defaule: "04"
|
||||
},
|
||||
//需要查询的设备类型
|
||||
sblx: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
const currentRow = ref(-1); //选中的数据
|
||||
const emits = defineEmits(["update:modelValue", "choosedSbss"]);
|
||||
const closed = () => {
|
||||
sbssRef.value.clearSelection();
|
||||
currentRow.value = [];
|
||||
listQuery.value.keywords = []
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
sbssRef.value = null
|
||||
ridioIndex.value = null
|
||||
listQuery.value.deptId = props.deptId;
|
||||
listQuery.value.sblx = props.sblx;
|
||||
handleFilter();
|
||||
keys.value++
|
||||
selectData.value = props.data;
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.sbid,
|
||||
(val) => {
|
||||
multipleUser(val);
|
||||
}
|
||||
);
|
||||
function reset() {
|
||||
listQuery.value.keywords = ''
|
||||
listQuery.value.deptId = props.deptId;
|
||||
listQuery.value.pageCurrent = 1;
|
||||
keys.value++
|
||||
getListData();
|
||||
}
|
||||
//获取查询值
|
||||
function changedept(val) {
|
||||
listQuery.value.deptId = val.orgCode ? val.orgCode : props.deptId;
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
const getListData = async () => {
|
||||
tableData.value = [];
|
||||
tableloading.value = true;
|
||||
const params = listQuery.value;
|
||||
getApi(params, "/mosty-jcgl/aqsbssZb/getPage").then((res) => {
|
||||
if (res) {
|
||||
res.records.forEach(item => {
|
||||
let card = item.idEntityCard
|
||||
if (card) {
|
||||
if (card.length == 18) {
|
||||
item.sex = (card.substring(16, 17)) % 2 == 0 ? '2' : '1'
|
||||
} else {
|
||||
item.sex = '1'
|
||||
}
|
||||
} else {
|
||||
item.sex = null
|
||||
}
|
||||
})
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
tableloading.value = false;
|
||||
}
|
||||
if (selectData.value && selectData.value.length > 0 && rightData.value.length == 0) {
|
||||
multipleUser(selectData.value);
|
||||
}
|
||||
})
|
||||
};
|
||||
// 列表回显
|
||||
function multipleUser(row) {
|
||||
tableData.value.forEach((val) => {
|
||||
sbssRef.value.toggleRowSelection(val, false);
|
||||
});
|
||||
if (row) {
|
||||
ridioIndex.value = row;
|
||||
} else {
|
||||
ridioIndex.value = null;
|
||||
}
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
currentRow.value = val;
|
||||
};
|
||||
//每一项点击事件
|
||||
function changecoose(val) {
|
||||
ridioIndex.value = val.id
|
||||
}
|
||||
const handleSave = () => {
|
||||
const info = tableData.value.find((item) => {
|
||||
return item.id === ridioIndex.value;
|
||||
});
|
||||
emits("choosedSbss", info);
|
||||
closed();
|
||||
sbssRef.value.clearSelection();
|
||||
};
|
||||
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table-box-radio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-box-radio .el-table1__header-wrapper .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:v-deep .el-tree-node {
|
||||
.is-leaf+el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-overlay-dialog {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:v-deep .el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:v-deep .wrap .el-checkbox__input.is-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.flx {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 516px;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.treeBox2 {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cskbox {
|
||||
width: 40px;
|
||||
padding: 107px 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.el-icon {
|
||||
width: 4em !important;
|
||||
height: 6em !important;
|
||||
}
|
||||
|
||||
.el-icon svg {
|
||||
width: 3em !important;
|
||||
height: 3em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
width: 45%;
|
||||
overflow-y: scroll;
|
||||
|
||||
ul>li {
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activ {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
.bot_font {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: auto !important;
|
||||
height: 610px !important;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user