<template>
|
<div class="baoji-group-list">
|
<ul>
|
<li v-if="list.length == 0">
|
<div class="no-data-text">暂无数据</div>
|
</li>
|
<li class="baoji-group-li" v-for="item in list" :key="item.key">
|
<a
|
href="javascript:;"
|
:class="{'active-item': item.key == activeKey}"
|
@click="handleClick(item)"
|
>{{item.txt}}</a
|
>
|
<div class="baoji-group-tools" v-if="showGroupBtn">
|
<el-button
|
@click="changeGroup(item)"
|
:type="item.teamFlag?'danger':'primary'"
|
size="small"
|
>{{
|
item.teamFlag?'取消班组':'设置班组' }}</el-button
|
>
|
</div>
|
</li>
|
</ul>
|
<!-- 冲突机房显示 -->
|
<el-dialog
|
title="冲突电源显示"
|
width="600"
|
v-model="clashStationDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<clash-station :data="tableData"></clash-station>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="BaojiGroupList">
|
import { updateBaojiFlag } from "@/api/user.js";
|
import ClashStation from "./clashStation.vue";
|
import { ref, h, onMounted } from "vue";
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm, $alert } = useElement();
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
const props = defineProps({
|
list: {
|
type: Array,
|
default: () => []
|
},
|
showGroupBtn: {
|
type: Boolean,
|
default: false
|
}
|
});
|
|
const emit = defineEmits(['handle-click', 'success']);
|
const activeKey = ref('');
|
const clashStationDialog = ref(false);
|
const tableData = ref([]);
|
|
function handleClick(item) {
|
if (activeKey.value != item.key) {
|
activeKey.value = item.key;
|
emit('handle-click', item);
|
}
|
}
|
|
function changeGroup(data) {
|
let msg = "";
|
if (data.teamFlag) {
|
msg = h('p', null, [
|
h('span', null, '把'),
|
h('span', { style: 'color: teal;font-size:18px' }, data.txt),
|
h('span', null, '从班组中'),
|
h('span', { style: 'color: teal;font-size:18px' }, "移除"),
|
h('span', null, "吗？"),
|
h('p', null, "这可能导致生成放电计划的时候跳过该包机组！")
|
]);
|
} else {
|
msg = h('p', null, [
|
h('span', null, '把'),
|
h('span', { style: 'color: teal;font-size:18px' }, data.txt),
|
h('span', null, '设置为班组吗'),
|
]);
|
}
|
|
// $confirm(msg, () => {
|
// handleChangeGroup(data);
|
// });
|
ElMessageBox({
|
title: '提示',
|
message: msg,
|
showCancelButton: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
beforeClose: (action, instance, done) => {
|
if (action === 'confirm') {
|
handleChangeGroup(data);
|
done();
|
} else {
|
done();
|
}
|
}
|
});
|
}
|
|
function handleChangeGroup(data) {
|
let flag = data.teamFlag ? 0 : 1;
|
let baoJiGroupId = data.baojiGroupId;
|
updateBaojiFlag(baoJiGroupId, flag).then(res => {
|
let rs = res;
|
if (rs.code == 1 && rs.data) {
|
let msg = data.dischargePlanFlag ? "移除成功" : "设置成功";
|
$message.success(msg);
|
emit('success', true);
|
} else {
|
if (rs.data2) {
|
$alert("当前包机组与其他班组管理的电源存在冲突，请检查!",
|
() => {
|
tableData.value = rs.data2.map(item => {
|
item.stationName = item.provice + "-" + item.city + "-" + item.country + "-" + item.stationName + "-" + item.powerName;
|
return item;
|
});
|
clashStationDialog.value = true;
|
}
|
);
|
} else {
|
$message.error(rs.msg);
|
}
|
}
|
});
|
}
|
|
defineExpose({
|
activeKey
|
});
|
</script>
|
|
<style scoped lang="less">
|
.baoji-group-list a {
|
display: block;
|
padding: 6px 8px;
|
text-indent: 10px;
|
text-decoration: none;
|
background: #0F4762;
|
color: #5DC3F1;
|
font-size: 14px;
|
}
|
|
.baoji-group-list a:hover {
|
background-color: #214865;
|
}
|
|
.baoji-group-list a.active-item.active-item {
|
background-color: #00fefe;
|
color: #021a64;
|
}
|
|
.no-data-text {
|
padding-top: 18px;
|
text-align: center;
|
}
|
|
.baoji-group-li {
|
// position: relative;
|
margin-top: 4px;
|
display: flex;
|
a {
|
flex: 1;
|
}
|
&:nth-child(2n) a {
|
background: #0B3C5A;
|
}
|
}
|
|
.baoji-group-tools {
|
// position: absolute;
|
// top: 0;
|
// right: 0;
|
margin-left: 0.6em;
|
}
|
</style>
|
