From 8ce4df06a7b3e962221671b58c97190e36aa7d13 Mon Sep 17 00:00:00 2001 From: qb <1191961160@qq.com> Date: Thu, 9 Jan 2025 16:56:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86=E5=AD=97?= =?UTF-8?q?=E6=AE=B5=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=AF=A6=E6=83=85=E5=AF=BC?= =?UTF-8?q?=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/option/finance/MerchantDepositSlip.js | 729 +++++++++++++++++- src/utils/exportData.js | 266 +++++++ src/views/finance/MerchantDepositSlip.vue | 32 + .../PackageStartTimePageReport.vue | 2 +- src/views/waybill/ReceiptManagement.vue | 13 +- 6 files changed, 1024 insertions(+), 19 deletions(-) create mode 100644 src/utils/exportData.js diff --git a/package.json b/package.json index 5760b524..e357af2c 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "vue-qr": "^4.0.9", "vue-router": "^4.2.4", "vuex": "^4.0.2", + "xlsx-js-style": "^1.2.0", "xlsx-style-vite": "^0.0.2" }, "devDependencies": { diff --git a/src/option/finance/MerchantDepositSlip.js b/src/option/finance/MerchantDepositSlip.js index 66de373a..e3449e18 100644 --- a/src/option/finance/MerchantDepositSlip.js +++ b/src/option/finance/MerchantDepositSlip.js @@ -469,10 +469,21 @@ export const orderColumnList = [ width: 55, fixed: true, }, + { + prop: 'brand', + label: '品牌', + type: 2, + values: '', + width: '100', + checkarr: [], + fixed: true, + sortable: true, + head: false, + }, { prop: 'orderCode', - label: '订单编号', - type: 1, + label: '订单自编号', + type: 2, values: '', width: '200', checkarr: [], @@ -480,34 +491,243 @@ export const orderColumnList = [ sortable: true, head: false, }, + { + prop: 'waybillNo', + label: '运单号', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: true, + sortable: true, + head: false, + }, + { + prop: 'shipper', + label: '发货单位', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'consignee', + label: '收货单位', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'destinationWarehouseName', + label: '目的仓', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'departureWarehouseName', + label: '发站仓', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'signStatusName', + label: '签收状态', + type: 3, + values: '', + width: '150', + checkarr: [ + { label: '未签收', value: 0 }, + { label: '部分签收', value: 1 }, + { label: '已签收', value: 2 }, + ], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'typeServiceName', + label: '配送类型', + type: 3, + values: '', + width: '150', + checkarr: [ + { + label: '商配', + value: 1, + }, + { + label: '市配', + value: 2, + }, + { + label: '自提', + value: 3, + }, + ], + fixed: false, + sortable: true, + head: false, + }, + // { + // prop: 'typeServiceName', + // label: '服务类型', + // type: 3, + // values: '', + // width: '150', + // checkarr: [ + // { + // label: '商配', + // value: 1, + // }, + // { + // label: '市配', + // value: 2, + // }, + // { + // label: '自提', + // value: 3, + // }, + // ], + // fixed: false, + // sortable: true, + // head: false, + // }, + { + prop: 'openTime', + label: '开单时间', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'goodsName', + label: '货物品类', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'goodsNum', + label: '品类件数', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'goodsPrice', + label: '品类单价', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, { prop: 'totalNum', label: '总件数', type: 1, values: '', - width: '150', + width: '130', checkarr: [], fixed: false, sortable: true, head: false, + isshowSummary: true, }, + // { + // prop: 'totalNum', + // label: '货物品类', + // type: 1, + // values: '', + // width: '130', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // }, + // { + // prop: 'totalNum', + // label: '品类件数', + // type: 1, + // values: '', + // width: '130', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // }, + // { + // prop: 'totalNum', + // label: '干线品类单价', + // type: 1, + // values: '', + // width: '130', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // }, { prop: 'totalWeight', label: '总重量', type: 1, values: '', - width: '150', + width: '130', checkarr: [], fixed: false, sortable: true, head: false, + isshowSummary: true, }, { prop: 'totalVolume', label: '总体积', type: 1, values: '', - width: '150', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'sysTotalFee', + label: '订单预估总价', + type: 1, + values: '', + width: '130', checkarr: [], fixed: false, sortable: true, @@ -515,7 +735,502 @@ export const orderColumnList = [ }, { prop: 'totalFee', - label: '总金额', + label: '实际总费用', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'systemFreightPrice', + label: '预估运费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'freightPrice', + label: '实际运费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'systemPickupPrice', + label: '预估提货费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'pickupPrice', + label: '实际提货费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'warehouseServiceFee', + label: '仓储服务费合计', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'warehouseFee', + label: '仓储费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'warehouseManageFee', + label: '仓储管理费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'warehouseSortingFee', + label: '仓储分拣费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'warehouseOperatingFee', + label: '仓储操作费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliveryServiceFee', + label: '配送费服务费合计', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'systemDeliveryFee', + label: '预估配送费', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliveryFee', + label: '实际配送费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliveryLoadingFee', + label: '配送装卸费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliverySortingFee', + label: '配送分货费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliveryUpfloorFee', + label: '配送上楼费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliveryMoveFee', + label: '配送平移费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliveryOtherFee', + label: '配送其它费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'deliveryCrossingFee', + label: '超区公里费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + // { + // prop: 'deliveryCrossingFee', + // label: '配送专车费', + // type: 1, + // values: '', + // width: '130', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // isshowSummary: true, + // }, + { + prop: 'installFee', + label: '安装费', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + { + prop: 'otherFee', + label: '其他费用', + type: 1, + values: '', + width: '130', + checkarr: [], + fixed: false, + sortable: true, + head: false, + isshowSummary: true, + }, + // { + // prop: 'deliveryCrossingFee', + // label: '回扣', + // type: 1, + // values: '', + // width: '130', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // isshowSummary: true, + // }, + // { + // prop: 'deliveryCrossingFee', + // label: '申明价值', + // type: 1, + // values: '', + // width: '130', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // isshowSummary: true, + // }, + // { + // prop: 'deliveryCrossingFee', + // label: '保价费', + // type: 1, + // values: '', + // width: '130', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // isshowSummary: true, + // }, + { + prop: 'shipperPerson', + label: '发货人', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'shipperMobile', + label: '发货人手机号', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'shipperAddress', + label: '发货地址', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'destination', + label: '到站', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'consigneePerson', + label: '收货人', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'consigneeMobile', + label: '收货人手机号', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'consigneeAddress', + label: '收货地址', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'customerTrain', + label: '客户车次', + type: 2, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'cleanObjTypeName', + label: '结算方', + type: 3, + values: '', + width: '150', + checkarr: [ + { label: '工厂', value: 1 }, + { label: '商场', value: 2 }, + { label: '商家个人', value: 3 }, + ], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'payTypeName', + label: '支付方式', + type: 3, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'payWayName', + label: '付款方式', + type: 3, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'signNum', + label: '已签收件数', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + isshowSummary: true, + head: false, + }, + // { + // prop: 'signNum', + // label: '送货时间', + // type: 1, + // values: '', + // width: '150', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // }, + { + prop: 'signTime', + label: '签收时间', + type: 1, + values: '', + width: '150', + checkarr: [], + fixed: false, + sortable: true, + head: false, + }, + // { + // prop: 'signNum', + // label: '签收人', + // type: 1, + // values: '', + // width: '150', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // }, + // { + // prop: 'signNum', + // label: '配送司机', + // type: 1, + // values: '', + // width: '150', + // checkarr: [], + // fixed: false, + // sortable: true, + // head: false, + // }, + { + prop: 'syncFeeStatus', + label: '是否计算价格', + type: 1, + values: '', + width: '150', + checkarr: [ + { label: '是', value: 1 }, + { label: '否', value: 0 }, + ], + fixed: false, + sortable: true, + head: false, + }, + { + prop: 'syncFeeDate', + label: '计算价格时间', type: 1, values: '', width: '150', @@ -529,7 +1244,7 @@ export const orderColumnList = [ label: '操作', type: 6, values: '', - width: '200', + width: '120', checkarr: [], fixed: 'right', sortable: false, diff --git a/src/utils/exportData.js b/src/utils/exportData.js new file mode 100644 index 00000000..69a1b88d --- /dev/null +++ b/src/utils/exportData.js @@ -0,0 +1,266 @@ +import XLSX from 'xlsx-js-style'; +import { getObjType, isNumber } from '@/utils/util'; + +export function exportExcel(columnList = [], listData = [], name = 'excel') { + // 创建工作簿 + const wb = XLSX.utils.book_new(); + + const headers = []; + + const blackArr = ['序号', '复选框', '操作']; + + const data = []; + + for (let j = 0; j < listData.length; j++) { + const item = listData[j]; + const arr = []; + + for (let i = 0; i < columnList.length; i++) { + const val = columnList[i]; + + if (blackArr.includes(val.label)) continue; + + if (j === 0) headers.push(val.label); + arr.push(item[val.prop] || ''); + } + console.log('arr :>> ', arr); + data.push(arr); + } + + // 将数据转换为Excel单元格的值 + const ws_data = [ + // ['Column1', 'Column2', 'Column3'], // 表头 + headers, + ...data, // 数据行 + ]; + + // 创建工作表 + const ws = XLSX.utils.aoa_to_sheet(ws_data); + + console.log('ws :>> ', ws); + + // 1.所有表头的宽度 + const headsWidth = headers.map(value => { + if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { + return (parseFloat(value.toString().length * 2.1) + 4).toFixed(2); + } else { + return (parseFloat(value.toString().length * 1.1) + 4).toFixed(2); + } + }); + // console.log("所有表头的宽度：", headsWidth); + + // 2.所有表体值的宽度 + const rowsWidth = data.map(item => { + // 每行数据中值的宽度 + const maxValue = Object.values(item).map((value, index) => { + let valueWidth = 0; + if (value) + if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { + valueWidth = (parseFloat(value.toString().length * 2.1) + 4).toFixed(2); + } else { + valueWidth = (parseFloat(value.toString().length * 1.1) + 4).toFixed(2); + } + // console.log("每行数据中值的宽度：", valueWidth); + + // 对比出表头和表体值的最大数 + return Math.max(valueWidth, headsWidth[index]); + }); + // console.log("本行值中最大宽度：", maxValue); + return maxValue; + }); + // console.log("每行数据对比出的最大宽度：", rowsWidth); + + // 3.对比每列最大值 + let aotuWidth = []; + rowsWidth.map((row, index) => { + let maxWidth = []; + row.map((value, i) => { + if (index === 0) { + maxWidth.push({ + wch: value, + }); + } else { + maxWidth.push({ + wch: Math.max(value, aotuWidth[i].wch), + }); + } + }); + aotuWidth = maxWidth; + }); + // console.log("每列最大宽度：", aotuWidth); + + // 4.给excel设置自适应宽度 + ws['!cols'] = aotuWidth; + const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows']; + console.log('ws :>> ', ws); + for (let key in ws) { + if (ws.hasOwnProperty(key)) { + if (!excludes.includes(key)) { + ws[key].s = { + alignment: { + // horizontal: 'center', //水平居中对齐 + // vertical: 'center', // 垂直居中 + wrapText: true, + }, + border: { + top: { + style: 'thin', + color: { rgb: '000000' }, + }, + bottom: { + style: 'thin', + color: { rgb: '000000' }, + }, + left: { + style: 'thin', + color: { rgb: '000000' }, + }, + right: { + style: 'thin', + color: { rgb: '000000' }, + }, + }, + // fill: { + // fgColor: { rgb: "00a2ff" }, + // }, + font: { + sz: 11, + color: { + rgb: '000000', + }, + }, + bold: true, + numFmt: 0, + }; + const _text = ws[key].v; + getObjType(_text) === 'string' && (ws[key].v = _text.replace('-->', '')); + // 单元格宽度 + // ws['!cols'].push({ wpx }); + // 根据不同行添加单元格背景颜色 + let color = 'ffffff'; + // 文字颜色 + let textColor = '000000'; + let num = Number(key.slice(1)); + num = isNumber(num) ? num : Number(key.slice(2)); + if (num === 1) { + color = '172e60'; + textColor = 'ffffff'; + ws[key].s.font.sz = 12; + } else { + } + ws[key].s.fill = { + fgColor: { rgb: color, patternType: 'solid' }, + }; + + ws[key].s.font.color.rgb = textColor; + } + } + } + // ws['B1'].s = { ...fontStyle, ...borderStyle }; + + // 将工作表添加到工作簿; + XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); + + // 生成Excel文件; + XLSX.writeFile(wb, name + '.xlsx'); +} + +// 导出列表 +const exportPreviewIp = () => { + const result = state.data.map(item => ({ + 实例ID: item.instanceId, + uuid: item.uuid, + 地区: item.region, + 创建时间: item.createdTime, + 关机时间: item.terminatedTime, + })); + const worksheet = XLSX.utils.json_to_sheet(result); + + // 表头的样式 + worksheet['A1'].s = { + font: { + bold: true, + }, + alignment: { + horizontal: 'center', + vertical: 'center', + }, + }; + + // 合并单元格 s: 起始位置, e: 结束位置, r: 行, c: 列 + // data["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 10 } }]; + // 设置列宽 + // data["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }]; + + // 1.所有表头的宽度 + const headsWidth = Object.keys(state.data[0]).map(value => { + if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { + return parseFloat(value.toString().length * 2.1); + } else { + return parseFloat(value.toString().length * 1.1); + } + }); + // console.log("所有表头的宽度：", headsWidth); + + // 2.所有表体值的宽度 + const rowsWidth = state.data.map(item => { + // 每行数据中值的宽度 + const maxValue = Object.values(item).map((value, index) => { + let valueWidth; + if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { + valueWidth = parseFloat(value.toString().length * 2.1); + } else { + valueWidth = parseFloat(value.toString().length * 1.1); + } + // console.log("每行数据中值的宽度：", valueWidth); + + // 对比出表头和表体值的最大数 + return Math.max(valueWidth, headsWidth[index]); + }); + // console.log("本行值中最大宽度：", maxValue); + return maxValue; + }); + // console.log("每行数据对比出的最大宽度：", rowsWidth); + + // 3.对比每列最大值 + let aotuWidth = []; + rowsWidth.map((row, index) => { + let maxWidth = []; + row.map((value, i) => { + if (index === 0) { + maxWidth.push({ + wch: value, + }); + } else { + maxWidth.push({ + wch: Math.max(value, aotuWidth[i].wch), + }); + } + }); + aotuWidth = maxWidth; + }); + // console.log("每列最大宽度：", aotuWidth); + + // 4.给excel设置自适应宽度 + worksheet['!cols'] = aotuWidth; + + const workbook = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); + const binaryWorkbook = XLSX.write(workbook, { type: 'binary', bookType: 'xlsx' }); + const blob = new Blob([s2ab(binaryWorkbook)], { type: 'application/octet-stream' }); + const link = document.createElement('a'); + link.href = window.URL.createObjectURL(blob); + link.download = '实例列表.xlsx'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +}; + +const s2ab = binaryString => { + const buffer = new ArrayBuffer(binaryString.length); + const view = new Uint8Array(buffer); + for (let i = 0; i < binaryString.length; i++) { + view[i] = binaryString.charCodeAt(i) & 0xff; + } + return buffer; +}; diff --git a/src/views/finance/MerchantDepositSlip.vue b/src/views/finance/MerchantDepositSlip.vue index 7a146f33..f2ba3f93 100644 --- a/src/views/finance/MerchantDepositSlip.vue +++ b/src/views/finance/MerchantDepositSlip.vue @@ -118,6 +118,10 @@ +
+ 导出 +
+ { }); }; +/** 导出订单详情 */ +const handleExportOrderDetail = () => { + // const _header = []; + // const blackArr = ['序号', '复选框', '操作']; + + // const _data = []; + + // for (let j = 0; j < details.orderInfo.data.length; j++) { + // const item = details.orderInfo.data[j]; + // const arr = []; + + // for (let i = 0; i < details.orderInfo.columnList.length; i++) { + // const val = details.orderInfo.columnList[i]; + + // if (blackArr.includes(val.label)) continue; + + // if (j === 0) _header.push(val.label); + // arr.push(item[val.prop] || ''); + // } + // console.log('arr :>> ', arr); + // _data.push(arr); + // } + + exportExcel(details.orderInfo.columnList, details.orderInfo.data); +}; + /** 查看异动信息 */ const ViewTransactionInformation = ({ row }) => { console.log('row :>> ', row); @@ -471,6 +502,7 @@ const ViewOrderList = async ({ row }) => { if (code !== 200) return; details.orderInfo.reconciliationOrderId = row.id; details.orderInfo.data = data || []; + handleTranslationDataSeclect(details.orderInfo.data, details.orderInfo.columnList); details.popUpShow.orderVisted = true; await nextTick(); diff --git a/src/views/reportforms/PackageStartTimePageReport.vue b/src/views/reportforms/PackageStartTimePageReport.vue index 6d2eb53c..8683db26 100644 --- a/src/views/reportforms/PackageStartTimePageReport.vue +++ b/src/views/reportforms/PackageStartTimePageReport.vue @@ -24,7 +24,7 @@ - + ({ form: {}, }); -const { - search, - query, - shortcuts, - data, - loadingObj, - selectionList, - drawerShow, - page, - popUpShow, -} = toRefs(details); +const { search, query, shortcuts, data, loadingObj, selectionList, drawerShow, page, popUpShow } = + toRefs(details); /** vuex */ const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));