<template>
|
<flex-layout direction="row" no-bg class="page-wrapper">
|
<template #header>
|
<my-card title="包机组列表" class="w320">
|
<template #card-tools>
|
<div>
|
<el-button
|
class="card-tools"
|
size="small"
|
type="primary"
|
:disabled="!isCanEdit"
|
circle
|
@click="showAddDialog"
|
>
|
<svg-icon icon-class="add"></svg-icon>
|
</el-button>
|
<el-button
|
class="card-tools"
|
size="small"
|
type="primary"
|
:disabled="getToolsState || !isCanEdit"
|
circleparams
|
@click="showEditDialog"
|
>
|
<svg-icon icon-class="edit2"></svg-icon>
|
</el-button>
|
<el-button
|
class="card-tools"
|
size="small"
|
type="danger"
|
:disabled="getToolsState || !isCanEdit"
|
circle
|
@click="confirmDelBaojiGroup"
|
>
|
<svg-icon icon-class="delete"></svg-icon>
|
</el-button>
|
</div>
|
</template>
|
<BaojiGroupList
|
ref="groupList"
|
:list="baojiGroupList"
|
:show-group-btn="true"
|
@handle-click="groupListClick"
|
@success="searchBaojiGroupList"
|
></BaojiGroupList>
|
</my-card>
|
</template>
|
<div class="flex-page-content">
|
<el-tabs v-model="activeName" type="border-card" class="flex-layout ">
|
<el-tab-pane label="包机组用户" name="baoji-group-user">
|
<template #label>
|
<span><i class="el-icon-user-solid"></i> 管理的用户</span>
|
</template>
|
<el-transfer
|
v-model="user.value"
|
:titles="['未添加用户', '已添加用户']"
|
:button-texts="['移除', '添加']"
|
:data="user.data"
|
:filterable="true"
|
@change="userChange"
|
class="transfer-width320"
|
>
|
</el-transfer>
|
</el-tab-pane>
|
<el-tab-pane label="包机机房" name="baoji-home">
|
<template #label
|
><span><i class="el-icon-s-home"></i> 管理的锁具</span></template
|
>
|
<el-transfer
|
v-model="baoji.value"
|
:titles="['未添加机房', '已添加机房']"
|
:button-texts="['移除', '添加']"
|
:data="baoji.data"
|
:filterable="true"
|
@change="baojiChange"
|
class="transfer-width480"
|
>
|
</el-transfer>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<!-- 添加包机组 -->
|
<el-dialog
|
title="添加包机组"
|
width="400px"
|
v-model="addBaojiGroup.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<div class="params-container">
|
<el-form size="small" label-position="top" class="params-dialog">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell">
|
<el-form-item label="包机组名称">
|
<el-input v-model="addBaojiGroup.value"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</div>
|
<div class="form-footer">
|
<el-button @click="addBaojiGroupOk">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
<!-- 编辑包机组 -->
|
<el-dialog
|
title="编辑包机组"
|
width="400px"
|
v-model="editBaoJiGroup.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<div class="params-container">
|
<el-form size="small" label-position="top" class="params-dialog">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell">
|
<el-form-item label="包机组名称">
|
<el-input v-model="editBaoJiGroup.value"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</div>
|
<div class="form-footer">
|
<el-button @click="editBaojiGroupOk">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script setup name="baojiMager">
|
import MyCard from './MyCard'
|
import FlexLayout from "@/components/FlexLayout";
|
import BaojiGroupList from './BaojiGroupList'
|
import uniqueByKey from '@/utils/uniqueByKey'
|
import isHasPermit from '@/utils/isHasPermit'
|
import { baoJiGroupList as baoJiGroupListFn, userList, stationList, addBaoJiGroup as addBaojiGroupFn, editBaoJiGroup as editBaoJiGroupFn, deleteBaoJiGroup, moveUserList, moveStationList } from "@/api/user"
|
import { ref, reactive, nextTick, computed, onMounted } from "vue";
|
import { useUserStore } from '@/store/user';
|
import { storeToRefs } from 'pinia';
|
import useElement from '@/hooks/useElement.js';
|
const userStore = useUserStore();
|
const { permits } = storeToRefs(userStore);
|
const { $loading, $confirm, $message } = useElement();
|
const isCanEdit = ref(isHasPermit("query_permit", permits.value));
|
|
const activeName = ref('baoji-group-user');
|
const baojiGroupList = ref([]);
|
const user = reactive({
|
data: [],
|
value: [],
|
});
|
const baoji = reactive({
|
data: [],
|
value: [],
|
});
|
|
const addBaojiGroup = reactive({
|
show: false,
|
value: '',
|
});
|
const editBaoJiGroup = reactive({
|
show: false,
|
value: '',
|
});
|
const searchParams = reactive({
|
baoji_group_id: '',
|
baoji_group_name: '',
|
});
|
|
const groupList = ref();
|
|
function initData() {
|
user.data = [];
|
user.value = [];
|
|
baoji.data = [];
|
baoji.value = [];
|
|
searchParams.baoji_group_id = '';
|
searchParams.baoji_group_name = '';
|
|
groupList.value.activeKey = "";
|
}
|
|
function searchBaojiGroupList() {
|
initData();
|
|
baoJiGroupListFn().then(res => {
|
let data = [];
|
if (res.code && res.data) {
|
data = res.data2.map(item => {
|
item.txt = item.baojiName;
|
item.key = item.id;
|
return item;
|
});
|
}
|
// 设置包机组列表
|
baojiGroupList.value = data;
|
}).catch(error => {
|
console.log(error);
|
});
|
}
|
|
function groupListClick(item) {
|
// 设置查询的值
|
searchParams.baoji_group_id = item.id;
|
searchParams.baoji_group_name = item.baojiName;
|
editBaoJiGroup.value = item.baojiName;
|
|
// 用户
|
getUserList();
|
// 机房
|
getStationList();
|
}
|
|
function getUserList() {
|
let id = searchParams.baoji_group_id;
|
userList({ id }).then(res => {
|
if (res.code && res.data) {
|
let userData = [];
|
let addData = [];
|
res.data2.usersAdded.forEach(item => {
|
item.key = item.uid;
|
item.label = item.uname;
|
item.disabled = !isCanEdit.value;
|
userData.push(item);
|
addData.push(item.uid);
|
});
|
res.data2.usersNotAdded.forEach(list => {
|
list.key = list.uid;
|
list.label = list.uname;
|
list.disabled = !isCanEdit.value;
|
userData.push(list);
|
});
|
user.data = userData;
|
user.value = addData;
|
}
|
})
|
}
|
|
function getStationList() {
|
let id = searchParams.baoji_group_id;
|
stationList({ id }).then(res => {
|
if (res.code && res.data) {
|
let notAdded = [];
|
let addData = [];
|
res.data2.stationsAdded.forEach(item => {
|
item.key = `${item.stationId}-${item.lockId}`;
|
item.label = `${item.lockName} (${item.stationName})`;
|
item.disabled = !isCanEdit.value;
|
notAdded.push(item);
|
addData.push(item.key);
|
});
|
res.data2.stationsNotAdded.forEach(list => {
|
list.key = `${list.stationId}-${list.lockId}`;
|
list.label = `${list.lockName} (${list.stationName})`;
|
list.disabled = !isCanEdit.value;
|
notAdded.push(list);
|
});
|
baoji.data = uniqueByKey('key', notAdded);
|
baoji.value = addData;
|
}
|
})
|
}
|
|
function checkBaojiGroup(value) {
|
let rs = {
|
code: 1,
|
message: '',
|
};
|
|
// 为空检测
|
if (value == '') {
|
rs.code = 0;
|
rs.message = "包机组名称不能为空";
|
return rs;
|
}
|
|
// 遍历包机组列表获取是否重名
|
for (let i = 0; i < baojiGroupList.value.length; i++) {
|
let _data = baojiGroupList.value[i];
|
if (value == _data.txt) {
|
rs.code = 0;
|
rs.message = value + "已存在";
|
break;
|
}
|
}
|
return rs;
|
}
|
|
function showAddDialog() {
|
// 显示添加面板并初始化值
|
addBaojiGroup.show = true;
|
addBaojiGroup.value = "";
|
}
|
|
function addBaojiGroupOk() {
|
// 添加包机组
|
let value = addBaojiGroup.value;
|
// 检测包机组用户的合法性
|
let checkResult = checkBaojiGroup(value);
|
if (checkResult.code == 0) {
|
// 提示信息
|
$message({
|
type: 'warning',
|
message: checkResult.message,
|
});
|
return;
|
}
|
// 请求后台
|
addBaojiGroupFn({ baojiName: value }).then(res => {
|
if (res.code && res.data) {
|
// 提示信息
|
$message({
|
type: 'success',
|
message: res.msg,
|
});
|
|
// 关闭弹出框
|
addBaojiGroup.show = false;
|
// 查询包机组
|
searchBaojiGroupList();
|
} else {
|
// 提示信息
|
$message({
|
type: 'error',
|
message: res.msg,
|
});
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
}
|
|
function showEditDialog() {
|
editBaoJiGroup.value = searchParams.baoji_group_name;
|
editBaoJiGroup.show = true;
|
}
|
|
function editBaojiGroupOk() {
|
let data = {
|
id: searchParams.baoji_group_id,
|
baojiName: editBaoJiGroup.value
|
}
|
// 检测包机组用户的合法性
|
let checkResult = checkBaojiGroup(data.baojiName);
|
if (checkResult.code == 0) {
|
// 提示信息
|
$message({
|
type: 'warning',
|
message: checkResult.message,
|
});
|
return;
|
}
|
// 请求后台
|
editBaoJiGroupFn(data).then(res => {
|
if (res.code && res.data) {
|
// 提示信息
|
$message({
|
type: 'success',
|
message: res.msg,
|
});
|
|
// 关闭弹出框
|
editBaoJiGroup.show = false;
|
// 查询包机组
|
searchBaojiGroupList();
|
} else {
|
// 提示信息
|
$message({
|
type: 'error',
|
message: res.msg,
|
});
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
}
|
|
function confirmDelBaojiGroup() {
|
let name = searchParams.baoji_group_name;
|
$confirm('删除' + name, () => {
|
// 删除包机组
|
delBaojiGroup();
|
});
|
}
|
|
function delBaojiGroup() {
|
let id = searchParams.baoji_group_id;
|
// 请求后台
|
deleteBaoJiGroup(id).then(res => {
|
if (res.code && res.data) {
|
// 提示信息
|
$message({
|
type: 'success',
|
message: res.msg,
|
});
|
|
// 查询包机组
|
searchBaojiGroupList();
|
} else {
|
// 提示信息
|
$message({
|
type: 'error',
|
message: res.msg,
|
});
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
}
|
|
function getUserListByuids(uids) {
|
let userList = user.data;
|
let result = [];
|
for (let i = 0; i < uids.length; i++) {
|
let uid = uids[i];
|
for (let k = 0; k < userList.length; k++) {
|
let user = userList[k];
|
if (user.uid == uid) {
|
result.push({
|
baojiId: searchParams.baoji_group_id,
|
// baoji_group_name: searchParams.baoji_group_name,
|
uid: user.uid,
|
// uname: user.uname,
|
});
|
break;
|
}
|
}
|
}
|
// console.log('result', result, '=============');
|
|
return result;
|
}
|
|
function userChange(list, type, values) {
|
let data = getUserListByuids(values);
|
let params = {
|
operationFlag: 1
|
}
|
// 根据类型确定事件
|
switch (type) {
|
case 'left'://移除
|
params.operationFlag = -1;
|
changeUser(params, data);
|
break;
|
case 'right'://添加
|
params.operationFlag = 1;
|
changeUser(params, data);
|
break;
|
}
|
}
|
|
function changeUser(params, data) {
|
moveUserList(params, data).then(res => {
|
if (res.code && res.data) {
|
// 提示信息
|
$message({
|
type: 'success',
|
message: res.msg,
|
});
|
getUserList();
|
} else {
|
// 提示信息
|
$message({
|
type: 'error',
|
message: res.msg,
|
});
|
getUserList();
|
}
|
})
|
}
|
|
function getUserListByKeys(keys) {
|
let baojiList = baoji.data;
|
let result = [];
|
for (let i = 0; i < keys.length; i++) {
|
let key = keys[i];
|
for (let k = 0; k < baojiList.length; k++) {
|
let baoji = baojiList[k];
|
if (baoji.key == key) {
|
const [stationId, lockId] = key.split('-');
|
result.push({
|
baojiId: searchParams.baoji_group_id,
|
stationId,
|
lockId,
|
});
|
break;
|
}
|
}
|
}
|
// console.log('result', result, '=============');
|
|
return result;
|
}
|
|
function baojiChange(list, type, values) {
|
// 包机组左右移动
|
let data = getUserListByKeys(values);
|
let params = {
|
operationFlag: 1
|
}
|
// 根据类型确定事件
|
switch (type) {
|
case 'left':
|
params.operationFlag = -1;
|
changeBaoji(params, data);
|
break;
|
case 'right':
|
params.operationFlag = 1;
|
changeBaoji(params, data);
|
break;
|
}
|
}
|
|
function changeBaoji(params, data) {
|
moveStationList(params, data).then(res => {
|
if (res.code && res.data) {
|
// 提示信息
|
$message({
|
type: 'success',
|
message: res.msg,
|
});
|
getStationList();
|
} else {
|
// 提示信息
|
$message({
|
type: 'error',
|
message: res.msg,
|
});
|
getStationList();
|
}
|
})
|
}
|
|
const getToolsState = computed(() => {
|
// 根据选中的状态确定包机组列表工具栏的状态
|
return searchParams.baoji_group_id == "" ? true : false;
|
});
|
|
onMounted(() => {
|
searchBaojiGroupList();
|
});
|
</script>
|
|
<style scoped lang="less">
|
.page-wrapper {
|
padding: 10px;
|
}
|
:deep(.flex-layout-body) {
|
margin-left: 10px;
|
border: 1px solid #0ff;
|
border-radius: 6px;
|
}
|
:deep(.el-transfer-panel) {
|
font-size: 16px;
|
background: #153953;
|
border: none;
|
padding: 18px 12px;
|
color: #fff;
|
display: flex;
|
flex-direction: column;
|
// border: 0.05rem solid #EBEEF5;
|
border-radius: 0.2rem;
|
overflow: hidden;
|
vertical-align: middle;
|
width: 500px;
|
max-height: 100%;
|
box-sizing: border-box;
|
position: relative;
|
.el-transfer-panel__header.el-transfer-panel__header {
|
height: 2rem;
|
line-height: 2rem;
|
background: #F5F7FA;
|
margin: 0;
|
padding-left: 0.75rem;
|
border: 0 none;
|
box-sizing: border-box;
|
color: #000;
|
|
background-color: #00253f;
|
border-bottom: none;
|
border-radius: 4px;
|
}
|
.el-transfer-panel__body.el-transfer-panel__body {
|
flex: 1;
|
border: 0 none;
|
.el-transfer-panel__filter{
|
text-align: center;
|
margin: 12px;
|
padding: 0;
|
border: 1px solid #0ff;
|
border-radius: 16px;
|
box-sizing: border-box;
|
display: flex;
|
width: auto;
|
.el-input__wrapper {
|
background: transparent;
|
box-shadow: none;
|
}
|
.el-input__inner {
|
height: 1.6em;
|
width: 100%;
|
font-size: 16px;
|
display: inline-block;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
// background-color: #214865;
|
border: 0 none;
|
color: #00fefe;
|
}
|
}
|
}
|
.el-checkbox__label.el-checkbox__label {
|
display: inline-block;
|
padding-left: 24px;
|
line-height: 12px;
|
font-size: 14px;
|
font-weight: 400;
|
color: #03d2d8;
|
span {
|
color: inherit;
|
}
|
}
|
}
|
:deep(.transfer-width480),
|
:deep(.transfer-width320) {
|
height: 100%;
|
display: flex;
|
justify-content: left;
|
|
.el-transfer__buttons {
|
width: 150px;
|
align-self: center;
|
display: inline-block;
|
vertical-align: middle;
|
padding: 0 1.5rem;
|
.el-button {
|
width: 100%;
|
color: #002740 !important;
|
background-color: #1ccfe5 !important;
|
border-color: #1ccfe5 !important;
|
margin-left: 0;
|
&:first-child {
|
margin-bottom: 10px;
|
}
|
&.is-disabled:hover,
|
&.is-disabled {
|
background-color: #1a98a6 !important;
|
border-color: #1a98a6 !important;
|
}
|
}
|
}
|
}
|
:deep(.el-transfer-panel__list) {
|
flex: 1;
|
overflow-y: auto;
|
margin: 0;
|
padding: 0.3rem 0;
|
list-style: none;
|
/* height: 12.3rem; */
|
overflow: auto;
|
box-sizing: border-box;
|
}
|
|
.w320 {
|
width: 320px;
|
}
|
.flex-page-content {
|
margin-left: 8px;
|
margin-right: 8px;
|
height: 100%;
|
padding: 0 8px;
|
:deep(.el-tabs) {
|
height: 100%;
|
}
|
}
|
|
.tab-pane-content {
|
height: 100%;
|
overflow-y: auto;
|
}
|
:deep(.el-tabs--border-card) {
|
border: 0 none;
|
background: transparent;
|
}
|
:deep(.el-tab-pane) {
|
height: 100%;
|
}
|
</style>
|
