add parts page and css

src/views/ledger/facility/parts/index.vue

@@ -1,334 +1,362 @@
 <template>
-  <div>
-    <div class="parts-tab">
-      <el-tabs v-model="partsId" @tab-click="handleTabClick">
-        <el-tab-pane
-          :label="item.name + ' ( ' + item.num + ' ) '"
-          v-for="item in partsTypeList"
-          :key="item.id"
-          :name="item.id"
-        ></el-tab-pane>
+  <div id="partsList">
+    <el-row>
+      <el-tabs @tab-click="handleClick" v-model="tabVal">
+        <el-tab-pane label="用户管理" name="first"></el-tab-pane>
+        <el-tab-pane label="配置管理" name="second"></el-tab-pane>
+        <el-tab-pane label="角色管理" name="third"></el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
       </el-tabs>
-    </div>
+    </el-row>
     <el-row class="right">
-      <el-checkbox v-model="checked">只看采集的信息</el-checkbox>
-      <el-button>刷新</el-button>
+      <div style="width:200px;display:inline-block;text-align:left;color:gray;">
+        <span>只看要采集的信息</span>
+        <el-checkbox v-model="allMess" @change="getTableHeader"></el-checkbox>
+      </div>
+      <el-button @click="getTableHeader">刷新</el-button>
     </el-row>
     <div class="tableBox">
-      <handson-table ref="table"></handson-table>
+      <div class="center middle_sty" v-show="tableData && !tableData.length" style="flex:2;">
+        <p>
+          <i class="iconwushuju iconfont"></i>
+          暂无数据
+        </p>
+      </div>
+      <div class="tableLeft" v-show="tableData && tableData.length">
+        <handson-table ref="table"></handson-table>
+      </div>
     </div>
     <el-pagination
-      class="center"
+      class="right"
+      v-show="tableData && tableData.length"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="page.pageNumber"
       :page-sizes="page.pageSizes"
       :page-size="page.pageSize"
       layout="total, sizes, prev, pager, next, jumper"
-      :total="page.total">
-    </el-pagination>
+      :total="page.total"
+    ></el-pagination>
   </div>
 </template>
-
 <script>
 import tools from "@/utils/scan/tools";
-import handsonUtils from "@/utils/hasontableUtils"
-import showTools from "@/utils/handsontable/notShow"
-import text from "@/utils/handsontable/mainText"
+import handsonUtils from "@/utils/hasontableUtils";
+import showTools from "@/utils/handsontable/notShow";
+import text from "@/utils/handsontable/mainText";
 
+import cenoteType from "@/components/ledger/lib/cenoteType";
 import handsonTable from "@/components/common/handsontable";
+import {
+  getCenoteTableHeader,
+  getCenoteTableData,
+  updataCenoteTableData,
+  deleteCenoteTableData,
+  saveCenoteRelateSpace
+} from "@/api/scan/request";
 import { mapGetters, mapActions } from "vuex";
