327 lines
8.9 KiB
Vue
327 lines
8.9 KiB
Vue
<template>
|
|
<el-card class="content-div">
|
|
<div class="all-content">
|
|
<div class="top-div">
|
|
<el-button type="primary" @click="addData">新增</el-button>
|
|
</div>
|
|
<el-table :data="tableData" height="760" border stripe
|
|
:header-cell-style="{ background: '#F6F7FC' }">
|
|
<el-table-column type="index" label="序号" width="80" align="center" />
|
|
<el-table-column prop="name" label="通讯名称" width="200" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="description" label="通讯描述" width="200" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="drive" label="通讯驱动" width="200" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span>{{ qudongOptions[scope.row.type] }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="通讯状态" width="200" align="center">
|
|
<template #default="scope">
|
|
<span :style="{'color': getTextColor(scope.row.status)}"> {{ txStatus[scope.row.status] }} </span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="enable" label="启用状态" width="350" align="center">
|
|
<template #default="scope">
|
|
现在是 <el-tag :class="!scope.row.enable? 'stop':'start'">{{!scope.row.enable? '停用状态' : '启用状态'}} </el-tag> 您可以点击
|
|
<el-button type="primary" size="mini" @click="changeStatus(scope.row)" v-if="!scope.row.enable">
|
|
启用
|
|
</el-button>
|
|
<el-button size="mini" @click="changeStatus(scope.row)" v-else>
|
|
停用
|
|
</el-button>
|
|
<!-- <el-switch v-model="scope.row.enable" inline-prompt active-text="启用" inactive-text="停用" :active-value="true"
|
|
:inactive-value="false" active-color="#13ce66" inactive-color="#ddd" @change="changeStatus(scope.row)" /> -->
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<el-button type="primary" @click="openDetails(scope.row)">
|
|
详情
|
|
</el-button>
|
|
<el-button type="primary" @click="openPz(scope.row)">
|
|
配置
|
|
</el-button>
|
|
<el-button type="primary" @click="editData(scope.row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button type="danger" @click="delData(scope.row)">
|
|
删除
|
|
</el-button>
|
|
<el-button type="primary" @click="viewData(scope.row)">
|
|
设备
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<AddData
|
|
:formData="formData"
|
|
:type="type"
|
|
:qudongOptions="qudongOptions"
|
|
:dialogVisible="dialogVisible"
|
|
|
|
v-if="dialogVisible"
|
|
@dialogClose="dialogClose"
|
|
@dialogSuccess="dialogSuccess"
|
|
></AddData>
|
|
<PzSet
|
|
:dialogVisible="dialogVisible3"
|
|
:formData="formData"
|
|
:pztype="pztype"
|
|
:pztypecode="pztypecode"
|
|
v-if="dialogVisible3"
|
|
@dialogClose="dialogClose3"
|
|
@dialogSuccess="dialogSuccess3"
|
|
>
|
|
</PzSet>
|
|
<Details
|
|
:formData="formData"
|
|
:dialogVisible="dialogVisible4"
|
|
v-if="dialogVisible4"
|
|
@dialogClose="dialogClose4"
|
|
@dialogSuccess="dialogSuccess4"
|
|
>
|
|
</Details>
|
|
<AddData :formData="formData" :type="type" :qudongOptions="qudongOptions" :dialogVisible="dialogVisible"
|
|
v-if="dialogVisible" @dialogClose="dialogClose" @dialogSuccess="dialogSuccess"></AddData>
|
|
<ViewSet :formData="formData" :qudongOptions="qudongOptions" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
|
|
@dialogSuccess="dialogSuccess">
|
|
</ViewSet>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
|
import infoApi from "@/api/infoApi.js";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import AddData from "@/components/AddData.vue";
|
|
import PzSet from "@/components/PzSet.vue";
|
|
import Details from "@/components/Details.vue";
|
|
import ViewSet from "@/components/ViewSet.vue";
|
|
export default {
|
|
name: "page",
|
|
components: {
|
|
AddData,
|
|
PzSet,
|
|
Details,
|
|
ViewSet
|
|
},
|
|
setup() {
|
|
const state = reactive({
|
|
qudongOptions: [],
|
|
tableData: [],
|
|
formData: {},
|
|
dialogVisible: false,
|
|
dialogVisible1: false,
|
|
dialogVisible2: false,
|
|
dialogVisible3: false,
|
|
dialogVisible4: false,
|
|
type: '0', // 0新增 1 编辑
|
|
pztype: '',
|
|
pztypecode: '',
|
|
txStatus: [] //通讯状态
|
|
});
|
|
|
|
onMounted(() => {
|
|
getTxSupport();
|
|
getTableData();
|
|
getTxStatus();
|
|
});
|
|
// 获取通讯驱动
|
|
const getTxSupport = async () => {
|
|
|
|
const res = await infoApi.getTxSupport();
|
|
if (res.code == 0) {
|
|
state.qudongOptions = res.data;
|
|
}
|
|
|
|
|
|
};
|
|
// 获取通讯状态
|
|
const getTxStatus = async () => {
|
|
|
|
const res = await infoApi.getTxStatus();
|
|
if (res.code == 0) {
|
|
state.txStatus = res.data;
|
|
}
|
|
|
|
|
|
};
|
|
const getTableData = async () => {
|
|
const param = {
|
|
type: 0
|
|
}
|
|
const res = await infoApi.getTx(param);
|
|
if (res.code == 0) {
|
|
state.tableData = res.data.sort((a,b) => {
|
|
return (a.name > b.name ? 1 : -1)
|
|
});
|
|
}
|
|
};
|
|
const dialogClose = () => {
|
|
state.dialogVisible = false;
|
|
state.dialogVisible1 = false;
|
|
state.dialogVisible2 = false;
|
|
};
|
|
|
|
const dialogSuccess = () => {
|
|
state.dialogVisible = false;
|
|
getTableData();
|
|
};
|
|
|
|
const dialogClose1 = () => {
|
|
state.dialogVisible1 = false;
|
|
};
|
|
|
|
const dialogClose3 = () => {
|
|
state.dialogVisible3 = false;
|
|
};
|
|
const dialogClose4 = () => {
|
|
state.dialogVisible4 = false;
|
|
};
|
|
const dialogSuccess3 = () => {
|
|
state.dialogVisible3 = false;
|
|
getTableData();
|
|
};
|
|
const dialogSuccess4 = () => {
|
|
state.dialogVisible4 = false;
|
|
};
|
|
|
|
const dialogSuccess1 = () => {
|
|
state.dialogVisible1 = false;
|
|
state.dialogVisible2 = false;
|
|
getTableData();
|
|
};
|
|
|
|
|
|
const addData = () => {
|
|
state.formData = {
|
|
name: '',
|
|
type: 1,
|
|
description: '',
|
|
};
|
|
state.dialogVisible = true;
|
|
state.type = '0';
|
|
};
|
|
|
|
const editData = (item) => {
|
|
state.formData = JSON.parse(JSON.stringify(item));
|
|
state.dialogVisible = true;
|
|
state.type = '1'
|
|
};
|
|
|
|
const delData = (item) => {
|
|
ElMessageBox.confirm("确定删除该数据?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(async () => {
|
|
let param = {
|
|
name: state.formData.name
|
|
}
|
|
const res = await infoApi.delTx(param);
|
|
if (res.code == 0) {
|
|
ElMessage.success(res.message || "删除成功");
|
|
getTableData();
|
|
} else {
|
|
ElMessage.error(res.message | "删除失败");
|
|
}
|
|
})
|
|
.catch(() => {
|
|
ElMessage.info("已取消删除");
|
|
});
|
|
};
|
|
|
|
const manageData = (item) => {
|
|
state.formData = JSON.parse(JSON.stringify(item));
|
|
state.dialogVisible1 = true;
|
|
};
|
|
|
|
const viewData = (item) => {
|
|
state.dialogVisible2 = true;
|
|
state.formData = JSON.parse(JSON.stringify(item));
|
|
}
|
|
|
|
const changeStatus = async (item) => {
|
|
const param = {
|
|
name: item.name,
|
|
}
|
|
const res = !item.enable ? await infoApi.startStatus(param) : await infoApi.stopStatus(param);
|
|
if (res.code == 0) {
|
|
ElMessage.success(res.msg || "请求成功");
|
|
getTableData();
|
|
} else {
|
|
ElMessage.error(res.msg);
|
|
}
|
|
};
|
|
|
|
const openPz = (item) => {
|
|
state.dialogVisible3 = true;
|
|
state.pztype = state.qudongOptions[item.type];
|
|
state.pztypecode = item.type;
|
|
state.formData = JSON.parse(JSON.stringify(item));
|
|
}
|
|
const openDetails = (item) => {
|
|
state.formData = JSON.parse(JSON.stringify(item));
|
|
state.dialogVisible4 = true;
|
|
|
|
}
|
|
|
|
const getTextColor = (type) => {
|
|
if(type == 1) {
|
|
return ''
|
|
}
|
|
if(type == 2) {
|
|
return 'green'
|
|
}
|
|
if(type == 3) {
|
|
return 'red'
|
|
}
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
addData,
|
|
editData,
|
|
delData,
|
|
manageData,
|
|
dialogClose,
|
|
dialogSuccess,
|
|
changeStatus,
|
|
dialogClose1,
|
|
dialogSuccess1,
|
|
dialogClose3,
|
|
dialogClose4,
|
|
dialogSuccess3,
|
|
dialogSuccess4,
|
|
openPz,
|
|
openDetails,
|
|
viewData,
|
|
getTextColor
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.all-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.top-div {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.txStatusDiv {
|
|
padding: 0 15px;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
}
|
|
.stop {
|
|
color: red;
|
|
}
|
|
.start {
|
|
color: #009fa4;
|
|
}
|
|
</style>
|