Sfoglia il codice sorgente

wanda-adm:feat > 添加设备

shaun-sheep 4 anni fa
parent
commit
7820897c19
3 ha cambiato i file con 139 aggiunte e 107 eliminazioni
  1. 7 6
      public/index.html
  2. 93 27
      src/components/business/dataForm.vue
  3. 39 74
      src/views/maintain/device/index.vue

+ 7 - 6
public/index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_2327510_7jj0x1gmztq.css" />
-  <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2327510_7jj0x1gmztq.css"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 <noscript>

+ 93 - 27
src/components/business/dataForm.vue

@@ -3,28 +3,37 @@
         <el-form label-position="top" label-width="80px">
             <!-- template v-for-->
             <template>
-                <p class="title">xxxxxx</p>
-                <el-col :span="8">
-                    <el-form-item label="名称">
-                        <el-input/>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="名称">
-                        <el-input/>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="名称">
-                        <el-input/>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="名称">
-                        <el-input/>
-                    </el-form-item>
-                </el-col>
+                <p class="title">基础信息</p>
+                <el-row :gutter="20">
+                    <template v-for="(item,index) in header.basicInfos.data">
+                        <el-col :span="8" :key="index">
+                            <el-form-item
+                                :key="index"
+                                :label="item.name">
+                                <el-input v-model="form[item.path]"/>
+                            </el-form-item>
+                        </el-col>
+                    </template>
+                </el-row>
             </template>
+            <div class="content">
+                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+                    <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
+                </el-tabs>
+                <div class="table">
+                    <el-row :gutter="20">
+                        <template v-for="(item,index) in header.dictStages.data">
+                            <el-col span="8" :key="index">
+                                <el-form-item
+                                    :key="index"
+                                    :label="item.name">
+                                    <el-input v-model="form[item.path]"/>
+                                </el-form-item>
+                            </el-col>
+                        </template>
+                    </el-row>
+                </div>
+            </div>
 
 
         </el-form>
@@ -33,18 +42,75 @@
     </el-row>
 </template>
 
