addDevice.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. <template>
  2. <div>
  3. <div class="hanson-bar">
  4. <span>当前选择的设备类型:{{deviceType.facility}}</span>
  5. <el-button size="small" @click="undo" icon="iconfont icon-undo">撤销</el-button>
  6. <el-button size="small" @click="reset" icon="iconfont icon-shuaxin">刷新</el-button>
  7. </div>
  8. <qrcode :dialog="dialog" :addBody="true" ref="qrcode"></qrcode>
  9. <firm :dialog="dialog"></firm>
  10. <supply-dialog :dialog="dialog"></supply-dialog>
  11. <supplier-dialog :dialog="dialog"></supplier-dialog>
  12. <guarantee-dialog :dialog="dialog"></guarantee-dialog>
  13. <upload-files-dialog :dialog="dialog"></upload-files-dialog>
  14. <div v-show="main && main.length" id="myHandson" ref="myHandson"></div>
  15. </div>
  16. </template>
  17. <script>
  18. import { getSpaceHeader } from "@/api/scan/request";
  19. import { mapGetters, mapActions } from "vuex";
  20. import tools from "@/utils/scan/tools";
  21. import qrcode from "@/components/ledger/lib/qrcode";
  22. import firm from "@/components/dialogs/list/firm";
  23. import supplyDialog from "@/components/dialogs/list/supplyDialog";
  24. import supplierDialog from "@/components/dialogs/list/supplierDialog";
  25. import guaranteeDialog from "@/components/dialogs/list/guaranteeDialog";
  26. import uploadFilesDialog from "@/components/dialogs/list/filesDialog";
  27. export default {
  28. props: {
  29. deviceType: {
  30. type: Object
  31. }
  32. },
  33. components: {
  34. qrcode, //二维码页面
  35. firm, //
  36. supplyDialog,
  37. supplierDialog,
  38. guaranteeDialog,
  39. uploadFilesDialog,
  40. },
  41. computed: {
  42. ...mapGetters("layout", ["projectId", "secret", "userId"]),
  43. },
  44. data() {
  45. let table = function (num) {
  46. let main = []
  47. for (let i = 0; i < num; i++) {
  48. main.push({})
  49. }
  50. return main
  51. }
  52. return {
  53. main: table(20),
  54. mess: {},
  55. headers: null,
  56. page: {
  57. size: 50,
  58. sizes: [10, 30, 50, 100, 150, 200],
  59. total: 400,
  60. currentPage: 1
  61. },
  62. dialog: {
  63. qrcode: false, //二维码弹窗
  64. firm: false, //厂商弹窗
  65. supply: false, //选择供应合同
  66. supplier: false, //供应商选择
  67. guarantee: false //选择保单
  68. }
  69. };
  70. },
  71. created() {
  72. },
  73. mounted() { },
  74. methods: {
  75. //获取header的mess
  76. getHeader(mess) {
  77. this.mess = mess;
  78. console.log(this.mess);
  79. },
  80. //获取主体内容
  81. getMain(floorMess) {
  82. console.log(floorMess);
  83. },
  84. //获取表头
  85. getData() {
  86. getSpaceHeader({
  87. code: this.deviceType.code,
  88. ProjId: this.projectId
  89. }).then(res => {
  90. this.headers = res.data.Content;
  91. if (!!this.hot) {
  92. this.hot.destroy();
  93. this.hot = null;
  94. }
  95. this.initHot();
  96. });
  97. },
  98. //撤回
  99. undo() {
  100. this.hot.undo();
  101. },
  102. //刷新
  103. reset() {
  104. this.getData();
  105. },
  106. //添加设备
  107. addDevice() {
  108. console.log("addDevice")
  109. },
  110. /**
  111. * 表头文案处理函数
  112. * @param arr header数组数据
  113. *
  114. * @return 处理好的文案
  115. */
  116. delHeader(arr) {
  117. let data = arr.map(item => {
  118. if (
  119. item.InputMode == "A1" ||
  120. item.InputMode == "A2" ||
  121. item.InputMode == "B1" ||
  122. item.InputMode == "C5" ||
  123. item.InputMode == "D1" ||
  124. item.InputMode == "D2" ||
  125. item.InputMode == "X" ||
  126. item.InputMode == "L" ||
  127. item.InputMode == "L1" ||
  128. item.InputMode == "L2" ||
  129. item.InputMode == "M" ||
  130. item.InputMode == "F1" ||
  131. item.InputMode == "F2"
  132. ) {
  133. if (item.unit == "") {
  134. return item.InfoPointName;
  135. } else {
  136. return item.InfoPointName + "(" + item.unit + ")";
  137. }
  138. } else {
  139. return undefined;
  140. }
  141. });
  142. data = data.filter(item => item);
  143. data.unshift("同时创建资产", "所属建筑楼层", "所属系统实例");
  144. return data;
  145. },
  146. /**
  147. * 表头数据处理函数
  148. * @param arr header数组数据
  149. *
  150. * @return 处理好的数据格式
  151. */
  152. getType(arr) {
  153. let data = arr.map(item => {
  154. //二维码
  155. if (item.infoPointCode == "EquipQRCode") {
  156. return {
  157. data: "infos." + item.infoPointCode,
  158. renderer: tools.lookDetails,
  159. readOnly: true
  160. }
  161. }
  162. //厂商选择
  163. if (item.infoPointCode == "Brand" || item.infoPointCode == "Specification") {
  164. return {
  165. data: "infos." + item.infoPointCode,
  166. renderer: tools.lookDetails,
  167. readOnly: true
  168. }
  169. }
  170. if (item.infoPointCode == "SupplierContractID") {
  171. return {
  172. data: "infos." + item.infoPointCode,
  173. renderer: tools.lookDetails,
  174. readOnly: true
  175. }
  176. }
  177. if (item.infoPointCode == "InsuranceNum") {
  178. //选择保单
  179. return {
  180. data: "infos." + item.infoPointCode,
  181. renderer: tools.lookDetails,
  182. readOnly: true
  183. }
  184. }
  185. if (item.infoPointCode == "InsuranceFile" || item.infoPointCode == "Archive") {
  186. return {
  187. data: "infos." + item.infoPointCode,
  188. renderer: tools.lookDetails,
  189. readOnly: true
  190. }
  191. }
  192. if (
  193. item.infoPointCode == "InstallLocation" ||
  194. item.infoPointCode == "InstallPic" ||
  195. item.infoPointCode == "InstallDrawing" ||
  196. item.infoPointCode == "Nameplate" ||
  197. item.infoPointCode == "Pic" ||
  198. item.infoPointCode == "Drawing"
  199. ) {
  200. return {
  201. data: "infos." + item.infoPointCode,
  202. renderer: tools.lookDetails,
  203. readOnly: true
  204. }
  205. }
  206. if (
  207. item.infoPointCode == "Maintainer" ||
  208. item.infoPointCode == "Supplier" ||
  209. item.infoPointCode == "Insurer" ||
  210. item.infoPointCode == "InsurerContactor"
  211. ) {
  212. return {
  213. data: "infos." + item.infoPointCode,
  214. renderer: tools.lookDetails,
  215. readOnly: true
  216. }
  217. }
  218. if (item.InputMode == "D1") {
  219. return {
  220. data: "infos." + item.infoPointCode,
  221. renderer: tools.customDropdownRenderer,
  222. editor: "chosen",
  223. chosenOptions: {
  224. // multiple: true,//多选
  225. data: item.DataSource.Content || ""
  226. }
  227. };
  228. } else if (item.InputMode == "A1" || item.InputMode == "A2") {
  229. return {
  230. data: "infos." + item.infoPointCode,
  231. type: "numeric",
  232. numericFormat: {
  233. pattern: "0,0.00"
  234. // culture: 'de-DE' // use this for EUR (German),
  235. // more cultures available on http://numbrojs.com/languages.html
  236. }
  237. };
  238. } else if (item.InputMode == "C5") {
  239. return {
  240. data: "infos." + item.infoPointCode,
  241. type: "date",
  242. dateFormat: "YYYY-MM-DD",
  243. correctFormat: true
  244. };
  245. } else if (
  246. item.InputMode == "B1" ||
  247. item.InputMode == "L" ||
  248. item.InputMode == "L1" ||
  249. item.InputMode == "L2"
  250. ) {
  251. return {
  252. data: "infos." + item.infoPointCode
  253. };
  254. } else if (
  255. item.InputMode == "X" ||
  256. item.InputMode == "F2"
  257. // item.InputMode == "L1" ||
  258. // item.InputMode == "L2"
  259. ) {
  260. return {
  261. data: "infos." + item.infoPointCode,
  262. readOnly: true
  263. };
  264. } else if (item.InputMode == "D2") {
  265. return {
  266. data: "infos." + item.infoPointCode,
  267. renderer: tools.customDropdownRenderer,
  268. editor: "chosen",
  269. chosenOptions: {
  270. multiple: true, //多选
  271. data: item.DataSource.Content || ""
  272. }
  273. };
  274. } else {
  275. return undefined;
  276. }
  277. });
  278. data.unshift(
  279. {
  280. type: "checkbox",
  281. checkedTemplate: 1,
  282. uncheckedTemplate: 0,
  283. data: "Checked",
  284. label: {
  285. position: "after",
  286. }
  287. },
  288. {
  289. data: "flowBuild",
  290. renderer: tools.customDropdownRenderer,
  291. editor: "chosen",
  292. chosenOptions: {
  293. // multiple: true,//多选
  294. // data: item.DataSource.Content || ""
  295. }
  296. },
  297. {
  298. data: "system",
  299. renderer: tools.customDropdownRenderer,
  300. editor: "chosen",
  301. chosenOptions: {
  302. // multiple: true,//多选
  303. // data: item.DataSource.Content || ""
  304. }
  305. }
  306. );
  307. data = data.filter(item => item);
  308. return data;
  309. },
  310. //初始化插件
  311. initHot() {
  312. var container = document.getElementById("myHandson");
  313. let winHeight = document.documentElement.clientHeight;
  314. this.hot = new Handsontable(container, {
  315. data: this.main,
  316. colHeaders: this.delHeader(this.headers), //表头文案
  317. columns: this.getType(this.headers), //数据显示格式
  318. filters: true,
  319. height: winHeight - 100 - 50 - 60,
  320. columnSorting: true, //添加排序
  321. sortIndicator: true, //添加排序
  322. renderAllRows: true,
  323. autoColumnSize: true,
  324. language: "zh-CN",
  325. manualColumnResize: true,
  326. manualColumnMove: true,
  327. dropdownMenu: [
  328. "filter_by_condition",
  329. "filter_by_value",
  330. "filter_action_bar"
  331. ],
  332. contextMenu: {
  333. items: {
  334. remove_row: {
  335. name: "删除该业务空间"
  336. }
  337. }
  338. },
  339. // 事件
  340. afterChange: this.tdChange, //修改后
  341. afterFilter: this.trimmedRows, //排序前
  342. beforeRemoveRow: this.romoveFm, //右键删除
  343. afterOnCellMouseDown: this.eventClick //鼠标点击
  344. });
  345. let pro = document.getElementById("hot-display-license-info");
  346. if (!!pro) {
  347. pro.parentNode.removeChild(pro);
  348. }
  349. this.isLoading = false;
  350. },
  351. //表格中的点击
  352. eventClick(el, rowArr) {
  353. let filter = this.filtersArr;
  354. //被筛选过后的数组
  355. let trimmedArr = this.trimmedRows();
  356. //是否启用了排序
  357. let isSort = this.hot.getPlugin("columnSorting").isSorted();
  358. if (trimmedArr.length && isSort) {
  359. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  360. .__arrayMap;
  361. let infos = this.main[trimmedArr[sortArr[rowArr.row]]];
  362. this.getInfors(infos, rowArr);
  363. } else if (isSort) {
  364. //排序后的数组
  365. let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  366. let infos = this.main[sortArr[rowArr.row]];
  367. this.getInfors(infos, rowArr);
  368. } else if (trimmedArr.length) {
  369. let infos = this.main[trimmedArr[rowArr.row]];
  370. this.getInfors(infos, rowArr);
  371. } else {
  372. let infos = this.main[rowArr.row];
  373. this.getInfors(infos, rowArr);
  374. }
  375. },
  376. getInfors(infos, row) {
  377. //点击的是表头
  378. if (row.row < 0) {
  379. return;
  380. }
  381. //其他的开始判断
  382. let val = this.hot.colToProp(row.col);
  383. if (val == "infos.EquipQRCode") {
  384. this.dialog.qrcode = true;
  385. this.$refs.qrcode.getCanvas(1111);
  386. }
  387. if (val == "infos.Brand" || val == "infos.Specification") {
  388. this.dialog.firm = true;
  389. }
  390. if (val == "infos.SupplierContractID") {
  391. this.dialog.supply = true;
  392. }
  393. if (val == "infos.InsuranceNum") {
  394. //选择保单
  395. this.dialog.guarantee = true;
  396. }
  397. if (val == "infos.InsuranceFile" || val == "infos.Archive") {
  398. alert("上传文件");
  399. }
  400. if (
  401. val == "infos.InstallLocation" ||
  402. val == "infos.InstallPic" ||
  403. val == "infos.InstallDrawing" ||
  404. val == "infos.Nameplate" ||
  405. val == "infos.Pic" ||
  406. val == "infos.Drawing"
  407. ) {
  408. alert("上传图片");
  409. }
  410. if (
  411. val == "infos.Maintainer" ||
  412. val == "infos.Supplier" ||
  413. val == "infos.Insurer" ||
  414. val == "infos.InsurerContactor"
  415. ) {
  416. this.dialog.supplier = true;
  417. }
  418. console.log(val);
  419. },
  420. //获取被筛选掉的行号
  421. trimmedRows() {
  422. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  423. var plugin = this.hot.getPlugin("trimRows").trimmedRows;
  424. let dataLength = this.main.length;
  425. let dataArr = new Array();
  426. for (let i = 0; i < dataLength; i++) {
  427. dataArr.push(i);
  428. }
  429. if (plugin.length <= 0) {
  430. dataArr = undefined;
  431. } else {
  432. dataArr = this.array_diff(dataArr, plugin);
  433. }
  434. return dataArr || [];
  435. // var DataArray = new Array();
  436. // for (var i = 0; i < plugin.length; i++) {
  437. // // 通过行号获取数据
  438. // DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
  439. // }
  440. },
  441. //判断是否为空行
  442. isEmptyRow(instance, row) {
  443. var rowData = instance.countRows();
  444. for (var i = 0, ilen = rowData.length; i < ilen; i++) {
  445. if (rowData[i] !== null) {
  446. return false;
  447. }
  448. }
  449. return true;
  450. }
  451. },
  452. watch: {
  453. deviceType: {
  454. handler(newName, oldName) {
  455. this.getData()
  456. },
  457. immediate: true
  458. }
  459. }
  460. };
  461. </script>
  462. <style lang="less">
  463. .hanson-bar {
  464. height: 40px;
  465. padding: 5px 10px;
  466. font-size: 14px;
  467. overflow: hidden;
  468. margin-top: 10px;
  469. .iconfont {
  470. font-size: 12px;
  471. }
  472. .el-button {
  473. // margin-right: 10px;
  474. }
  475. }
  476. </style>