|
@@ -3,7 +3,8 @@
|
|
|
<statistics :statistics-msg="statisticsMsg" />
|
|
|
<div class="hr"></div>
|
|
|
<div class="operation">
|
|
|
- <el-cascader :options="list" ref="floorCascader" clearable v-model="systemType" :props="optionProps" @change="changeLinshi"
|
|
|
+ <el-cascader :options="list" ref="floorCascader" clearable v-model="systemType" :props="optionProps"
|
|
|
+ @change="changeSystemList"
|
|
|
class="adm-select"></el-cascader>
|
|
|
|
|
|
<admSearch @SearchValue="SearchValue"/>
|
|
@@ -13,7 +14,9 @@
|
|
|
<div class="content">
|
|
|
<div v-loading="loading" class="table">
|
|
|
<template v-if="systemType.length > 0">
|
|
|
- <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage" :tableData="tableData"/>
|
|
|
+ <admMultiTable @handleCurrentEdit="handleCurrentEdit"
|
|
|
+ :currentHeader="currentHeader"
|
|
|
+ :headersStage="headersStage" :tableData="tableData"/>
|
|
|
<Pagination
|
|
|
:paginationList="paginationList"
|
|
|
@handleCurrentChange="handleCurrentChange"
|
|
@@ -29,19 +32,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 添加/编辑 系统-->
|
|
|
- <el-dialog :title="deviceMsg" :visible.sync="dialogVisible" @close="close">
|
|
|
+ <el-dialog :title=" systemMsg" :visible.sync="dialogVisible" @close="close">
|
|
|
<template v-if="next">
|
|
|
<div class="align" style="height: 400px">
|
|
|
<span class="text">系统类别</span>
|
|
|
-<!-- <el-select v-model="systemVal" clearable filterable placeholder="请选择系统类别">-->
|
|
|
-<!-- <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />-->
|
|
|
-<!-- </el-select>-->
|
|
|
+ <el-cascader :options="list" clearable v-model="systemVal"
|
|
|
+ :props="optionProps"
|
|
|
+ class="adm-select"></el-cascader>
|
|
|
</div>
|
|
|
<el-button class="fr" type="primary" @click="handleNext">下一步</el-button>
|
|
|
</template>
|
|
|
+
|
|
|
<template v-else>
|
|
|
- <dataForm />
|
|
|
- <el-button class="fr ml-10" type="primary">确定</el-button>
|
|
|
+ <baseDataForm :objectHeaders="systemHeaders"
|
|
|
+ :currRowContent="currRowContent"
|
|
|
+ ref="baseDataForm"
|
|
|
+ />
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="handleDataForm">完成</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
@@ -49,15 +59,15 @@
|
|
|
|
|
|
<script lang="ts">
|
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
|
-import { AdmMultiTable, AdmSearch, dataForm, Pagination, Statistics } from "../components/index";
|
|
|
+import { AdmMultiTable, AdmSearch, baseDataForm, Pagination, Statistics } from "../components/index";
|
|
|
import { dictQuery, queryCountSystem, querySystem } from "@/api/datacenter";
|
|
|
import tools from "@/utils/maintain";
|
|
|
import { UserModule } from "@/store/modules/user";
|
|
|
import { allSystem, BeatchQueryParam } from "@/api/equipComponent";
|
|
|
|
|
|
@Component({
|
|
|
- name: "adm-device",
|
|
|
- components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm },
|
|
|
+ name: "adm-system",
|
|
|
+ components: { Statistics, AdmSearch, AdmMultiTable, Pagination, baseDataForm },
|
|
|
})
|
|
|
export default class extends Vue {
|
|
|
optionProps = {
|
|
@@ -82,29 +92,31 @@ export default class extends Vue {
|
|
|
tableData = [];
|
|
|
// 表头阶段信息结合
|
|
|
headersStage = {};
|
|
|
+ // 当前行数据
|
|
|
+ currRowContent = {}
|
|
|
// 统计信息对象
|
|
|
- private statisticsMsg = {
|
|
|
+ statisticsMsg = {
|
|
|
title: "全部系统",
|
|
|
total: 0,
|
|
|
};
|
|
|
// 分页
|
|
|
- private paginationList = {
|
|
|
+ paginationList = {
|
|
|
page: 1,
|
|
|
size: 50,
|
|
|
sizes: [10, 30, 50, 100, 150, 200],
|
|
|
total: 0,
|
|
|
};
|
|
|
// 下一步
|
|
|
- private next = true;
|
|
|
+ next = true;
|
|
|
// 弹窗 title
|
|
|
- private deviceMsg = "添加系统";
|
|
|
+ systemMsg = "添加系统";
|
|
|
// 弹窗开关
|
|
|
- private dialogVisible = false;
|
|
|
+ dialogVisible = false;
|
|
|
// 搜索内容
|
|
|
inputSearch = "";
|
|
|
-
|
|
|
+ systemHeaders = {}
|
|
|
// 项目id
|
|
|
- private get projectId(): string {
|
|
|
+ get projectId(): string {
|
|
|
return UserModule.projectId;
|
|
|
}
|
|
|
|
|
@@ -127,7 +139,7 @@ export default class extends Vue {
|
|
|
}
|
|
|
|
|
|
// 动态信息点
|
|
|
- getBatch(data) {
|
|
|
+ getBatch(data: any) {
|
|
|
let param = {
|
|
|
groupCode: "WD",
|
|
|
appId: "datacenter",
|
|
@@ -180,21 +192,18 @@ export default class extends Vue {
|
|
|
// 搜索
|
|
|
SearchValue(val: string) {
|
|
|
this.inputSearch = val;
|
|
|
- this.changeLinshi()
|
|
|
- // this.handleFilter(this.systemType)
|
|
|
+ this.changeSystemList()
|
|
|
}
|
|
|
|
|
|
// 当前分页
|
|
|
handleCurrentChange(val: number) {
|
|
|
this.paginationList.page = val;
|
|
|
- this.changeLinshi()
|
|
|
- // this.handleFilter(this.systemType)
|
|
|
+ this.changeSystemList()
|
|
|
}
|
|
|
|
|
|
handleSizeChange(val: number) {
|
|
|
this.paginationList.size = val;
|
|
|
- this.changeLinshi()
|
|
|
- // this.handleFilter(this.systemType)
|
|
|
+ this.changeSystemList()
|
|
|
}
|
|
|
|
|
|
// 添加设备
|
|
@@ -203,64 +212,17 @@ export default class extends Vue {
|
|
|
}
|
|
|
|
|
|
//下一步事件
|
|
|
- handleNext() {
|
|
|
- if (this.system) {
|
|
|
- this.next = false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // close
|
|
|
- close() {
|
|
|
- this.next = true;
|
|
|
- this.displayLocation = false;
|
|
|
- }
|
|
|
- // todo 临时假数据函数
|
|
|
- private changeLinshi(val) {
|
|
|
- if (this.systemType[1]) {
|
|
|
- let systemLabel = this.$refs["floorCascader"].getCheckedNodes()[0].pathLabels;
|
|
|
- this.systemLabel = systemLabel[1];
|
|
|
- this.loading = true;
|
|
|
+ async handleNext() {
|
|
|
+ if (this.systemVal[1] || this.systemType[1]) {
|
|
|
+ this.next = false
|
|
|
let param = {
|
|
|
- type: this.systemType[1],
|
|
|
+ type: this.systemVal[1] || this.systemType[1],
|
|
|
orders: "sort asc, name desc",
|
|
|
};
|
|
|
- let param2 = {
|
|
|
- filters: this.systemType[1] ? `classCode='${this.systemType[1]}'` : undefined,
|
|
|
- pageNumber: this.paginationList.page,
|
|
|
- pageSize: this.paginationList.size,
|
|
|
- orders: "createTime desc, id asc",
|
|
|
- projectId: this.projectId,
|
|
|
- };
|
|
|
- if (this.inputSearch != "") {
|
|
|
- param2.filters = `localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'`;
|
|
|
- }
|
|
|
- let promise = new Promise((resolve) => {
|
|
|
- dictQuery(param).then((res) => {
|
|
|
- resolve(res);
|
|
|
- });
|
|
|
- });
|
|
|
- let promise2 = new Promise((resolve) => {
|
|
|
- querySystem(param2).then((res) => {
|
|
|
- resolve(res);
|
|
|
- });
|
|
|
- });
|
|
|
- Promise.all([promise, promise2]).then((res) => {
|
|
|
- let tableData = [];
|
|
|
- this.loading = false;
|
|
|
- // 类型下信息点,重组数据
|
|
|
- let basicInfos = [{ path: "classification", name: "系统分类" }],
|
|
|
- dictStages = [];
|
|
|
- this.all = res[0].content;
|
|
|
- res[0].content.forEach((item) => {
|
|
|
- let i = ["localName", "localId"];
|
|
|
- if (i.includes(item.path)) {
|
|
|
- basicInfos.push(item);
|
|
|
- } else {
|
|
|
- dictStages.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
|
|
|
- this.headersStage = {
|
|
|
+ await dictQuery(param).then(res => {
|
|
|
+ let { basicInfos, dictStages } = this.informationArrangement(res.content)
|
|
|
+ this.systemHeaders = {
|
|
|
basicInfos: {
|
|
|
name: "基础信息台账",
|
|
|
data: basicInfos,
|
|
@@ -270,43 +232,55 @@ export default class extends Vue {
|
|
|
data: dictStages,
|
|
|
},
|
|
|
};
|
|
|
- this.paginationList.total = res[1].total;
|
|
|
- tableData = res[1].content; // 主体数据
|
|
|
- // 添加系统分类
|
|
|
- this.tableData = tableData.map((item) => {
|
|
|
- item = { ...item, classification: this.systemLabel };
|
|
|
- return item;
|
|
|
- });
|
|
|
- });
|
|
|
- // 动态信息点
|
|
|
- this.codeToDataSource = {};
|
|
|
- this.all.forEach((item) => {
|
|
|
- if (item.dataSource) {
|
|
|
- try {
|
|
|
- this.codeToDataSource[item.code] = {};
|
|
|
- item.dataSource.forEach((dic) => {
|
|
|
- this.codeToDataSource[item.code][dic.code] = dic.name;
|
|
|
- });
|
|
|
- } catch (e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- this.getBatch(this.tableData);
|
|
|
+ })
|
|
|
} else {
|
|
|
- console.log("void");
|
|
|
+ console.log(5)
|
|
|
}
|
|
|
}
|
|
|
- private handleFilter(val) {
|
|
|
- this.systemLabel = val.label;
|
|
|
- if (val) {
|
|
|
+
|
|
|
+ // close
|
|
|
+ close() {
|
|
|
+ this.next = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 编辑当前行
|
|
|
+ handleCurrentEdit(val) {
|
|
|
+ this.next = false
|
|
|
+ this.currRowContent = val
|
|
|
+ this.handleNext()
|
|
|
+ this.dialogVisible = true
|
|
|
+ }
|
|
|
+
|
|
|
+ //信息点重组
|
|
|
+ informationArrangement(arr: []): object {
|
|
|
+ let basicInfos = [{ path: "classification", name: "系统分类" }],
|
|
|
+ dictStages: any[] = [];
|
|
|
+ this.all = arr;
|
|
|
+ arr.forEach((item: any) => {
|
|
|
+ let i = ["localName", "localId"];
|
|
|
+ if (i.includes(item.path)) {
|
|
|
+ basicInfos.push(item);
|
|
|
+ } else {
|
|
|
+ dictStages.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ basicInfos,
|
|
|
+ dictStages
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ private changeSystemList() {
|
|
|
+ if (this.systemType[1]) {
|
|
|
+ let systemLabel = this.$refs["floorCascader"].getCheckedNodes()[0].pathLabels;
|
|
|
+ this.systemLabel = systemLabel[1];
|
|
|
this.loading = true;
|
|
|
let param = {
|
|
|
- type: val.value,
|
|
|
+ type: this.systemType[1],
|
|
|
orders: "sort asc, name desc",
|
|
|
};
|
|
|
let param2 = {
|
|
|
- filters: val ? `classCode='${val.value}'` : undefined,
|
|
|
+ filters: this.systemType[1] ? `classCode='${ this.systemType[1] }'` : undefined,
|
|
|
pageNumber: this.paginationList.page,
|
|
|
pageSize: this.paginationList.size,
|
|
|
orders: "createTime desc, id asc",
|
|
@@ -329,17 +303,8 @@ export default class extends Vue {
|
|
|
let tableData = [];
|
|
|
this.loading = false;
|
|
|
// 类型下信息点,重组数据
|
|
|
- let basicInfos = [{ path: "classification", name: "系统分类" }],
|
|
|
- dictStages = [];
|
|
|
- this.all = res[0].content;
|
|
|
- res[0].content.forEach((item) => {
|
|
|
- let i = ["localName", "localId"];
|
|
|
- if (i.includes(item.path)) {
|
|
|
- basicInfos.push(item);
|
|
|
- } else {
|
|
|
- dictStages.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
+ let { basicInfos, dictStages } = this.informationArrangement(res[0].content)
|
|
|
+
|
|
|
|
|
|
this.headersStage = {
|
|
|
basicInfos: {
|
|
@@ -378,6 +343,12 @@ export default class extends Vue {
|
|
|
console.log("void");
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 添加/编辑 事件处理
|
|
|
+ handleDataForm() {
|
|
|
+ console.log(this.$refs.baseDataForm.form)
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -390,6 +361,10 @@ $border: 1px solid #e1e7ea;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
+ .text{
|
|
|
+ margin-right: 150px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.adm-system {
|
|
@@ -456,3 +431,24 @@ $border: 1px solid #e1e7ea;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.adm-system {
|
|
|
+
|
|
|
+ .el-dialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ max-height: 500px !important;
|
|
|
+ min-height: 100px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select, .el-date-editor.el-input, .el-date-editor.el-input__inner {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fr {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|