陆运信息系统-口岸班列-总结(2)

一、子组件与父组件直接的衔接

通过定义一个函数orderForm，通过Object.assign将defaultForm中的字段定义给orderForm

this.orderForm = Object.assign(this.defaultForm, {});

二、在vux-table中点击添加按钮，自动新增一行数据

demo代码：

定义CONTRACT_SCHEMA字段，定义包含在表格内的数据字段

该方式是在前端定义号字段：此方法不是很推荐

在vux-table表格字段中加入:edit-render="{}"，然后定义一个插槽template，编辑为当前行

#edit="{ row }"

<vxe-columnfield="specialTrainLine":title="$t('order.list.specialTrainLine')":edit-render="{}"
><template #edit="{ row }"><el-input v-model="row.specialTrainLine" :maxlength="100"></el-input></template>
</vxe-column>

编辑按钮方法

  // 编辑editItem(row) {this.$refs.contractInfoForm.setActiveRow(row).then(() => {this.curRow = { ...row };});// this.$message.error('请选择未处理的数据行');},

删除按钮方法

 // 删除removeItem(row) {if (!row.id) {this.$refs.contractInfoForm.clearActived().then(() => {this.$refs.contractInfoForm.reloadData(this.tableData);this.loadItem();});return;}this.$confirm('确定删除这条数据吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {this.loading = true;const url = `/mtls-port/tkImpContractFlow/id/${row.id}`;this.$axios.delete(url).then((res) => {if (res.data.code === 200) {this.$message.success('删除成功');this.loadItem();}});}).finally(() => {this.loading = false;});},

保存按钮方法

// 保存saveItem(row) {this.$refs.contractInfoForm.validate(row).then((errMap) => {if (errMap) return;const tempData = JSON.parse(JSON.stringify(row));tempData.refContractId = this.contractId;this.loading = true;this.$axios.post('/mtls-port/tkImpContractFlow/model', tempData).then((response) => {if (response.data.code === 200) {this.$message.success('保存成功');// eslint-disable-next-line no-param-reassignrow = JSON.parse(JSON.stringify(response.data.data));this.curRow = undefined;this.$refs.contractInfoForm.clearActived().then(() => {this.$refs.contractInfoForm.reloadData(this.tableData);this.loadItem();});}}).finally(() => {this.loading = false;});});},

demo总代码实例

<vxe-table:data="tableData"borderstripealign="center"ref="contractInfoForm":edit-config="{ trigger: 'click', mode: 'row', autoClear: true }":edit-rules="itemRules"@edit-closed="editClosedHandler"v-loading="loading"><vxe-column type="checkbox" width="50"></vxe-column><vxe-columnfield="changeArrivalStationName":title="$t('order.list.changeArrivalStationName')":edit-render="{}"><template #edit="{ row }"><railway-auto-complete:appendToBody="true"v-model="row.changeArrivalStationCode":label.sync="row.changeArrivalStationName"@after-change="handleChangeArrival($event, row)"style="width: 100%"></railway-auto-complete></template></vxe-column><vxe-columnfield="specialTrainLine":title="$t('order.list.specialTrainLine')":edit-render="{}"><template #edit="{ row }"><el-input v-model="row.specialTrainLine" :maxlength="100"></el-input></template></vxe-column><vxe-columnfield="changeConsignee":title="$t('order.list.changeConsignee')":edit-render="{}"><template #edit="{ row }"><cs-auto-complete:appendToBody="true"v-model="row.changeConsigneeCode":label.sync="row.changeConsignee":type="1"style="width: 100%"@after-change="handleChangeConsignee($event, row)"></cs-auto-complete></template></vxe-column><vxe-column field="totalFlowNum" :title="$t('order.list.totalFlowNum')" :edit-render="{}"><template #edit="{ row }"><st-input:placeholder="$t('order.list.totalFlowNum')"v-model="row.totalFlowNum"type="number"@input="(val) => (row.totalFlowNum = val ? val.replace('.', '') : '')":maxlength="100"></st-input></template></vxe-column><vxe-column field="remainFlowNum" :title="$t('order.list.remainFlowNum')"></vxe-column><vxe-column field="remark" :title="$t('order.list.remark')" :edit-render="{}"><template #edit="{ row }"><el-input v-model="row.remark" :maxlength="100"></el-input></template></vxe-column><vxe-column field="creatorName" :title="$t('order.list.creator')"></vxe-column><vxe-column field="createTime" :title="$t('order.list.creationTime')"></vxe-column><vxe-column align="center" :title="$t('shiftBill.itemList.operation')" width="200"><template #default="{ row }"><template v-if="$refs.contractInfoForm.isActiveByRow(row)"><el-tooltip :content="$t('shiftBill.itemForm.save')" placement="top"><el-buttonicon="mtlsfont mtls-baocun_1"circlesize="mini"@click="saveItem(row)"></el-button></el-tooltip><el-tooltip :content="$t('shiftBill.itemForm.delete')" placement="top"><el-buttonicon="el-icon-delete":disabled="row.isReplaced === 'Y'"circlesize="mini"@click="removeItem(row)"></el-button></el-tooltip></template><template v-else><el-tooltip :content="$t('shiftBill.itemForm.edit')" placement="top"><el-buttonicon="el-icon-edit"circlesize="mini"@click="editItem(row)":disabled="disable"></el-button></el-tooltip><el-tooltip :content="$t('shiftBill.itemForm.delete')" placement="top"><el-buttonicon="el-icon-delete":disabled="row.isReplaced === 'Y'"circlesize="mini"v-loading="disable"@click="removeItem(row)"></el-button></el-tooltip></template></template></vxe-column></vxe-table>

