371 lines
12 KiB
Vue
371 lines
12 KiB
Vue
<template>
|
|
<div class="fu">
|
|
<div style="display:flex;">
|
|
<el-button type="primary" @click="codeVisible = true" class="addbtn">添加代码</el-button>
|
|
|
|
</div>
|
|
<div class="box">
|
|
<!-- 添加按钮 -->
|
|
<!-- 滚动条 -->
|
|
<div style="width: 50%; height: 100%; overflow: auto">
|
|
<el-table :data="tableData" row-key="id" border height="100%" @row-click="getCodeKV" :highlight-current-row="true" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
|
<el-table-column prop="id" label="id" sortable> </el-table-column>
|
|
<el-table-column prop="name" label="编码名称" sortable>
|
|
</el-table-column>
|
|
<el-table-column prop="hierarchy_flg" label="是否多级" sortable>
|
|
<template slot-scope="props">
|
|
<span v-if="props.row.hierarchy_flg === '1'">是</span>
|
|
<span v-else style="color: #f56c6c" class="material-icons fa fa-times-circle">否</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="77">
|
|
<template slot-scope="scope">
|
|
<el-button size="small" type="danger" @click="delbtn(scope.$index, scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style="width: 50%; height: 100%; overflow: auto">
|
|
<table style="
|
|
width: 100%;
|
|
text-align: center;
|
|
background-color: #8cc8ff;
|
|
height: 55px;
|
|
border-collapse: collapse;
|
|
">
|
|
<thead style="font-size: 16px;display: flex;height: 100%;justify-content: flex-start;align-items: center ">
|
|
<td style="border: 1px solid #8cc8ff; width: 35.5%">
|
|
{{ rightdata.id }}
|
|
</td>
|
|
<td style="border: 1px solid #8cc8ff; width: 35.6%">
|
|
{{ rightdata.name }}
|
|
</td>
|
|
<td style="border: 1px solid #8cc8ff; width: 179px;display:flex;">
|
|
<el-button size="small" type="warning" @click="thisaddCodeKV()">添加节点</el-button>
|
|
</td>
|
|
</thead>
|
|
</table>
|
|
<el-table :data="tableDataKV" row-key="id" height="92%" border :tree-props="{ children: 'son' }">
|
|
<el-table-column prop="k" label="K值" sortable> </el-table-column>
|
|
<el-table-column prop="v" label="Value值" sortable> </el-table-column>
|
|
<el-table-column label="操作" width="179">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="yesOrOffBtn.hierarchy_flg == '1'" size="small" type="primary" @click="addCodeKVson(scope.$index, scope.row)">添加子节点</el-button>
|
|
<!-- 禁用按钮 -->
|
|
<el-button v-else Boolean size="small" type="primary" disabled>添加子节点</el-button>
|
|
<el-button size="small" type="danger" @click="delKVbtn(scope.$index, scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<!-- 添加代码展示框 -->
|
|
<el-dialog title="添加代码" :visible.sync="codeVisible">
|
|
<el-form :model="addcodeData">
|
|
<el-form-item label="id:" :label-width="formLabelWidth">
|
|
<el-input v-model="addcodeData.id" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="name:" :label-width="formLabelWidth">
|
|
<el-input v-model="addcodeData.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="是否层级:" :label-width="formLabelWidth">
|
|
<el-radio v-model="addcodeData.hierarchy_flg" label="1">是</el-radio>
|
|
<el-radio v-model="addcodeData.hierarchy_flg" label="0">否</el-radio>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="codeVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="addcode()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 添加KV值展示框 -->
|
|
<el-dialog title="添加键值" :visible.sync="KVVisible">
|
|
<el-form :model="addcodeKV">
|
|
<el-form-item label="K:" :label-width="formLabelWidth">
|
|
<el-input v-model="addcodeKV.k" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="V:" :label-width="formLabelWidth">
|
|
<el-input v-model="addcodeKV.v" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="KVVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="goAddCodeKV()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 添加子节点展示框 -->
|
|
<el-dialog title="添加子键值" :visible.sync="sonKVVisible">
|
|
<el-form :model="sonAddcodeKV">
|
|
<el-form-item label="K:" :label-width="formLabelWidth">
|
|
<el-input v-model="sonAddcodeKV.k" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="V:" :label-width="formLabelWidth">
|
|
<el-input v-model="sonAddcodeKV.v" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="sonKVVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="goaddCodeKVson()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getCodesAPI,
|
|
delCodesAPI,
|
|
addCodesAPI,
|
|
} from "@/api/superAdministrator/appCodesManagement";
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
//右侧展示和添加节点
|
|
rightdata: {
|
|
create_at: "",
|
|
hierarchy_flg: "",
|
|
id: "",
|
|
name: "",
|
|
},
|
|
sonAddcodeKV: {
|
|
kv: 1,
|
|
codeid: "",
|
|
parentid: "",
|
|
k: "",
|
|
v: "",
|
|
},
|
|
addcodeKV: {
|
|
kv: 1,
|
|
codeid: "",
|
|
parentid: "",
|
|
k: "",
|
|
v: "",
|
|
},
|
|
sonKVVisible: false,
|
|
codeVisible: false,
|
|
KVVisible: false,
|
|
tableData: [],
|
|
tableDataKV: [],
|
|
search: "",
|
|
addcodeData: {
|
|
id: "",
|
|
name: "",
|
|
hierarchy_flg: "",
|
|
data: [
|
|
{
|
|
codeid: "",
|
|
parentid: "",
|
|
k: "",
|
|
v: "",
|
|
},
|
|
],
|
|
},
|
|
formLabelWidth: "100px",
|
|
codeKV: {
|
|
kv: 1,
|
|
codeid: "",
|
|
},
|
|
delCode: {
|
|
kv: null,
|
|
id: "",
|
|
},
|
|
yesOrOffBtn: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getCode();
|
|
},
|
|
methods: {
|
|
//控制按钮是否可用
|
|
// buttonType() {
|
|
// console.log(this.yesOrOffBtn);
|
|
// if (this.yesOrOffBtn.hierarchy_flg == "1") {
|
|
// }
|
|
// },
|
|
//获取数据列表
|
|
getCode() {
|
|
getCodesAPI().then((res) => {
|
|
// console.log(res);
|
|
this.tableData = res.data.rows;
|
|
this.tableData.forEach((item, i) => {
|
|
this.tableData[i].hierarchy_flg ? "是" : "否";
|
|
});
|
|
});
|
|
},
|
|
//获取用户kv值
|
|
async getCodeKV(row) {
|
|
//判断,如果有k值,则证明是键值删除后请求数据,没有则是点击查看键值请求数据
|
|
console.log("获取用户kv值row", row);
|
|
if (row.k) {
|
|
var a = {
|
|
kv: 1,
|
|
codeid: "",
|
|
};
|
|
a.codeid = row.codeid;
|
|
await getCodesAPI(a).then((res) => {
|
|
this.tableDataKV = res.data;
|
|
this.sonAddcodeKV.k = "";
|
|
this.sonAddcodeKV.v = "";
|
|
});
|
|
} else {
|
|
this.yesOrOffBtn = row;
|
|
this.codeKV.codeid = row.id;
|
|
this.rightdata = row;
|
|
await getCodesAPI(this.codeKV).then((res) => {
|
|
this.tableDataKV = res.data;
|
|
});
|
|
}
|
|
},
|
|
//添加kv值
|
|
thisaddCodeKV() {
|
|
this.KVVisible = true;
|
|
this.addcodeKV.codeid = this.rightdata.id;
|
|
},
|
|
goAddCodeKV() {
|
|
this.KVVisible = false;
|
|
addCodesAPI(this.addcodeKV).then((res) => {
|
|
console.log("添加用户kv值时向后台传递的数据:", this.addcodeKV);
|
|
// console.log("this.codeKV:", this.codeKV);
|
|
this.getCodeKV(this.addcodeKV);
|
|
this.addcodeKV.codeid = null;
|
|
this.sonAddcodeKV.k = null;
|
|
this.sonAddcodeKV.v = null;
|
|
this.addcodeKV.v = null;
|
|
this.addcodeKV.k = null;
|
|
});
|
|
},
|
|
//添加代码
|
|
addcode() {
|
|
this.codeVisible = false;
|
|
this.addcodeData.data[0].codeid = this.addcodeData.id;
|
|
addCodesAPI(this.addcodeData).then((res) => {
|
|
console.log("添加代码返回数据:", res);
|
|
this.addcodeData.id = "";
|
|
this.addcodeData.name = "";
|
|
this.addcodeData.hierarchy_flg = null;
|
|
if (res.status) {
|
|
this.open2();
|
|
this.getCode();
|
|
} else {
|
|
this.open4();
|
|
}
|
|
});
|
|
},
|
|
//错误提示
|
|
open4() {
|
|
this.$message.error("添加失败,请检查您的数据是否重复添加");
|
|
},
|
|
//成功提示
|
|
open2() {
|
|
this.$message({
|
|
message: "已成功",
|
|
type: "success",
|
|
});
|
|
},
|
|
//添加子节点
|
|
addCodeKVson(i, row) {
|
|
console.log("添加子节点:", row);
|
|
this.sonKVVisible = true;
|
|
this.sonAddcodeKV.parentid = row.id;
|
|
this.sonAddcodeKV.codeid = row.codeid;
|
|
},
|
|
//向后台提交子节点
|
|
goaddCodeKVson() {
|
|
// console.log("this.sonAddcodeKV:", this.sonAddcodeKV);
|
|
addCodesAPI(this.sonAddcodeKV).then((res) => {
|
|
// console.log(res);
|
|
this.sonKVVisible = false;
|
|
this.getCodeKV(this.sonAddcodeKV);
|
|
});
|
|
},
|
|
//删除KV值
|
|
delKVbtn(i, row) {
|
|
// console.log("删除的kv值", row);
|
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
center: true,
|
|
})
|
|
.then(() => {
|
|
//删除KV
|
|
this.delCode.kv = 1;
|
|
this.codeKV = row.codeid;
|
|
// console.log("row.id:", row.id);
|
|
this.delCode.id = row.id;
|
|
delCodesAPI(this.delCode).then((res) => {
|
|
if (res.status) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "删除成功!",
|
|
});
|
|
// console.log("键值row", row);
|
|
this.getCodeKV(row);
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
//删除代码
|
|
delbtn(i, row) {
|
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
center: true,
|
|
})
|
|
.then(() => {
|
|
//删除代码
|
|
// console.log("代码row", row);
|
|
var del = {
|
|
key: 1,
|
|
id: row.id,
|
|
};
|
|
// console.log("sahnchudel", del);
|
|
delCodesAPI(del).then((res) => {
|
|
// console.log(res);
|
|
if (res.status) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "删除成功!",
|
|
});
|
|
this.getCode();
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: auto;
|
|
height: 80vh;
|
|
padding: 10px;
|
|
min-width: 1200px;
|
|
width: 100%;
|
|
}
|
|
.fu {
|
|
height: 80%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.addbtn {
|
|
margin: 0px 10px 10px 10px;
|
|
}
|
|
</style>
|