-
 export default {
   components: {
+    cenoteType,
     handsonTable
   },
-  props: {
-
-  },
   data() {
     return {
-      partsId: "",
-      tableExample: null,
+      cenoteId: "", //部件类型id
+      shaftId: "", //要操作的部件id
+      isTableRightShow: false,
+      spaceList: "",
+      onlyRead: true,
+      allMess: true,
+      tableHeader: [],
       page: {
-        pageSize: 20,
+        pageSize: 50,
         pageSizes: [10, 20, 50, 100],
         pageNumber: 1,
-        total: 400
+        total: 0
       },
-      tableData: [
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        }, {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        }, {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },{
-          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,
-      partsTypeList: [
-        {
-          id: "011A",
-          name: "部件A",
-          num: 12
-        },
-        {
-          id: "011B",
-          name: "部件B",
-          num: 5
-        },
-        {
-          id: "011C",
-          name: "部件C",
-          num: 8
-        },
-        {
-          id: "011AD",
-          name: "部件D",
-          num: 7
-        }
-      ]
+      tableData: [],
+      copyTableData: [],
+      tableExample: null,
+      tabVal:'first'
     };
   },
-  mounted() {
-    this.createTable();
-    this.partsId = this.partsTypeList[0].id;
+  computed: {
+    ...mapGetters("layout", ["projectId", "secret", "userId"])
+  },
+  created() {
+    this.getTableHeader();
   },
   methods: {
-    //获取表头
-    getHeaderData() {
-      this.changeCader()
-      if(this.mess.deviceId){
-          getTableHeader({
-            code: this.mess.deviceId,
-            ProjId: this.projectId
-        }).then(res => {
-            this.headers = res.data.Content;
-            this.getMain()
+    //tab页点击事件
+    handleClick(){
+      console.log(this.tabVal)
+    },
+    // 获取表头数据(初始化表格)
+    async getTableHeader() {
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: {
+          CollectFlag: this.allMess
+        }
+      };
+      await getCenoteTableHeader(param, res => {
+        this.tableHeader = res.Content;
+        this.getTableData();
+      });
+    },
+    async getTableData() {
+      //获取表格数据
+      let data = {
+        Filters: this.cenoteId
+          ? `ProjectId='${this.projectId}';structureInfo.ShaftFuncType='${
+              this.cenoteId
+            }'`
+          : `ProjectId='${this.projectId}'`,
+        PageNumber: this.page.pageNumber,
+        PageSize: this.page.pageSize
+      };
+      const params = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: data
+      };
+      await getCenoteTableData(params, res => {
+        this.tableData = res.Content;
+        this.copyTableData = tools.deepCopy(res.Content);
+        this.page.pageNumber = res.PageNumber;
+        this.page.total = res.Total;
+        if (this.tableData && this.tableData.length) {
+          this.initTable();
+        }
+      });
+    },
+    // 修改表格内容
+    async updateTableData(data, change) {
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: {
+          Content: [],
+          Projection: []
+        }
+      };
+      //生成要修改字段列表
+      change.map(item => {
+        if (item[1] && param.data.Projection.indexOf(item[1]) == -1) {
+          param.data.Projection.push(item[1]);
+        }
+      });
+      //生成对应修改数据
+      data.map((item, index) => {
+        let keyarr = change[index][1].split(".");
+        if (keyarr && keyarr.length > 1) {
+          item[keyarr[0]][keyarr[1]] =
+            item[keyarr[0]][keyarr[1]] != ""
+              ? item[keyarr[0]][keyarr[1]]
+              : null;
+        } else {
+          item[keyarr[0]] = item[keyarr[0]] != "" ? item[keyarr[0]] : null;
+        }
+        param.data.Content.push(item);
+      });
+
+      await updataCenoteTableData(param, res => {});
+    },
+    // 删除表格数据
+    async deleteTableData(params) {
+      await deleteCenoteTableData(params, res => {
+        this.$message.success("删除成功!");
+        this.getTableHeader();
+      });
+    },
+    //保存元空间关联
+    async saveSpaceList() {
+      let data = {
+        ShaftId: this.shaftId,
+        SpaceId: this.spaceList
+      };
+      const params = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: data
+      };
+      await saveCenoteRelateSpace(params, res => {
+        this.$message.success("关联成功!");
+        this.getTableHeader();
+      });
+    },
+    // 添加部件
+    handleCreateTableData() {
+      this.$router.push({ name: "cenoteadd" });
+    },
+    // 删除表格行
+    handleDeleteTableRow() {
+      let params = tools.differenceArr(this.tableData, this.copyTableData);
+      if (params.length < 1 || this.tableData > this.copyTableData) {
+        return;
+      }
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: []
+      };
+      params.map(item => {
+        param.data.push(item.ShaftID);
+      });
+      this.$confirm("此操作将删除部件，是否继续？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.deleteTableData(param);
+        })
+        .catch(() => {
+          this.getTableHeader();
+          this.$message("取消删除");
         });
+    },
+    //修改
+    handleUpdataTable(changeData, source) {
+      if (!this.onlyRead) {
+        if (changeData) {
+          let trimmedArr = this.trimmedRows();
+          let param = handsonUtils.getParam(
+            changeData,
+            source,
+            this.tableExample,
+            trimmedArr
+          );
+          let data = [];
+          for (let i = 0; i < param.length; i++) {
+            data.push(param[i]);
+          }
+          //如果data中包含/且data长度为1,将其转换成.
+          if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
+            changeData[0][1] = changeData[0][1].split("/").join(".");
+          }
+
+          // 存在data进行修改请求
+          if (data && data.length) {
+            this.updateTableData(data, changeData);
+          }
+        }
       }
-      
     },
-    createTable() {
-      const params = {
-        Filters: `id=${this.partsId}`,
-        Orders: "",
-        PageNumber: this.page.pageNumber,
-        PageSize: this.page.pageSize,
-        Projection: []
+    //撤回
+    undo() {
+      this.tableExample.undo();
+    },
+    //切换部件类型
+    changeFloor(value) {
+      this.cenoteId = value.Id;
+      this.getTableHeader();
+    },
+    //关闭右侧关联元空间输入按钮
+    handleCloseRight() {
+      this.isTableRightShow = false;
+      this.spaceList = "";
+    },
+    //切换每页显示多少条数据
+    handleSizeChange(val) {
+      this.page.pageSize = val;
+      this.getTableHeader();
+    },
+    //切换页数
+    handleCurrentChange(val) {
+      this.page.pageNumber = val;
+      this.getTableHeader();
+    },
+    formatHeaderData(list) {
+      //格式化表头显示的数据
+      let arr = tools.copyArr(list);
+      arr.map(item => {
+        item.Visible = true;
+      });
+      let readArr = [
+        "A1",
+        "A2",
+        "B1",
+        "C5",
+        "D1",
+        "D2",
+        "E1",
+        "F1",
+        "F2",
+        "L",
+        "L1",
+        "L2",
+        "X"
+      ];
+      if (!this.onlyRead) {
+        readArr.push("Own");
       }
+      let data = showTools.changeHeader(
+        arr,
+        readArr,
+        this.onlyRead,
+        false,
+        this.allMess
+      );
+      data.unshift("关联的元空间");
+      return data;
+    },
+    formatHeaderType(list) {
+      //格式化表头头映射的数据
+      let arr = tools.copyArr(list);
+      arr.map(item => {
+        //缺少信息点
+        item.Visible = true;
+      });
+      let readArr = [
+        "A1",
+        "A2",
+        "B1",
+        "C5",
+        "D1",
+        "D2",
+        "E1",
+        "F1",
+        "F2",
+        "L",
+        "L1",
+        "L2",
+        "X"
+      ];
+      let data = showTools.showHeaderTypes(
+        arr,
+        readArr,
+        this.onlyRead,
+        false,
+        this.allMess
+      );
+      data.unshift({
+        data: "SpaceCount",
+        renderer: tools.num,
+        readOnly: true
+      });
+      return data;
+    },
+    initTable() {
+      //实例化表格
       let settings = {
         data: this.tableData,
-        colHeaders: this.header,
-        columns: this.type,
+        colHeaders: this.formatHeaderData(this.tableHeader),
+        columns: this.formatHeaderType(this.tableHeader),
         rowHeights: 30,
         maxRows: this.tableData.length,
-        fixedRowsTop: 1,
-        fixedColumnsLeft: 4,
         contextMenu: {
           items: {
             remove_row: {
-              name: "删除设备"
+              name: "删除部件"
             }
           }
         },
         // 事件
-        afterChange: this.tdChange, //修改后
-        afterFilter: this.trimmedRows, //排序前
-        afterRemoveRow: this.romoveFm, //右键删除
+        afterChange: this.handleUpdataTable, //修改后
+        afterRemoveRow: this.handleDeleteTableRow, //右键删除
         afterOnCellMouseDown: this.handleTdClick //鼠标点击
       };
       this.$nextTick(() => {
@@ -336,7 +364,19 @@ export default {
         this.tableExample = this.$refs.table.init(settings);
       });
     },
-    handleTdClick(el, rowArr) { //点击表格的操作
+    //获取到了正确的信息
+    getInfors(infos, row) {
+      //其他的开始判断
+      let val = this.tableExample.colToProp(row.col);
+      this.shaftId = infos.ShaftID; //要操作的数据id
+      //点击关联的元空间
+      if (val === "SpaceCount") {
+        this.spaceList = infos.SpaceList;
+        this.isTableRightShow = true;
+      }
+    },
+    //表格点击事件
+    handleTdClick(el, rowArr) {
       //点击的是表头
       if (rowArr.row < 0) {
         return;
@@ -352,7 +392,8 @@ export default {
         this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
       } else if (isSort) {
         //排序后的数组
-        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
+        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper
+          .__arrayMap;
         let infos = this.tableData[sortArr[rowArr.row]];
         this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
       } else if (trimmedArr.length) {
@@ -363,149 +404,8 @@ export default {
         this.getInfors(infos, rowArr);
       }
     },
-    //获取到了正确的信息
-    getInfors(infos, row) {
-      //其他的开始判断
-      let val = this.tableExample.colToProp(row.col);
-      this.row = row.row
-      this.messKey = val
-      this.systemId = infos.id
-      debugger;
-      if (val == "operation") {
-         window.open(`http://47.94.89.44:8058/spread?id=${infos.id}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
-        // this.iframeSrc =
-        //   process.env.BASE_URL +
-        //   ":8889/#/details?perjectId=" +
-        //   this.projectId +
-        //   "&secret=" +
-        //   this.secret +
-        //   "&FmId=" +
-        //   infos.id +
-        //   "&type=1&code=" +
-        //   infos.category.substring(2, 6);
-        // this.dialog.details = true
-      }
-
-      //图片弹窗
-      if (
-        val == "infos.InstallPic" ||
-        val == "infos.InstallDrawing" ||
-        val == "infos.Nameplate" ||
-        val == "infos.Drawing"
-      ) {
-        if (this.onlyRead) {
-          this.dialog.lookPic = true
-          this.picsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
-        } else {
-          this.imgsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
-          this.dialog.uploadImgs = true
-        }
-      }
-
-      if (val == "linkSystem") {
-        this.dialog.systemType = true
-      }
-
-      if (val == "linkName" && this.onlyRead) {
-        this.$router.push({ name: 'partsLedger'});
-      } else if (val == "linkName" && !this.onlyRead) {
-        this.$router.push({ name: 'partsLedger'});
-      }
-
-      if (val == "infos.Pic") {
-        this.picsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
-        if (this.onlyRead) {
-          this.dialog.lookPic = true
-        } else {
-          this.dialog.pic = true
-        }
-      }
-      if (val == "infos.InsuranceFile" || val == "infos.Archive" || val == "infos.CheckReport") {
-        this.filesArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
-        this.dialog.uploadFiles = true
-      }
-      if (val == "linkName" && this.linkNameFalg) {
-        this.category = this.tableData[row.row]
-        this.dialog.changeRea = true
-      }
-      if (val == "infos.EquipQRCode") {
-        this.qrcodeUrl = this.tableData[row.row].infos.EquipQRCode
-        if (!!this.qrcodeUrl) {
-          this.dialog.qrcode = true;
-        } else {
-          this.$message("此设备没有设备二维码")
-        }
-      }
-
-      if (this.onlyRead) {
-        return
-      }
-
-      if (val == "infos.DPManufacturerID") {
-        this.dialog.firm = true;
-      }
-
-      if (val == "infos.SupplierContractID") {
-        let falg = null
-        if (!!this.tableData[row.row].infos) {
-          if (!!this.tableData[row.row].infos.DPSupplierID) {
-            falg = this.tableData[row.row].infos.DPSupplierID.split("-")[0]
-          }
-        }
-        if (!!falg) {
-          this.id = falg
-          this.dialog.supply = true;
-        } else {
-          this.$message("请先选择供应商")
-        }
-      }
-
-      if (val == "infos.InsuranceNum") {
-        //选择保单
-        let falg = null
-        if (!!this.tableData[row.row].infos) {
-          if (!!this.tableData[row.row].infos.DPInsurerID) {
-            falg = this.tableData[row.row].infos.DPInsurerID.split("-")[0]
-          }
-        }
-        if (!!falg) {
-          this.id = falg
-          this.dialog.guarantee = true;
-        } else {
-          this.$message("请先选择保险商")
-        }
-      }
-
-      if (
-        val == "infos.DPSupplierID"
-      ) {
-        if (!!infos.linkId) {
-          this.dialog.supplier = true;
-        } else {
-          this.$message("该设备无关联资产")
-        }
-      }
-
-      if (val == "infos.DPMaintainerID") {
-        if (!!infos.linkId) {
-          this.dialog.maintainer = true;
-        } else {
-          this.$message("该设备无关联资产")
-        }
-      }
-
-      if (
-        val == "infos.DPInsurerID") {
-        if (!!infos.linkId) {
-          this.dialog.insurer = true;
-        } else {
-          this.$message("该设备无关联资产")
-        }
-      }
-    },
     //获取被筛选掉的行号
     trimmedRows() {
-      // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
       var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
       let dataLength = this.tableData.length;
       let dataArr = new Array();
@@ -518,12 +418,6 @@ export default {
         dataArr = this.array_diff(dataArr, plugin);
       }
       return dataArr || [];
-      // var DataArray = new Array();
-
-      // for (var i = 0; i < plugin.length; i++) {
-      //     // 通过行号获取数据
-      //     DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
-      // }
     },
     //去除数组中相同的元素
     array_diff(a, b) {
@@ -536,52 +430,36 @@ export default {
         }
       }
       return a;
-    },
-    handleTabClick() { //切换部件时回调
-
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    }
-  },
-  computed: {
-    ...mapGetters("layout", ["projectId", "secret", "userId"]),
-    header() {
-      this.tableHeader.unshift(...["操作", "关联的资产", "部件本地名称"]);
-      return this.tableHeader;
-    },
-    type() {
-      this.tableHeaderName.unshift(
-        ...[
-          {
-            data: "operation",
-            renderer: tools.lookDetails,
-            readOnly: true
-          },
-          {
-            data: "demo1"
-          },
-          {
-            data: "demo2"
-          }
-        ]
-      );
-      return this.tableHeaderName;
     }
   }
 };
 </script>
-
-<style lang="scss">
-.tableBox {
-  height: calc(100% - 150px);
-}
-.parts-tab {
-  .el-tabs__header {
-    margin-bottom: 0;
+<style lang="less" scoped>
+#partsList {
+  overflow: hidden;
+  height: 100%;
+  background-color: #fff;
+  padding: 10px;
+  position: relative;
+  .right {
+    background: #fff;
   }
+  .search-header {
+    overflow: hidden;
+    padding: 0 10px 10px 10px;
+    border-bottom: 1px solid #bcbcbc;
+  }
+  .tableBox {
+    display: flex;
+    height: calc(100% - 150px);
+    margin-top: 10px;
+    .tableLeft {
+      flex: 1;
+    }
+  }
+}
+.el-pagination button,
+.el-pagination span:not([class*="suffix"]) {
+  vertical-align: middle;
 }
 </style>

src/views/ledger/facility/partsmanage/addparts/index.vue

@@ -1,364 +1,216 @@
 <template>
-  <div class="container">
-    <!-- 头部 -->
-    <div class="table-top">
-      <div class="table-top-left">
-        当前选择的部件类型：
-        <span>xxx</span>
+  <div id="deviceList">
+    <el-row class="right">
+      <span style="float:left;">当前选择的部件类型:{{'--'}}</span>
+      <div style="width:200px;display:inline-block;text-align:left;color:gray;">
+        <span>隐藏自动填充的信息</span>
+        <el-checkbox v-model="allMess" @change="getTableHeader"></el-checkbox>
       </div>
-      <div class="table-top-right">
-        <div class="table-top-right-none">
-           <el-checkbox v-model="checked">隐藏自动填充的信息</el-checkbox>
-        </div>
-        <div class="table-top-right-add">
-          增加
-          <span>1</span>个水泵
-          <el-button type="primary" style="width:80px" plain>增加</el-button>
-        </div>
+      <span>增加</span>
+      <el-input v-model="addNum" style="width:40px;" size="small"></el-input>
+      <span>个{{'--'}}</span>
+      <el-button @click="handleAddTableRow">增加</el-button>
+    </el-row>
+    <div class="tableBox">
+      <div class="center middle_sty" style="flex:2;" v-show="tableData && !tableData.length">
+        <p>
+          <i class="iconwushuju iconfont"></i>
+          暂无数据
+        </p>
       </div>
-    </div>
-    <!-- 表格 -->
-    <div class="table-center">
-      <div class="tableBox">
-        <handson-table ref="tablemain"></handson-table>
+      <div class="tableLeft" v-show="tableData && tableData.length">
+        <handson-table ref="table"></handson-table>
       </div>
-      <el-button type="info">创建部件</el-button>
-    </div>
-    <!-- 底部 -->
-    <div class="table-bottom">
-      <el-pagination
-        class="center"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="page.pageNumber"
-        :page-sizes="page.pageSizes"
-        :page-size="page.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="page.total"
-      ></el-pagination>
     </div>
+    <el-row class="center">
+      <el-button type="primary" size="medium" @click="handleCreateTableData">创建部件</el-button>
+    </el-row>
   </div>
 </template>
 <script>
-import tools from "@/utils/scan/tools";
-import handsonUtils from "@/utils/hasontableUtils";
-import showTools from "@/utils/handsontable/notShow";
-import text from "@/utils/handsontable/mainText";
-import handsonTable from "@/components/common/handsontable";
+import tools from "@/utils/scan/tools"
+import handsonUtils from "@/utils/hasontableUtils"
+import showTools from "@/utils/handsontable/notShow"
+import text from "@/utils/handsontable/mainText"
+import session from "@/framework/utils/storage"
+
+import handsonTable from "@/components/common/handsontable"
+import { getCenoteTableHeader, createCenoteTableData } from "@/api/scan/request"
 import { mapGetters, mapActions } from "vuex";
 export default {
-  components:{
+  components: {
     handsonTable
   },
   data() {
     return {
-       checked: true, //显示信息点
-      partsId: "",
-      tableExample: null,
-      page: {
-        pageSize: 20,
-        pageSizes: [10, 20, 50, 100],
-        pageNumber: 1,
-        total: 400
-      },
-      tableData: [
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          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"
-        }
-      ],
-      partsTypeList: [
-        {
-          id: "011A",
-          name: "部件A",
-          num: 12
-        },
-        {
-          id: "011B",
-          name: "部件B",
-          num: 5
-        },
-        {
-          id: "011C",
-          name: "部件C",
-          num: 8
-        },
-        {
-          id: "011AD",
-          name: "部件D",
-          num: 7
-        }
-      ]
+      addNum: 1,
+      shaftId: "",//要操作的部件id
+      isTableRightShow: false,
+      relationids: "",
+      onlyRead: false,
+      allMess: true,
+      tableHeader: [],
+      tableData: session.get("cenoteAddData")? session.get("cenoteAddData").length? session.get("cenoteAddData"): [{}]: [{}],
+      copyTableData: []
     };
   },
-  mounted() {
-    this.createTable();
-    this.partsId = this.partsTypeList[0].id;
+  computed: {
+    ...mapGetters("layout", [
+        "projectId",
+        "secret",
+        "userId"
+    ])
+  },
+  created() {
+    this.getTableHeader()
   },
+  // watch: {
+
+  // },
   methods: {
-    //获取表头
-    getHeaderData() {
-      this.changeCader();
-      if (this.mess.deviceId) {
-        getTableHeader({
-          code: this.mess.deviceId,
-          ProjId: this.projectId
-        }).then(res => {
-          this.headers = res.data.Content;
-          this.getMain();
-        });
+    // 获取表头数据(初始化表格)
+    async getTableHeader() {
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: {
+          "CollectFlag": this.allMess
+        }
       }
+      await getCenoteTableHeader(param, res => {
+        this.tableHeader = res.Content
+        this.initTable()
+      })
     },
-    createTable() {
+    // 创建部件数据
+    async handleCreateTableData() {
+      let newData = this.tableData.filter((item) => {
+        let keys = Object.keys(item)
+        keys.map((key) => { //将值为空字符串的属性删除
+          if(item[key] == "") {
+            delete item[key]
+          }
+        })
+        if(keys.length && Object.keys(item).length) {
+          return item
+        }
+      })
+      if(!newData.length) {
+        this.$message("创建信息为空,请录入信息后再创建!")
+        return
+      }
       const params = {
-        Filters: `id=${this.partsId}`,
-        Orders: "",
-        PageNumber: this.page.pageNumber,
-        PageSize: this.page.pageSize,
-        Projection: []
-      };
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: newData
+      }
+      await createCenoteTableData(params, (res) => {
+        this.$message.success("添加成功!")
+        session.remove("cenoteAddData")
+        this.$router.push({ name: 'cenotelist'})
+      })
+    },
+    // 删除表格行
+    handleDeleteTableRow() {
+      this.$message.success("删除成功")
+      this.formaTableData()
+    },
+    // 添加行
+    handleAddTableRow() {
+      let addRowLength = this.addNum
+      for(let i = 0; i < addRowLength; i++){
+        this.tableData.push({})
+      }
+      this.initTable()
+      this.formaTableData()
+    },
+    //修改
+    handleUpdataTable(changeData, source) {
+      this.formaTableData()
+    },
+    //保存去掉空字段的新增数据
+    formaTableData() {
+      let newData = this.tableData.filter((item) => {
+        let keys = Object.keys(item)
+        keys.map((key) => { //将值为空字符串的属性删除
+          if(item[key] == "") {
+            delete item[key]
+          }
+        })
+        if(keys.length && Object.keys(item).length) {
+          return item
+        }
+      })
+      session.set("cenoteAddData", newData)
+    },
+    //关闭右侧关联元空间输入按钮
+    handleCloseRight() {
+      this.isTableRightShow = false
+    },
+    formatHeaderData(list) {//格式化表头显示的数据
+      let arr = tools.copyArr(list)
+      arr.map((item) => {
+        item.Visible = true
+      })
+      let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
+      if (!this.onlyRead) {
+        readArr.push("Own")
+      }
+      let data = showTools.changeHeader(arr, readArr, this.onlyRead, false, this.allMess)
+      // data.unshift("关联的元空间");
+      return data;
+    },
+    formatHeaderType(list) {//格式化表头头映射的数据
+      let arr = tools.copyArr(list);
+      arr.map((item) => { //缺少信息点
+        item.Visible = true
+      })
+      let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
+      let data = showTools.showHeaderTypes(arr, readArr, this.onlyRead, false, this.allMess)
+      // data.unshift({
+      //   data: "SpaceCount",
+      //   readOnly: this.onlyRead
+      // })
+      return data;
+    },
+    initTable() {//实例化表格
       let settings = {
         data: this.tableData,
-        colHeaders: this.header,
-        columns: this.type,
+        colHeaders: this.formatHeaderData(this.tableHeader),
+        columns: this.formatHeaderType(this.tableHeader),
         rowHeights: 30,
         maxRows: this.tableData.length,
-        fixedRowsTop: 1,
-        fixedColumnsLeft: 4,
         contextMenu: {
           items: {
             remove_row: {
-              name: "删除设备"
+              name: "删除部件"
             }
           }
         },
         // 事件
-        afterChange: this.tdChange, //修改后
+        afterChange: this.handleUpdataTable, //修改后
         afterFilter: this.trimmedRows, //排序前
-        afterRemoveRow: this.romoveFm, //右键删除
+        afterRemoveRow: this.handleDeleteTableRow, //右键删除
         afterOnCellMouseDown: this.handleTdClick //鼠标点击
       };
       this.$nextTick(() => {
-        console.log(this.$refs.tablemain);
-        this.tableExample = this.$refs.tablemain.init(settings);
+        console.log(this.$refs.table);
+        this.tableExample = this.$refs.table.init(settings);
       });
     },
+    //获取到了正确的信息
+    getInfors(infos, row) {
+      //其他的开始判断
+      let val = this.tableExample.colToProp(row.col);
+      this.row = row.row //要操作的列号
+      this.messKey = val //要操作的列类型
+      //点击关联的元空间
+      // if (val === "SpaceCount") {
+      //   this.isTableRightShow = true;
+      // }
+    },
+    //表格点击事件
     handleTdClick(el, rowArr) {
-      //点击表格的操作
       //点击的是表头
       if (rowArr.row < 0) {
         return;
@@ -374,8 +226,7 @@ export default {
         this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
       } else if (isSort) {
         //排序后的数组
-        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper
-          .__arrayMap;
+        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
         let infos = this.tableData[sortArr[rowArr.row]];
         this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
       } else if (trimmedArr.length) {
@@ -386,168 +237,6 @@ export default {
         this.getInfors(infos, rowArr);
       }
     },
-    //获取到了正确的信息
-    getInfors(infos, row) {
-      //其他的开始判断
-      let val = this.tableExample.colToProp(row.col);
-      this.row = row.row;
-      this.messKey = val;
-      this.systemId = infos.id;
-      debugger;
-      if (val == "operation") {
-        window.open(
-          `http://47.94.89.44:8058/spread?id=${infos.id}&pid=${
-            this.projectId
-          }&secret=${this.secret}`,
-          "_blank"
-        );
-        // this.iframeSrc =
-        //   process.env.BASE_URL +
-        //   ":8889/#/details?perjectId=" +
-        //   this.projectId +
-        //   "&secret=" +
-        //   this.secret +
-        //   "&FmId=" +
-        //   infos.id +
-        //   "&type=1&code=" +
-        //   infos.category.substring(2, 6);
-        // this.dialog.details = true
-      }
-
-      //图片弹窗
-      if (
-        val == "infos.InstallPic" ||
-        val == "infos.InstallDrawing" ||
-        val == "infos.Nameplate" ||
-        val == "infos.Drawing"
-      ) {
-        if (this.onlyRead) {
-          this.dialog.lookPic = true;
-          this.picsArr = this.tableData[row.row].infos
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-              ? this.tableData[row.row].infos[val.split(".")[1]]
-              : []
-            : [];
-        } else {
-          this.imgsArr = this.tableData[row.row].infos
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-              ? this.tableData[row.row].infos[val.split(".")[1]]
-              : []
-            : [];
-          this.dialog.uploadImgs = true;
-        }
-      }
-
-      if (val == "linkSystem") {
-        this.dialog.systemType = true;
-      }
-
-      if (val == "linkName" && this.onlyRead) {
-        this.$router.push({ name: "partsLedger" });
-      } else if (val == "linkName" && !this.onlyRead) {
-        this.$router.push({ name: "partsLedger" });
-      }
-
-      if (val == "infos.Pic") {
-        this.picsArr = this.tableData[row.row].infos
-          ? this.tableData[row.row].infos[val.split(".")[1]]
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-            : []
-          : [];
-        if (this.onlyRead) {
-          this.dialog.lookPic = true;
-        } else {
-          this.dialog.pic = true;
-        }
-      }
-      if (
-        val == "infos.InsuranceFile" ||
-        val == "infos.Archive" ||
-        val == "infos.CheckReport"
-      ) {
-        this.filesArr = this.tableData[row.row].infos
-          ? this.tableData[row.row].infos[val.split(".")[1]]
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-            : []
-          : [];
-        this.dialog.uploadFiles = true;
-      }
-      if (val == "linkName" && this.linkNameFalg) {
-        this.category = this.tableData[row.row];
-        this.dialog.changeRea = true;
-      }
-      if (val == "infos.EquipQRCode") {
-        this.qrcodeUrl = this.tableData[row.row].infos.EquipQRCode;
-        if (!!this.qrcodeUrl) {
-          this.dialog.qrcode = true;
-        } else {
-          this.$message("此设备没有设备二维码");
-        }
-      }
-
-      if (this.onlyRead) {
-        return;
-      }
-
-      if (val == "infos.DPManufacturerID") {
-        this.dialog.firm = true;
-      }
-
-      if (val == "infos.SupplierContractID") {
-        let falg = null;
-        if (!!this.tableData[row.row].infos) {
-          if (!!this.tableData[row.row].infos.DPSupplierID) {
-            falg = this.tableData[row.row].infos.DPSupplierID.split("-")[0];
-          }
-        }
-        if (!!falg) {
-          this.id = falg;
-          this.dialog.supply = true;
-        } else {
-          this.$message("请先选择供应商");
-        }
-      }
-
-      if (val == "infos.InsuranceNum") {
-        //选择保单
-        let falg = null;
-        if (!!this.tableData[row.row].infos) {
-          if (!!this.tableData[row.row].infos.DPInsurerID) {
-            falg = this.tableData[row.row].infos.DPInsurerID.split("-")[0];
-          }
-        }
-        if (!!falg) {
-          this.id = falg;
-          this.dialog.guarantee = true;
-        } else {
-          this.$message("请先选择保险商");
-        }
-      }
-
-      if (val == "infos.DPSupplierID") {
-        if (!!infos.linkId) {
-          this.dialog.supplier = true;
-        } else {
-          this.$message("该设备无关联资产");
-        }
-      }
-
-      if (val == "infos.DPMaintainerID") {
-        if (!!infos.linkId) {
-          this.dialog.maintainer = true;
-        } else {
-          this.$message("该设备无关联资产");
-        }
-      }
-
-      if (val == "infos.DPInsurerID") {
-        if (!!infos.linkId) {
-          this.dialog.insurer = true;
-        } else {
-          this.$message("该设备无关联资产");
-        }
-      }
-    },
     //获取被筛选掉的行号
     trimmedRows() {
       // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
@@ -567,7 +256,7 @@ export default {
 
       // for (var i = 0; i < plugin.length; i++) {
       //     // 通过行号获取数据
-      //     DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
+      //     DataArray.push(this.tableExample.getSourceDataAtRow(plugin[i]));
       // }
     },
     //去除数组中相同的元素
@@ -581,92 +270,52 @@ export default {
         }
       }
       return a;
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    }
-  },
-  computed: {
-    ...mapGetters("layout", ["projectId", "secret", "userId"]),
-    header() {
-      this.tableHeader.unshift(...["操作", "关联的资产", "部件本地名称"]);
-      return this.tableHeader;
-    },
-    type() {
-      this.tableHeaderName.unshift(
-        ...[
-          {
-            data: "operation",
-            renderer: tools.lookDetails,
-            readOnly: true
-          },
-          {
-            data: "demo1"
-          },
-          {
-            data: "demo2"
-          }
-        ]
-      );
-      return this.tableHeaderName;
     }
   }
 };
 </script>
-<style lang="scss" scoped>
-.container {
-  padding: 15px;
+<style lang="less" scoped>
+#deviceList {
+  overflow: hidden;
+  height: 100%;
+  background-color: #fff;
+  padding: 10px;
   position: relative;
-  .table-top {
+  .right {
+    background: #fff;
+  }
+  .search-header {
+    overflow: hidden;
+    padding:0 10px 10px 10px;
+    border-bottom: 1px solid #bcbcbc;
+  }
+  .tableBox {
     display: flex;
-    justify-content: space-between;
-    .table-top-right-none {
-      display: inline-block;
-      border-right: 1px solid #333333;
-      margin-right: 20px;
-      padding-right: 20px;
+    height: calc(100% - 100px);
+    margin-top: 10px;
+    .tableLeft {
+      flex: 2;
     }
-    .table-top-right-add {
-      display: inline-block;
-      span {
-        display: inline-block;
-        border: 1px solid #333333;
-        padding: 0 10px;
-        margin: 0 5px;
-        height: 20px;
-        line-height: 20px;
-        vertical-align: middle;
-        cursor: pointer;
+    .tableRight {
+      flex: 1;
+      // display: none;
+      border-left: 1px solid #dadada;
+      padding: 5px 15px;
+      margin-right: 5px;
+      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
+      .table_right_box::after{
+        display: block;
+        content: "";
+        clear: both;
       }
-      .el-button {
-        margin-left: 15px;
+      .close_right {
+        float: right;
+        cursor: pointer;
       }
     }
   }
-  .table-center {
-    height: 100%;
-    margin: 20px 0;
-    overflow: hidden;
-    .tableBox {
-      // height: calc(100% - 130px);
-    }
-    .el-button{
-      display: block;
-      margin: 10px auto 0 auto;
-    }
-  }
-  .table-bottom {
-    overflow: hidden;
-    width: 99%;
-    position: absolute;
-    bottom: 15px;
-    left: 0;
-    .el-pagination{
-      float: right;
-    }
+  .create_button{
+    margin-top: 10px;
   }
 }
 </style>

src/views/ledger/facility/partsmanage/index.vue

@@ -1,357 +1,305 @@
 <template>
-  <div>
-    <div class="parts-tab">
-      <el-tabs v-model="partsId" @tab-click="handleTabClick">
-        <el-tab-pane
-          :label="item.name + ' ( ' + item.num + ' ) '"
-          v-for="item in partsTypeList"
-          :key="item.id"
-          :name="item.id"
-        ></el-tab-pane>
+  <div id="deviceList">
+    <el-row>
+      <el-tabs @tab-click="handleClick" v-model="tabVal">
+        <el-tab-pane label="用户管理" name="first"></el-tab-pane>
+        <el-tab-pane label="配置管理" name="second"></el-tab-pane>
+        <el-tab-pane label="角色管理" name="third"></el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
       </el-tabs>
-    </div>
+    </el-row>
     <el-row class="right">
-      <el-checkbox v-model="checked">隐藏自动填充的信息</el-checkbox>
-      <el-button @click="addparts">添加3部件</el-button>
-      <el-button>刷新</el-button>
-      <el-button>撤销</el-button>
+      <div style="width:200px;display:inline-block;text-align:left;color:gray;">
+        <span>隐藏自动填充的信息</span>
+        <el-checkbox v-model="allMess" @change="getTableHeader"></el-checkbox>
+      </div>
+      <el-button @click="handleCreateTableData">添加部件</el-button>
+      <el-button @click="getTableHeader">刷新</el-button>
+      <el-button v-show="!onlyRead" @click="undo">撤销</el-button>
     </el-row>
     <div class="tableBox">
-      <handson-table ref="table"></handson-table>
-    </div>
-    <div class="table-bottom">
-      <el-pagination
-        class="fr"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="page.pageNumber"
-        :page-sizes="page.pageSizes"
-        :page-size="page.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="page.total"
-      ></el-pagination>
+      <div class="center middle_sty" v-show="tableData && !tableData.length">
+        <p>
+          <i class="iconwushuju iconfont"></i>
+          暂无数据
+        </p>
+      </div>
+      <div class="tableLeft" v-show="tableData && tableData.length">
+        <handson-table ref="table"></handson-table>
+      </div>
     </div>
+    <el-pagination
+      class="right"
+      v-show="tableData && tableData.length"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="page.pageNumber"
+      :page-sizes="page.pageSizes"
+      :page-size="page.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="page.total">
+    </el-pagination>
   </div>
 </template>
-
 <script>
-import tools from "@/utils/scan/tools";
-import handsonUtils from "@/utils/hasontableUtils";
-import showTools from "@/utils/handsontable/notShow";
-import text from "@/utils/handsontable/mainText";
+import tools from "@/utils/scan/tools"
+import handsonUtils from "@/utils/hasontableUtils"
+import showTools from "@/utils/handsontable/notShow"
+import text from "@/utils/handsontable/mainText"
 
+import cenoteType from "@/components/ledger/lib/cenoteType";
 import handsonTable from "@/components/common/handsontable";
+import { getCenoteTableHeader, getCenoteTableData, updataCenoteTableData, deleteCenoteTableData, saveCenoteRelateSpace } from "@/api/scan/request"
 import { mapGetters, mapActions } from "vuex";
-
 export default {
   components: {
+    cenoteType,
     handsonTable
   },
-  props: {},
   data() {
     return {
-      partsId: "",
-      tableExample: null,
+      cenoteId: "",//部件类型id
+      shaftId: "",//要操作的部件id
+      isTableRightShow: false,
+      spaceList: "",
+      onlyRead: false,
+      allMess: true,
+      tableHeader: [],
       page: {
-        pageSize: 20,
+        pageSize: 50,
         pageSizes: [10, 20, 50, 100],
         pageNumber: 1,
-        total: 400
+        total: 0
       },
-      tableData: [
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          operation: "查看详情",
-          demo1: "小龙",
-          demo2: "三娘",
-          info1: "阿党",
-          info2: "阿腾",
-          info3: "王靖",
-          info4: "文强",
-          info5: "小白"
-        },
-        {
-          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,
-      partsTypeList: [
-        {
-          id: "011A",
-          name: "部件A",
-          num: 12
-        },
-        {
-          id: "011B",
-          name: "部件B",
-          num: 5
-        },
-        {
-          id: "011C",
-          name: "部件C",
-          num: 8
-        },
-        {
-          id: "011AD",
-          name: "部件D",
-          num: 7
-        }
-      ]
+      tableData: [],
+      copyTableData: [],
+      tableExample:null,
+      tabVal:'first'
     };
   },
-  mounted() {
-    this.createTable();
-    this.partsId = this.partsTypeList[0].id;
+  computed: {
+    ...mapGetters("layout", [
+        "projectId",
+        "secret",
+        "userId"
+    ])
+  },
+  created() {
+    this.getTableHeader()
   },
   methods: {
-    //获取表头
-    getHeaderData() {
-      this.changeCader();
-      if (this.mess.deviceId) {
-        getTableHeader({
-          code: this.mess.deviceId,
-          ProjId: this.projectId
-        }).then(res => {
-          this.headers = res.data.Content;
-          this.getMain();
-        });
-      }
+    //tab页点击事件
+    handleClick(){
+      console.log(this.tabVal)
     },
-    addparts() {
-      this.$router.push({ name: "addparts", params: { facilityId: 1 } });
-      console.log("dianjile");
+    // 获取表头数据(初始化表格)
+    async getTableHeader() {
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: {
+          "CollectFlag": this.allMess
+        }
+      }
+      await getCenoteTableHeader(param, res => {
+        this.tableHeader = res.Content;
+        this.getTableData()
+      })
     },
-    createTable() {
-      const params = {
-        Filters: `id=${this.partsId}`,
-        Orders: "",
+    async getTableData() {//获取表格数据
+      let data = {
+        Filters: this.cenoteId? `ProjectId='${this.projectId}';structureInfo.ShaftFuncType='${this.cenoteId}'`: `ProjectId='${this.projectId}'`,
         PageNumber: this.page.pageNumber,
-        PageSize: this.page.pageSize,
-        Projection: []
+        PageSize: this.page.pageSize
+      }
+      const params = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: data
+      }
+      await getCenoteTableData(params, (res) => {
+        this.tableData = res.Content
+        this.copyTableData = tools.deepCopy(res.Content)
+        this.page.pageNumber = res.PageNumber
+        this.page.total = res.Total
+        if(this.tableData && this.tableData.length){
+          this.initTable()
+        }
+      })
+    },
+    // 修改表格内容
+    async updateTableData(data, change) {
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: {
+          Content: [],
+          Projection: []
+        }
       };
+      //生成要修改字段列表
+      change.map((item) => {
+        if(item[1] && param.data.Projection.indexOf(item[1]) == -1) {
+          param.data.Projection.push(item[1])
+        }
+      })
+      //生成对应修改数据
+      data.map((item, index) => {
+        let keyarr = change[index][1].split(".")
+        if (keyarr && keyarr.length > 1) {
+          item[keyarr[0]][keyarr[1]] = item[keyarr[0]][keyarr[1]] != ""? item[keyarr[0]][keyarr[1]]: null
+        } else {
+          item[keyarr[0]] = item[keyarr[0]] != ""? item[keyarr[0]]: null
+        }
+        param.data.Content.push(item);
+      });
+
+      await updataCenoteTableData(param, (res) => {
+        
+      })
+    },
+    // 删除表格数据
+    async deleteTableData(params) {
+      await deleteCenoteTableData(params, (res) => {
+        this.$message.success("删除成功!")
+        this.getTableHeader()
+      })
+    },
+    //保存元空间关联
+    async saveSpaceList() {
+      let data = {
+        ShaftId: this.shaftId,
+        SpaceId: this.spaceList
+      }
+      const params = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: data
+      }
+      await saveCenoteRelateSpace(params, (res) => {
+        this.$message.success("关联成功!")
+        this.getTableHeader()
+      })
+    },
+    // 添加部件
+    handleCreateTableData() {
+      this.$router.push({ name: 'addparts'})
+    },
+    // 删除表格行
+    handleDeleteTableRow() {
+      let params = tools.differenceArr(this.tableData, this.copyTableData)
+      if (params.length < 1 || this.tableData > this.copyTableData) {
+        return
+      }
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: []
+      }
+      params.map(item => {
+        param.data.push(item.ShaftID)
+      })
+      this.$confirm("此操作将删除部件，是否继续？", "提示", {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.deleteTableData(param)
+      }).catch(() => {
+        this.getTableHeader()
+        this.$message("取消删除")
+      })
+    },
+    //修改
+    handleUpdataTable(changeData, source) {
+      if (!this.onlyRead) {
+        if (changeData) {
+          let trimmedArr = this.trimmedRows();
+          let param = handsonUtils.getParam(changeData, source, this.tableExample, trimmedArr);
+          let data = [];
+          for (let i = 0; i < param.length; i++) {
+            data.push(param[i]);
+          }
+          //如果data中包含/且data长度为1,将其转换成.
+          if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
+            changeData[0][1] = changeData[0][1].split("/").join(".")
+          }
+
+          // 存在data进行修改请求
+          if (data && data.length) {
+            this.updateTableData(data, changeData);
+          }
+        }
+      }
+    },
+    //撤回
+    undo() {
+      this.tableExample.undo();
+    },
+    //切换部件类型
+    changeFloor(value) {
+      this.cenoteId = value.Id
+      this.getTableHeader()
+    },
+    //关闭右侧关联元空间输入按钮
+    handleCloseRight() {
+      this.isTableRightShow = false
+      this.spaceList = ""
+    },
+    //切换每页显示多少条数据
+    handleSizeChange(val) {
+      this.page.pageSize = val
+      this.getTableHeader()
+    },
+    //切换页数
+    handleCurrentChange(val) {
+      this.page.pageNumber = val
+      this.getTableHeader()
+    },
+    formatHeaderData(list) {//格式化表头显示的数据
+      let arr = tools.copyArr(list)
+      arr.map((item) => {
+        item.Visible = true
+      })
+      let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
+      if (!this.onlyRead) {
+        readArr.push("Own")
+      }
+      let data = showTools.changeHeader(arr, readArr, this.onlyRead, false, this.allMess)
+      data.unshift("关联的元空间");
+      return data;
+    },
+    formatHeaderType(list) {//格式化表头头映射的数据
+      let arr = tools.copyArr(list);
+      arr.map((item) => { //缺少信息点
+        item.Visible = true
+      })
+      let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "E1", "F1", "F2", "L", "L1", "L2", "X"]
+      let data = showTools.showHeaderTypes(arr, readArr, this.onlyRead, false, this.allMess)
+      data.unshift({
+        data: "SpaceCount",
+        renderer: tools.num,
+        readOnly: true
+      })
+      return data;
+    },
+    initTable() {//实例化表格
       let settings = {
         data: this.tableData,
-        colHeaders: this.header,
-        columns: this.type,
+        colHeaders: this.formatHeaderData(this.tableHeader),
+        columns: this.formatHeaderType(this.tableHeader),
         rowHeights: 30,
         maxRows: this.tableData.length,
-        fixedRowsTop: 1,
-        fixedColumnsLeft: 4,
         contextMenu: {
           items: {
             remove_row: {
-              name: "删除设备"
+              name: "删除部件"
             }
           }
         },
         // 事件
-        afterChange: this.tdChange, //修改后
-        afterFilter: this.trimmedRows, //排序前
-        afterRemoveRow: this.romoveFm, //右键删除
+        afterChange: this.handleUpdataTable, //修改后
+        afterRemoveRow: this.handleDeleteTableRow, //右键删除
         afterOnCellMouseDown: this.handleTdClick //鼠标点击
       };
       this.$nextTick(() => {
@@ -359,8 +307,19 @@ export default {
         this.tableExample = this.$refs.table.init(settings);
       });
     },
+    //获取到了正确的信息
+    getInfors(infos, row) {
+      //其他的开始判断
+      let val = this.tableExample.colToProp(row.col)
+      this.shaftId = infos.ShaftID //要操作的数据id
+      //点击关联的元空间
+      if (val === "SpaceCount") {
+        this.spaceList = infos.SpaceList
+        this.isTableRightShow = true
+      }
+    },
+    //表格点击事件
     handleTdClick(el, rowArr) {
-      //点击表格的操作
       //点击的是表头
       if (rowArr.row < 0) {
         return;
@@ -376,8 +335,7 @@ export default {
         this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
       } else if (isSort) {
         //排序后的数组
-        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper
-          .__arrayMap;
+        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
         let infos = this.tableData[sortArr[rowArr.row]];
         this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
       } else if (trimmedArr.length) {
@@ -388,168 +346,6 @@ export default {
         this.getInfors(infos, rowArr);
       }
     },
-    //获取到了正确的信息
-    getInfors(infos, row) {
-      //其他的开始判断
-      let val = this.tableExample.colToProp(row.col);
-      this.row = row.row;
-      this.messKey = val;
-      this.systemId = infos.id;
-      debugger;
-      if (val == "operation") {
-        window.open(
-          `http://47.94.89.44:8058/spread?id=${infos.id}&pid=${
-            this.projectId
-          }&secret=${this.secret}`,
-          "_blank"
-        );
-        // this.iframeSrc =
-        //   process.env.BASE_URL +
-        //   ":8889/#/details?perjectId=" +
-        //   this.projectId +
-        //   "&secret=" +
-        //   this.secret +
-        //   "&FmId=" +
-        //   infos.id +
-        //   "&type=1&code=" +
-        //   infos.category.substring(2, 6);
-        // this.dialog.details = true
-      }
-
-      //图片弹窗
-      if (
-        val == "infos.InstallPic" ||
-        val == "infos.InstallDrawing" ||
-        val == "infos.Nameplate" ||
-        val == "infos.Drawing"
-      ) {
-        if (this.onlyRead) {
-          this.dialog.lookPic = true;
-          this.picsArr = this.tableData[row.row].infos
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-              ? this.tableData[row.row].infos[val.split(".")[1]]
-              : []
-            : [];
-        } else {
-          this.imgsArr = this.tableData[row.row].infos
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-              ? this.tableData[row.row].infos[val.split(".")[1]]
-              : []
-            : [];
-          this.dialog.uploadImgs = true;
-        }
-      }
-
-      if (val == "linkSystem") {
-        this.dialog.systemType = true;
-      }
-
-      if (val == "linkName" && this.onlyRead) {
-        this.$router.push({ name: "partsLedger" });
-      } else if (val == "linkName" && !this.onlyRead) {
-        this.$router.push({ name: "partsLedger" });
-      }
-
-      if (val == "infos.Pic") {
-        this.picsArr = this.tableData[row.row].infos
-          ? this.tableData[row.row].infos[val.split(".")[1]]
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-            : []
-          : [];
-        if (this.onlyRead) {
-          this.dialog.lookPic = true;
-        } else {
-          this.dialog.pic = true;
-        }
-      }
-      if (
-        val == "infos.InsuranceFile" ||
-        val == "infos.Archive" ||
-        val == "infos.CheckReport"
-      ) {
-        this.filesArr = this.tableData[row.row].infos
-          ? this.tableData[row.row].infos[val.split(".")[1]]
-            ? this.tableData[row.row].infos[val.split(".")[1]]
-            : []
-          : [];
-        this.dialog.uploadFiles = true;
-      }
-      if (val == "linkName" && this.linkNameFalg) {
-        this.category = this.tableData[row.row];
-        this.dialog.changeRea = true;
-      }
-      if (val == "infos.EquipQRCode") {
-        this.qrcodeUrl = this.tableData[row.row].infos.EquipQRCode;
-        if (!!this.qrcodeUrl) {
-          this.dialog.qrcode = true;
-        } else {
-          this.$message("此设备没有设备二维码");
-        }
-      }
-
-      if (this.onlyRead) {
-        return;
-      }
-
-      if (val == "infos.DPManufacturerID") {
-        this.dialog.firm = true;
-      }
-
-      if (val == "infos.SupplierContractID") {
-        let falg = null;
-        if (!!this.tableData[row.row].infos) {
-          if (!!this.tableData[row.row].infos.DPSupplierID) {
-            falg = this.tableData[row.row].infos.DPSupplierID.split("-")[0];
-          }
-        }
-        if (!!falg) {
-          this.id = falg;
-          this.dialog.supply = true;
-        } else {
-          this.$message("请先选择供应商");
-        }
-      }
-
-      if (val == "infos.InsuranceNum") {
-        //选择保单
-        let falg = null;
-        if (!!this.tableData[row.row].infos) {
-          if (!!this.tableData[row.row].infos.DPInsurerID) {
-            falg = this.tableData[row.row].infos.DPInsurerID.split("-")[0];
-          }
-        }
-        if (!!falg) {
-          this.id = falg;
-          this.dialog.guarantee = true;
-        } else {
-          this.$message("请先选择保险商");
-        }
-      }
-
-      if (val == "infos.DPSupplierID") {
-        if (!!infos.linkId) {
-          this.dialog.supplier = true;
-        } else {
-          this.$message("该设备无关联资产");
-        }
-      }
-
-      if (val == "infos.DPMaintainerID") {
-        if (!!infos.linkId) {
-          this.dialog.maintainer = true;
-        } else {
-          this.$message("该设备无关联资产");
-        }
-      }
-
-      if (val == "infos.DPInsurerID") {
-        if (!!infos.linkId) {
-          this.dialog.insurer = true;
-        } else {
-          this.$message("该设备无关联资产");
-        }
-      }
-    },
     //获取被筛选掉的行号
     trimmedRows() {
       // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
@@ -565,12 +361,6 @@ export default {
         dataArr = this.array_diff(dataArr, plugin);
       }
       return dataArr || [];
-      // var DataArray = new Array();
-
-      // for (var i = 0; i < plugin.length; i++) {
-      //     // 通过行号获取数据
-      //     DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
-      // }
     },
     //去除数组中相同的元素
     array_diff(a, b) {
@@ -583,55 +373,35 @@ export default {
         }
       }
       return a;
-    },
-    handleTabClick() {
-      //切换部件时回调
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    }
-  },
-  computed: {
-    ...mapGetters("layout", ["projectId", "secret", "userId"]),
-    header() {
-      this.tableHeader.unshift(...["操作", "关联的资产", "部件本地名称"]);
-      return this.tableHeader;
-    },
-    type() {
-      this.tableHeaderName.unshift(
-        ...[
-          {
-            data: "operation",
-            renderer: tools.lookDetails,
-            readOnly: true
-          },
-          {
-            data: "demo1"
-          },
-          {
-            data: "demo2"
-          }
-        ]
-      );
-      return this.tableHeaderName;
     }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.tableBox {
-  height: calc(100% - 150px);
-}
-.parts-tab {
-  .el-tabs__header {
-    margin-bottom: 0;
+<style lang="less" scoped>
+#deviceList {
+  overflow: hidden;
+  height: 100%;
+  background-color: #fff;
+  padding: 10px;
+  position: relative;
+  .right {
+    background: #fff;
+  }
+  .search-header {
+    overflow: hidden;
+    padding:0 10px 10px 10px;
+    border-bottom: 1px solid #bcbcbc;
+  }
+  .tableBox {
+    display: flex;
+    height: calc(100% - 150px);
+    margin-top: 10px;
+    .tableLeft {
+      flex: 1;
+    }
   }
 }
-.fr {
-  float: right;
+.el-pagination button, .el-pagination span:not([class*=suffix]) {
+    vertical-align: middle;
 }
 </style>