|
@@ -0,0 +1,692 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 头部 -->
|
|
|
+ <div class="table-top">
|
|
|
+ <div class="table-top-left">
|
|
|
+ 当前选择的部件类型:
|
|
|
+ <span>xxx</span>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <div class="table-center">
|
|
|
+ <div class="tableBox">
|
|
|
+ <handson-table ref="tablemain"></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>
|
|
|
+ </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 { mapGetters, mapActions } from "vuex";
|
|
|
+export default {
|
|
|
+ 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: "小白"
|
|
|
+ },{
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.createTable();
|
|
|
+ this.partsId = this.partsTypeList[0].id;
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ createTable() {
|
|
|
+ const params = {
|
|
|
+ Filters: `id=${this.partsId}`,
|
|
|
+ Orders: "",
|
|
|
+ PageNumber: this.page.pageNumber,
|
|
|
+ PageSize: this.page.pageSize,
|
|
|
+ Projection: []
|
|
|
+ };
|
|
|
+ let settings = {
|
|
|
+ data: this.tableData,
|
|
|
+ colHeaders: this.header,
|
|
|
+ columns: this.type,
|
|
|
+ rowHeights: 30,
|
|
|
+ maxRows: this.tableData.length,
|
|
|
+ fixedRowsTop: 1,
|
|
|
+ fixedColumnsLeft: 4,
|
|
|
+ contextMenu: {
|
|
|
+ items: {
|
|
|
+ remove_row: {
|
|
|
+ name: "删除设备"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 事件
|
|
|
+ afterChange: this.tdChange, //修改后
|
|
|
+ afterFilter: this.trimmedRows, //排序前
|
|
|
+ afterRemoveRow: this.romoveFm, //右键删除
|
|
|
+ afterOnCellMouseDown: this.handleTdClick //鼠标点击
|
|
|
+ };
|
|
|
+ this.$nextTick(() => {
|
|
|
+ console.log(this.$refs.tablemain);
|
|
|
+ this.tableExample = this.$refs.tablemain.init(settings);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleTdClick(el, rowArr) {
|
|
|
+ //点击表格的操作
|
|
|
+ //点击的是表头
|
|
|
+ if (rowArr.row < 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //被筛选过后的数组
|
|
|
+ let trimmedArr = this.trimmedRows();
|
|
|
+ //是否启用了排序
|
|
|
+ let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
|
|
|
+ if (trimmedArr.length && isSort) {
|
|
|
+ let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
|
|
|
+ .__arrayMap;
|
|
|
+ let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
|
|
|
+ this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
|
|
|
+ } else if (isSort) {
|
|
|
+ //排序后的数组
|
|
|
+ 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) {
|
|
|
+ let infos = this.tableData[trimmedArr[rowArr.row]];
|
|
|
+ this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
|
|
|
+ } else {
|
|
|
+ let infos = this.tableData[rowArr.row];
|
|
|
+ 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();
|
|
|
+ for (let i = 0; i < dataLength; i++) {
|
|
|
+ dataArr.push(i);
|
|
|
+ }
|
|
|
+ if (plugin.length <= 0) {
|
|
|
+ dataArr = undefined;
|
|
|
+ } else {
|
|
|
+ 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) {
|
|
|
+ for (var i = 0; i < b.length; i++) {
|
|
|
+ for (var j = 0; j < a.length; j++) {
|
|
|
+ if (a[j] == b[i]) {
|
|
|
+ a.splice(j, 1);
|
|
|
+ j = j - 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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 {
|
|
|
+ border: 1px solid #333333;
|
|
|
+ padding: 15px;
|
|
|
+ position: relative;
|
|
|
+ .table-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .table-top-right-none {
|
|
|
+ display: inline-block;
|
|
|
+ border-right: 1px solid #333333;
|
|
|
+ margin-right: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .el-button {
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|