|
@@ -1,26 +1,68 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import handsonTable from "@/components/common/handsontable";
|
|
import { mapGetters, mapActions } from "vuex";
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
|
+ components: {
|
|
|
|
+ handsonTable
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
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,
|
|
checked: true,
|
|
- partsTable: "partsTable",
|
|
|
|
partsTypeList: [
|
|
partsTypeList: [
|
|
{
|
|
{
|
|
id: "011A",
|
|
id: "011A",
|
|
@@ -45,51 +87,67 @@ export default {
|
|
]
|
|
]
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ mounted() {
|
|
|
|
+ this.createTable();
|
|
|
|
+ },
|
|
methods: {
|
|
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,
|
|
fixedRowsTop: 1,
|
|
- language: "zh-CN",
|
|
|
|
contextMenu: {
|
|
contextMenu: {
|
|
items: {
|
|
items: {
|
|
remove_row: {
|
|
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: {
|
|
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>
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
|
|
|
+<style lang="scss">
|
|
|
|
+.tableBox {
|
|
|
|
+ height: calc(100% - 150px);
|
|
|
|
+}
|
|
|
|
+.parts-tab {
|
|
|
|
+ .el-tabs__header {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|