|
@@ -0,0 +1,509 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="hanson-bar">
|
|
|
+ <span>当前选择的设备类型:{{deviceType.facility}}</span>
|
|
|
+ <el-button size="small" @click="undo" icon="iconfont icon-undo">撤销</el-button>
|
|
|
+ <el-button size="small" @click="reset" icon="iconfont icon-shuaxin">刷新</el-button>
|
|
|
+ </div>
|
|
|
+ <qrcode :dialog="dialog" :addBody="true" ref="qrcode"></qrcode>
|
|
|
+ <firm :dialog="dialog"></firm>
|
|
|
+ <supply-dialog :dialog="dialog"></supply-dialog>
|
|
|
+ <supplier-dialog :dialog="dialog"></supplier-dialog>
|
|
|
+ <guarantee-dialog :dialog="dialog"></guarantee-dialog>
|
|
|
+ <upload-files-dialog :dialog="dialog"></upload-files-dialog>
|
|
|
+ <div v-show="main && main.length" id="myHandson" ref="myHandson"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getSpaceHeader } from "@/api/scan/request";
|
|
|
+import tools from "@/utils/scan/tools";
|
|
|
+import qrcode from "@/components/business_space/lib/qrcode";
|
|
|
+import firm from "@/components/business_space/dialogs/list/firm";
|
|
|
+import supplyDialog from "@/components/business_space/dialogs/list/supplyDialog";
|
|
|
+import supplierDialog from "@/components/business_space/dialogs/list/supplierDialog";
|
|
|
+import guaranteeDialog from "@/components/business_space/dialogs/list/guaranteeDialog";
|
|
|
+import uploadFilesDialog from "@/components/business_space/dialogs/list/filesDialog";
|
|
|
+import Handsontable from "handsontable-pro"
|
|
|
+import 'handsontable-pro/dist/handsontable.full.css'
|
|
|
+import zhCN from 'handsontable-pro/languages/zh-CN';
|
|
|
+import {
|
|
|
+ mapGetters,
|
|
|
+ mapActions
|
|
|
+} from "vuex";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ deviceType: {
|
|
|
+ type: Object
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ qrcode, //二维码页面
|
|
|
+ firm, //
|
|
|
+ supplyDialog,
|
|
|
+ supplierDialog,
|
|
|
+ guaranteeDialog,
|
|
|
+ uploadFilesDialog,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters("peojMess", [
|
|
|
+ "projectId",
|
|
|
+ "secret",
|
|
|
+ "userId"
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ let table = function (num) {
|
|
|
+ let main = []
|
|
|
+ for (let i = 0; i < num; i++) {
|
|
|
+ main.push({})
|
|
|
+ }
|
|
|
+ return main
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ main: table(20),
|
|
|
+ mess: {},
|
|
|
+ headers: null,
|
|
|
+ page: {
|
|
|
+ size: 10,
|
|
|
+ sizes: [10, 30, 50, 100, 150, 200],
|
|
|
+ total: 400,
|
|
|
+ currentPage: 1
|
|
|
+ },
|
|
|
+ dialog: {
|
|
|
+ qrcode: false, //二维码弹窗
|
|
|
+ firm: false, //厂商弹窗
|
|
|
+ supply: false, //选择供应合同
|
|
|
+ supplier: false, //供应商选择
|
|
|
+ guarantee: false //选择保单
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() { },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ //获取header的mess
|
|
|
+ getHeader(mess) {
|
|
|
+ this.mess = mess;
|
|
|
+ console.log(this.mess);
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取主体内容
|
|
|
+ getMain(floorMess) {
|
|
|
+ console.log(floorMess);
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取表头
|
|
|
+ getData() {
|
|
|
+ getSpaceHeader({
|
|
|
+ code: this.deviceType.code,
|
|
|
+ ProjId: this.projectId
|
|
|
+ }).then(res => {
|
|
|
+ this.headers = res.data.Content;
|
|
|
+ if (!!this.hot) {
|
|
|
+ this.hot.destroy();
|
|
|
+ this.hot = null;
|
|
|
+ }
|
|
|
+ this.initHot();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //撤回
|
|
|
+ undo() {
|
|
|
+ this.hot.undo();
|
|
|
+ },
|
|
|
+
|
|
|
+ //刷新
|
|
|
+ reset() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+
|
|
|
+ //添加设备
|
|
|
+ addDevice() {
|
|
|
+ console.log("addDevice")
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 表头文案处理函数
|
|
|
+ * @param arr header数组数据
|
|
|
+ *
|
|
|
+ * @return 处理好的文案
|
|
|
+ */
|
|
|
+ delHeader(arr) {
|
|
|
+ let data = arr.map(item => {
|
|
|
+ if (
|
|
|
+ item.InputMode == "A1" ||
|
|
|
+ item.InputMode == "A2" ||
|
|
|
+ item.InputMode == "B1" ||
|
|
|
+ item.InputMode == "C5" ||
|
|
|
+ item.InputMode == "D1" ||
|
|
|
+ item.InputMode == "D2" ||
|
|
|
+ item.InputMode == "X" ||
|
|
|
+ item.InputMode == "L" ||
|
|
|
+ item.InputMode == "L1" ||
|
|
|
+ item.InputMode == "L2" ||
|
|
|
+ item.InputMode == "F1" ||
|
|
|
+ item.InputMode == "F2"
|
|
|
+ ) {
|
|
|
+ if (item.unit == "") {
|
|
|
+ return item.InfoPointName;
|
|
|
+ } else {
|
|
|
+ return item.InfoPointName + "(" + item.unit + ")";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return undefined;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ data = data.filter(item => item);
|
|
|
+ data.unshift("同时创建资产", "所属建筑楼层", "所属系统实例");
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 表头数据处理函数
|
|
|
+ * @param arr header数组数据
|
|
|
+ *
|
|
|
+ * @return 处理好的数据格式
|
|
|
+ */
|
|
|
+ getType(arr) {
|
|
|
+ let data = arr.map(item => {
|
|
|
+ //二维码
|
|
|
+ if (item.infoPointCode == "EquipQRCode") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.lookDetails,
|
|
|
+ readOnly: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //厂商选择
|
|
|
+ if (item.infoPointCode == "Brand" || item.infoPointCode == "Specification") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.lookDetails,
|
|
|
+ readOnly: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item.infoPointCode == "SupplierContractID") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.lookDetails,
|
|
|
+ readOnly: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.infoPointCode == "InsuranceNum") {
|
|
|
+ //选择保单
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.lookDetails,
|
|
|
+ readOnly: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.infoPointCode == "InsuranceFile" || item.infoPointCode == "Archive") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.lookDetails,
|
|
|
+ readOnly: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ item.infoPointCode == "InstallLocation" ||
|
|
|
+ item.infoPointCode == "InstallPic" ||
|
|
|
+ item.infoPointCode == "InstallDrawing" ||
|
|
|
+ item.infoPointCode == "Nameplate" ||
|
|
|
+ item.infoPointCode == "Pic" ||
|
|
|
+ item.infoPointCode == "Drawing"
|
|
|
+ ) {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.lookDetails,
|
|
|
+ readOnly: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ item.infoPointCode == "Maintainer" ||
|
|
|
+ item.infoPointCode == "Supplier" ||
|
|
|
+ item.infoPointCode == "Insurer" ||
|
|
|
+ item.infoPointCode == "InsurerContactor"
|
|
|
+ ) {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.lookDetails,
|
|
|
+ readOnly: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item.InputMode == "D1") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.customDropdownRenderer,
|
|
|
+ editor: "chosen",
|
|
|
+ chosenOptions: {
|
|
|
+ // multiple: true,//多选
|
|
|
+ data: item.DataSource.Content || ""
|
|
|
+ }
|
|
|
+ };
|
|
|
+ } else if (item.InputMode == "A1" || item.InputMode == "A2") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ type: "numeric",
|
|
|
+ numericFormat: {
|
|
|
+ pattern: "0,0.00"
|
|
|
+ // culture: 'de-DE' // use this for EUR (German),
|
|
|
+ // more cultures available on http://numbrojs.com/languages.html
|
|
|
+ }
|
|
|
+ };
|
|
|
+ } else if (item.InputMode == "C5") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ type: "date",
|
|
|
+ dateFormat: "YYYY-MM-DD",
|
|
|
+ correctFormat: true
|
|
|
+ };
|
|
|
+ } else if (
|
|
|
+ item.InputMode == "B1" ||
|
|
|
+ item.InputMode == "L" ||
|
|
|
+ item.InputMode == "L1" ||
|
|
|
+ item.InputMode == "L2"
|
|
|
+ ) {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode
|
|
|
+ };
|
|
|
+ } else if (
|
|
|
+ item.InputMode == "X" ||
|
|
|
+ item.InputMode == "F2"
|
|
|
+ // item.InputMode == "L1" ||
|
|
|
+ // item.InputMode == "L2"
|
|
|
+ ) {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ readOnly: true
|
|
|
+ };
|
|
|
+ } else if (item.InputMode == "D2") {
|
|
|
+ return {
|
|
|
+ data: "infos." + item.infoPointCode,
|
|
|
+ renderer: tools.customDropdownRenderer,
|
|
|
+ editor: "chosen",
|
|
|
+ chosenOptions: {
|
|
|
+ multiple: true, //多选
|
|
|
+ data: item.DataSource.Content || ""
|
|
|
+ }
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return undefined;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ data.unshift(
|
|
|
+ {
|
|
|
+ type: "checkbox",
|
|
|
+ checkedTemplate: 1,
|
|
|
+ uncheckedTemplate: 0,
|
|
|
+ data: "Checked",
|
|
|
+ label: {
|
|
|
+ position: "after",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: "flowBuild",
|
|
|
+ renderer: tools.customDropdownRenderer,
|
|
|
+ editor: "chosen",
|
|
|
+ chosenOptions: {
|
|
|
+ // multiple: true,//多选
|
|
|
+ // data: item.DataSource.Content || ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: "system",
|
|
|
+ renderer: tools.customDropdownRenderer,
|
|
|
+ editor: "chosen",
|
|
|
+ chosenOptions: {
|
|
|
+ // multiple: true,//多选
|
|
|
+ // data: item.DataSource.Content || ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ data = data.filter(item => item);
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+
|
|
|
+ //初始化插件
|
|
|
+ initHot() {
|
|
|
+ var container = document.getElementById("myHandson");
|
|
|
+ let winHeight = document.documentElement.clientHeight;
|
|
|
+ this.hot = new Handsontable(container, {
|
|
|
+ data: this.main,
|
|
|
+ colHeaders: this.delHeader(this.headers), //表头文案
|
|
|
+ columns: this.getType(this.headers), //数据显示格式
|
|
|
+ filters: true,
|
|
|
+ height: winHeight - 100 - 50 - 60,
|
|
|
+ columnSorting: true, //添加排序
|
|
|
+ sortIndicator: true, //添加排序
|
|
|
+ renderAllRows: true,
|
|
|
+ autoColumnSize: true,
|
|
|
+ language: "zh-CN",
|
|
|
+ manualColumnResize: true,
|
|
|
+ manualColumnMove: true,
|
|
|
+ dropdownMenu: [
|
|
|
+ "filter_by_condition",
|
|
|
+ "filter_by_value",
|
|
|
+ "filter_action_bar"
|
|
|
+ ],
|
|
|
+ contextMenu: {
|
|
|
+ items: {
|
|
|
+ remove_row: {
|
|
|
+ name: "删除该业务空间"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 事件
|
|
|
+ afterChange: this.tdChange, //修改后
|
|
|
+ afterFilter: this.trimmedRows, //排序前
|
|
|
+ beforeRemoveRow: this.romoveFm, //右键删除
|
|
|
+ afterOnCellMouseDown: this.eventClick //鼠标点击
|
|
|
+ });
|
|
|
+ let pro = document.getElementById("hot-display-license-info");
|
|
|
+ if (!!pro) {
|
|
|
+ pro.parentNode.removeChild(pro);
|
|
|
+ }
|
|
|
+ this.isLoading = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //表格中的点击
|
|
|
+ eventClick(el, rowArr) {
|
|
|
+ let filter = this.filtersArr;
|
|
|
+ //被筛选过后的数组
|
|
|
+ let trimmedArr = this.trimmedRows();
|
|
|
+ //是否启用了排序
|
|
|
+ let isSort = this.hot.getPlugin("columnSorting").isSorted();
|
|
|
+ if (trimmedArr.length && isSort) {
|
|
|
+ let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
|
|
|
+ .__arrayMap;
|
|
|
+ let infos = this.main[trimmedArr[sortArr[rowArr.row]]];
|
|
|
+ this.getInfors(infos, rowArr);
|
|
|
+ } else if (isSort) {
|
|
|
+ //排序后的数组
|
|
|
+ let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
|
|
|
+ let infos = this.main[sortArr[rowArr.row]];
|
|
|
+ this.getInfors(infos, rowArr);
|
|
|
+ } else if (trimmedArr.length) {
|
|
|
+ let infos = this.main[trimmedArr[rowArr.row]];
|
|
|
+ this.getInfors(infos, rowArr);
|
|
|
+ } else {
|
|
|
+ let infos = this.main[rowArr.row];
|
|
|
+ this.getInfors(infos, rowArr);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getInfors(infos, row) {
|
|
|
+ //点击的是表头
|
|
|
+ if (row.row < 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //其他的开始判断
|
|
|
+ let val = this.hot.colToProp(row.col);
|
|
|
+ if (val == "infos.EquipQRCode") {
|
|
|
+ this.dialog.qrcode = true;
|
|
|
+ this.$refs.qrcode.getCanvas(1111);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val == "infos.Brand" || val == "infos.Specification") {
|
|
|
+ this.dialog.firm = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val == "infos.SupplierContractID") {
|
|
|
+ this.dialog.supply = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val == "infos.InsuranceNum") {
|
|
|
+ //选择保单
|
|
|
+ this.dialog.guarantee = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val == "infos.InsuranceFile" || val == "infos.Archive") {
|
|
|
+ alert("上传文件");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ val == "infos.InstallLocation" ||
|
|
|
+ val == "infos.InstallPic" ||
|
|
|
+ val == "infos.InstallDrawing" ||
|
|
|
+ val == "infos.Nameplate" ||
|
|
|
+ val == "infos.Pic" ||
|
|
|
+ val == "infos.Drawing"
|
|
|
+ ) {
|
|
|
+ alert("上传图片");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ val == "infos.Maintainer" ||
|
|
|
+ val == "infos.Supplier" ||
|
|
|
+ val == "infos.Insurer" ||
|
|
|
+ val == "infos.InsurerContactor"
|
|
|
+ ) {
|
|
|
+ this.dialog.supplier = true;
|
|
|
+ }
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取被筛选掉的行号
|
|
|
+ trimmedRows() {
|
|
|
+ // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
|
|
|
+ var plugin = this.hot.getPlugin("trimRows").trimmedRows;
|
|
|
+ let dataLength = this.main.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]));
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+ //判断是否为空行
|
|
|
+ isEmptyRow(instance, row) {
|
|
|
+ var rowData = instance.countRows();
|
|
|
+ for (var i = 0, ilen = rowData.length; i < ilen; i++) {
|
|
|
+ if (rowData[i] !== null) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ deviceType: {
|
|
|
+ handler(newName, oldName) {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.hanson-bar {
|
|
|
+ height: 40px;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .el-button {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|