前端 js this.dataSource = res.data.data.items || []；

最新推荐文章于 2023-07-09 00:10:10 发布
原创 最新推荐文章于 2023-07-09 00:10:10 发布 · 1.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

本文介绍了一种前端处理后端API返回数据中可能存在的null值的方法，通过使用条件运算符来避免逻辑错误。当`res.data.data.items`为null时，用空数组`[]`替代，确保数据源`this.dataSource`始终有一个安全的初始值。

前端有时候获取后端返回值res的数据，但是不知道这个数据是否有值，这个时候一般处理是这样：
this.dataSource = res.data.data.items || [];
防止后端出现null值导致逻辑错误

意思是 res.data.data.items如果是null的话 就取[]，
如果不是null 就取自身的值

前端开源库-apollo-datasource
08-30
前端开源库-apollo-datasourceApollo数据源，空
MyBatis源代码--数据源（dataSource）
初学者
06-30 1656
dataSource 元素使用标准的 JDBC 数据源接口来配置 JDBC 连接对象的资源。 许多 MyBatis 的应用程序将会按示例中的例子来配置数据源。然而它并不是必须的。要知道为了方便使用延迟加载，数据源才是必须的。 有三种内建的数据源类型（也就是 type=”[UNPOOLED|POOLED|JNDI]”）： UNPOOLED– 这个数据源的实现只是每次被请求时打开和关闭连接。虽然一
前端框架之：kendoui笔记之 grid及dataSource 数据源
liyaodong1234的博客
02-26 2738
kindoui grid 初始化及属性说明 顺序可以不一样但尽量不要错 $("#dg").kendoGrid({ allowCopy：boolean ,//是否启用表格复制 columnResizeHandleWidth:Number, //设置列可调整的宽度大小 filterable:Boolean,//是否在表头启用筛选功能 dataSource:数据源,//grid数据源 columns:[{ field：String,//列对应的数据源中的字段名 title：String, //列名 width
js处理DataSet数据源
wfdoublext的专栏
05-07 479
[Ajax.AjaxMethod()] public DataSet GetDataSet() { OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:工作项目分析 estdb.mdb;Persist Secur...
用JavaScript操作数据库
志龙的专栏
01-25 1251
   //用 JavaScript 写服务器端连接数据库的代码示例  var conn = new ActiveXObject("ADODB.Connection");  conn.Open("Provider=SQLOLEDB.1; Data Source=localhost; User ID=sa; "    +"Password=password; Initial Catalog=mei
<template> <section> <a-row> <a-button type="primary" @click="closeWin()">关闭</a-button> </a-row> <a-row> <a-form layout="inline"> <a-row> <a-form-item :label="$t('pipeControll.common.projectNumber')" title="项目号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input :value="task.projId" :disabled="true"></a-input> </a-form-item> <a-form-item label="外场托盘号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input :value="task.holdNo" :disabled="true"></a-input> </a-form-item> </a-row> </a-form> </a-row> <a-row style="margin-top: 20px; margin-bottom: 20px; padding-left: 20px"> <div> <a-radio-group :value="type" @change="radioChange" buttonStyle="solid"> <a-radio-button value="cut">■ 下料</a-radio-button> <a-radio-button value="fab">▲ 装配</a-radio-button> <a-radio-button value="weld">★ 焊接</a-radio-button> </a-radio-group> </div> </a-row> <v-table rowKey="key" :columns="columns" :dataSource="dataList" :pagination="false" ref="vtable" height="350px"> <div slot-scope="{text, record}" slot="holdDetail"> <a size="small" :style="{ marginRight: '10px' }" @click="details(record)"> {{ text }} </a> </div> <div slot-scope="{text}" slot="tableColumn" style="width: 100%; height: 100%"> {{ text.text }} </div> </v-table> <v-table rowKey="key" :columns="totalColumns" :dataSource="totalList" :pagination="false" height="370px"> </v-table> <a-modal :visible="visible" @ok="modalSubmit" @cancel="modalCancel" title="排产托盘详情" okText="保存排产" width="85%"> <a-row> <a-form layout="inline"> <a-row> <a-form-item> <a-radio-group :value="recordType" @change="recordTypeChange" buttonStyle="solid"> <a-radio-button value="0">待排产</a-radio-button> <a-radio-button value="1">已排产</a-radio-button> <a-radio-button value="2">全部</a-radio-button> </a-radio-group> </a-form-item> <a-form-item :label="$t('pipeControll.common.projectNumber')" title="项目号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input :value="task.projId" :disabled="true"></a-input> </a-form-item> <a-form-item label="工序" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input :value="this.processStr" :disabled="true"></a-input> </a-form-item> <a-form-item :label="$t('pipeControll.spool.drawingNumber')" title="图号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input :value="record.drawId" :disabled="true"></a-input> </a-form-item> <a-form-item label="托盘号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input :value="record.holdNo" :disabled="true"></a-input> </a-form-item> <a-form-item label="外场托盘号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input :value="task.holdNo" :disabled="true"></a-input> </a-form-item> <a-form-item label="预制地" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-select showSearch style="width: 100px" disabled v-model="base"> <a-select-option v-for="child of baseList" :key="child.orgId" :value="child.orgNo"> {{ child.name }} </a-select-option> </a-select> </a-form-item> <a-form-item :label="$t('pipeControll.spool.workzone')" title="作业区" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-select showSearch style="width: 200px" v-model="workzone" @change="refreshDetails"> <a-select-option v-for="child of workzoneList" :key="child.id" :value="child.code">{{ child.name }} </a-select-option> </a-select> </a-form-item> </a-row> </a-form> </a-row> <v-table rowKey="pmlItemNo" :columns="innerColumn" :dataSource="detailList" :pagination="false" height="400px" ref="pcTable" @cell-click="cellClick"> <div slot-scope="{column}" slot="checkHeader"> <a-checkbox v-model="checkObj[column.title]" @change="checkChange(column.title,$event)"></a-checkbox> </div> <div slot-scope="{text}" slot="innerTable" style="width: 100%; height: 100%"> {{ text.text }} </div> <div slot-scope="{text, record}" slot="spoolCode"> <span v-if="record.materialStatus !== 1" style="color:red">{{ text }}</span> <span v-else>{{ text }}</span> </div> <div slot-scope="{text, record}" slot="materialStatus"> <span v-if="record.materialStatus !== 1" style="color:red">{{ text== 1 ? "是" : "否" }}</span> <span v-else>{{ text== 1 ? "是" : "否" }}</span> </div> <div slot-scope="{text, record}" slot="noMssNumSpool"> <span v-if="record.noMssNumSpool == 0">{{ text== 0 ? "否" : "是" }}</span> <span v-else style="color:red">{{ text== 0 ? "否" : "是" }}</span> </div> </v-table> <v-table :columns="totalColumns" :dataSource="schedulingCostList" :pagination="false" height="200px"> </v-table> </a-modal> </section> </template> <script> // 类型 import { getTWorkzoneDropList } from "~/api/modules/t/workzone/definition"; import * as Serve from "~/api/modules/Pipe/scheduling/pipespoolScheduling"; import { buildBase } from "@/api/modules/common/index"; export default { data() { return { dataList: [], projectId: "", holdNo: "", pipeline: "", innerColumn: [], columns: [], type: "cut", totalColumns: [], totalList: [], visible: false, detailList: [], record: {}, task: {}, processStr: "下料", schedulingCostList: [], checkObj: {}, recordType: "0", count1: 0, columnData: [], workzoneList: [], workzone: "", base: "", typeSch: "", needDate: "", costIndex: 0, baseList: [], }; }, // 注册表单 beforeCreate() { this.modalForm = this.$form.createForm(this); }, mounted() { buildBase().then(res => { res.status == 200 ? (this.baseList = res.data) : []; }); this.getWorkzone(); }, computed: { table() { return this.$refs.vtable.getTable(); }, pcTable() { return this.$refs.pcTable.getTable(); }, }, activated() { this.dataList = null this.getColumn(); this.getInnerColumn(); this.getCountTableColumns(); let query = this.$router.history.current.query; if ( query.projectId != null && query.projectId != undefined && query.holdNo != null && query.holdNo != undefined && query.type != null && query.type != undefined && query.needDate != null && query.needDate != undefined ) { this.projectId = query.projectId; this.holdNo = query.holdNo; this.pipeline = query.pipeline; this.base = query.orgCode; this.typeSch = query.type; this.needDate = query.needDate; this.searchState = query.searchState this.query(); } }, methods: { getColumn() { let columns = [ { title: "托盘号", align: "center", width: 100, dataIndex: "holdNo", scopedSlots: { customRender: "holdDetail" }, }, { title: "预制地", align: "center", width: 100, dataIndex: "preOrgName", }, { //title: "项目号", title: this.$t("pipeControll.common.projectNumber"), align: "center", dataIndex: "projectId", width: 100, }, { //title: "图号", title: this.$t("pipeControll.spool.drawingNumber"), align: "center", width: 200, dataIndex: "drawId", }, ]; if (this.type == "cut") { columns.push({ title: "管数/未排/可作", align: "center", width: 150, dataIndex: "cutStatus", sortMethod: this.canDoSort }); columns.push({ title: "排产日期", align: "center", dataIndex: "cutPlanDate", width: 100, }); } else if (this.type == "fab") { columns.push({ title: "管数/未排/可作", align: "center", width: 150, dataIndex: "fabStatus", sortMethod: this.canDoSort }); columns.push({ title: "排产日期", align: "center", dataIndex: "fabPlanDate", width: 100, }); } else if (this.type == "weld") { columns.push({ title: "管数/未排/可作", align: "center", width: 150, dataIndex: "weldStatus", sortMethod: this.canDoSort }); columns.push({ title: "排产日期", align: "center", dataIndex: "weldPlanDate", width: 100, }); } Serve.columns().then(res => { if (!res.error) { let list = res.data; if (list != null && list != undefined && list.length > 0) { list.forEach(row => { if (row.children != null && row.children != undefined && row.children.length > 0) { row.children[0].scopedSlots = { customRender: "tableColumn" }; row.children[0].sorter = false; row.children[0].align = "center"; } row.align = "center"; columns.push(row); }); } this.columns = columns; } }); }, //行内点击焊工号 cellClick(cell, event) { this.pcTable.setCheckboxRow(cell.row, true); if (cell.column && cell.column.property && cell.column.property.indexOf("position_") >= 0) { if ( this.workzone == null || this.workzone == undefined || this.workzone == "" ) { this.$message.error("请选择作业区后再进行排产！"); return; } let record = cell.row; let dataIndex = cell.column.property; if (record.materialStatus != 1) { this.$message.error("当前管材料库存不足，无法排产"); return; } let value = record[cell.column.property]; this.addNewCost(); let cost = this.schedulingCostList[this.index][dataIndex]; if (cost == "-" || cost == undefined || cost == null) { cost = 0; } else { cost = parseFloat(cost); } let beforeDate = ""; if (this.type == "cut" && record.cutDispatchFlag == 0) { if (record.fabPlanDate != "" && value.date > record.fabPlanDate) { this.$message.error("下料排产日期不可大于装配排产日期！"); return; } if (record.weldPlanDate != "" && value.date > record.weldPlanDate) { this.$message.error("下料排产日期不可大于焊接排产日期！"); return; } beforeDate = record.cutDate; if (record.cutDate == value.date) { cost = this.numSub(cost, record.cutCost); record.cutDate = ""; } else { cost = this.numAdd(cost, record.cutCost); record.cutDate = value.date; this.costSub(beforeDate, record, record.cutCost); } record.cutPlanDate = record.cutDate; } if (this.type == "fab" && record.fabDispatchFlag == 0) { if (record.cutPlanDate != "" && value.date < record.cutPlanDate) { this.$message.error("装配排产日期不可小于下料排产日期！"); return; } if (record.weldPlanDate != "" && value.date > record.weldPlanDate) { this.$message.error("装配排产日期不可大于焊接排产日期！"); return; } beforeDate = record.fabDate; if (record.fabDate == value.date) { cost = this.numSub(cost, record.fabCost); record.fabDate = ""; } else { cost = this.numAdd(cost, record.fabCost); record.fabDate = value.date; this.costSub(beforeDate, record, record.fabCost); } record.fabPlanDate = record.fabDate; } if (this.type == "weld" && record.weldDispatchFlag == 0) { if (record.cutPlanDate != "" && value.date < record.cutPlanDate) { this.$message.error("焊接排产日期不可小于下料排产日期！"); return; } if (record.fabPlanDate != "" && value.date < record.fabPlanDate) { this.$message.error("焊接排产日期不可小于装配排产日期！"); return; } beforeDate = record.weldDate; if (record.weldDate == value.date) { cost = this.numSub(cost, record.weldCost); record.weldDate = ""; } else { cost = this.numAdd(cost, record.weldCost); record.weldDate = value.date; this.costSub(beforeDate, record, record.weldCost); } record.weldPlanDate = record.weldDate; } if (cost == 0 || cost == 0.0) { cost = "-"; } this.schedulingCostList[this.index][dataIndex] = cost; this.setIconValue(record); } }, getInnerColumn() { this.innerColumn = []; let columns = [ { type: "checkbox", width: 50, }, { //title: "管段号", title: this.$t("pipeControll.spool.pipeNumber"), align: "center", dataIndex: "spoolCode", width: 160, sorter: false, scopedSlots: { customRender: "spoolCode" }, }, { //title: "版本号", title: this.$t("pipeControll.spool.versionNo"), align: "center", dataIndex: "spoolVersion", width: 60, sorter: false, }, { title: "优先级", align: "center", dataIndex: "matLevel", width: 60, sorter: false, }, { title: "可作", align: "center", dataIndex: "materialStatus", width: 60, sorter: false, scopedSlots: { customRender: "materialStatus" }, }, { title: "缺定额", align: "center", dataIndex: "noMssNumSpool", width: 60, sorter: false, scopedSlots: { customRender: "noMssNumSpool" }, }, ]; if (this.type == "cut") { columns.push({ title: "排产日期", align: "center", dataIndex: "cutPlanDate", width: 100, type: "date", sorter: false, }); } else if (this.type == "fab") { columns.push({ title: "排产日期", align: "center", dataIndex: "fabPlanDate", width: 100, type: "date", sorter: false, }); } else if (this.type == "weld") { columns.push({ title: "排产日期", align: "center", dataIndex: "weldPlanDate", width: 100, type: "date", sorter: false, }); } Serve.columns().then(res => { if (!res.error) { let list = res.data; this.columnData = res.data; if (list != null && list != undefined && list.length > 0) { list.forEach(row => { let newRow = { title: row.title, align: "center", sorter: false, }; if (row.children != null && row.children != undefined && row.children.length > 0) { newRow.children = []; let child0 = { title: row.children[0].title, align: "center", sorter: false, }; let children = []; let child = { dataIndex: row.children[0].dataIndex, align: "center", width: 50, sorter: false, }; this.$set(this.checkObj, child.dataIndex, false); child.title = child.dataIndex; let dataIndex = row.children[0].dataIndex; child.scopedSlots = { customRender: "innerTable", customHeaderRender: "checkHeader" }; children.push(child); child0.children = children; newRow.children.push(child0); } columns.push(newRow); }); } this.innerColumn = columns; } }); }, refreshColumn() { this.innerColumn = []; let columns = [ { type: "checkbox", width: 50, }, { //title: "管段号", title: this.$t("pipeControll.spool.pipeNumber"), align: "center", dataIndex: "spoolCode", width: 160, sorter: false, scopedSlots: { customRender: "spoolCode" }, }, { //title: "版本号", title: this.$t("pipeControll.spool.versionNo"), align: "center", dataIndex: "spoolVersion", width: 60, sorter: false, }, { title: "优先级", align: "center", dataIndex: "matLevel", width: 60, sorter: false, }, { title: "可作", align: "center", dataIndex: "materialStatus", width: 60, sorter: false, scopedSlots: { customRender: "materialStatus" }, }, { title: "缺定额", align: "center", dataIndex: "noMssNumSpool", width: 60, sorter: false, scopedSlots: { customRender: "noMssNumSpool" }, }, ]; if (this.type == "cut") { columns.push({ title: "排产日期", align: "center", dataIndex: "cutPlanDate", width: 100, type: "date", sorter: false, }); } else if (this.type == "fab") { columns.push({ title: "排产日期", align: "center", dataIndex: "fabPlanDate", width: 100, type: "date", sorter: false, }); } else if (this.type == "weld") { columns.push({ title: "排产日期", align: "center", dataIndex: "weldPlanDate", width: 100, type: "date", sorter: false, }); } let list = this.columnData; if (list != null && list != undefined && list.length > 0) { list.forEach(row => { let newRow = { title: row.title, align: "center", sorter: false }; if (row.children != null && row.children != undefined && row.children.length > 0) { newRow.children = []; let child0 = { title: row.children[0].title, align: "center", sorter: false, }; let children = []; let child = { dataIndex: row.children[0].dataIndex, align: "center", sorter: false, width: 50, }; child.title = child.dataIndex; let dataIndex = row.children[0].dataIndex; child.scopedSlots = { customRender: "innerTable", customHeaderRender: "checkHeader" }; children.push(child); child0.children = children; newRow.children.push(child0); } columns.push(newRow); }); } this.innerColumn = columns; }, costSub(date, record, cost) { if (date == undefined || date == null || date == "") { return; } let subDataIndex = ""; for (let key in record) { if (key.indexOf("position") != -1) { let value = record[key]; if (value.date == date) { subDataIndex = key; } } } if (subDataIndex != undefined && subDataIndex != "") { let subCost = 0; if (this.schedulingCostList && this.schedulingCostList.length > 0) { subCost = this.schedulingCostList[this.index][subDataIndex]; } else { this.addNewCost(); } if (subCost == "-") { subCost = 0; } subCost = this.numSub(subCost, cost); if (subCost == 0 || subCost == 0.0) { subCost = "-"; } else { subCost = Math.round(subCost * 100) / 100; } this.schedulingCostList[this.index][subDataIndex] = subCost; } }, costAdd(date, record, cost) { if (date == undefined || date == null || date == "") { return; } let addDataIndex = ""; for (let key in record) { if (key.indexOf("position") != -1) { let value = record[key]; if (value.date == date) { addDataIndex = key; } } } if (addDataIndex != undefined && addDataIndex != "") { let addCost = 0; if (this.schedulingCostList && this.schedulingCostList.length > 0) { addCost = this.schedulingCostList[this.index][addDataIndex]; } else { this.addNewCost(); } if (!addCost || addCost == "-") { addCost = 0; } addCost = this.numAdd(addCost, cost); if (addCost == 0 || addCost == 0.0) { addCost = "-"; } else { addCost = Math.round(addCost * 100) / 100; } this.schedulingCostList[this.index][addDataIndex] = addCost; } }, recordChange(record, date, flag) { if (this.type == "cut" && record.cutDispatchFlag == 0) { if (!flag && record.cutDate == date) { record.cutDate = null; this.costSub(date, record, record.cutCost); } if ( flag && (record.fabDate == "" || date <= record.fabDate) && (record.weldDate == "" || date <= record.weldDate) ) { let beforeDate = record.cutDate; record.cutDate = date; this.costAdd(date, record, record.cutCost); this.costSub(beforeDate, record, record.cutCost); } record.cutPlanDate = record.cutDate; } if (this.type == "fab" && record.fabDispatchFlag == 0) { if (!flag && record.fabDate == date) { this.costSub(date, record, record.fabCost); record.fabDate = null; } if ( flag && (record.cutDate == "" || date >= record.cutDate) && (record.weldDate == "" || date <= record.weldDate) ) { let beforeDate = record.fabDate; record.fabDate = date; this.costAdd(date, record, record.fabCost); this.costSub(beforeDate, record, record.fabCost); } record.fabPlanDate = record.fabDate; } if (this.type == "weld" && record.weldDispatchFlag == 0) { if (!flag && record.weldDate == date) { this.costSub(date, record, record.weldCost); record.weldDate = null; } if ( flag && (record.cutDate == "" || date >= record.cutDate) && (record.fabDate == "" || date >= record.fabDate) ) { let beforeDate = record.weldDate; record.weldDate = date; this.costAdd(date, record, record.weldCost); this.costSub(beforeDate, record, record.weldCost); } record.weldPlanDate = record.weldDate; } }, query() { let params = { projectId: this.projectId, holdNo: this.holdNo, pipeline: this.pipeline, orgCode: this.base, type: this.typeSch, needDate: this.needDate, searchState: this.searchState }; Serve.schedulingHoldPipeline(params).then(res => { if (!res.error) { this.task = res.data; let array = res.data.dataList; this.refreshIcon(array); this.dataList = array; } }); Serve.totalHold(params).then(res => { if (!res.error) { let a = res.data; let countList = res.data; countList.forEach(row => { for (let key in row) { if (key.indexOf("position") != -1) { let value = row[key]; if (value == 0) { row[key] = "-"; } } } }); this.totalList = res.data; } }); }, refreshIcon(array) { if (array != null && array != undefined && array.length > 0) { let tmp = array; tmp.forEach(row => { this.setIconValue(row); }); array = tmp; } }, setIconValue(row) { if (row == null || row == undefined) { return; } let cutDate = row.cutDate; let fabDate = row.fabDate; let weldDate = row.weldDate; for (let key in row) { if (key.indexOf("position") != -1) { let value = row[key]; let str = ""; if (value.date == cutDate) { str = str + "■"; } if (value.date == fabDate) { str = str + "▲"; } if (value.date == weldDate) { str = str + "★"; } value.text = str; } } }, reset() { this.query(); }, radioChange(e) { this.type = e.target.value; if (this.type == "cut") { this.processStr = "下料"; } if (this.type == "fab") { this.processStr = "装配"; } if (this.type == "weld") { this.processStr = "焊接"; } this.getColumn(); this.getInnerColumn(); this.refreshIcon(this.dataList); }, saveConfirm() { this.$confirm({ title: "确认保存排产信息？", //title: '确定删除?', onOk: () => { this.submitData(); }, onCancel() { }, }); }, submitData() { if (this.dataList != null && this.dataList != undefined && this.dataList.length > 0) { Serve.edit(this.dataList).then(res => { if (!res.error) { this.$message.success("排产成功!"); } }); } }, getCountTableColumns() { Serve.columns().then(res => { if (!res.error) { let list = res.data; //position_0 let totalTable = [ { title: "分类", align: "center", width: "100px", dataIndex: "type", }, { //title: '建造地', title: this.$t("pipeControll.common.builtPlace"), align: "center", width: "100px", dataIndex: "orgName", }, { title: "工作区", align: "center", width: "100px", dataIndex: "workzone", }, ]; if (list != null && list != undefined && list.length > 0) { list.forEach(row => { totalTable.push({ ...row, align: "center" }); }); } this.totalColumns = totalTable; } }); }, baseChange(e) { this.getWorkzone(e); }, refreshDetails() { let array = []; this.record.pipeData.forEach(row => { let newRow = {}; if ( this.recordType == "0" && ((this.type == "cut" && row.cutPlanDate == "") || (this.type == "fab" && row.fabPlanDate == "") || (this.type == "weld" && row.weldPlanDate == "")) ) { for (let key in row) { if (key.indexOf("position") != -1) { let obj = row[key]; let newObj = {}; if (obj) { newObj.date = obj.date; newRow[key] = newObj; } } else { newRow[key] = row[key]; } } array.push(newRow); } else if ( this.recordType == "1" && ((this.type == "cut" && row.cutPlanDate != "") || (this.type == "fab" && row.fabPlanDate != "") || (this.type == "weld" && row.weldPlanDate != "")) ) { for (let key in row) { if (key.indexOf("position") != -1) { let obj = row[key]; let newObj = {}; if (obj) { newObj.date = obj.date; newRow[key] = newObj; } } else { newRow[key] = row[key]; } } array.push(newRow); } else if (this.recordType == "2") { for (let key in row) { if (key.indexOf("position") != -1) { let obj = row[key]; let newObj = {}; if (obj) { newObj.date = obj.date; newRow[key] = newObj; } } else { newRow[key] = row[key]; } } array.push(newRow); } }); let type = ""; if (this.type == "cut") { type = "下料"; } else if (this.type == "fab") { type = "装配"; } else if (this.type == "weld") { type = "焊接"; } let row1 = {}; let data = null; this.refreshIcon(array); this.detailList = array; this.schedulingCost(); }, details(record) { this.record = record; this.recordType = "0"; this.base = record.preOrgNo; this.getWorkzone(this.base); this.visible = true; }, modalCancel() { this.visible = false; this.record = {}; this.getInnerColumn(); this.schedulingCostList = []; this.detailList = []; }, modalSubmit() { if (this.detailList == null || this.detailList == undefined || this.detailList.length == 0) { return; } const selectedRecords = this.pcTable.getCheckboxRecords(); if ( selectedRecords == null || selectedRecords == undefined || selectedRecords.length == 0 ) { this.$message.error("请至少选择一列再进行排产"); return; } if (this.workzone == null || this.workzone == undefined || this.workzone == "") { this.$message.error("请选择作业区后再进行排产！"); return; } let records = []; selectedRecords.forEach(key => { this.detailList.forEach(record => { if (key.pmlItemNo == record.pmlItemNo) { if ( (this.type == "cut" && record.cutDispatchFlag == 0) || (this.type == "fab" && record.fabDispatchFlag == 0) || (this.type == "weld" && record.weldDispatchFlag == 0) ) { record.orgNo = this.base; record.workzone = this.workzone; records.push(record); } } }); }); if (records.length == 0) { this.$message.error("已选管已派工，暂无可进行排产的管"); return; } Serve.holdDetailEdit(records).then(res => { if (!res.error) { this.$message.success("排产成功!"); this.modalCancel(); this.query(); } }); }, checkChange(dataIndex, e) { if (this.workzone == null || this.workzone == undefined || this.workzone == "") { this.$message.error("请选择作业区后再进行排产！"); return; } let result = e.target.checked; this.checkObj[dataIndex] = result; for (let column in this.checkObj) { if (column != dataIndex) { this.checkObj[column] = false; } } this.refreshColumn(); this.count1 = this.count1 + 1; let array = this.detailList; if (array && array.length > 0) { let date = array[0][dataIndex].date; if (date == null || date == undefined) { return; } array.forEach(record => { if (record.materialStatus == 1 || result == false) { this.recordChange(record, date, result); } }); let pcData = this.pcTable.getTableData().fullData; pcData.forEach((record) => { if (record.materialStatus == 1 || result == false) { this.pcTable.setCheckboxRow(record, true); } else { this.pcTable.setCheckboxRow(record, false); } }); this.refreshIcon(array); this.detailList = array; } }, numAdd(num1, num2) { var baseNum, baseNum1, baseNum2; try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) { baseNum1 = 0; } try { baseNum2 = num2.toString().split(".")[1].length; } catch (e) { baseNum2 = 0; } baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); return (num1 * baseNum + num2 * baseNum) / baseNum; }, numSub(num1, num2) { var baseNum, baseNum1, baseNum2; var precision; // 精度 try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) { baseNum1 = 0; } try { baseNum2 = num2.toString().split(".")[1].length; } catch (e) { baseNum2 = 0; } baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision); }, recordTypeChange(e) { this.recordType = e.target.value; this.refreshDetails(); }, closeWin() { let url = window.location.href; if (url.indexOf("iframe=true") != -1) { window.history.go(-1); } else { let allItems = this.$store.state.tagNavigations; let nextItem = null; allItems.forEach(item => { if (item.actived) { this.$store.commit("removeTagNavigation", item); } else { nextItem = item; } }); this.$router.push({ path: nextItem.route }); } }, getWorkzone(orgNo) { let params = { majors: "管路" }; if (orgNo != null && orgNo != undefined) { params.orgNo = orgNo; } getTWorkzoneDropList(params).then(res => { this.workzoneList = res.data; if (orgNo != null && orgNo != undefined) { this.refreshDetails(); } this.workzone = ""; }); }, schedulingCost() { let type = ""; if (this.type == "cut") { type = "下料"; } else if (this.type == "fab") { type = "装配"; } else if (this.type == "weld") { type = "焊接"; } let params = { type: type, holdNo: this.holdNo }; Serve.totalHold(params).then(res => { if (!res.error) { let a = res.data; let countList = res.data; countList.forEach(row => { for (let key in row) { if (key.indexOf("position") != -1) { let value = row[key]; if (value == 0) { row[key] = "-"; } } } }); this.schedulingCostList = res.data; this.costIndexChange(); } }); }, costIndexChange() { let index = this.schedulingCostList.findIndex(row => { return row.workzoneNo == this.workzone && row.orgNo == this.base; }); this.index = index; }, addNewCost() { if (this.index == -1) { let newRow = {}; if ( this.schedulingCostList != null && this.schedulingCostList != undefined && this.schedulingCostList.length > 0 ) { newRow = { ...this.schedulingCostList[0] }; for (let key in newRow) { if (key.indexOf("position") != -1) { let value = newRow[key]; newRow[key] = "-"; } } } else { this.totalColumns.forEach(column => { if (column.children != null && column.children != undefined) { let propName = column.children[0].dataIndex; newRow[propName] = "-"; } }); } let base = this.baseList.find(row => { return row.orgNo == this.base; }); newRow.orgName = base.name; newRow.orgNo = base.orgNo; let workzone = this.workzoneList.find(row => { return row.code == this.workzone; }); newRow.workzoneNo = workzone.code; newRow.workzone = workzone.name; let type = ""; if (this.type == "cut") { type = "下料"; } else if (this.type == "fab") { type = "装配"; } else if (this.type == "weld") { type = "焊接"; } newRow.type = type; this.schedulingCostList.push(newRow); this.costIndexChange(); } }, canDoSort (data1, data2) { let sortStr1 = '' let sortStr2 = '' if (this.type == "cut") { sortStr1 = data1.cutStatus sortStr2 = data2.cutStatus } else if (this.type == "fab") { sortStr1 = data1.fabStatus sortStr2 = data2.fabStatus } else if (this.type == "weld") { sortStr1 = data1.weldStatus sortStr2 = data2.weldStatus } let sortStrList1 = sortStr1.split('/') let sortStrList2 = sortStr2.split('/') console.log((+sortStrList1[2])>(+sortStrList2[2])) return (+sortStrList1[2])-(+sortStrList2[2]) } }, }; </script> 以上是vue2的写法，下面是vue3的写法；将vue2转成vue3写法并输出所有代码（v-table要改成c-table) <template> <c-search-panel :columns="tableState.columns" @search="onSearch"></c-search-panel> <c-table :columns="tableState.columns" :toolbar="tableState.toolbar" :sortConfig="{ showIcon: false }" :proxy-config="tableState.proxyConfig" @toolbar-button-click="onToolbarClick" :pagination="tableState.pagination" :row-selection="rowSelection" ref="tableRef" > <template #action="{ record }"> <a-button type="link" @click="editPersonnel(record)" v-resource="[{ url: '/service-piping/cp/workSpace/user', method: 'POST' }]" > 修改人员 </a-button> <a-button type="link" @click="editDailyCapacity(record)" v-resource="[{ url: '/service-piping/cp/workSpace/dailyCapacity', method: 'POST' }]" > 修改日产能 </a-button> <a-button type="link" @click="getLog(record)" v-resource="[{ url: '/service-piping/cp/workSpace/log', method: 'GET' }]" > 查看日志 </a-button> </template> </c-table> <c-modal :title="'操作日志'" v-model:open="logVisible" :footer="null"> <c-table :columns="logColumns" :data-source="logData" :pagination="false" :sortConfig="{ showIcon: false }" :height="400"> </c-table> </c-modal> <c-modal :title="'修改人员'" v-model:open="personnelModalVisible" width="40%" :footer="null" > <div> <a-button style="margin-right: 10px" type="primary" :icon="h(PlusOutlined)" @click="addPersonnel" v-resource="[{ url: '/service-piping/cp/workSpace/user', method: 'POST' }]" >新增 </a-button > <a-button style="margin-right: 10px" type="primary" :icon="h(SaveOutlined)" @click="savePersonnel" v-resource="[{ url: '/service-piping/cp/workSpace/user', method: 'POST' }]" >保存 </a-button > <a-button type="primary" danger :icon="h(DeleteOutlined)" @click="deletePersonnel" v-resource="[{ url: '/service-piping/cp/workSpace/user/delete', method: 'POST' }]" >删除 </a-button > </div> <c-table :columns="personnelState.columns" :data-source="personnelData" :pagination="false" :sortConfig="{ showIcon: false }" :height="400" :row-selection="personnelRowSelection" rowKey="userNo" ref="personnelTableRef" > <template #user="{ record }"> <c-user-input v-model:value="record['user']"></c-user-input> </template> </c-table> </c-modal> <c-modal :title="'修改日产能'" v-model:open="capacityVisible" width="30%" :footer="null" > <div> <a-button type="primary" style="margin-right: 10px" :icon="h(PlusOutlined)" @click="addCapacity" v-resource="[{ url: '/service-piping/cp/workSpace/dailyCapacity', method: 'POST' }]" >新增 </a-button> <a-button type="primary" style="margin-right: 10px" :icon="h(SaveOutlined)" @click="saveCapacity" v-resource="[{ url: '/service-piping/cp/workSpace/dailyCapacity', method: 'POST' }]" >保存 </a-button> <a-button type="primary" style="margin-right: 10px" danger :icon="h(DeleteOutlined)" @click="deleteCapacity" v-resource="[ { url: '/service-piping/cp/workSpace/dailyCapacity/delete', method: 'POST' } ]" >删除 </a-button> <a-button type="primary" style="background-color: #faad14; border-color: #faad14; color:#fff; margin-right: 10px" :icon="h(DownloadOutlined)" @click="downloadCapacityModal" v-resource="[ { url: '/service-piping/cp/workSpace/dailyCapacity/exportTemplate', method: 'GET' } ]" >下载模板 </a-button> <a-button type="primary" :style="{ backgroundColor: '#52c41a', borderColor: '#52c41a' }" :icon="h(UploadOutlined)" @click="importCapacity" v-resource="[ { url: '/service-piping/cp/workSpace/dailyCapacity/importData', method: 'POST' } ]" >导入 </a-button> </div> <c-table :columns="capacityState.columns" :data-source="capacityData" :pagination="false" :height="400" :sortConfig="{ showIcon: false }" :rowKey="record => `${record.workSpaceId}_${record.workDate}`" :row-selection="capacityRowSelection" ref="capacityTableRef" > </c-table> </c-modal> </template> <script setup> import * as server from "@/packages/piping/api/basic/index" import {computed, createVNode, h, reactive, ref} from "vue" import {message, Modal} from "ant-design-vue" import {getDictionary} from "@/api/core" import QRCode from "qrcode" import { DeleteOutlined, DownloadOutlined, ExclamationCircleOutlined, PlusOutlined, SaveOutlined, UploadOutlined } from '@ant-design/icons-vue'; import dayjs from "dayjs"; import {saveAs} from "file-saver" const tableState = reactive({ toolbar: { buttons: [ { code: "insertInline", status: 'primary', icon: 'PlusOutlined', name: "新增" }, { code: "saveData", status: 'primary', icon: 'SaveOutlined', name: "保存" }, { code: "switchStatus", name: "启用/禁用" }, { code: "generateQrCode", status: 'primary', icon: 'QrcodeOutlined', name: "生成二维码" } ], showFilter: false }, selectedRowKeys: [], selectedRows: [], pagination: {pageSize: 20}, proxyConfig: { autoLoad: false, ajax: { query: (pagination) => server.workSpacePage({...pagination, ...conditionData.value}) } }, columns: [ { title: "工位号", dataIndex: "workSpaceNo", width: 80, condition: true, editable: true, rules: [{required: true, message: "必填项！"}] }, { title: "基地", dataIndex: "orgNo", condition: true, editable: true, rules: [{required: true, message: "必填项！"}], width: 80, type: "buildCase", }, { title: "工位类型", dataIndex: "workSpaceType", type: "select", width: 70, condition: true, editable: true, options: { options: [], fieldNames: {label: "name", value: "name"}, ajax: getDictionary({code: "cpPreDescProcess", state: "1"}).then((res) => { return res }) }, rules: [{required: true, message: "必填项！"}] }, { dataIndex: "status", title: "启用", type: "select", editable: true, width: 50, decorator: {initialValue: "Y"}, options: { options: [ {value: "Y", label: "Y"}, {value: "N", label: "N"} ] }, rules: [{required: true, message: "必填项！"}] }, { title: "产能(h)", dataIndex: "capacity", width: 60, editable: true, type: "number", rules: [{required: true, message: "必填项！"}] }, { title: "备注", dataIndex: "remark", editable: true, width: 80, }, { title: "人数", dataIndex: "personQuantity", width: 40, }, { title: "创建人", dataIndex: "createUserName", type: "employeeDescription", options: { fieldNames: { label: "createUserName", value: "createUserNo" } }, width: 80, formInvisible: true, }, { title: "创建时间", dataIndex: "createDate", type: "datetime", width: 100, formInvisible: true, }, { title: "修改人", dataIndex: "updateUserName", type: "employeeDescription", options: { fieldNames: { label: "updateUserName", value: "updateUserNo" } }, width: 80, formInvisible: true, }, { title: "修改时间", dataIndex: "updateDate", type: "datetime", width: 100, formInvisible: true, }, { title: "产线", dataIndex: "productionLineId", editable: true, type: "select", options: { options: [], fieldNames: {label: "productionLineName", value: "id"}, ajax: server.getProductionLineDropList().then((res) => { return res }) }, width: 80, }, { title: "操作", key: "action", scopedSlots: {customRender: "action"}, width: 180, fixed: "right", formInvisible: true, } ] }) const logColumns = [ { title: "操作类型", dataIndex: "event", width: 80 }, { title: "操作详情", dataIndex: "msg", width: 120 }, { title: "操作时间", dataIndex: "createDate", type: "datetime", width: 120 }, { title: "操作人", dataIndex: "createUserNo", type: "employeeDescription", width: 90, options: { fieldNames: { label: "createUserName", value: "createUserNo" } } } ] const tableRef = ref(null) const logData = ref([]) const ctable = computed(() => tableRef.value?.getTable()) const conditionData = ref() const logVisible = ref(false) const workSpaceId = ref(null) const personnelModalVisible = ref(false) const personnelData = ref([]) const personnelTableRef = ref(null) const cPersonnelTable = computed(() => personnelTableRef.value?.getTable()) const personnelState = reactive({ selectedRowKeys: [], selectedRows: [], columns: [ { title: "姓名", dataIndex: "userName", scopedSlots: {customFormRender: "user"}, type: "employeeDescription", options: { fieldNames: { label: "userName", value: "userNo" } }, editable: true, width: 80 }, { title: "班组", dataIndex: "workteamName", width: 120 }, { title: "公司", dataIndex: "companyName", width: 120 } ] }) const capacityTableRef = ref(null) const cCapacityTable = computed(() => capacityTableRef.value?.getTable()) const capacityVisible = ref(false) const capacityData = ref([]) const capacityState = reactive({ selectedRowKeys: [], selectedRows: [], columns: [ { title: "日期", dataIndex: "workDate", type: "date", formatter: ({row}) => { return row.workDate ? dayjs(row.workDate).format('YYYY-MM-DD') : '-'; }, options: { disabledDate: (current) => { return current && current < dayjs().startOf('day'); } }, editable: true, width: 80 }, { title: "日产能", dataIndex: "allCapacity", type: "inputNumber", editable: true, width: 120 } ] }) //搜索 const onSearch = (values) => { conditionData.value = values ctable.value.commitProxy("query", values) } //表头按钮操作 const onToolbarClick = (target) => { switch (target.code) { case "insertInline": insertInline() break case "saveData": saveData() break case "switchStatus": switchStatus() break case "generateQrCode": generateQrCode() break default: break } } const insertInline = () => { ctable.value.insert({status: "Y"}) } const rowSelection = computed(() => { return { selectedRowKeys: tableState.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { tableState.selectedRowKeys = selectedRowKeys tableState.selectedRows = selectedRows } } }) const personnelRowSelection = computed(() => { return { selectedRowKeys: personnelState.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { personnelState.selectedRowKeys = selectedRowKeys personnelState.selectedRows = selectedRows } } }) const capacityRowSelection = computed(() => { return { selectedRowKeys: capacityState.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { capacityState.selectedRowKeys = selectedRowKeys capacityState.selectedRows = selectedRows } } }) const saveData = () => { const updateRecords = ctable.value.getUpdateRecords() console.log(updateRecords) if (!updateRecords || updateRecords.length == 0) return const invalidRecords = updateRecords.filter(record => { const capacity = Number(record.capacity); return !isNaN(capacity) && capacity < 0; }); if (invalidRecords.length > 0) { message.error(`产能不能为负数！`); return; } ctable.value.validateEditFields().then(() => { server.workSpaceSave(updateRecords).then(() => { message.success("保存成功") ctable.value.commitProxy("query") }) ctable.value.commitProxy() }) } const switchStatus = () => { if (tableState.selectedRowKeys.length == 0) { message.error("请选择至少一条数据") return } let selectedRows = tableState.selectedRows.map((item) => { return { ...item, status: item.status == "Y" ? "N" : "Y" } }) server .workSpaceSave(selectedRows) .then(() => { message.success("状态切换成功") tableState.selectedRowKeys = [] ctable.value.commitProxy("query") }) .catch(() => { message.error("状态切换失败") }) } const generateQrCode = async () => { if (tableState.selectedRowKeys.length === 0) { message.error("请选择至少一条数据") return } const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") const qrCodeSize = 200 // 二维码大小 const textHeight = 20 // 文字高度 const padding = 10 // 间距 const maxColumns = 6 // 最大每行显示的二维码数量 const qrCodes = [] for (const item of tableState.selectedRows) { const workSpaceNo = item.workSpaceNo try { const qrCodeDataUrl = await QRCode.toDataURL(workSpaceNo, { errorCorrectionLevel: "H", margin: 1, width: qrCodeSize }) const img = new Image() img.src = qrCodeDataUrl await new Promise((resolve, reject) => { img.onload = resolve img.onerror = reject }) qrCodes.push({img, workSpaceNo}) } catch (error) { console.error("生成二维码失败:", error) message.error(`工位号 ${workSpaceNo} 生成二维码失败`) } } if (qrCodes.length === 0) { message.error("没有成功生成任何二维码") return } const actualColumns = Math.min(maxColumns, qrCodes.length) const rows = Math.ceil(qrCodes.length / actualColumns) canvas.width = actualColumns * (qrCodeSize + padding) + padding canvas.height = rows * (qrCodeSize + textHeight + padding) + padding ctx.fillStyle = "#ffffff" ctx.fillRect(0, 0, canvas.width, canvas.height) qrCodes.forEach(({img, workSpaceNo}, index) => { const row = Math.floor(index / actualColumns) const col = index % actualColumns const x = col * (qrCodeSize + padding) + padding const y = row * (qrCodeSize + textHeight + padding) + padding ctx.drawImage(img, x, y, qrCodeSize, qrCodeSize) ctx.fillStyle = "#000000" ctx.font = "16px Arial" ctx.textAlign = "center" ctx.fillText(workSpaceNo, x + qrCodeSize / 2, y + qrCodeSize + textHeight) }) const link = document.createElement("a") link.href = canvas.toDataURL("image/png") link.download = "二维码.png" link.click() URL.revokeObjectURL(link.href) } const getLog = (record) => { server.getWorkSpaceLogList({workSpaceId: record.id}).then((response) => { logData.value = response.data logVisible.value = true }) } const editPersonnel = (record) => { personnelData.value = [] workSpaceId.value = record.id getPersonnel(workSpaceId.value) } const editDailyCapacity = (record) => { capacityData.value = [] workSpaceId.value = record.id getDailyCapacity(workSpaceId.value) } const getPersonnel = (workSpaceId) => { server.getWorkSpaceUserList({workSpaceId}).then((response) => { personnelData.value = response.data personnelModalVisible.value = true }) } const addPersonnel = () => { cPersonnelTable.value.insert({}) } const savePersonnel = () => { const allRecords = personnelData.value if (!allRecords || allRecords.length == 0) return allRecords.forEach((record) => { record.workSpaceId = workSpaceId.value }) cPersonnelTable.value.validateEditFields().then(() => { server.workSpaceUserSave(allRecords).then(() => { message.success("保存成功") personnelModalVisible.value = false }) }) } const deletePersonnel = () => { if (personnelState.selectedRowKeys.length == 0) { message.error("请选择至少一条数据") return } Modal.confirm({ title: "请确认是否要进行删除？", icon: createVNode(ExclamationCircleOutlined), content: "该操作一旦执行无法撤回", okText: "确认", okType: "danger", cancelText: "取消", onOk() { let selectedRows = personnelState.selectedRows.map((item) => { return { ...item, workSpaceId: workSpaceId.value } }) server.workSpaceUserDelete(selectedRows).then(() => { message.success("删除成功") getPersonnel(workSpaceId.value) }) }, onCancel() { console.log("Cancel") } }) } const getDailyCapacity = (workSpaceId) => { server.getWorkSpaceDailyCapacityList({workSpaceId}).then((response) => { capacityData.value = response.data capacityVisible.value = true }) } const addCapacity = () => { cCapacityTable.value.insert({}) } const saveCapacity = () => { const allRecords = capacityData.value if (!allRecords || allRecords.length == 0) return allRecords.forEach((record) => { record.workSpaceId = workSpaceId.value }) cCapacityTable.value.validateEditFields().then(() => { server.workSpaceDailyCapacitySave(allRecords).then(() => { message.success("保存成功") capacityVisible.value = false }) }) } const deleteCapacity = () => { if (capacityState.selectedRowKeys.length == 0) { message.error("请选择至少一条数据") return } Modal.confirm({ title: "请确认是否要进行删除？", icon: createVNode(ExclamationCircleOutlined), content: "该操作一旦执行无法撤回", okText: "确认", okType: "danger", cancelText: "取消", onOk() { let selectedRows = capacityState.selectedRows.map((item) => { return { ...item, workSpaceId: workSpaceId.value } }) server.workSpaceDailyCapacityDelete(selectedRows).then(() => { message.success("删除成功") getDailyCapacity(workSpaceId.value) }) }, onCancel() { console.log("Cancel") } }) } const downloadCapacityModal = () => { server.workSpaceDailyCapacityTemplate() } const importCapacity = () => { cCapacityTable.value.readFile({types: ["xlsx", "xls"]}).then((response) => { const {file} = response handleFileChange(file) }) } const handleFileChange = (event) => { const selectedFile = event let param = { file: selectedFile } server.workSpaceDailyCapacityImportData(param).then((res) => { const contentType = res.headers["content-type"] if (!contentType) { // 处理数组对象 message.success("导入成功") getDailyCapacity(workSpaceId.value) } else if (contentType.includes("application/vnd.ms-excel;charset=utf-8")) { message.error("上传失败，请查看错误文件") saveAs(res.data, "导入提示.xlsx") } }) } </script>
10-10
- 使用 `defineProps` 和 `defineEmits` 替换 `props` 和 `this.$emit`。 - 将 `v-table` 替换为 `c-table`（根据你提供的示例）。 --- ## ✅ 转换说明 你希望将 Vue2 的组件转换为 Vue3，并且使用 `c-table` ...
function getMonitor(flag?: boolean) { if (timer === null) { timer = setTimeout( async () => { try { const res = await list({ devicetype: deviceType.value, pagetype: 'normal' }); if (res && res.msgTxt[0]) { const rawData = res.msgTxt[0].datalist || []; const processedData = [...rawData]; // 并行获取所有regulation数据 const regulationPromises = processedData.filter((data) => data.regulation).map((data) => getRegulationList(data.regulation, data)); await Promise.all(regulationPromises); // 确保所有异步操作完成后再更新数据源 dataSource.value = processedData; // 处理readData和初始选择 if (dataSource.value.length > 0) { await processReadData(processedData); await handleInitialSelection(); } } } catch (error) { console.error('Erro', error); } finally { timer = null; getMonitor(flag); } }, flag ? 0 : 1000 ); } } async function getRegulationList(regulationId: string, data: any) { const res = await getRegulation({ deviceKind: deviceType.value }); if (res) { const regulation = res.find((item) => item.id === regulationId); if (regulation) { data.regulation = regulation; data.fmin = regulation.fmin; data.fmax = regulation.fmax; } } }这么请求getRegulation这个接口为什么在控制台发送四次请求
09-16
console.log('Items with regulation:', filteredCount); ``` ### 避免不必要的递归调用 另外，注意`getMonitor`函数在`finally`块中递归调用自己，这会导致无限循环（尽管每次有1秒的延迟，除非`flag`为`true`）。...
const dataSource = computed(() => { let arr = []; if (data.addAge != '' || data.addName != '') { for (let i = 0; i < data.sites.length; i++) { let item = data.sites[i]; if (item.age == data.addAge && item.name == data.addName) { arr.push(item); } } } else { arr = data.sites; } return arr; })vue3，改用watch事件，怎么改
07-05
- 如果过滤逻辑依赖多个响应式数据，我们可以使用数组形式传入多个源（如示例中的[searchQuery, items]）。 - 设置`immediate: true`选项，这样在初始时就会执行一次，否则初始时filteredItems为空数组，直到依赖...
<template> <div class="sec-container"> <van-popup v-model:show="showFeedbackModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleFeedbackClose" > <!-- 炉批号--> <van-popup v-model:show="heatModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleHeatClose" > <van-field v-model="heatData.heatNo" clearable @click="handleHeatNo" label="炉号" is-link readonly /> <van-field v-model="heatData.batchNo" clearable @click="handleBatchNo" label="批号" is-link readonly /> <div class="search-btn"> <van-button type="primary" @click="commitHeat">提交 </van-button> </div> </van-popup> <!-- 异常--> <van-popup v-model:show="exceptionModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleExceptionModalClose" > <van-field v-model="exceptionParam.exceptionType" clearable @click="handleExceptionType" label="异常类型" is-link readonly /> <van-field v-model="exceptionParam.exceptionMsg" rows="3" autosize label="异常描述" type="textarea" maxlength="500" placeholder="请输入异常描述" show-word-limit /> <div class="search-btn"> <van-button type="primary" @click="commitException">提交 </van-button> </div> </van-popup> <!-- 异常类型选择--> <van-popup v-model:show="showPicker" round position="bottom"> <van-picker :columns="exceptionTypeList" @cancel="showPicker = false" @confirm="onExceptionTypeConfirm" /> </van-popup> <!-- 炉号选择--> <van-popup v-model:show="showHeatNoPicker" round position="bottom"> <van-picker :columns="heatNoList" @cancel="showHeatNoPicker = false" @confirm="onHeatNoConfirm" /> </van-popup> <!-- 批号选择--> <van-popup v-model:show="showBatchNoPicker" round position="bottom"> <van-picker :columns="batchNoList" @cancel="showBatchNoPicker = false" @confirm="onBatchNoConfirm" /> </van-popup> <!-- root选择--> <van-popup v-model:show="showRootPicker" round position="bottom"> <van-picker :columns="rootBatchNoList" @cancel="showRootPicker = false" @confirm="onRootConfirm" /> </van-popup> <!-- fill选择--> <van-popup v-model:show="showFillPicker" round position="bottom"> <van-picker :columns="fillBatchNoList" @cancel="showFillPicker = false" @confirm="onFillConfirm" /> </van-popup> <!-- wps选择--> <van-popup v-model:show="showWpsModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleWpsClose" > <a-table sticky style="width: 98%" :scroll="{ x: '100%' }" :columns="wpsColumns" :dataSource="addWpsData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addWps(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加</a-button > </template> </template> </a-table> </van-popup> <!-- 焊缝批号选择--> <van-popup v-model:show="showWeldHeatModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleWeldHeatClose" > <van-field v-model="weldHeatData.rootBatchNo" clearable @click="handleRoot" label="root" is-link readonly /> <van-field v-model="weldHeatData.fillBatchNo" clearable @click="handleFill" label="fill" is-link readonly /> <div class="search-btn"> <van-button type="primary" @click="commitWeldHeat">提交 </van-button> </div> </van-popup> <!-- 新增小票明细--> <van-popup v-model:show="showCutFeedbackAddModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleCutFeedbackAddClose" > <a-table sticky v-if="feedbackType === '下料' || feedbackType === '装配'" style="width: 98%" :scroll="{ x: '100%' }" :columns="cutColumns" :dataSource="addCutData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addData(record)" :disabled="record.canFeedback==false" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加</a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '焊接'" style="width: 98%" :scroll="{ x: '100%' }" :columns="weldColumns" :dataSource="addWeldData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addData(record)" :disabled="record.canFeedback==false" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加</a-button > </template> </template> </a-table> </van-popup> <van-cell-group :title=" feedbackType === '下料' ? '管路下料反馈' : feedbackType === '装配' ? '管路装配反馈' : '管路焊接反馈' " > <van-field v-model="feedbackParam.workDate" is-link readonly clearable label="反馈日期" placeholder="请选择反馈日期" @click="showDatePicker = true" /> <van-field v-model="feedbackParam.remark" rows="3" autosize label="备注" type="textarea" maxlength="500" placeholder="请输入备注" show-word-limit /> <van-field v-model="feedbackParam.helperName" autosize label="协助人名" readonly v-if="feedbackType === '焊接'" /> <van-field v-model="feedbackParam.helperNo" label="协助人IC号" @input="inputHelperNo" placeholder="请输入协助人IC号" v-if="feedbackType === '焊接'" /> <div class="search-btn"> <van-button type="primary" @click="addFeedbackDetail" style="margin-left:5px;margin-right: 10px">添加物量</van-button> <van-button type="primary" @click="commitFeedbackDetail">提交</van-button> <a-table sticky v-if="feedbackType === '下料'" :scroll="{ x: '100%' }" style="width: 98%" :columns="cutColumns" :dataSource="cutData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delCutData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除</a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报</a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '装配'" :scroll="{ x: '100%' }" style="width: 98%" :columns="assyColumns" :dataSource="partData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delAssyData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除</a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报</a-button > <a-button type="link" @click="saveHeat(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择炉批号</a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '装配' || feedbackType === '焊接'" :scroll="{ x: '100%' }" style="width: 98%" :columns="weldingColumns" :dataSource="weldData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delWeldData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除</a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报</a-button > <a-button type="link" @click="saveWps(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择WPSNo</a-button > <a-button type="link" @click="saveWeldHeat(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择批号</a-button > </template> </template> </a-table> </div> </van-cell-group> <van-calendar v-model:show="showDatePicker" @confirm="onDateConfirm" /> </van-popup> <van-popup v-model:show="showDetailModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleDetailClose" > <van-cell-group title="管路下料数据" v-if="detailType === '下料'"> <van-field name="projectNo" label="项目"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].printName : '' }} </template> </van-field> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].orderNo : '' }} ({{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].shopMatOrderNo : '' }}) </template> </van-field> </van-cell-group> <van-cell-group title="材料清单" v-if="detailType === '装配'"> <van-field name="projectNo" label="项目"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].projectNo : '' }} </template> </van-field> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailData.orderNo }} </template> </van-field> <van-field name="inspClass" label="下料领料单"> <template #input> {{ detailData.cutMatListNo }} </template> </van-field> <van-field name="inspClass" label="装配领料单"> <template #input> {{ detailData.assyMatListNo }} </template> </van-field> </van-cell-group> <van-cell-group title="装配套料件材料清单" v-if="detailType === 'nesting'"> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].orderNo : '' }} </template> </van-field> </van-cell-group> <van-form ref="addCommentsFormRef" @submit="handleSave"> <a-table sticky :scroll="{ x: '100%' }" :columns=" detailType == 'show' ? detailTable.columns : detailType == '下料' ? detailTable.cutColumns : detailType == '装配' ? detailTable.assyColumns : detailTable.nestingColumns " style="width: 98%" :dataSource="detailTable.dataSource" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" ref="detailTableRef" > </a-table> </van-form> </van-popup> <div class="top-content"> <div class="project-content"> <div class=""></div> </div> <div class="btn-content"> <div class="btn-right" @click="openSearchDialog"> <SearchOutlined style="font-size: 20px; color: #004688" /> <p class="speNorm">搜索</p> </div> </div> </div> <div class="bot-content" @scroll="handleScroll"> <a-table sticky :scroll="{ x: '100%' }" :columns="columns" :dataSource="data" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="showData(record, 'show')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >查看</a-button > <a-button type="link" @click="showData(record, '下料')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >下料单</a-button > <a-button type="link" @click="showData(record, '装配')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >材料单</a-button > <a-button type="link" @click="showData(record, 'nesting')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >套料件材料单</a-button > <a-button type="link" @click="feedback(record, '下料')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >下料反馈</a-button > <a-button type="link" @click="feedback(record, '装配')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >装配反馈</a-button > <a-button type="link" @click="feedback(record, '焊接')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >焊接反馈</a-button > </template> </template> </a-table> </div> <van-popup v-model:show="searchOpen" position="right" :style="{ width: popupWidth, height: '100%', overflow: 'hidden' }" round closeable @close="handleDetailClose" > <div class="search-content"> <div class="search-top"> <div class="search-project-back" v-if="projectType" @click="handleBack"> <LeftOutlined style="font-size: 15px; color: #004688; margin-top: 3px" />返回 </div> <div class="search-titles"> <span>{{ !projectType ? '搜索' : '搜索项目' }}</span> </div> </div> <div class="search-state"> <van-cell-group inset> <van-field v-model="searchState.projectNo" clearable label="项目" readonly @click="handleProject" /> <van-field v-model="searchState.orderNo" clearable label="派工单号" placeholder="请输入派工单号" /> </van-cell-group> <project-panel ref="projectpanelRef" @get="getProj"></project-panel> </div> <div class="search-btn"> <van-button type="warning" color="#9A9A9A" @click="onReset">重置</van-button> <van-button type="primary" @click="onSearch">查询 </van-button> </div> </div> </van-popup> </div> </template> <script setup> import { ref, onMounted, onUnmounted, onActivated, computed, watch, createVNode, reactive } from 'vue' import { SearchOutlined, LeftOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue' import * as serve from '@/api/cp/pipeOrderInfo' import ProjectPanel from '@/components/ProjectPanel.vue' import dayjs from 'dayjs' import { Buffer } from 'buffer' import localforage from 'localforage' import { useHomePage } from '@/stores/homePage' import { Modal } from 'ant-design-vue' import { getBuildBases } from '@/api/common/index.js' import { showConfirmDialog, showNotify } from 'vant' import { cloneDeep } from 'lodash-es' const showFillPicker = ref(false) const showRootPicker = ref(false) const submitting = ref(false) const orgNo = ref(undefined) const orderNo = ref(undefined) const projectNo = ref(undefined) const pipeNo = ref(undefined) const pipeVersion = ref(undefined) const showDatePicker = ref(false) const feedbackParam = ref({}) const exceptionParam = ref({}) const detailData = ref({}) const applyDate = ref(undefined) const weldTable = reactive({ toolbar: { // buttons: [{ code: "addCar", name: "添加物料" }] }, resToolbar: { buttons: [ { code: 'qualifiedWeld', name: '合格' }, { code: 'unqualifiedWeld', name: '不合格' }, { code: 'cancelWeld', name: '取消' } ] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: '管号', dataIndex: 'pipeNo', width: 120 }, { title: '焊缝号', dataIndex: 'weldNo', width: 150 }, { title: '焊缝长度', dataIndex: 'length', width: 150 }, { title: '焊接日期', type: 'date', dataIndex: 'weldDate', width: 150 } // { // title: "操作", // key: "action", // align: "center", // width: 90, // sorter: false, // scopedSlots: { customRender: "action" }, // fixed: "right", // formInvisible: true // } ], resColumns: [ { title: '项目', dataIndex: 'projectNo', width: 90, type: 'project' }, { title: '管号', dataIndex: 'pipeNo', width: 120 }, { title: '版本号', dataIndex: 'pipeVersion', width: 120 }, { title: '焊缝号', dataIndex: 'weldNo', width: 150 }, { title: '检验结果', dataIndex: 'status', type: 'select', width: 80, customRender: function (text) { if (text.record.status) { return stateColumns.value.find((item) => item.value == text.record.status).text } else { return '新建' } } }, { title: '小票删除', dataIndex: 'pipeDelFlag', width: 80 }, { title: '小票暂停', dataIndex: 'pipePauseFlag', width: 80 }, { title: '小票最新版', dataIndex: 'pipeTopFlag', width: 80 }, { title: '焊缝删除', dataIndex: 'delFlag', width: 80 }, { title: '操作', key: 'action', align: 'center', width: 200, sorter: false, scopedSlots: { customRender: 'action' }, fixed: 'right', formInvisible: true } ], dataSource: [] }) const detailType = ref('') const feedbackType = ref('') const showType = ref('') window.Buffer = Buffer const homePage = useHomePage() const saveData = ref({}) const stateColumns = ref([ { value: 0, text: '新建' }, { value: -1, text: '不合格' }, { value: 1, text: '检验中' }, { value: 2, text: '合格' } ]) const showDetailModal = ref(false) const showFeedbackModal = ref(false) const showCutFeedbackAddModal = ref(false) const showWpsModal = ref(false) const showWeldHeatModal = ref(false) const showPicker = ref(false) const showHeatNoPicker = ref(false) const showBatchNoPicker = ref(false) const buildBaseList = ref([]) const data = ref([]) const cutData = ref([]) const partData = ref([]) const weldData = ref([]) const addCutData = ref([]) // const addPartData = ref([]) const loading = ref(false) const dataCount = ref(0) const searchState = ref({ size: 20, page: 0, projectNo: undefined, inspClass: undefined, orderNo: undefined }) const searchOpen = ref(false) const projectpanelRef = ref(null) const projectType = ref(false) const popupWidth = ref('30%') const isLast = ref(false) const isVisibleComputed = computed(() => { return feedbackType.value == '焊接' }) const detailTable = reactive({ toolbar: { buttons: [{ code: 'addPipe', name: '添加物料' }] }, resToolbar: { buttons: [ { code: 'qualifiedPipe', name: '合格' }, { code: 'unqualifiedPipe', name: '不合格' }, { code: 'cancelPipe', name: '取消' } ] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: '项目', dataIndex: 'projectNo', width: 50, condition: true, type: 'project', options: { options: [], fieldNames: { label: 'projId', value: 'projId' } } }, { title: '图号', dataIndex: 'drawNo', width: 170 }, { title: '作业对象', dataIndex: 'block', width: 70 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '最新版', dataIndex: 'isTopVersion', width: 60, type: 'select', options: { options: [ { label: 'Y', value: 'Y' }, { label: 'N', value: 'N' } ] } }, { title: '是否删除', dataIndex: 'isDelete', width: 80, type: 'select', options: { options: [ { label: 'Y', value: 'Y' }, { label: 'N', value: 'N' } ] } }, { title: '是否暂停', dataIndex: 'isPause', width: 80, type: 'select', options: { options: [ { label: 'Y', value: 'Y' }, { label: 'N', value: 'N' } ] } }, { title: '下料定额工时', dataIndex: 'cutQuotaWorkhour', width: 100 }, { title: '装配定额工时', dataIndex: 'assyQuotaWorkhour', width: 100 }, { title: '焊接定额工时', dataIndex: 'weldingQuotaWorkhour', width: 100 }, { title: '下料完成时间', dataIndex: 'realCutFinishDate', type: 'date', width: 100 }, { title: '装配完成时间', dataIndex: 'realAssyFinishDate', type: 'date', width: 100 }, { title: '焊接完成时间', dataIndex: 'realWeldingFinishDate', type: 'date', width: 100 } ], assyColumns: [ { title: '管号', dataIndex: 'pipeNo', width: 90 }, { title: '页号', dataIndex: 'pageNo', width: 90 }, { title: '件号', dataIndex: 'partNo', width: 90 }, { title: '零件描述', dataIndex: 'erpMatDesc', width: 90 }, { title: '物资编码', dataIndex: 'matNo', width: 90 }, { title: '物资描述', dataIndex: 'matDesp', width: 90 }, { title: '零件备注', dataIndex: 'cutRemark', width: 90 }, { title: '涂装代码', dataIndex: 'paintNo', width: 90 }, { title: '总', dataIndex: 'total', width: 90 }, { title: '需求', dataIndex: 'needNum', width: 90 }, { title: '使用余料', dataIndex: 'isUsedShopMat', width: 90 } ], nestingColumns: [ { title: '图纸号', dataIndex: 'drawNo', width: 90 }, { title: '管号', dataIndex: 'pipeNo', width: 90 }, { title: '件号', dataIndex: 'partNo', width: 90 }, { title: '零件描述', dataIndex: 'matDesp', width: 90 }, { title: '套料图号', dataIndex: 'cutBomPrintNo', width: 90 }, { title: '套料件号', dataIndex: 'partNumber', width: 90 }, { title: '材质', dataIndex: 'material', width: 90 }, { title: '板厚', dataIndex: 'partThickness', width: 90 }, { title: 'CJP', dataIndex: 'cjp', width: 90 }, { title: '筐号', dataIndex: 'basketNo', width: 90 } ], cutColumns: [ { title: '分段', dataIndex: 'block', width: 90 }, { title: '图纸号', dataIndex: 'drawNo', width: 120 }, { title: '小票号', dataIndex: 'pipeNo', width: 120 }, { title: '等级', dataIndex: 'pipeClass', width: 80 }, { title: '材料名', dataIndex: 'materialDesp', width: 80 }, { title: '页数', dataIndex: 'pageNo', width: 80 }, { title: '管段', dataIndex: 'info', width: 80 }, { title: '管长MM', dataIndex: 'length', width: 80 }, { title: '弯管', dataIndex: 'groove', width: 80 }, { title: '备注', dataIndex: 'cutRemark', width: 80 }, { title: '炉号', dataIndex: 'heatNo', width: 80 }, { title: '通舱件', dataIndex: 'isThroughCabin', width: 80 }, { title: '修改方式', dataIndex: 'modifyType', width: 80 } ], dataSource: [] }) const columns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '派工单号', dataIndex: 'orderNo', width: 120, condition: true }, { title: '基地', dataIndex: 'orgNo', type: 'buildCase', width: 80, condition: true }, { title: '总长度', dataIndex: 'totalLength', width: 70 }, { title: '总重量', dataIndex: 'totalWeight', width: 70 }, { title: '总寸口数', dataIndex: 'totalInch', width: 80 }, { title: '物量统计', dataIndex: 'pipeCount', width: 80 }, { title: '下料工位号', dataIndex: 'cutWorkSpaceNo', width: 80 }, { title: '下料开始日期', dataIndex: 'cutStartDate', type: 'date', width: 100 }, { title: '下料结束日期', dataIndex: 'cutEndDate', type: 'date', width: 100 }, { title: '下料状态', dataIndex: 'cutStatus', width: 80, type: 'select', options: { options: [ { value: 'Y', label: 'Y' }, { value: 'N', label: 'N' } ] } }, { title: '装配工位号', dataIndex: 'assyWorkSpaceNo', width: 80 }, { title: '装配工位类型', dataIndex: 'assyWorkSpaceType', width: 100 }, { title: '装配开始日期', dataIndex: 'assyStartDate', type: 'date', width: 100 }, { title: '装配结束日期', dataIndex: 'assyEndDate', type: 'date', width: 100 }, { title: '装配状态', dataIndex: 'assyStatus', width: 80, type: 'select', options: { options: [ { value: 'Y', label: 'Y' }, { value: 'N', label: 'N' } ] } }, { title: '焊接工位号', dataIndex: 'weldingWorkSpaceNo', width: 80 }, { title: '焊接工位类型', dataIndex: 'weldingWorkSpaceType', width: 100 }, { title: '焊接开始日期', dataIndex: 'weldingStartDate', type: 'date', width: 100 }, { title: '焊接结束日期', dataIndex: 'weldingEndDate', type: 'date', width: 100 }, { title: '焊接状态', dataIndex: 'weldingStatus', width: 80, type: 'select', options: { options: [ { value: 'Y', label: 'Y' }, { value: 'N', label: 'N' } ] } }, { title: '派工单状态', dataIndex: 'status', width: 100, type: 'select', formatter: (data) => data.cellValue == -1 ? '作废' : data.cellValue == 0 ? '新建' : data.cellValue == 1 ? '作业中' : data.cellValue == 2 ? '已完成' : '', options: { options: [ { value: -1, label: '作废' }, { value: 0, label: '新建' }, { value: 1, label: '作业中' }, { value: 2, label: '已完成' } ] } }, { title: '下料领料单号', dataIndex: 'cutMatListNo', width: 120 }, { title: '装配领料单号', dataIndex: 'assyMatListNo', width: 120 }, { title: '创建人', dataIndex: 'createUserNo', type: 'employeeDescription', options: { fieldNames: { label: 'createUserName', value: 'createUserNo' } }, width: 110 }, { title: '创建时间', dataIndex: 'createDataDate', formatter: ({ row }) => { return row.createDate ? dayjs(row.createDate).format('YYYY-MM-DD') : '-' }, width: 80, invisible: false, type: 'date' } ] }) const weldColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50, type: 'project', options: { options: [], fieldNames: { label: 'projId', value: 'projId' } } }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '焊缝号', dataIndex: 'weldNo', width: 170 }, { title: '描述', dataIndex: 'notFeedbackMsg', width: 80 } ] }) const cutColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50, type: 'project' }, { title: '小票号', dataIndex: 'pipeNo', condition: true, width: 150 }, { title: '版本号', condition: true, dataIndex: 'pipeVersion', width: 60 }, { title: '描述', dataIndex: 'notFeedbackMsg', width: 80 } ] }) const assyColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '零件号', dataIndex: 'partNo', width: 100 }, { title: '物资编码', dataIndex: 'matNo', width: 100 }, { title: '零件规格', dataIndex: 'partSize', width: 100 }, { title: '炉号', dataIndex: 'heatNo', width: 120 }, { title: '批号', dataIndex: 'batchNo', width: 120 } ] }) const weldingColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '焊缝号', dataIndex: 'weldNo', width: 170 }, { title: 'WPS NO', dataIndex: 'wpsNo', width: 80, visible: isVisibleComputed }, { title: '焊接方法', dataIndex: 'weldProcess', width: 100, visible: isVisibleComputed }, { title: '焊材规格', dataIndex: 'weldingMatSpec', width: 150, visible: isVisibleComputed }, { title: '批号', children: [ { title: '打底', dataIndex: 'rootBatchNo', width: 60 }, { title: '盖面', dataIndex: 'fillBatchNo', width: 60 } ], width: 120, visible: isVisibleComputed }, { title: '证书', children: [ { title: '打底', dataIndex: 'rootWeldCert', width: 60 }, { title: '盖面', dataIndex: 'fillWeldCert', width: 60 } ], width: 120, visible: isVisibleComputed } ] }) const exceptionTypeList = ref([]) const heatNoList = ref([]) const batchNoList = ref([]) const exceptionModal = ref(false) const heatModal = ref(false) const heatData = ref({}) const partInfo = ref({}) const addWeldData = ref([]) const currentWeldData = ref({}) const addWpsData = ref([]) const wpsColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: 'WPS NO', dataIndex: 'wpsNo', width: 80 }, { title: '焊接方法', dataIndex: 'process', width: 80 }, { title: '焊材规格', dataIndex: 'grade', width: 80 }, { title: '焊接类型', dataIndex: 'type', width: 80 } ] }) const rootBatchNoList = ref([]) const fillBatchNoList = ref([]) const rootBatchNoOldList = ref([]) const fillBatchNoOldList = ref([]) const weldHeatData = ref({}) const onDateConfirm = (val) => { let resDate = dayjs(val).format('YYYY-MM-DD') feedbackParam.value.workDate = resDate showDatePicker.value = false } const loadData = (type) => { loading.value = true serve.getOrderList(searchState.value).then(async (res) => { if (type == 'scroll') { data.value.push(...res.content) } else { data.value = res.content } dataCount.value = res.totalElements || 0 isLast.value = res.last loading.value = false }) } const handleScroll = (e) => { const element = e.target if (element.scrollTop + element.clientHeight >= element.scrollHeight) { if (!isLast.value) { searchState.value.page++ loadData('scroll') } } } const openSearchDialog = () => { searchOpen.value = true } const handleProject = () => { projectType.value = true projectpanelRef.value.open = true projectpanelRef.value.init() } const handleBack = () => { projectType.value = false projectpanelRef.value.open = false } const handleClose = () => { projectType.value = false projectpanelRef.value.open = false } const handleDetailClose = () => { showDetailModal.value = false } const handleFeedbackClose = () => { showFeedbackModal.value = false } const handleCutFeedbackAddClose = () => { showCutFeedbackAddModal.value = false } const handleWpsClose = () => { showWpsModal.value = false } const handleWeldHeatClose = () => { weldHeatData.value = {} showWeldHeatModal.value = false } const handleExceptionModalClose = () => { exceptionModal.value = false } const handleHeatClose = () => { heatModal.value = false } const handleResize = () => { if (window.innerWidth < 1000) { popupWidth.value = '60%' } else { popupWidth.value = '30%' } } const getProj = (val) => { searchState.value.projectNo = val.projId searchState.value.projNo = val.projNo handleClose() } const onSearch = () => { searchState.value.page = 0 loadData() searchOpen.value = false } const onReset = () => { searchState.value.page = 0 searchState.value.projectNo = undefined searchState.value.projNo = undefined searchState.value.inspClass = undefined searchState.value.orderNo = undefined } const handleBeforeUnload = () => { if (!homePage.isOnline) { Modal.confirm({ title: '浏览器当前处于离线状态,是否继续?', icon: createVNode(ExclamationCircleOutlined), content: createVNode( 'div', { style: 'color:red;' }, '一旦刷新,将无法继续使用' ), onOk() { console.log('OK') }, onCancel() { console.log('Cancel') } }) } } watch( () => homePage.isOnline, async (newVal) => { if (!newVal) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } else { onReset() loadData() } } ) onMounted(() => { getBuildBase() if (homePage.isOnline) { loadData() } serve.getDislist({ code: 'CP_EXCEPTION_TYPE' }).then((res) => { exceptionTypeList.value = res.map((item) => ({ text: item.name, value: item.name })) }) handleResize() window.addEventListener('resize', handleResize) window.addEventListener('beforeunload', handleBeforeUnload) }) onUnmounted(() => { window.removeEventListener('resize', handleResize) window.removeEventListener('beforeunload', handleBeforeUnload) }) onActivated(async () => { if (!homePage.isOnline) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } }) const getBuildBase = () => { getBuildBases().then((res) => { buildBaseList.value = res.map((item) => ({ value: item.orgNo, text: item.name })) }) } const feedback = (record, type) => { console.log('feedbackType', type) feedbackType.value = type feedbackParam.value = {} orgNo.value = record.orgNo orderNo.value = record.orderNo projectNo.value = record.projectNo if (type == '下料') { cutData.value = [] } else if (type == '装配') { partData.value = [] weldData.value = [] } else if (type == '焊接') { weldData.value = [] } console.log('record', record) console.log('orderNo.value', orderNo.value) showFeedbackModal.value = true } const showData = (record, showTypeStr) => { detailType.value = showTypeStr orderNo.value = record.orderNo console.log('detailType.value', detailType.value) if (showTypeStr == 'show') { serve .getOrderDetail({ orderNo: record.orderNo, projectNo: record.projectNo }) .then((res) => { console.log(res) detailTable.dataSource = res showDetailModal.value = true }) } else if (showTypeStr == '下料') { serve.getPreCutWorkOrderPrintList({ orderNo: record.orderNo }).then((res) => { if (!res.error) { detailData.value = res[0] detailTable.dataSource = res[0].matList console.log('res', res[0]) console.log('res.matList', res[0].matList) showDetailModal.value = true } }) } else if (showTypeStr == '装配') { serve.getPreAssyWorkOrderPrintList({ orderNo: record.orderNo }).then((res) => { if (!res.error) { detailData.value = res detailTable.dataSource = res.matList console.log('res', res) console.log('res.matList', res.matList) showDetailModal.value = true } }) } else if (showTypeStr == 'nesting') { serve.getPreNestingPartPrintList({ orderNo: record.orderNo }).then((res) => { if (!res.error) { detailTable.dataSource = res console.log('res', res) showDetailModal.value = true } }) } } const handleSave = () => { if (showType.value == 'qcOrder') { console.log('applyDate', applyDate.value) let saveApplyData = { id: saveData.value.id, applyDate: dayjs(applyDate.value) } if (!saveApplyData.applyDate) { showNotify({ type: 'success', message: '请选择日期' }) return } serve.applyOrder(saveApplyData).then(() => { showNotify({ type: 'success', message: '操作成功' }) }) } else { let param = cloneDeep(saveData.value) if (showType.value == 'result') { param.editType = 1 param.id = saveData.value.id } else { param.getEditType = 0 if ('edit' == showType.value) { param.id = saveData.value.id } } if (param.mainUserNo && param.mainUserNo.value) { param.mainUserName = param.mainUserNo.label param.mainUserNo = param.mainUserNo.value } else { param.mainUserNo = '' } param.pipeList = detailTable.dataSource param.weldList = weldTable.dataSource serve.saveOrderList(param).then(() => { showNotify({ type: 'success', message: '操作成功' }) // if(type.value != 'result'){ showDetailModal.value = false // } }) } } const addFeedbackDetail = () => { if (feedbackType.value == '下料') { serve.findCutNotFeedbackPipe({ orderNo: orderNo.value }).then((res) => { addCutData.value = res }) } else if (feedbackType.value == '装配') { serve.findAssyNotFeedbackPipe({ orderNo: orderNo.value }).then((res) => { addCutData.value = res }) } else if (feedbackType.value == '焊接') { serve.findWeldingNotFeedbackPipe({ orderNo: orderNo.value }).then((res) => { addWeldData.value = res }) } showCutFeedbackAddModal.value = true } const addData = (record) => { console.log('record', record) let dataSource = [] if (feedbackType.value == '下料') { dataSource = cutData.value } else if (feedbackType.value == '装配') { dataSource = partData.value } else if (feedbackType.value == '焊接') { dataSource = weldData.value } let isExist = true if (feedbackType.value == '焊接') { isExist = dataSource.some( (dataItem) => dataItem.projectNo === record.projectNo && dataItem.pipeNo === record.pipeNo && dataItem.pipeVersion === record.pipeVersion && dataItem.weldNo === record.weldNo ) } else { isExist = dataSource.some( (dataItem) => dataItem.projectNo === record.projectNo && dataItem.pipeNo === record.pipeNo && dataItem.pipeVersion === record.pipeVersion ) } if (isExist) { showNotify({ type: 'danger', message: '此条数据已添加到反馈清单！' }) return } else { if (feedbackType.value == '下料') { cutData.value.push(record) showNotify({ type: 'success', message: '添加成功！' }) } else if (feedbackType.value == '装配') { console.log('装配') console.log('record.partData.value', partData.value) console.log('record.preFeedbackPartList', record.preFeedbackPartList) if (record.preFeedbackPartList.length > 0) { partData.value.push(...record.preFeedbackPartList) } if (record.preFeedbackWeldList.length > 0) { weldData.value.push(...record.preFeedbackWeldList) } showNotify({ type: 'success', message: '添加成功！' }) } else if (feedbackType.value == '焊接') { weldData.value.push(record) showNotify({ type: 'success', message: '添加成功！' }) } } } const delCutData = (record) => { cutData.value = cutData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion ) }) } const delAssyData = (record) => { showConfirmDialog({ title: '请确认是否要进行删除', message: '该操作一旦执行无法撤回，并将删除该小票的所有零件？', confirmButtonText: '确认', cancelButtonText: '取消' }).then(() => { partData.value = partData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion ) }) }) } const delWeldData = (record) => { weldData.value = weldData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion && x.weldNo === record.weldNo ) }) } const handleExceptionType = () => { showPicker.value = true } const handleHeatNo = () => { showHeatNoPicker.value = true } const handleRoot = () => { showRootPicker.value = true } const handleFill = () => { showFillPicker.value = true } const handleBatchNo = () => { showBatchNoPicker.value = true } const onExceptionTypeConfirm = ({ selectedOptions }) => { showPicker.value = false exceptionParam.value.exceptionType = selectedOptions[0].value console.log('exceptionParam', exceptionParam.value) } const commitException = () => { console.log('exceptionParam', exceptionParam.value) const submitData = [ { projectNo: projectNo.value, bomNo: pipeNo.value, bomVersion: pipeVersion.value, orgNo: orgNo.value, exceptionType: exceptionParam.value.exceptionType, exceptionMsg: exceptionParam.value.exceptionMsg } ] serve.postExceptionManage(submitData).then(() => { showNotify({ type: 'success', message: '上报成功！' }) exceptionModal.value = false }) } const saveException = (record) => { console.log('record', record) exceptionParam.value = {} projectNo.value = record.projectNo pipeNo.value = record.pipeNo pipeVersion.value = record.pipeVersion exceptionModal.value = true } const commitFeedbackDetail = () => { if (submitting.value) return submitting.value = true const submitData = { orderNo: orderNo.value, process: feedbackType.value, workDate: feedbackParam.value.workDate, remark: feedbackParam.value.remark, helperNo: feedbackParam.value.helperNo ? feedbackParam.value.helperNo : '', pipeList: cutData.value, partList: partData.value, weldList: weldData.value } let apiPromise if (feedbackType.value == '下料') { if (cutData.value.length == 0) { showNotify({ type: 'danger', message: '请选择下料数据！' }) submitting.value = false return } apiPromise = serve.cutFeedback(submitData) } else if (feedbackType.value == '装配') { if (partData.value.length == 0) { showNotify({ type: 'danger', message: '请选择零件数据！' }) submitting.value = false return } const pipeMap = new Map() cutData.value.forEach((pipeItem) => { const key = `${pipeItem.projectNo}-${pipeItem.pipeNo}-${pipeItem.pipeVersion}` pipeMap.set(key, { ...pipeItem, weldList: [] }) }) weldData.value.forEach((weldItem) => { const key = `${weldItem.projectNo}-${weldItem.pipeNo}-${weldItem.pipeVersion}` if (pipeMap.has(key)) { pipeMap.get(key).weldList.push(weldItem) } }) submitData.pipeList = Array.from(pipeMap.values()) delete submitData.weldList apiPromise = serve.assyFeedback(submitData) } else if (feedbackType.value == '焊接') { if (weldData.value.length == 0) { showNotify({ type: 'danger', message: '请选择焊接数据！' }) submitting.value = false return } apiPromise = serve.weldingFeedback(submitData) } apiPromise .then(() => { showNotify({ type: 'success', message: '反馈成功！' }) showFeedbackModal.value = false }) .finally(() => { submitting.value = false }) } const saveHeat = (record) => { console.log('saveHeat', record) heatData.value = {} partInfo.value = record heatNoList.value = [] serve.findHeatDropList({ heatNo: '', matNo: record.matNo }).then((res) => { heatNoList.value = res.map((item) => ({ value: item, text: item })) }) heatModal.value = true } const onHeatNoConfirm = ({ selectedOptions }) => { showHeatNoPicker.value = false heatData.value.heatNo = selectedOptions[0].value batchNoList.value = [] serve .findBatchDropList({ batchNo: '', matNo: partInfo.value.matNo, heatNo: heatData.value.heatNo }) .then((res) => { batchNoList.value = res.map((item) => ({ value: item, text: item })) }) console.log('heatData.value', heatData.value) } const onBatchNoConfirm = ({ selectedOptions }) => { showBatchNoPicker.value = false heatData.value.batchNo = selectedOptions[0].value console.log('heatData.value', heatData.value) } const commitHeat = () => { partData.value.forEach((x) => { if (x.id === partInfo.value.id) { x.heatNo = heatData.value.heatNo x.batchNo = heatData.value.batchNo } }) showNotify({ type: 'success', message: '操作成功' }) heatModal.value = false } const inputHelperNo = () => { console.log('feedbackParam.helperNo', feedbackParam.value.helperNo) feedbackParam.value.helperName = '获取失败' if (feedbackParam.value.helperNo.length >= 7) { serve.getUserByCode({ code: feedbackParam.value.helperNo }).then((res) => { console.log('res', res) if (res && res.name) { feedbackParam.value.helperName = res.name } }) } } const saveWps = (record) => { currentWeldData.value = record serve.getWldPiPeiWpsList({ weldId: record.id }).then((res) => { addWpsData.value = res showWpsModal.value = true }) } const addWps = (record) => { weldData.value.forEach((x) => { if (x.id === currentWeldData.value.id) { x.wpsNo = record.wpsNo x.weldProcess = record.process x.weldingMatSpec = record.grade x.rootGrade = record.rootGrade x.fillGrade = record.fillGrade } }) showNotify({ type: 'success', message: '操作成功' }) showWpsModal.value = false } const saveWeldHeat = (record) => { if (!record.wpsNo) { showNotify({ type: 'success', message: '请先选择wpsNo' }) return } currentWeldData.value = record serve.getQcWeldMatSnDropList({ grade: record.rootGrade }).then((res) => { rootBatchNoOldList.value = res rootBatchNoList.value = res.map((item) => ({ text: item.batchNo, value: item.batchNo })) serve.getQcWeldMatSnDropList({ grade: record.fillGrade }).then((fillRes) => { fillBatchNoOldList.value = fillRes fillBatchNoList.value = fillRes.map((item) => ({ text: item.batchNo, value: item.batchNo })) showWeldHeatModal.value = true }) }) } const onRootConfirm = ({ selectedOptions }) => { showRootPicker.value = false weldHeatData.value.rootBatchNo = selectedOptions[0].value const foundItem = rootBatchNoOldList.value.find( (item) => item.batchNo == weldHeatData.value.rootBatchNo ) if (foundItem) { weldHeatData.value.rootWeldCert = foundItem.certNo } } const onFillConfirm = ({ selectedOptions }) => { showFillPicker.value = false weldHeatData.value.fillBatchNo = selectedOptions[0].value const foundItem = fillBatchNoOldList.value.find( (item) => item.batchNo == weldHeatData.value.fillBatchNo ) if (foundItem) { weldHeatData.value.fillWeldCert = foundItem.certNo } } const commitWeldHeat = () => { weldData.value.forEach((x) => { if (x.id === currentWeldData.value.id) { x.rootBatchNo = weldHeatData.value.rootBatchNo x.fillBatchNo = weldHeatData.value.fillBatchNo x.rootWeldCert = weldHeatData.value.rootWeldCert x.fillWeldCert = weldHeatData.value.fillWeldCert } }) showNotify({ type: 'success', message: '操作成功' }) showWeldHeatModal.value = false } </script> <style lang="scss" scoped> :deep .urgentFlag-active { background: #ffb656; } :deep .abnormalFlag-active { background: #fb7171; } :deep .anticon-search { line-height: 0 !important; } @import '@/styles/common.scss'; .search-content { width: 100%; overflow: hidden; // height: 100%; .search-top { width: 100%; height: 50px; margin-top: 20px; display: flex; justify-content: center; align-content: center; .search-project-back { font-size: 14px; display: flex; align-content: center; position: absolute; left: 10px; color: #004688; } .search-titles { height: 100%; display: flex; justify-content: center; align-content: center; color: #004688; span { font-size: 15px; margin-left: 5px; } } } .search-state { width: 100%; height: calc(100% - 45px - 10px); position: absolute; bottom: 0; overflow: hidden; overflow-y: scroll; } } .action-buttons { display: flex; align-items: center; justify-content: space-around; } </style> 绑定isVisibleComputed的字段没生效，a-table是不是没有这个属性
最新发布
11-13
```js const isVisibleComputed = computed(() => { return feedbackType.value == '焊接' }) ``` 然后在列配置中使用： ```js visible: isVisibleComputed ``` 但 `a-table` 的列 `visible` 属性期望的是一个 **...
<template> <!-- 编辑流量计 --> <div class="edit-flow-meter"> <myModal :params="{ title: '编辑流量计' }" :visible="visible" @submit="submit" @cancel="handleCancel"> <template v-slot:header> <span></span> </template> <template v-slot:body> <div class="edit-flow-meter-box"> <a-form-model ref="baseInfoForm" :model="formData" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <h4 style="margin: 16px 0; text-align: left">{{ $t('基础信息') }}</h4> <a-row> <a-col :span="12"> <a-form-model-item :label="$t('探测器名称')" prop="detectorName"> <a-input v-model="formData.detectorName" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('探测器编号')" prop="uniqueCode"> <a-input v-model="formData.uniqueCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('流量计编号')" prop="meterCode"> <a-input v-model="formData.meterCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('接入时间')" prop="rate"> <a-date-picker v-model="formData.rate" show-time format="YYYY-MM-DD HH:mm:ss" :placeholder="$t('请选择接入时间')" /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('归属')" prop="belonging"> <a-input v-model="formData.belonging" disabled /> </a-form-model-item> </a-col> </a-row> <div class="table-title-box"> <h4 style="margin: 0">{{ $t('子流量计列表') }}</h4> <div style="display: flex"> <a-button class="mgr10" type="primary" @click="onAdd">{{ $t('新增') }}</a-button> <a-popconfirm :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" :visible="popconfirmVisible" @visibleChange="popconfirmVisibleChange" @confirm="onDeleteAll" > <a-button>{{ $t('删除') }}</a-button> </a-popconfirm> </div> </div> <div class="table-main-box"> <a-table :dataSource="tableData" :rowSelection="rowSelection" rowKey="id" :columns="columns" :pagination="false" size="small" > <template slot="meterCode" slot-scope="text, record, index"> <template v-if="text">{{ text }}</template> <template v-else> <a-select v-model="tableData[index].meterCode" :filterOption="filterOption" @change="value => changeMemterCode(value, index)" :placeholder="$t('请选择')" showSearch :allowClear="false" > <a-select-option v-for="item in disabledOptions" :key="item.id" :value="item.meterCode" :title="item.meterCode" :disabled="item.disabled" > {{ item.meterCode }} </a-select-option> </a-select> </template> </template> <template slot="action" slot-scope="text, record"> <a-popconfirm placement="topRight" :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" @confirm="onDelete(record)" > <i class="ico-delete myIcon" :title="$t('删除')"></i> </a-popconfirm> </template> </a-table> </div> </a-form-model> </div> </template> </myModal> </div> </template> <script> import factory from '../factory'; import myModal from '@/components/scfComponents/modalComponents/modal.vue'; export default { components: { myModal }, data() { return { visible: false, formData: {}, rules: { taskName: [ { required: true, message: '请输入任务名称', trigger: 'blur' }, // { pattern: reg.name, message: this.$t('仅允许输入汉字、字母、数字与_-.@字符') }, ], }, columns: [ { title: this.$t('序号'), key: 'index', dataIndex: 'index', customRender: (text, record, index) => `${index + 1}`, }, { title: this.$t('子电表编号'), dataIndex: 'meterCode', key: 'meterCode', scopedSlots: { customRender: 'meterCode' }, }, { title: this.$t('操作'), key: 'action', width: 150, dataIndex: 'action', scopedSlots: { customRender: 'action' }, }, ], popconfirmVisible: false, meterOptions: [], selectedRowKeys: [], selectedRows: [], tableData: [], }; }, computed: { disabledOptions() { const usedCodes = this.tableData.map(item => item.meterCode).filter(code => code); return this.meterOptions.map(option => ({ ...option, disabled: usedCodes.includes(option.meterCode), })); }, rowSelection() { return { selectedRowKeys: this.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.selectedRowKeys = selectedRowKeys; this.selectedRows = selectedRows; }, }; }, }, methods: { // 获取子电表列表 getChildMeterList(detectorCode) { let params = { detectorCodes: [detectorCode], page: 1, pageSize: 99999, }; factory.getChildMeterList(params).then(res => { if (res.success) { this.meterOptions = res.data.pageData || []; } }); }, showModal(record) { this.getChildMeterList(record.detectorCode); this.visible = true; }, filterOption(input, option) { return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0; }, changeMemterCode(value, index) { const selectedOption = this.meterOptions.find(el => el.meterCode === value); if (selectedOption) { this.$set(this.tableData, index, { ...this.tableData[index], detectorCode: selectedOption.detectorCode, meterCode: value, }); } // let checkOption = this.meterOptions.find(el => el.meterCode === value); // this.tableData.forEach(item => { // if (item.meterCode === checkOption.meterCode) { // item.detectorCode = checkOption.detectorCode; // } // }); // let selectedItems = this.tableData.map(item => item.meterCode).filter(el => el !== null && el !== ''); // this.meterOptions.forEach(el => { // if (selectedItems.includes(el.meterCode)) { // el.disabled = true; // } // }); }, // 批量删除提示框 popconfirmVisibleChange(visible) { if (visible && !this.selectedRowKeys.length) { this.popconfirmVisible = false; this.$message.destroy(); this.$message.warning(this.$t('请选择要删除的信息')); } else { this.popconfirmVisible = visible; } }, // 新增 onAdd() { let isNull = this.tableData.filter(e => e.meterCode === null || e.meterCode === ''); if (isNull.length) { this.$message.destroy(); return this.$message.warning(this.$t('请选择子电表编号')); } this.tableData.push({ id: Math.random().toString().split('.')[1], meterCode: null }); }, onDeleteAll() { if (this.selectedRows.length === 0) { this.$message.destroy(); return this.$message.warning(this.$t('请选择子电表')); } this.tableData = this.tableData.filter(item => !this.selectedRowKeys.includes(item.id)); // 清空选中状态 this.selectedRowKeys = []; this.selectedRows = []; // let codes = this.selectedRows.map(item => item.id); // this.tableData = this.tableData.filter(el => !codes.includes(el.id)); // let selectedItems = this.selectedRows.map(item => item.meterCode).filter(el => el !== null && el !== ''); // this.meterOptions.forEach(el => { // if (selectedItems.includes(el.meterCode)) { // el.disabled = false; // } // }); }, // 单个删除 onDelete(record) { this.tableData = this.tableData.filter(item => item.id !== record.id); // this.tableData = this.tableData.filter(item => item.id !== record.id); // if (record.meterCode) { // this.meterOptions.forEach(el => { // if (record.meterCode.indexOf(el.meterCode) !== -1) { // el.disabled = false; // } // }); // } }, submit() { this.visible = false; }, handleCancel() { this.visible = false; }, }, }; </script> <style lang="less" scoped> .edit-flow-meter-box { width: 100%; height: 100%; .table-title-box { width: 100%; display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; } } </style> 代码评审
07-08
:dataSource="tableData" :rowSelection="rowSelection" rowKey="id" :columns="columns" :pagination="false" size="small" > <template slot="meterCode" slot-scope="text, record, index"> ...
沙雕前端,const { data : res } = await login(this.ruleForm)
Leacode的博客
05-25 2644
1 res?.data?.result 可选链 2 ??默认值和||默认值的区别
a44185的博客
05-14 710
文章目录Optional Chaining?.？？ Optional Chaining Optional Chaining 可选链。目前还在草案stage阶段 Optional Chaining 可选链 【?.和??】不支持ie浏览器 ?. ?.可以防止null和undefined报错 var obj = { // son1: null, // son1: undefined, // son1: {pwd:'张三'}, // son2: {pwd:'
JS向数组添加元素、插入数据
qq_38361229的博客
03-19 924
JS向数组添加元素
DataSource接口和一些扩展
北堂飘霜_记录
09-11 737
上次说到了Manager，这次来说一下获得链接的第二种方式。**javax.sql.DaraSource**以及JNDI API和连接的关闭。
Vue表格自定义单元格模板,新增行
qq_34004756的博客
05-08 922
实现如下效果 <template> <a-modal title="修改接口定义信息" :width="1200" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel" > <a-spin :spinning="formLoading"> <a-for
动态表头数据处理
2301_77519113的博客
07-09 141
el-button type="primary" @click="getShop(scope.row.id)">详情</el-button>// this.$router的 query 传值 可读性强。-- align 数据居中处理 表头数据处理-->-- this.$router传值 -->-- 作用域插槽 列处理 图片处理-->// 表头数据，如下方格式 数据覆盖掉即可。-- :data 自带属性 绑定的数据源 -->title: "姓名",//商品详情组件 跳转传值。
js 数组方法使用
凡尘
05-31 155
判断字符串中是否包含，用indexOf，不包含则返回-1。数据返回的是数组，如何展示成文字。
2021-8-2 前端开发中每天遇到的问题（3）---vue中的数组解构赋值，改变堆地址
negel_xu的博客
08-02 534
const newArr = [...this.dataSource] newArr.forEach((item, index) => { // console.log(item) const obj = {} let producedAmount = '' let consumedAmount = '' let timestr = '' let flag = 0 o...
获取表数据--前后端接口对接-vue
weixin_43312391的博客
02-15 3148
后端swagger： template中： <div class="approvalForm"> <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F7F7F7', textAlign: 'center' }" :cell-style="{ textAlign: 'ce
【独家】（AntDesign）Vue更改了datasourse里的数据，但数组没有被渲染，（更改数组后页面不刷新）
wwppp987的博客
07-07 5459
很多新手面对Vue中设置this.DataSource[index] = {key:'1',V1:'值'};无效 首先，需要声明一点，vue当中的数组是不允许直接设定的，设定完的数组不会被渲染监听，只能重新渲染。所以，后台console数组是变化的。 具体涉及到js基本原理和vue原理： Vue设定了专门的函数进行渲染： splice(起始下标,删掉几个,替换内容) 使用格式： database.splice(1,1,"{key:1,V1:'值'}","{key:2,V1:'值2'}"); 从第2
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值