소스 검색

添加包含的部件页面

zhangyu 6 년 전
부모
커밋
0eddaf8c4d
1개의 변경된 파일101개의 추가작업 그리고 43개의 파일을 삭제
  1. 101 43
      src/views/ledger/facility/parts/index.vue

+ 101 - 43
src/views/ledger/facility/parts/index.vue

@@ -1,26 +1,68 @@
 <template>
   <div>
-    <el-tabs type="border-card">
-      <el-tab-pane :label="item.name + ' ( ' + item.num + ' ) '" v-for="item in partsTypeList" :key="item.id">
-        <el-row>
-          <el-checkbox v-model="checked">只看采集的信息</el-checkbox>
-          <el-button plain>刷新</el-button>
-          <div :id="partsTable"></div>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
+    <div class="parts-tab">
+      <el-tabs v-model="partsId" @tab-click="handleClick">
+        <el-tab-pane
+          :label="item.name + ' ( ' + item.num + ' ) '"
+          v-for="item in partsTypeList"
+          :key="item.id"
+          :name="item.id"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+    <el-row class="right">
+      <el-checkbox v-model="checked">只看采集的信息</el-checkbox>
+      <el-button plain>刷新</el-button>
+    </el-row>
+    <div class="tableBox">
+      <handson-table ref="table"></handson-table>
+    </div>
   </div>
 </template>
 
 <script>
+import handsonTable from "@/components/common/handsontable";
 import { mapGetters, mapActions } from "vuex";
 
 export default {
+  components: {
+    handsonTable
+  },
   data() {
     return {
-      data: [],
+      partsId: "",
+      tableExample: null,
+      tableData: [
+        {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        }
+      ],
+      tableHeader: ["信息1", "信息2", "信息3", "信息4", "信息5"],
+      tableHeaderName: [
+        {
+          data: "info1"
+        },
+        {
+          data: "info2"
+        },
+        {
+          data: "info3"
+        },
+        {
+          data: "info4"
+        },
+        {
+          data: "info5"
+        }
+      ],
       checked: true,
-      partsTable: "partsTable",
       partsTypeList: [
         {
           id: "011A",
@@ -45,51 +87,67 @@ export default {
       ]
     };
   },
+  mounted() {
+    this.createTable();
+  },
   methods: {
-    createHot() { //创建表格实例
-      let options = {
-        data: data,
-        colHeaders: headers,
-        manualColumnResize: true,
-        manualColumnMove: true,
-        maxRows: maxRow,
-        height: height,
-        columnSorting: true, //添加排序
-        sortIndicator: true, //添加排序
-        renderAllRows: true,
-        autoColumnSize: true,
+    createTable() {
+      let settings = {
+        data: this.tableData,
+        colHeaders: this.header,
+        columns: this.type,
+        rowHeights: 30,
+        maxRows: this.tableData.length,
         fixedRowsTop: 1,
-        language: "zh-CN",
         contextMenu: {
           items: {
             remove_row: {
-              name: "删除部件"
+              name: "删除设备"
             }
           }
-        },
-        // customBorders: customBorders,
-        columns: this.getType(headerArr),
-        afterOnCellMouseDown: this.tableDown, //鼠标单击
-        afterChange: this.tdChange, //修改后
-        afterRemoveRow: this.romoveFm, //右键删除
-        dropdownMenu: [
-          "filter_by_condition",
-          "filter_by_value",
-          "filter_action_bar"
-        ],
-        filters: true,
-        afterFilter: this.trimmedRows,
-        afterDocumentKeyDown: this.afterDocumentKeyDown
+        }
       };
-      console.log(options, variableNum);
-      this.myHotArr[variableNum] = new Handsontable(partsTable, options);
+      this.$nextTick(() => {
+        console.log(this.$refs.table);
+        this.tableExample = this.$refs.table.init(settings);
+      });
     }
   },
   computed: {
-    ...mapGetters("layout", ["projectId", "secret", "userId"])
+    ...mapGetters("layout", ["projectId", "secret", "userId"]),
+    header() {
+      this.tableHeader.unshift(...["操作", "关联的资产", "部件本地名称"]);
+      return this.tableHeader;
+    },
+    type() {
+      this.tableHeaderName.unshift(
+        ...[
+          {
+            data: "operation",
+            color: "#128eee",
+            readOnly: true
+          },
+          {
+            data: "demo1"
+          },
+          {
+            data: "demo2"
+          }
+        ]
+      );
+      return this.tableHeaderName;
+    }
   }
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="scss">
+.tableBox {
+  height: calc(100% - 150px);
+}
+.parts-tab {
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+}
 </style>