|
@@ -10,10 +10,20 @@
|
|
|
class="item"
|
|
|
></el-cascader>
|
|
|
<admSearch @SearchValue="searchValue" class="item" />
|
|
|
+ <el-upload
|
|
|
+ style="float: right"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :show-file-list="false"
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <el-button>上传Excle</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-button style="float: right; margin-right: 12px" @click="handleClickDownload">下载模板</el-button>
|
|
|
</div>
|
|
|
<div v-loading="loading" style="height: calc(100% - 100px); padding: 0 12px; position: relative">
|
|
|
<template style="height: 100%" v-if="tableData.length">
|
|
|
<admMultiTable
|
|
|
+ ref="table"
|
|
|
@handleCurrentEdit="handleCurrentEdit"
|
|
|
:isDynamicMap="false"
|
|
|
:currentHeader="currentHeader"
|
|
@@ -33,14 +43,25 @@
|
|
|
<p class="void-tips">可点击左上角筛选</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--编辑 设备-->
|
|
|
+ <el-dialog title="编辑设备" :visible.sync="dialogVisible">
|
|
|
+ <template>
|
|
|
+ <baseDataForm :objectHeaders="headersStage" :currRowContent="currRowContent" ref="baseDataForm" />
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleDataForm">完成</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { Vue, Component } from "vue-property-decorator";
|
|
|
+import { Vue, Component, Ref } from "vue-property-decorator";
|
|
|
import { allDevice, dictInfo } from "@/api/equipComponent";
|
|
|
import { queryEquip, updateEquip } from "@/api/datacenter";
|
|
|
-import { AdmMultiTable, AdmSearch, Pagination } from "@/views/maintain/components/index";
|
|
|
+import { AdmMultiTable, AdmSearch, Pagination, baseDataForm } from "@/views/maintain/components/index";
|
|
|
import { UserModule } from "@/store/modules/user";
|
|
|
+import tools from "@/utils/maintain";
|
|
|
|
|
|
@Component({
|
|
|
name: "EquipTab",
|
|
@@ -48,9 +69,12 @@ import { UserModule } from "@/store/modules/user";
|
|
|
AdmMultiTable,
|
|
|
AdmSearch,
|
|
|
Pagination,
|
|
|
+ baseDataForm
|
|
|
},
|
|
|
})
|
|
|
export default class EquipTab extends Vue {
|
|
|
+ // 信息点输入组组件
|
|
|
+ @Ref("baseDataForm") readonly baseDataForm!: baseDataForm;
|
|
|
// 项目id
|
|
|
private get projectId(): string {
|
|
|
return UserModule.projectId;
|
|
@@ -93,6 +117,10 @@ export default class EquipTab extends Vue {
|
|
|
sizes: [10, 30, 50, 100, 150, 200],
|
|
|
total: 0,
|
|
|
};
|
|
|
+ // 当前编辑行的数据
|
|
|
+ private currRowContent: any = {};
|
|
|
+ // 弹窗开关
|
|
|
+ private dialogVisible = false;
|
|
|
|
|
|
// created钩子
|
|
|
created() {
|
|
@@ -171,9 +199,11 @@ export default class EquipTab extends Vue {
|
|
|
}
|
|
|
const res = await queryEquip(params);
|
|
|
if (res.result === "success") {
|
|
|
- this.tableData = res?.content ? res.content : []; // 主体数据
|
|
|
- this.paginationList.total = res?.total ? res.total : 0;
|
|
|
- this.loading = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.tableData = res?.content ? res.content : []; // 主体数据
|
|
|
+ this.paginationList.total = res?.total ? res.total : 0;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
}
|
|
|
} else {
|
|
|
this.tableData = [];
|
|
@@ -227,6 +257,8 @@ export default class EquipTab extends Vue {
|
|
|
* 切换设备类型
|
|
|
*/
|
|
|
private handleChangeDevice() {
|
|
|
+ this.paginationList.page = 1;
|
|
|
+ this.paginationList.size = 50;
|
|
|
this.getEquipData();
|
|
|
}
|
|
|
|
|
@@ -239,6 +271,17 @@ export default class EquipTab extends Vue {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * 下载模板
|
|
|
+ */
|
|
|
+ private handleClickDownload() {
|
|
|
+ console.log("下载模板");
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 上传Excle
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
* 切换页码
|
|
|
*/
|
|
|
private handleCurrentChange(val: number) {
|
|
@@ -253,6 +296,39 @@ export default class EquipTab extends Vue {
|
|
|
this.paginationList.size = val;
|
|
|
this.getExampleData();
|
|
|
}
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 编辑当前行
|
|
|
+ */
|
|
|
+ handleCurrentEdit(val: any) {
|
|
|
+ this.currRowContent = val;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 添加/编辑 事件处理
|
|
|
+ */
|
|
|
+ private handleDataForm() {
|
|
|
+ this.baseDataForm.submitForm(this.handleDataFormSave);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 更新设备数据
|
|
|
+ */
|
|
|
+ private async handleDataFormSave() {
|
|
|
+ let from = tools.formatData(this.baseDataForm.form);
|
|
|
+ if (from?.id) {
|
|
|
+ const param = {
|
|
|
+ content: [from],
|
|
|
+ };
|
|
|
+ const res = await updateEquip(param);
|
|
|
+ if (res.result === "success") {
|
|
|
+ this.$message.success("更新成功");
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getExampleData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
@@ -270,14 +346,32 @@ export default class EquipTab extends Vue {
|
|
|
}
|
|
|
}
|
|
|
// 数据暂未
|
|
|
-.void {
|
|
|
- margin-top: 200px;
|
|
|
-}
|
|
|
.align {
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
+
|
|
|
+::v-deep .el-dialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+ max-height: 550px !important;
|
|
|
+ min-height: 100px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-select,
|
|
|
+.el-date-editor.el-input,
|
|
|
+.el-date-editor.el-input__inner {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__header {
|
|
|
+ border-bottom: 1px solid #d8d8d8;
|
|
|
+}
|
|
|
</style>
|