|
|
<template>
|
|
|
<div class="colConfig">
|
|
|
<el-dialog
|
|
|
class="colDialogBox"
|
|
|
title="col配置"
|
|
|
:visible.sync="colDialogshow"
|
|
|
width="1020px"
|
|
|
@close="hide"
|
|
|
:close-on-click-modal="false"
|
|
|
>
|
|
|
<div class="colContain">
|
|
|
<div class="bindBox" v-if="multipleSelection.length > 0">
|
|
|
<el-link
|
|
|
type="primary"
|
|
|
@click="handleBindClick()"
|
|
|
size="small"
|
|
|
icon="el-icon-connection"
|
|
|
>批量配置字段名</el-link
|
|
|
>
|
|
|
</div>
|
|
|
<el-table
|
|
|
v-loading="colLoading"
|
|
|
:data="attTableList"
|
|
|
stripe
|
|
|
border
|
|
|
style="width: 100%"
|
|
|
height="calc(100% - 0px)"
|
|
|
@selection-change="handleSelectionChange"
|
|
|
>
|
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
|
<el-table-column prop="doName" label="属性(备注)">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.doName }} ({{ scope.row.description }})</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="param" label="参数"> </el-table-column>
|
|
|
<el-table-column prop="colName" label="字段名">
|
|
|
<template slot-scope="scope">
|
|
|
<el-select
|
|
|
filterable
|
|
|
v-show="scope.$index == cellIndex"
|
|
|
v-model="colName"
|
|
|
placeholder="请选择"
|
|
|
size="mini"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in colOptions"
|
|
|
:key="item.name"
|
|
|
:label="item.name"
|
|
|
:value="item.name"
|
|
|
>
|
|
|
{{ item.name
|
|
|
}}<span v-if="item.comment != '' && item.comment != null"
|
|
|
>({{ item.comment }})</span
|
|
|
>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
<span v-show="scope.$index != cellIndex">{{
|
|
|
scope.row.colName
|
|
|
}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column label="操作" width="300" class-name="editClass">
|
|
|
<template slot-scope="scope">
|
|
|
<el-link
|
|
|
v-if="scope.$index != cellIndex"
|
|
|
type="primary"
|
|
|
@click="handlecolEditClick(scope)"
|
|
|
size="small"
|
|
|
icon="el-icon-document"
|
|
|
:disabled="multipleSelection.length > 0"
|
|
|
>
|
|
|
配置字段名
|
|
|
</el-link>
|
|
|
<el-link
|
|
|
v-else
|
|
|
type="success"
|
|
|
@click="handlecolSaveClick(scope)"
|
|
|
size="small"
|
|
|
icon="el-icon-document"
|
|
|
>
|
|
|
保存
|
|
|
</el-link>
|
|
|
<el-link
|
|
|
type="danger"
|
|
|
@click="handleDeleteClick(scope.row)"
|
|
|
size="small"
|
|
|
icon="el-icon-delete"
|
|
|
:disabled="multipleSelection.length > 0"
|
|
|
>删除</el-link
|
|
|
>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
width="450px"
|
|
|
title="批量配置字段名"
|
|
|
:visible.sync="innerVisible"
|
|
|
append-to-body
|
|
|
class="colBlindDialog"
|
|
|
>
|
|
|
<el-form
|
|
|
label-position="left"
|
|
|
ref="formInfo"
|
|
|
label-width="108px"
|
|
|
:rules="rules"
|
|
|
:model="formInfo"
|
|
|
>
|
|
|
<el-form-item label="选择字段名：" prop="colName">
|
|
|
<el-select
|
|
|
filterable
|
|
|
v-model="formInfo.colName"
|
|
|
placeholder="请选择"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in colOptions"
|
|
|
:key="item.name"
|
|
|
:label="item.name"
|
|
|
:value="item.name"
|
|
|
>
|
|
|
{{ item.name
|
|
|
}}<span v-if="item.comment != '' && item.comment != null"
|
|
|
>({{ item.comment }})</span
|
|
|
>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="innerVisible = false">取 消</el-button>
|
|
|
<el-button type="primary" @click="submitSetForm()">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button type="primary" @click="hide">关 闭</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { colListApi, icdupdateAttApi, deleteAttApi } from "@/utils/api/index";
|
|
|
export default {
|
|
|
props: ["colChildData"],
|
|
|
data() {
|
|
|
return {
|
|
|
colDialogshow: false,
|
|
|
innerVisible: false,
|
|
|
colTableData: {},
|
|
|
colLoading: false,
|
|
|
colName: "",
|
|
|
colOptions: [],
|
|
|
multipleSelection: [],
|
|
|
colData: "",
|
|
|
cellIndex: null,
|
|
|
attTableList: [],
|
|
|
colIndex: 0,
|
|
|
formInfo: {
|
|
|
colName: "",
|
|
|
},
|
|
|
rules: {
|
|
|
colName: [
|
|
|
{ required: true, message: "请选择字段名", trigger: "change" },
|
|
|
],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
colChildData: {
|
|
|
handler(newVal, oldVal) {
|
|
|
if (newVal && newVal.attList) {
|
|
|
console.log("gaibian", newVal);
|
|
|
this.attTableList = newVal.attList;
|
|
|
}
|
|
|
},
|
|
|
immediate: true,
|
|
|
deep: true, //deep，默认值是 false，代表是否深度监听。
|
|
|
},
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
//修改
|
|
|
handlecolEditClick({ $index, row }) {
|
|
|
this.colName = row.colName;
|
|
|
this.cellIndex = $index;
|
|
|
this.colData = row;
|
|
|
},
|
|
|
//多选
|
|
|
handleSelectionChange(val) {
|
|
|
this.multipleSelection = val;
|
|
|
//console.log(this.multipleSelection);
|
|
|
},
|
|
|
handleBindClick() {
|
|
|
//点击绑定弹出框 传入选中的值
|
|
|
console.log(this.multipleSelection);
|
|
|
this.innerVisible = true;
|
|
|
//this.$refs.bindingRef.display(this.multipleSelection);
|
|
|
},
|
|
|
//批量设置
|
|
|
submitSetForm() {
|
|
|
this.$refs.formInfo.validate((valid) => {
|
|
|
console.log(valid);
|
|
|
if (valid) {
|
|
|
//选中的
|
|
|
console.log(this.multipleSelection);
|
|
|
let plidlistArr = [];
|
|
|
this.multipleSelection.forEach((item) => {
|
|
|
// 将每个对象的id字段push到plidlistArr数组中
|
|
|
plidlistArr.push(item.id);
|
|
|
});
|
|
|
icdupdateAttApi({
|
|
|
colName: this.formInfo.colName,
|
|
|
idList: plidlistArr,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.success) {
|
|
|
this.innerVisible = false;
|
|
|
this.cellIndex = null;
|
|
|
console.log(this.colTableData);
|
|
|
this.$parent.geticdList(
|
|
|
this.colTableData.iedName,
|
|
|
this.colIndex
|
|
|
);
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: res.errorMsg,
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
} else {
|
|
|
console.log("error submit!!");
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//保存
|
|
|
handlecolSaveClick({ row }) {
|
|
|
const idlistArr = [];
|
|
|
idlistArr.push(row.id);
|
|
|
console.log(idlistArr);
|
|
|
icdupdateAttApi({
|
|
|
colName: this.colName,
|
|
|
idList: idlistArr,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.success) {
|
|
|
this.cellIndex = null;
|
|
|
console.log(this.colTableData);
|
|
|
this.$parent.geticdList(this.colTableData.iedName, this.colIndex);
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: res.errorMsg,
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
|
|
|
//获取colName
|
|
|
getColList() {
|
|
|
this.colOptions = [];
|
|
|
colListApi({ tableName: this.colTableData.tableName })
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.colOptions = res.data;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//删除icd类型配置
|
|
|
handleDeleteClick(val) {
|
|
|
console.log(val);
|
|
|
this.$confirm("删除该类型?", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
deleteAttApi({
|
|
|
attid: val.id,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.success) {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "删除成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
this.$parent.geticdList(
|
|
|
this.colTableData.iedName,
|
|
|
this.colIndex
|
|
|
);
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
type: "error",
|
|
|
message: res.errorMsg,
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
//this.getactivityList();
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
display(val, index) {
|
|
|
this.colDialogshow = true;
|
|
|
this.colTableData = val;
|
|
|
this.attTableList = val.attList;
|
|
|
this.colIndex = index;
|
|
|
console.log(val, index);
|
|
|
this.getColList();
|
|
|
},
|
|
|
hide() {
|
|
|
this.colDialogshow = false;
|
|
|
this.cellIndex = null;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.colConfig {
|
|
|
.colDialogBox {
|
|
|
.colContain {
|
|
|
height: 540px;
|
|
|
position: relative;
|
|
|
.bindBox {
|
|
|
position: absolute;
|
|
|
background: #fff;
|
|
|
height: 38px;
|
|
|
width: calc(100% - 62px);
|
|
|
z-index: 2;
|
|
|
left: 60px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
top: 1px;
|
|
|
}
|
|
|
.el-table {
|
|
|
.editClass {
|
|
|
.el-link.el-link--primary {
|
|
|
margin-right: 14px;
|
|
|
}
|
|
|
.el-link.el-link--success {
|
|
|
margin-right: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.innerBox {
|
|
|
.el-select {
|
|
|
width: 268px;
|
|
|
}
|
|
|
}
|
|
|
.colBlindDialog {
|
|
|
.el-select {
|
|
|
width: 306px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|