<script setup name="baoJi">
|
import { ref, reactive, onMounted, onActivated } from "vue";
|
import {
|
getBaojiInfo,
|
getAllDevs,
|
getAllUsers,
|
addBaoji,
|
opreateDevInBaoji,
|
opreateUsrInBaoji,
|
delBaoji,
|
updateBaoji,
|
} from "./api";
|
import { Plus } from "@element-plus/icons-vue";
|
import useElement from "@/hooks/useElement.js";
|
|
const { $loading, $message, $confirm } = useElement();
|
|
const datas = reactive({
|
list: [],
|
addedUsers: [],
|
addedDevs: [],
|
currentGrp: {},
|
allUsers: [],
|
allDevs: [],
|
addGrpName: "",
|
addGrpTitle: "",
|
isEdit: false,
|
updateId: "",
|
});
|
const acTab = ref("user");
|
const addGrpVisible = ref(false);
|
|
function getList(params) {
|
getBaojiInfo()
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
// 如果没有选中的包机组 就选中第一个
|
if (!datas.currentGrp.baojiGroupId) {
|
selectGroup(_list[0]);
|
}
|
}
|
datas.list = _list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
function filterMethod(query, item) {
|
return item.label.includes(query);
|
}
|
|
function getUsers(params) {
|
getAllUsers()
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let _list = [];
|
if (code && data) {
|
_list = data2.map((v) => ({ label: v.uname, key: v.uid }));
|
}
|
datas.allUsers = _list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
function getDevs(params) {
|
getAllDevs()
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let _list = [];
|
if (code && data) {
|
_list = data2.map((v) => ({
|
label: `${v.devIdcode} (${v.devIp})`,
|
key: v.devId,
|
}));
|
}
|
datas.allDevs = _list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
function addGrp() {
|
datas.addGrpName = "";
|
datas.addGrpTitle = "添加包机组";
|
datas.isEdit = false;
|
addGrpVisible.value = true;
|
}
|
function addCancel() {
|
addGrpVisible.value = false;
|
}
|
function addOk() {
|
if (!datas.addGrpName) {
|
$message.error("请输入包机组名称");
|
return false;
|
}
|
let loading = $loading();
|
|
let addEdit;
|
let params;
|
if (datas.isEdit) {
|
addEdit = updateBaoji;
|
params = {
|
baojiGroupName: datas.addGrpName,
|
baojiGroupId: datas.updateId,
|
};
|
} else {
|
addEdit = addBaoji;
|
params = {
|
baojiName: datas.addGrpName,
|
};
|
}
|
addEdit(params)
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
getList();
|
$message.success("操作成功");
|
addGrpVisible.value = false;
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
function selectGroup(item) {
|
datas.currentGrp = item;
|
datas.addedDevs = item.devList.map((v) => v.devId);
|
datas.addedUsers = item.usrList.map((v) => v.uid);
|
}
|
|
function grpUserChange(list, type, values) {
|
let params = {
|
addusrList: [],
|
delusrList: [],
|
};
|
let baojiGroupId = datas.currentGrp.baojiGroupId;
|
// 根据类型确定事件
|
switch (type) {
|
case "left":
|
params.delusrList = values.map((v) => ({ uid: v, baojiGroupId }));
|
break;
|
case "right":
|
params.addusrList = values.map((v) => ({ uid: v, baojiGroupId }));
|
break;
|
}
|
let loading = $loading();
|
opreateUsrInBaoji(params)
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
getList();
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
|
function grpDevChange(list, type, values) {
|
let params = {
|
adddevList: [],
|
deldevList: [],
|
};
|
let baojiGroupId = datas.currentGrp.baojiGroupId;
|
// 根据类型确定事件
|
switch (type) {
|
case "left":
|
params.deldevList = values.map((v) => ({ devId: v, baojiGroupId }));
|
break;
|
case "right":
|
params.adddevList = values.map((v) => ({ devId: v, baojiGroupId }));
|
break;
|
}
|
let loading = $loading();
|
opreateDevInBaoji(params)
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
// console.log(data);
|
$message.success("操作成功");
|
getList();
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
function updateGrp(params) {
|
datas.addGrpName = params.baojiGroupName;
|
datas.updateId = params.baojiGroupId;
|
datas.addGrpTitle = "编辑包机组";
|
datas.isEdit = true;
|
addGrpVisible.value = true;
|
}
|
|
function delGrp(params) {
|
let loading = $loading();
|
delBaoji([params])
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
if (params == datas.currentGrp.baojiGroupId) {
|
datas.currentGrp = {};
|
}
|
getList();
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
|
onMounted(() => {
|
getList();
|
getUsers();
|
getDevs();
|
});
|
|
onActivated(() => {
|
getList();
|
getUsers();
|
getDevs();
|
});
|
</script>
|
|
<template>
|
<div class="page">
|
<!-- 左侧列表 -->
|
<div class="side">
|
<div class="s-header">
|
<div class="title">包机组列表</div>
|
<div class="btn-list">
|
<el-button
|
class="card-tools"
|
size="small"
|
type="primary"
|
:icon="Plus"
|
@click="addGrp"
|
>新增</el-button
|
>
|
</div>
|
</div>
|
<!-- -->
|
<div class="list">
|
<div class="scroll">
|
<div
|
:class="[
|
'item',
|
{ active: item.baojiGroupId == datas.currentGrp.baojiGroupId },
|
]"
|
v-for="item in datas.list"
|
:key="item.baojiGroupId"
|
@click="selectGroup(item)"
|
>
|
<div class="name">{{ item.baojiGroupName }}</div>
|
<div class="btn-grp">
|
<el-button
|
class="card-tools"
|
size="small"
|
type="primary"
|
@click="updateGrp(item)"
|
>编辑</el-button
|
>
|
<el-button
|
class="card-tools"
|
size="small"
|
type="warning"
|
@click="delGrp(item.baojiGroupId)"
|
>删除</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 右侧 -->
|
<div class="p-content">
|
<!-- tab切换 -->
|
<el-tabs v-model="acTab" type="border-card" class="tabs yc-tabs">
|
<el-tab-pane label="包机组用户" name="user">
|
<div class="tab-content">
|
<el-transfer
|
v-model="datas.addedUsers"
|
class="yc-transfer"
|
filterable
|
:filter-method="filterMethod"
|
filter-placeholder="请输入关键字"
|
:titles="['未添加用户', '已添加用户']"
|
:button-texts="['移除', '添加']"
|
:data="datas.allUsers"
|
@change="grpUserChange"
|
/>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="包机组设备" name="dev"
|
><div class="tab-content">
|
<el-transfer
|
v-model="datas.addedDevs"
|
class="yc-transfer"
|
filterable
|
:filter-method="filterMethod"
|
:titles="['未添加设备', '已添加设备']"
|
:button-texts="['移除', '添加']"
|
filter-placeholder="请输入关键字"
|
:data="datas.allDevs"
|
@change="grpDevChange"
|
/></div
|
></el-tab-pane>
|
</el-tabs>
|
</div>
|
<el-dialog
|
:title="datas.addGrpTitle"
|
v-model="addGrpVisible"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
width="480px"
|
center
|
>
|
<!-- top="0" -->
|
<el-form-item label="包机组名称">
|
<el-input v-model="datas.addGrpName"></el-input>
|
</el-form-item>
|
<div class="footer">
|
<el-button @click="addCancel">取消</el-button>
|
<el-button type="primary" @click="addOk">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page {
|
height: 100%;
|
padding: 4px;
|
display: flex;
|
.side {
|
width: 360px;
|
margin-right: 10px;
|
background: #1a585d;
|
display: flex;
|
flex-direction: column;
|
.s-header {
|
display: flex;
|
justify-content: space-between;
|
|
padding: 4px 12px;
|
.title {
|
font-size: 18px;
|
color: #0ff;
|
font-weight: bold;
|
}
|
}
|
.list {
|
flex: 1;
|
position: relative;
|
.scroll {
|
position: absolute;
|
left: 4px;
|
top: 4px;
|
bottom: 4px;
|
right: 4px;
|
overflow-y: auto;
|
.item {
|
background: #000;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 4px;
|
&.active {
|
background: #00bcbc;
|
}
|
}
|
.btn-grp {
|
flex: 0 0 116px;
|
}
|
}
|
}
|
}
|
.p-content {
|
flex: 1;
|
background: #1a585d;
|
position: relative;
|
.tabs {
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
height: 100%;
|
.tab-content {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
.footer {
|
text-align: right;
|
}
|
}
|
</style>
|
