|
|
<template>
|
|
|
<div class="icdConfig">
|
|
|
<div class="configHead">
|
|
|
<div class="upgradeBox">
|
|
|
<h3 class="lableBox">文件上传：</h3>
|
|
|
<el-upload
|
|
|
class="upload-demo"
|
|
|
ref="upload"
|
|
|
action="/cac-api/icdconfig/upload"
|
|
|
:limit="1"
|
|
|
:file-list="fileList"
|
|
|
:data="reportData"
|
|
|
:auto-upload="false"
|
|
|
:on-success="handleAvatarSuccess"
|
|
|
@before-upload="beforeAvatarUpload"
|
|
|
>
|
|
|
<el-button slot="trigger" size="small" type="primary"
|
|
|
>选取文件</el-button
|
|
|
>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
<el-button
|
|
|
class="uploadBtn"
|
|
|
size="small"
|
|
|
type="primary"
|
|
|
@click="submitUpload"
|
|
|
>上传到服务器</el-button
|
|
|
>
|
|
|
</div>
|
|
|
<div class="iedContain">
|
|
|
<div class="leftMenu">
|
|
|
<p
|
|
|
class="iedame"
|
|
|
v-for="(item, index) in iedListData"
|
|
|
:key="index"
|
|
|
:class="{ 'is-selected': selectedIndex === index }"
|
|
|
@click="handleClick(item, index)"
|
|
|
>
|
|
|
<i class="el-icon-document"></i>{{ item }}
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="icdTableBox" v-if="iedListData.length !== 0">
|
|
|
<h3>{{ iedNameTitle }}</h3>
|
|
|
<el-table
|
|
|
v-loading="icdLoading"
|
|
|
:data="icdTableData"
|
|
|
stripe
|
|
|
border
|
|
|
style="width: 100%"
|
|
|
height="calc(100% - 40px)"
|
|
|
>
|
|
|
<el-table-column prop="iedName" label="iedName"> </el-table-column>
|
|
|
<el-table-column prop="ldeviceInst" label="ldeviceInst">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="lnClass" label="lnClass"> </el-table-column>
|
|
|
<!-- <el-table-column prop="doName" label="doName"> </el-table-column> -->
|
|
|
<el-table-column prop="tableName" label="tableName">
|
|
|
<template slot-scope="scope">
|
|
|
<el-select
|
|
|
v-show="scope.$index == cellIndex"
|
|
|
v-model="tableName"
|
|
|
placeholder="请选择"
|
|
|
@change="changeTablename"
|
|
|
size="mini"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in tableOptions"
|
|
|
:key="item"
|
|
|
:label="item"
|
|
|
:value="item"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
<span v-show="scope.$index != cellIndex">{{
|
|
|
scope.row.tableName
|
|
|
}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- <el-table-column prop="colName" label="colName"> </el-table-column> -->
|
|
|
|
|
|
<el-table-column label="操作" width="400" class-name="editClass">
|
|
|
<template slot-scope="scope">
|
|
|
<el-link
|
|
|
v-if="scope.$index != cellIndex"
|
|
|
type="primary"
|
|
|
@click="handleEditClick(scope)"
|
|
|
size="small"
|
|
|
icon="el-icon-document"
|
|
|
>
|
|
|
tableName配置
|
|
|
</el-link>
|
|
|
<el-link
|
|
|
v-else
|
|
|
type="primary"
|
|
|
@click="handleSaveClick(scope)"
|
|
|
size="small"
|
|
|
icon="el-icon-document"
|
|
|
>
|
|
|
保存
|
|
|
</el-link>
|
|
|
<el-link
|
|
|
type="primary"
|
|
|
@click="handlecolConfigClick(scope)"
|
|
|
size="small"
|
|
|
icon="el-icon-document"
|
|
|
>colName配置</el-link
|
|
|
>
|
|
|
<el-link
|
|
|
type="danger"
|
|
|
@click="handleDeleteClick(scope.row)"
|
|
|
size="small"
|
|
|
icon="el-icon-delete"
|
|
|
>删除</el-link
|
|
|
>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<colDialog ref="colDialogRef" :colChildData="colChildData"></colDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import {
|
|
|
iedListApi,
|
|
|
icdListApi,
|
|
|
icdUploadApi,
|
|
|
icdUpdateApi,
|
|
|
icdDeleteApi,
|
|
|
tableListApi,
|
|
|
} from "@/utils/api/index";
|
|
|
import colDialog from "./colDialog.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
colDialog,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
fileList: [], //上传列表
|
|
|
reportData: {},
|
|
|
iedListData: [], //左侧ied列表
|
|
|
selectedIndex: 0, //默认选中第一个
|
|
|
iedNameTitle: "", //标题
|
|
|
icdTableData: [], //表格数据
|
|
|
icdLoading: true,
|
|
|
editDialogshow: false,
|
|
|
tableName: "",
|
|
|
currentData: "", //选中的数据
|
|
|
tableOptions: [],
|
|
|
tableSelectShow: false,
|
|
|
cellIndex: null,
|
|
|
colChildData: "",
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getiedList(); //获取iedName列表
|
|
|
},
|
|
|
methods: {
|
|
|
//点击升级确定
|
|
|
beforeAvatarUpload(file) {
|
|
|
console.log(this.reportData.title);
|
|
|
console.log(file);
|
|
|
},
|
|
|
//上传apk
|
|
|
submitUpload() {
|
|
|
this.$refs.upload.submit();
|
|
|
},
|
|
|
handleAvatarSuccess(res, file) {
|
|
|
console.log(res);
|
|
|
if (res.success) {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "文件上传成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
|
|
|
this.$refs.upload.clearFiles();
|
|
|
this.getiedList(); //获取iedName列表
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "文件上传失败，请重新上传",
|
|
|
type: "error",
|
|
|
});
|
|
|
this.$refs.upload.clearFiles();
|
|
|
}
|
|
|
},
|
|
|
//获取ied左侧列表
|
|
|
getiedList() {
|
|
|
iedListApi()
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.iedListData = res.data;
|
|
|
this.handleClick(res.data[0], 0);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//通过iedname 获取列表
|
|
|
handleClick(item, index) {
|
|
|
this.cellIndex = null;
|
|
|
this.selectedIndex = index;
|
|
|
console.log(item, index);
|
|
|
this.iedNameTitle = item;
|
|
|
this.icdLoading = true;
|
|
|
this.geticdList(item);
|
|
|
this.getTableList();
|
|
|
},
|
|
|
//获取修改的tableList和colLost
|
|
|
getTableList() {
|
|
|
tableListApi()
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.tableOptions = res.data;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
changeTablename(val) {
|
|
|
this.tableName = val;
|
|
|
},
|
|
|
//获取icd
|
|
|
geticdList(val, index) {
|
|
|
this.icdTableData = [];
|
|
|
icdListApi({
|
|
|
iedName: val,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.icdLoading = false;
|
|
|
this.icdTableData = res.data;
|
|
|
this.colChildData = res.data[index];
|
|
|
console.log("我是更新后的", this.colChildData);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.icdLoading = false;
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//更新icd类型
|
|
|
handleEditClick({ $index, row }) {
|
|
|
this.tableName = "";
|
|
|
this.tableSelectShow = true;
|
|
|
this.cellIndex = $index;
|
|
|
},
|
|
|
//保存tableName
|
|
|
handleSaveClick({ row }) {
|
|
|
this.cellIndex = null;
|
|
|
icdUpdateApi({
|
|
|
tableName: this.tableName,
|
|
|
id: row.id,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.success) {
|
|
|
this.cellIndex = null;
|
|
|
this.geticdList(row.iedName);
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
|
|
|
//删除icd类型配置
|
|
|
handleDeleteClick(val) {
|
|
|
console.log(val);
|
|
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
icdDeleteApi({
|
|
|
id: val.id,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "文件删除成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
this.geticdList(val.iedName);
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
//this.getactivityList();
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
//获取col 配置
|
|
|
handlecolConfigClick({ $index, row }) {
|
|
|
if (row.tableName == null || row.tableName == "") {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "请先配置tableName",
|
|
|
type: "success",
|
|
|
});
|
|
|
// this.handleEditClick(val);
|
|
|
} else {
|
|
|
console.log(row, $index);
|
|
|
this.$refs.colDialogRef.display(row, $index);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.icdConfig {
|
|
|
width: calc(100% - 24px);
|
|
|
overflow-x: hidden;
|
|
|
background: rgba(8, 9, 36, 0.28);
|
|
|
|
|
|
box-shadow: inset 0 4px 44px 0 #106cde;
|
|
|
padding: 0px 12px;
|
|
|
height: 100%;
|
|
|
.configHead {
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.upgradeBox {
|
|
|
display: flex;
|
|
|
.lableBox {
|
|
|
font-size: 14px;
|
|
|
font-weight: normal;
|
|
|
width: 78px;
|
|
|
}
|
|
|
.upload-demo {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-direction: row-reverse;
|
|
|
margin-right: 16px;
|
|
|
.el-upload-list {
|
|
|
width: 320px;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
border: 1px solid #dcdfe6;
|
|
|
background: #fff;
|
|
|
margin-right: 12px;
|
|
|
border-radius: 4px;
|
|
|
.el-upload-list__item {
|
|
|
transition: none;
|
|
|
font-size: 14px;
|
|
|
color: #606266;
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 4px;
|
|
|
width: 100%;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
margin-top: 0px !important;
|
|
|
.el-icon-close {
|
|
|
top: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.uploadBtn {
|
|
|
}
|
|
|
}
|
|
|
.iedContain {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
margin-top: 10px;
|
|
|
height: calc(100% - 60px);
|
|
|
display: flex;
|
|
|
.leftMenu {
|
|
|
width: 200px;
|
|
|
//padding: 0px 10px 0px 10px;
|
|
|
height: calc(100% - 2px);
|
|
|
border: 1px solid #dcdfe6;
|
|
|
overflow-y: auto;
|
|
|
.iedame {
|
|
|
line-height: 28px;
|
|
|
height: 28px;
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
|
padding-left: 10px;
|
|
|
padding-right: 10px;
|
|
|
cursor: pointer;
|
|
|
i {
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
&:hover {
|
|
|
// background: #3889cf;
|
|
|
color: #3889cf;
|
|
|
}
|
|
|
}
|
|
|
.is-selected {
|
|
|
background: #3889cf;
|
|
|
color: #fff;
|
|
|
&:hover {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icdTableBox {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
margin-left: 12px;
|
|
|
//border: 1px solid #dcdfe6;
|
|
|
height: calc(100% - 2px);
|
|
|
h3 {
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
margin-bottom: 8px;
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.el-table {
|
|
|
.editClass {
|
|
|
.el-link.el-link--primary {
|
|
|
margin-right: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.editDialogBox {
|
|
|
.el-dialog {
|
|
|
margin-top: 0 !important;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
.el-select {
|
|
|
width: 376px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|