陆运信息系统-口岸班列-总结(2)相关推荐

涂料油漆化工进口报关
萬航运营,建立"标准进口物流"卓越理念为使命.公司内部施行SEAHOGER进口业务ERP信息管理,外部市场营销拟全面推行"斯赫尔BTB物流供应链管理平台",充分 ...
中蒙最大陆路口岸2018年运行中欧班列1052列
资料图:中欧班列吴正琪摄中新社二连浩特1月16日电 (记者李爱平)二连海关16日晚间对外披露,作为中蒙最大陆路口岸的二连浩特口岸2018年全年共运行中欧班列1052列. 官方消息指,二连海关日 ...
2018年经满洲里口岸进出境中欧班列突破1800列
图为中国最大陆路口岸满洲里口岸. 张鹏摄图为中国最大陆路口岸满洲里口岸. 张鹏摄中新网满洲里1月15日电 (记者李爱平)据满洲里海关15日统计,2018年全年经满洲里铁路口岸进出境中欧班列达 ...
星淘惠：阿拉山口跨境电商班列为跨境电商保稳提质助力
2022年2月国务院设立了第六批跨境电子商务综合试验区,在27个城市复制前几批跨境电子商务综合试验区的经验.近日,首列跨境电商班列从新试验区--新疆阿拉山口口岸发出.这列班列对我国跨境电商行业发展具有 ...
在物流信息系统中，物联网主要应用于哪些领域
在物流信息系统中,物联网主要应用于哪些领域 https://blog.csdn.net/zhinengxuexi/article/details/86736770 在物流信息系统中,物联网主要应用于以 ...
北上广深等全国一流机场航显信息系统现状-航显系统研究第90篇
北上广深等全国一流机场航显信息系统现状 1. 机场情况北上广深机场目前是国内旅客流量最为繁忙的机场,其机场客货流量.航站楼面积.登机口数量.停机位资源均位居国内机场前列. 2012年全国 ...
跨境边民带货溯源方案-助力口岸海关边民带货，创新发展口岸经济
国内跨境电商的飞速发展,为我国人民生活带来了许多便利.可是在行业的背后,往往隐藏着假货泛滥等多种问题,令人们感到十分担忧.为了能够打消大众质疑,国内企业纷纷加码布局对跨境商品的溯源和检查手段.跨境电商 ...
湛江市电子口岸集成项目灾备
一.项目名称:湛江市国际贸易"单一窗口"电子口岸建设. 二.项目内容及预算价格: 序号产品名称基础规格简述数量单位预算单价(元) 小计(元) 1 数据库服务器详见本需求 ...
数字化口岸电子中间件应用
做了一个"数字化口岸电子中间件"的项目,没有实际开发多少东西,只是为了应付结项.但对中间件有了些许了解,记录下来! 1,什么是中间件客户机/服务器已经流行多年,尽管有专家预测到2 ...

陆运信息系统-口岸班列-总结(2)

一、子组件与父组件直接的衔接

二、在vux-table中点击添加按钮，自动新增一行数据

编辑按钮方法

删除按钮方法

保存按钮方法

demo总代码实例

陆运信息系统-口岸班列-总结(2)相关推荐

最新文章

热门文章