<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.dischargePlanFlag?'danger':'primary'"
|
size="mini"
|
>{{
|
item.dischargePlanFlag?'取消班组':'设置班组' }}</el-button
|
> -->
|
</div>
|
</li>
|
</ul>
|
<!-- 冲突机房显示 -->
|
<el-dialog
|
title="冲突机房显示"
|
width="auto"
|
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 { dischargeFlag } from "@/api/user.js";
|
import ClashStation from "./clashStation.vue";
|
import { ref, h, onMounted } from "vue";
|
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.dischargePlanFlag) {
|
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);
|
});
|
}
|
|
// function handleChangeGroup(data) {
|
// let flag = data.dischargePlanFlag ? 0 : 1;
|
// let baoJiGroupld = data.baoJiGroupId;
|
// dischargeFlag(baoJiGroupld, flag).then(res => {
|
// let rs = res.data;
|
// 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.stationName1 + "-" + item.stationName2 + "-" + item.stationName5 + "-" + item.stationName3;
|
// return item;
|
// });
|
// clashStationDialog.value = true;
|
// }
|
// );
|
// } else {
|
// $message.error(rs.msg);
|
// }
|
// }
|
// });
|
// }
|
|
defineExpose({
|
activeKey
|
});
|
</script>
|
|
<style scoped>
|
.baoji-group-list a {
|
display: block;
|
padding: 6px 8px;
|
text-indent: 10px;
|
text-decoration: none;
|
color: #FFFFFF;
|
font-size: 14px;
|
}
|
|
.baoji-group-list a:hover {
|
background-color: #214865;
|
}
|
|
.baoji-group-list a.active-item {
|
background-color: #00fefe;
|
color: #021a64;
|
}
|
|
.no-data-text {
|
padding-top: 18px;
|
text-align: center;
|
}
|
|
.baoji-group-li {
|
position: relative;
|
}
|
|
.baoji-group-tools {
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
</style>
|