-<script>
-export default {
-    name: 'dataForm'
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+@Component({
+    name: "dataForm",
+})
+export default class extends Vue {
+    @Prop({ default: Object }) dataFormList?: {};
+    // tabs数据
+    paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
+    activeName = this.paneMsg[0]
+    header = {}
+    form = {}
+
+    @Watch('deviceHeaders', { immediate: true, deep: true })
+    async deviceHeaders() {
+        await this.test()
+
+    }
+
+    // test() {
+    //     let header = []
+    //     console.log(this.dataFormList)
+    //     if (Object.keys(this.dataFormList.length > 0)) {
+    //         this.dataFormList.dictStages.forEach(item => {
+    //             console.log(this.activeName)
+    //             if (this.activeName == item.name) {
+    //                 console.log(this.activeName)
+    //                 item.infos && item.infos.forEach(val => header.push(val))
+    //             }
+    //         })
+    //     }
+    //     this.header = {
+    //         basicInfos: {
+    //             name: '基础信息台账',
+    //             data: this.dataFormList.basicInfos
+    //         },
+    //         dictStages: {
+    //             name: this.activeName,
+    //             data: header
+    //         }
+    //     }
+    // }
+
+    handleClick(val) {
+        this.activeName = val.label
+        this.deviceHeaders()
+    }
 }
+
 </script>
 
 <style scoped lang="scss">
-.data-form{
-    .title{
+$border: 1px solid #E1E7EA;
+.data-form {
+    .title {
         border-left: 7px solid;
         text-indent: 10px;
-        color:#646C73;
+        color: #646C73;
+        margin-bottom: 10px;
+    }
+
+    .content {
+        .table {
+            border-left: $border;
+            border-right: $border;
+            border-bottom: $border;
+            height: calc(100% - 41px);
+            padding: 12px;
+        }
     }
 }
 </style>

+ 39 - 74
src/views/maintain/device/index.vue

@@ -2,7 +2,8 @@
     <div class="adm-device">
         <statistics :statistics-msg="statisticsMsg"/>
         <div class="operation">
-            <el-cascader :options="list" clearable v-model="deviceType" :props="optionProps" @change="changeLinshi"
+            <el-cascader :options="list" clearable v-model="deviceType" :props="optionProps"
+                         @change="handleChangeDevice"
                          class="adm-select"></el-cascader>
             <admSearch @SearchValue="SearchValue"/>
             <el-button type="default" @click="addDevice" class="adm-btn">添加设备</el-button>
@@ -13,7 +14,6 @@
                 <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
             </el-tabs>
             <div class="table" v-loading="loading">
-<!--                <template v-if="deviceType">-->
                 <template v-if="deviceType.length > 0">
                     <admMultiTable :currentHeader="currentHeader" :tableData="tableData" :headersStage="headersStage"/>
                     <Pagination v-if="tableData.length > 0" :paginationList="paginationList"
@@ -36,7 +36,7 @@
             <template v-if="next">
                 <div class="align" style="height: 400px">
                     <span class="text ">设备类别</span>
-                    <el-cascader :options="list" clearable v-model="deviceVal" @change="changeLinshi"
+                    <el-cascader :options="list" clearable v-model="deviceVal"
                                  :props="optionProps"
                                  class="adm-select"></el-cascader>
 
@@ -57,7 +57,7 @@
     </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 import { AdmMultiTable, AdmSearch, dataForm, Pagination, Statistics } from '../components/index'
 import { allDevice, BeatchQueryParam, dictInfo } from "@/api/equipComponent";
 import { queryCount, queryEquip } from "@/api/datacenter";
@@ -70,6 +70,7 @@ import tools from "@/utils/maintain"
     components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
 })
 export default class extends Vue {
+
     optionProps = {
         value: 'code',
         label: 'name',
@@ -101,30 +102,30 @@ export default class extends Vue {
     // 下拉数据
     list = []
     // 弹窗开关
-    private dialogVisible = false
+    dialogVisible = false
     // tabs数据
-    private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
+    paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
     // 当前tabs值
-    private activeName = ""
+    activeName = ""
     // 分页
-    private paginationList = {
+    paginationList = {
         page: 1,
         size: 50,
         sizes: [10, 30, 50, 100, 150, 200],
         total: 0
     }
     // 下一步
-    private next = true
+    next = true
     // 弹窗 title
-    private deviceMsg = '添加设备'
+    deviceMsg = '添加设备'
     // 默认当前阶段
-    private currentHeader = this.paneMsg[0]
+    currentHeader = this.paneMsg[0]
     // 主体数据
-    private tableData = []
+    tableData = []
     codeToDataSource = {}
-
+    dataFormList = {}
     // 项目id
-    private get projectId(): string {
+    get projectId(): string {
         return UserModule.projectId
     }
 
@@ -149,9 +150,7 @@ export default class extends Vue {
     }
 
 
-    // todo 临时假数据函数
-    private changeLinshi(val) {
-        console.log(this.deviceType, this.deviceType[1])
+    handleChangeDevice() {
         if (this.deviceType[1]) {
             this.loading = true
             let param = {
@@ -189,56 +188,28 @@ export default class extends Vue {
             this.headerInformation = {}
         }
     }
-    private handleFilter(val) {
-        console.log(this.deviceType)
-        if (this.deviceType) {
-            this.loading = true
+
+    async handleNext() {
+        if (this.deviceVal[1]) {
+            this.next = false
             let param = {
-                category: this.deviceType
-            }
-            let param2 = {
-                filters: this.deviceType ? `classCode='${ this.deviceType }'` : undefined,
-                pageNumber: this.paginationList.page,
-                pageSize: this.paginationList.size,
-                orders: "createTime desc, id asc",
-                projectId: this.projectId
+                category: this.deviceVal[1]
             }
-            if (this.inputSearch != '') {
-                param2.filters += `;codeName contain '${ this.inputSearch }' or systemCategory contain '${ this.inputSearch }' or bimTypeId contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
-            }
-            let promise = new Promise(resolve => {
-                dictInfo(param).then(res => {
-                    resolve(res)
-                })
-            })
-            let promise2 = new Promise(resolve => {
-                queryEquip(param2).then(res => {
-                    resolve(res)
-                })
-            })
-            Promise.all([promise, promise2]).then(res => {
-                this.loading = false
-                // 类型下信息点,默认设计阶段
-                this.headerInformation = res[0] // 获取表头
-                this.tableData = res[1].content // 主体数据
-                this.headerStage()
-                this.paginationList.total = res[1].total
+            await dictInfo(param).then(res => {
+                this.dataFormList = res
+
             })
         } else {
-            this.headerInformation = {}
+            this.dataFormList = {}
         }
     }
 
     headerStage() {
-        let header = []
+        let header: [] = []
         if (Object.keys(this.headerInformation).length > 0) {
             this.headerInformation.dictStages.forEach(item => {
                 if (this.currentHeader == item.name) {
                     item.infos && item.infos.forEach(val => header.push(val))
-                    // item.infos && item.infos.forEach(val => {
-                    //     val.name = val.unit ? `${ val.name }(${ val.unit })` : val.name
-                    //     header.push(val)
-                    // })
                 }
             })
         }
@@ -333,32 +304,22 @@ export default class extends Vue {
 
     }
 
-
-    //设备类筛选
-    selectValue(val: string) {
-        console.log(val, 3)
-
-    }
-
     // 搜索
     SearchValue(val: string) {
         this.inputSearch = val
-        // this.handleFilter(this.deviceType)
-        this.changeLinshi(this.deviceType[1])
+        this.handleChangeDevice(this.deviceType[1])
     }
 
     // 当前分页
     handleCurrentChange(val: number) {
         console.log(val)
         this.paginationList.page = val
-        // this.handleFilter(this.deviceType)
-        this.changeLinshi(this.deviceType[1])
+        this.handleChangeDevice(this.deviceType[1])
     }
 
     handleSizeChange(val: number) {
         this.paginationList.size = val
-        // this.handleFilter(this.deviceType)
-        this.changeLinshi(this.deviceType[1])
+        this.handleChangeDevice(this.deviceType[1])
     }
 
     // 添加设备
@@ -366,12 +327,6 @@ export default class extends Vue {
         this.dialogVisible = true
     }
 
-    //下一步事件
-    handleNext() {
-        if (this.deviceVal) {
-            this.next = false
-        }
-    }
 
     // 维护位置
     handlePosition() {
@@ -381,8 +336,18 @@ export default class extends Vue {
     // close
     close() {
         this.next = true
+        if (this.deviceType) {
+            this.deviceVal = this.deviceType
+        } else {
+            this.deviceVal = ''
+        }
         this.displayLocation = false
     }
+
+    @Watch("deviceType", { immediate: true, deep: true })
+    handleDeviceMsg() {
+        this.deviceVal = this.deviceType
+    }
 }
 </script>
 <style lang="scss" scoped>