784 行
42 KiB
JavaScript
可执行文件
784 行
42 KiB
JavaScript
可执行文件
/**
|
||
* @description 串号组件（用于串号的录入、选择及查看）
|
||
*/
|
||
Vue.component('component-serial', {
|
||
template: `
|
||
<el-dialog :title="title" id="component-serial" :close-on-click-modal="false" append-to-body :visible.sync="dialogVisible" @closed="dialogClose">
|
||
<div class="insert" v-if="dialogType == 'insert'">
|
||
<el-form :inline="true" :model="form" :rules="rules" ref="insert" @submit.native.prevent>
|
||
<el-form-item prop="mainSerial">
|
||
<el-input size="small" placeholder="请输入主串码 (必填)" v-model="form.mainSerial">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="assistSerial1">
|
||
<el-input size="small" placeholder="请输入辅助串码1 (非必填)" v-model="form.assistSerial1">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="assistSerial2">
|
||
<el-input size="small" placeholder="请输入辅助串码2 (非必填)" v-model="form.assistSerial2">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" @click="insert">录入</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="search" v-if="dialogType != 'insert' && getDataType">
|
||
<el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
|
||
<el-form-item prop="searchSerial">
|
||
<el-input size="small" placeholder="请输入串码" clearable @clear="search" v-model="form.searchSerial">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" @click="search">{{this.getDataType == 'storeAllowSalesSerial' ? '添加' : '搜索'}}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-table :data="tableData" border style="width: 100%" row-key="id" ref="table" @selection-change="selectionChange">
|
||
<el-table-column
|
||
type="selection"
|
||
width="60"
|
||
:reserve-selection="true"
|
||
v-if="dialogType == 'multiple'"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column label="序号" width="60">
|
||
<template slot-scope="scope">
|
||
<span>{{scope.$index + 1}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="主串码" align="left">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.edit != true">{{scope.row.mainSerial}}</span>
|
||
<el-input v-else size="small" @input="mainSerialValidate(scope.$index)" :class="{error: !scope.row.mainSerialValidate}" placeholder="请输入主串码 (必填)" v-model="scope.row.editMainSerial"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="left" label="辅助串码1">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.edit != true">{{scope.row.assistSerial1}}</span>
|
||
<el-input v-else size="small" @input="serialValidate(scope.$index, 1)" :class="{error: !scope.row.assistSerial1Validate}" placeholder="请输入辅助串码1 (非必填)" v-model="scope.row.editAssistSerial1"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="left" label="辅助串码2">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.edit != true">{{scope.row.assistSerial2}}</span>
|
||
<el-input v-else size="small" @input="serialValidate(scope.$index, 2)" :class="{error: !scope.row.assistSerial2Validate}" placeholder="请输入辅助串码2 (非必填)" v-model="scope.row.editAssistSerial2"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" v-if="['single', 'insert'].includes(dialogType)" width="90">
|
||
<template slot-scope="scope">
|
||
<template v-if="dialogType == 'insert'">
|
||
<template v-if="scope.row.editStatus != 1">
|
||
<el-button type="text" size="mini" v-if="scope.row.edit != true" @click="$set(tableData[scope.$index], 'edit', true)">编辑</el-button>
|
||
<template v-else>
|
||
<el-button type="text" size="mini" @click="finish(scope.$index)">完成</el-button>
|
||
<el-button type="text" size="mini" @click="cancel(scope.$index)">取消</el-button>
|
||
</template>
|
||
<el-button type="text" size="mini" v-if="scope.row.edit != true && scope.row.editStatus != 2" @click="deleteData(scope.$index)">删除</el-button>
|
||
</template>
|
||
<span v-else class="not-allowed">不可操作</span>
|
||
</template>
|
||
<el-button type="text" size="mini" v-if="dialogType == 'single'" @click="select(scope.row)">选择</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:page-size="limit"
|
||
:current-page="page"
|
||
:total="total"
|
||
:hide-on-single-page="true"
|
||
@current-change="currentChange">
|
||
</el-pagination>
|
||
<span slot="footer" v-if="['insert', 'multiple'].includes(dialogType)">
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="dialogConfirm">确定</el-button>
|
||
</span>
|
||
<span slot="footer" v-else>
|
||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
`,
|
||
data() {
|
||
return {
|
||
tableData: [], //当前页的列数据
|
||
totalData: [], //总数据
|
||
selectionData: [], //选择的数据集合（仅为多选类型时有效，dialogType为multiple）
|
||
serialList: [], //临时保存的串号列表（主要用于串号的重复性验证）
|
||
editIds: [], //已编辑的串号列主键（用于串号编辑时，记录被修改过的串号，需要告知服务端）
|
||
page: 1, //页数
|
||
limit: 10, //每页行数
|
||
total: 0, //数据总数
|
||
dialogVisible: false, //窗口显示控制
|
||
form: { //窗口顶部的数据表单数据集
|
||
mainSerial: '', //主串号
|
||
assistSerial1: '', //辅助串号1
|
||
assistSerial2: '', //辅助串号2
|
||
searchSerial: '' //搜索的串号
|
||
},
|
||
rules: { //上述表单对应的数据验证规则
|
||
mainSerial: [
|
||
{required: true, message: '请输入主串码', trigger: 'change'},
|
||
{max: 20, message: '最多只能20个字符', trigger: 'change'},
|
||
{pattern: '[^?!\\s|\u4e00-\u9fa5]+$', message: '只能输入字母、数字及符号', trigger: 'change'}
|
||
],
|
||
assistSerial1: [
|
||
{max: 20, message: '最多只能20个字符', trigger: 'change'},
|
||
{pattern: '[^?!\\s|\u4e00-\u9fa5]+$', message: '只能输入字母、数字及符号', trigger: 'change'}
|
||
],
|
||
assistSerial2: [
|
||
{max: 20, message: '最多只能20个字符', trigger: 'change'},
|
||
{pattern: '[^?!\\s|\u4e00-\u9fa5]+$', message: '只能输入字母、数字及符号', trigger: 'change'}
|
||
],
|
||
searchSerial: [
|
||
{max: 20, message: '最多只能20个字符', trigger: 'change'},
|
||
{pattern: '[^?!\\s|\u4e00-\u9fa5]+$', message: '只能输入字母、数字及符号', trigger: 'change'}
|
||
]
|
||
},
|
||
requestUrls: { //当前组件需要用到的服务端接口地址集合
|
||
//商户角色
|
||
serialVerify: 'PurchaseOrder/serialVerify', //采购串号验证
|
||
inventorySerialVerify: 'Inventory/serialVerify', //盘点串号验证
|
||
otherWarehousing: 'WarehousingRecord/serialVerify', //其他入库串号验证
|
||
warehousing: 'WarehousingRecord/serialList', //采购部分入库串号列表
|
||
stockOut: 'StockOutOrder/serialList', //出库单串号列表
|
||
stockOutDetail: 'StockOutOrder/detailSerialList', //出库单详情串号列表
|
||
purchaseRetreat: 'RetreatOrder/serialList', //采购退货可退串号列表
|
||
lossReport: 'LossReport/serialList', //新增报损串号列表
|
||
inventoryStatisticsReport: 'Statistics/serialList', //库存统计报表
|
||
purchaseGoods: 'PurchaseGoods/purchaseSerial', //采购商品串号列表
|
||
purchaseStorageGoods: 'PurchaseGoods/warehouseSerial', //采购编辑与明细入库商品串号列表
|
||
purchaseReturnGoods: 'PurchaseGoods/retreatSerial', //采购编辑与明细退库商品串号列表
|
||
purchaseReturnDetails: 'RetreatOrder/detailSerialList', //采购退货详情串号列表
|
||
replenishment: 'SaleMGoods/purchaseSerialList', //补货可入库的串号列表
|
||
supplyInventory: 'SaleMGoods/serialList', //库存状况中供应库存的串号列表
|
||
inventoryWarehousingRecord: 'SaleMGoods/warehouseSerialList', //库存入库记录串号列表
|
||
inventoryDeliveryRecord: 'SaleMGoods/stockSerialList', //库存出库记录串号列表
|
||
inventoryDetails: 'Inventory/detailsSerial', //盘点详情串号列表
|
||
lossDetails: 'LossReport/detailSerialList', //报损详情串号列表
|
||
returnDetails: 'WarehousingRecord/retreatDetailsSerial', //退货详情串号列表
|
||
storageDetails: 'WarehousingRecord/detailSerialList', //入库详情串号列表
|
||
outboundDetails: 'StockOutOrder/detailSerialList', //出库详情串号列表
|
||
outboundRejectionDetails: 'StockOutOrder/refuseSerial', //出库拒收详情串号列表
|
||
outboundStorageDetails: 'StockOutOrder/warehousingSerial', //出库入库详情串号列表
|
||
|
||
|
||
//门店角色
|
||
storeSerialVerify: 'SPurchaseOrder/serialVerify', //采购串号验证
|
||
storeInventorySerialVerify: 'SInventory/serialVerify', //盘点串号验证
|
||
storeOtherWarehousing: 'SWarehousingRecord/serialVerify', //其他入库串号验证
|
||
storeWarehousing: 'SWarehousingRecord/serialList', //采购部分入库串号列表
|
||
storeStockOut: 'SStockOutOrder/serialList', //出库单串号列表
|
||
storeStockOutDetail: 'SStockOutOrder/detailSerialList', //出库单详情串号列表
|
||
storePurchaseRetreat: 'SRetreatOrder/serialList', //采购退货可退串号列表
|
||
storeLossReport: 'SLossReport/serialList', //新增报损串号列表
|
||
storeAllowSalesSerial: 'Express/searchSerial', //发货/换货/详情修改串号时可用串号列表
|
||
storeGoodsSalesDetails: 'Sale/sellSerialList', //商品销售明细数量串号列表
|
||
storeGoodsSalesSummary: 'Sale/summaryList', //商品销售汇总串号列表
|
||
storePurchaseGoods: 'SPurchaseGoods/purchaseSerial', //采购商品串号列表
|
||
storePurchaseStorageGoods: 'SPurchaseGoods/warehouseSerial', //采购编辑与明细入库商品串号列表
|
||
storePurchaseReturnGoods: 'SPurchaseGoods/retreatSerial', //采购编辑与明细退库商品串号列表
|
||
storePurchaseReturnDetails: 'SRetreatOrder/detailSerialList', //采购退货详情串号列表
|
||
storeReplenishment: 'SSaleMGoods/purchaseSerialList', //补货可入库的串号列表
|
||
storeSupplyInventory: 'SSaleMGoods/serialList', //库存状况中供应库存的串号列表
|
||
storeInventoryWarehousingRecord: 'SSaleMGoods/warehouseSerialList', //库存入库记录串号列表
|
||
storeInventoryDeliveryRecord: 'SSaleMGoods/stockSerialList', //库存出库记录串号列表
|
||
storeInventoryStatisticsReport: 'ReportTable/serialList', //库存报表
|
||
storeInventoryDetails: 'SInventory/detailsSerial', //盘点详情串号列表
|
||
storeLossDetails: 'SLossReport/detailSerialList', //报损详情串号列表
|
||
storeStorageDetails: 'SWarehousingRecord/detailSerialList', //入库详情串号列表
|
||
storeTransferDetails: 'SWarehousingRecord/allocationSerial', //入库调拨详情串号列表
|
||
storeRejectionDetails: 'StockOutOrder/refuseSerial', //入库拒收详情串号列表
|
||
storeOutboundDetails: 'SStockOutOrder/detailSerialList', //出库详情串号列表
|
||
storeOutboundRejectionDetails: 'SStockOutOrder/refuseSerial', //出库拒收详情串号列表
|
||
storeOutboundStorageDetails: 'SStockOutOrder/warehousingSerial', //出库入库详情串号列表
|
||
|
||
//共用
|
||
transferDetailsOutStock: 'StockOutOrder/detailSerialList', //调拨详情出库
|
||
transferDetailsWarehousing: 'SWarehousingRecord/detailSerialList', //调拨详情入库
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description 录入按钮事件
|
||
*/
|
||
insert() {
|
||
const refsInsert = this.$refs['insert']
|
||
refsInsert.validate((valid) => {
|
||
if (valid) {
|
||
/**
|
||
* 验证重复性
|
||
* 1、主串号不存在于串号列表中
|
||
* 2、辅助串号1为空 或者 不存在于串号列表中
|
||
* 3、辅助串号2为空 或者 不存在于串号列表中
|
||
* 4、主串号不等于辅助串号1
|
||
* 5、主串号不等于辅助串号2
|
||
* 6、辅助串号为空 或者 辅助串号1不等于辅助串号2
|
||
*/
|
||
if (!this.serialList.includes(this.form.mainSerial) &&
|
||
(!this.form.assistSerial1 || !this.serialList.includes(this.form.assistSerial1)) &&
|
||
(!this.form.assistSerial2 || !this.serialList.includes(this.form.assistSerial2)) &&
|
||
this.form.mainSerial != this.form.assistSerial1 &&
|
||
this.form.mainSerial != this.form.assistSerial2 &&
|
||
(!this.form.assistSerial1 || this.form.assistSerial1 != this.form.assistSerial2)
|
||
) {
|
||
this.totalData.push({
|
||
mainSerial: this.form.mainSerial,
|
||
assistSerial1: this.form.assistSerial1,
|
||
assistSerial2: this.form.assistSerial2
|
||
})
|
||
this.serialList.push(this.form.mainSerial, this.form.assistSerial1, this.form.assistSerial2)
|
||
refsInsert.resetFields() //情况录入表单的内容及验证结果
|
||
this.$message.success('录入成功！');
|
||
} else {
|
||
this.$message.error('请勿录入重复的串号！');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* @description 搜索按钮事件
|
||
*/
|
||
search() {
|
||
//发货页面的搜索在清空时不触发
|
||
if (this.getDataType == 'storeAllowSalesSerial' && !this.form.searchSerial) {
|
||
return
|
||
}
|
||
this.page = 1
|
||
this._getTableData()
|
||
},
|
||
/**
|
||
* @description 编辑串号时的完成事件
|
||
*/
|
||
finish(index) {
|
||
const data = this.tableData[index]
|
||
const currentTotalData = this.totalData[data.totalIndex]
|
||
if (!data.mainSerialValidate) {
|
||
this.$message.error('当前修改的主串码格式有误，请修改！')
|
||
return
|
||
}
|
||
if (!data.assistSerial1Validate) {
|
||
this.$message.error('当前修改的辅助串码1格式有误，请修改！')
|
||
return
|
||
}
|
||
if (!data.assistSerial2Validate) {
|
||
this.$message.error('当前修改的辅助串码2格式有误，请修改！')
|
||
return
|
||
}
|
||
|
||
const currentData = [data.mainSerial, data.assistSerial1, data.assistSerial2]
|
||
|
||
/**
|
||
* 验证重复性
|
||
* 1、主串号未修改 或者 存在于当前串号列中 或者 不存在于总串号列表中
|
||
* 2、辅助串号1为空 或者 未修改 或者 存在于当前串号列中 或者 不存在于串号列表中
|
||
* 3、辅助串号2为空 或者 未修改 或者 存在于当前串号列中 或者 不存在于串号列表中
|
||
* 4、主串号不等于辅助串号1
|
||
* 5、主串号不等于辅助串号2
|
||
* 6、辅助串号为空 或者 辅助串号1不等于辅助串号2
|
||
*/
|
||
if ((data.editMainSerial == currentTotalData.mainSerial || currentData.includes(data.editMainSerial) || !this.serialList.includes(data.editMainSerial)) &&
|
||
(!data.editAssistSerial1 || data.editAssistSerial1 == currentTotalData.assistSerial1 || currentData.includes(data.editAssistSerial1) || !this.serialList.includes(data.editAssistSerial1)) &&
|
||
(!data.editAssistSerial2 || data.editAssistSerial2 == currentTotalData.assistSerial2 || currentData.includes(data.editAssistSerial2) || !this.serialList.includes(data.editAssistSerial2)) &&
|
||
data.editMainSerial != data.editAssistSerial1 &&
|
||
data.editMainSerial != data.editAssistSerial2 &&
|
||
(!data.editAssistSerial1 || data.editAssistSerial1 != data.editAssistSerial2)
|
||
) {
|
||
const editData = {
|
||
mainSerial: data.editMainSerial,
|
||
assistSerial1: data.editAssistSerial1,
|
||
assistSerial2: data.editAssistSerial2
|
||
}
|
||
//覆盖当前列数据中的指定数据列以及关闭编辑状态
|
||
this.$set(this.tableData, index, Object.assign({}, data, editData, {edit: false}))
|
||
//覆盖总列数据中的指定数据列
|
||
this.$set(this.totalData, data.totalIndex, Object.assign({}, currentTotalData, editData))
|
||
this._replaceSerialList(data.totalIndex, [data.editMainSerial, data.editAssistSerial1, data.editAssistSerial2])
|
||
//如果是已存在于数据库的串号数据，需记录其编辑行为。
|
||
if (data.id) {
|
||
this.editIds.push(data.id)
|
||
}
|
||
this.$message.success('当前串号编辑完成！')
|
||
} else {
|
||
this.$message.error('串号存在重复，请修改后再尝试完成！')
|
||
}
|
||
},
|
||
/**
|
||
* @description 编辑串号时替换指定下标的串号数据
|
||
* @param {Number} index 当前编辑的串号下标
|
||
* @param {Array} lists 需要替换的新数据
|
||
* @private
|
||
*/
|
||
_replaceSerialList(index, lists) {
|
||
//串号的起始下标（由于所有串号都是以3的倍数录入，所以此处乘以3即为起始下标）
|
||
const startIndex = index * 3
|
||
lists.forEach((list, _index) => {
|
||
this.serialList.splice(startIndex + _index, 1, list)
|
||
})
|
||
},
|
||
/**
|
||
* @description 编辑串号时的取消事件
|
||
*/
|
||
cancel(index) {
|
||
const data = this.tableData[index]
|
||
this.$set(this.tableData, index, Object.assign({}, data, {
|
||
editMainSerial: data.mainSerial,
|
||
editAssistSerial1: data.assistSerial1,
|
||
editAssistSerial2: data.assistSerial2,
|
||
edit: false
|
||
}))
|
||
},
|
||
/**
|
||
* @description 单选事件（仅在窗口类型为单选时有效，dialogType为single）
|
||
* @param {Object} data 当前选择的串号列
|
||
*/
|
||
select(data) {
|
||
this.$emit('serial-change', data)
|
||
},
|
||
/**
|
||
* @description 删除指定下标的串号数据列（仅在窗口类型为录入时有效，dialogType为insert）
|
||
* @param {Number} index 要删除的数据列下标
|
||
*/
|
||
deleteData(index) {
|
||
const totalIndex = this.tableData[index].totalIndex
|
||
this.totalData.splice(totalIndex, 1) //从总数据中删除
|
||
this.serialList.splice(totalIndex * 3, 3) //从串号列中删除（每组串号一定是3的倍数，所以删除3个。）
|
||
},
|
||
/**
|
||
* @description 用于编辑时主串号的验证
|
||
* @param {Number} index 串号数据列下标
|
||
*/
|
||
mainSerialValidate(index) {
|
||
//主串号需要先验证是否为空
|
||
if (!this.tableData[index].editMainSerial) {
|
||
this.tableData[index].mainSerialValidate = false
|
||
return false
|
||
}
|
||
this.serialValidate(index)
|
||
},
|
||
/**
|
||
*
|
||
* @param {Number} index 串号数据列下标
|
||
* @param {Number} type 需要验证的串号类型（0：主串号，1：辅助串号1，2：辅助串号2）
|
||
*/
|
||
serialValidate(index, type = 0) {
|
||
//按照类型获取当前要验证的串号数据
|
||
const serial = type == 0 ? this.tableData[index].editMainSerial : type == 1 ? this.tableData[index].editAssistSerial1 : this.tableData[index].editAssistSerial2
|
||
//验证串号（不为空的情况下，不能大于20位，不能输入除字母及数字以外的字符）
|
||
//由于主串号已经验证不为空后才调用此验证，故无需考虑主串号为空的情况，具体请查看mainSerialValidate方法。
|
||
const res = !serial || serial.length <= 20 && /^[a-zA-Z0-9]+$/.test(serial)
|
||
|
||
//按照类型将验证结果赋值
|
||
if (type == 0) {
|
||
this.$set(this.tableData[index], 'mainSerialValidate', res)
|
||
} else if (type == 1) {
|
||
this.$set(this.tableData[index], 'assistSerial1Validate', res)
|
||
} else if (type == 2) {
|
||
this.$set(this.tableData[index], 'assistSerial2Validate', res)
|
||
}
|
||
},
|
||
/**
|
||
* @description 窗口关闭
|
||
*/
|
||
dialogClose() {
|
||
//将部分数据初始化，防止窗口复用时出错。
|
||
Object.assign(this._data, {
|
||
tableData: [],
|
||
totalData: [],
|
||
selectionData: [],
|
||
serialList: [],
|
||
editIds: [],
|
||
page: 1,
|
||
total: 0,
|
||
form: {
|
||
mainSerial: '',
|
||
assistSerial1: '',
|
||
assistSerial2: '',
|
||
searchSerial: ''
|
||
}
|
||
})
|
||
//当窗口为复选框时，清空已选择的数据。
|
||
if (this.dialogType == 'multiple') {
|
||
this.$refs.table.clearSelection();
|
||
}
|
||
},
|
||
/**
|
||
* @description 列表多选变化事件
|
||
* @param {Object} data 当前选择的串号数据列
|
||
* @returns
|
||
*/
|
||
selectionChange(data) {
|
||
if (this.maxSelected > 0 && this.maxSelected < data.length) {
|
||
this.$message.error(`只能选择${this.maxSelected}个串号！`)
|
||
this.$refs.table.toggleRowSelection(data[data.length - 1], false)
|
||
return false
|
||
}
|
||
this.selectionData = data
|
||
},
|
||
/**
|
||
* @description 分页组件切换事件
|
||
* @param {Number} currentPage 当前分页数
|
||
*/
|
||
currentChange(currentPage) {
|
||
this.page = currentPage
|
||
if (this.getDataType == 'storeAllowSalesSerial') {
|
||
this.tableData = this.totalData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
||
} else {
|
||
this._getTableData()
|
||
}
|
||
},
|
||
/**
|
||
* @description 获取列表数据
|
||
* @private
|
||
*/
|
||
_getTableData() {
|
||
//窗口类型为录入或者存在父组件传递串号数据的情况下，直接导入进列表中。
|
||
if (this.dialogType == 'insert' || (this.data && this.data.length) > 0) {
|
||
let tableData = [].concat(this.totalData).reverse().slice((this.page - 1) * this.limit, this.page * this.limit)
|
||
tableData.forEach((data, index) => {
|
||
this.$set(tableData, index, Object.assign({}, data, {
|
||
totalIndex: this.total - 1 - (this.page - 1) * this.limit - index,
|
||
edit: false,
|
||
editMainSerial: data.mainSerial,
|
||
editAssistSerial1: data.assistSerial1,
|
||
editAssistSerial2: data.assistSerial2,
|
||
mainSerialValidate: true,
|
||
assistSerial1Validate: true,
|
||
assistSerial2Validate: true
|
||
}))
|
||
})
|
||
this.tableData = tableData
|
||
} else if (this.getDataType) { //存在获取数据的接口类型
|
||
const data = {}
|
||
|
||
if ([
|
||
'warehousing',
|
||
'storeWarehousing',
|
||
'stockOutDetail',
|
||
'storeStockOutDetail',
|
||
'purchaseRetreat',
|
||
'storePurchaseRetreat',
|
||
'storeGoodsSalesDetails',
|
||
'purchaseGoods',
|
||
'storePurchaseGoods',
|
||
'purchaseReturnDetails',
|
||
'storePurchaseReturnDetails',
|
||
'replenishment',
|
||
'storeReplenishment',
|
||
'inventoryWarehousingRecord',
|
||
'inventoryDeliveryRecord',
|
||
'storeInventoryWarehousingRecord',
|
||
'storeInventoryDeliveryRecord',
|
||
'inventoryDetails',
|
||
'storeInventoryDetails',
|
||
'lossDetails',
|
||
'storeLossDetails',
|
||
'returnDetails',
|
||
'storageDetails',
|
||
'storeStorageDetails',
|
||
'storeRejectionDetails',
|
||
'outboundDetails',
|
||
'outboundRejectionDetails',
|
||
'outboundStorageDetails',
|
||
'storeOutboundDetails',
|
||
'storeOutboundRejectionDetails'
|
||
].includes(this.getDataType)) {
|
||
//只需要主键ID
|
||
data.id = this.parentData.id
|
||
} else if ([
|
||
'stockOut',
|
||
'storeStockOut',
|
||
'lossReport',
|
||
'storeLossReport',
|
||
'storeAllowSalesSerial',
|
||
'supplyInventory',
|
||
'storeSupplyInventory',
|
||
'storeInventoryStatisticsReport',
|
||
'storeGoodsSalesSummary'
|
||
].includes(this.getDataType)) {
|
||
//需要商品ID以及规格ID
|
||
data.goods_id = this.parentData.goods_id
|
||
data.sku_id = this.parentData.sku_id || ''
|
||
} else if ([
|
||
'inventoryStatisticsReport'
|
||
].includes(this.getDataType)) {
|
||
//需要商品ID、规格ID、门店ID
|
||
data.store_id = this.parentData.store_id
|
||
data.goods_id = this.parentData.goods_id
|
||
data.sku_id = this.parentData.sku_id || ''
|
||
} else if ([
|
||
'purchaseStorageGoods',
|
||
'purchaseReturnGoods',
|
||
'storePurchaseStorageGoods',
|
||
'storePurchaseReturnGoods'
|
||
].includes(this.getDataType)) {
|
||
//需要订单编号、商品主键、规格主键
|
||
data.order_number = this.parentData.order_number
|
||
data.goods_id = this.parentData.goods_id
|
||
data.sku_id = this.parentData.sku_id || ''
|
||
} else if ([
|
||
'storeTransferDetails',
|
||
'storeOutboundStorageDetails'
|
||
].includes(this.getDataType)) {
|
||
//需要ID和父页面的公共类型
|
||
data.id = this.parentData.id
|
||
data.type = this.parentData.parentType
|
||
} else if ('transferDetailsOutStock' == this.getDataType) {
|
||
data.id = this.parentData.stock_id
|
||
} else if ('transferDetailsWarehousing' == this.getDataType) {
|
||
data.id = this.parentData.warehouse_id
|
||
} else {
|
||
console.error('串号组件数据类型未注册！')
|
||
}
|
||
|
||
//发起数据获取请求
|
||
this.sendRequest(this.requestUrls[this.getDataType], {
|
||
data: Object.assign({
|
||
serial_number: this.form.searchSerial,
|
||
page: this.page,
|
||
limit: this.limit
|
||
}, data),
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
//如果数据处理方式为累加
|
||
let tableData = []
|
||
//storeAllowSalesSerial：快递发货页面
|
||
if (this.getDataType == 'storeAllowSalesSerial') {
|
||
const responseData = response.data
|
||
|
||
this.form.searchSerial = ''
|
||
|
||
//验证是否已存在于列表中，防止反复搜索同一组串号
|
||
if (!this.serialList.includes(responseData.main_serial_number)) {
|
||
const insertData = {
|
||
id: responseData.warehouse_goods_id,
|
||
mainSerial: responseData.main_serial_number,
|
||
assistSerial1: responseData.auxiliary_serial_number_one,
|
||
assistSerial2: responseData.auxiliary_serial_number_two
|
||
}
|
||
|
||
//累加放在前，默认放在后
|
||
this.dataProcessMethod == 'increase' ? this.totalData.unshift(insertData) : totalData.push(insertData)
|
||
|
||
//验证已选是否小于最大数
|
||
if (this.selectionData.length < this.maxSelected) {
|
||
this.$refs.table.toggleRowSelection(insertData)
|
||
}
|
||
|
||
this.serialList.push(responseData.main_serial_number)
|
||
} else {
|
||
this.$message.error('当前串号已存在，请使用其他串号！')
|
||
}
|
||
tableData = this.totalData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
||
this.total = this.totalData.length
|
||
} else {
|
||
const dataList = response.data.list
|
||
dataList.forEach(data => {
|
||
tableData.push({
|
||
id: data.id,
|
||
mainSerial: data.main_serial_number,
|
||
assistSerial1: data.auxiliary_serial_number_one,
|
||
assistSerial2: data.auxiliary_serial_number_two
|
||
})
|
||
})
|
||
this.total = parseInt(response.data.count)
|
||
}
|
||
this.tableData = tableData
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* @description 弹窗确定事件
|
||
*/
|
||
dialogConfirm() {
|
||
if (this.dialogType == 'insert') {
|
||
const serialList = [] //需要验证的串号列表
|
||
this.totalData.forEach(data => {
|
||
//如果不存在id 或者 存在ID的情况下必须是已经被编辑的。
|
||
if (!data.id || this.editIds.includes(data.id)) {
|
||
const list = {
|
||
main_serial_number: data.mainSerial,
|
||
auxiliary_serial_number_one: data.assistSerial1,
|
||
auxiliary_serial_number_two: data.assistSerial2
|
||
}
|
||
if (data.id) {
|
||
list.id = data.id
|
||
}
|
||
serialList.push(list)
|
||
}
|
||
})
|
||
|
||
if (serialList.length > 0) {
|
||
let verifyUrl = ''
|
||
//根据验证类型赋值验证接口地址
|
||
switch (this.insertValidate) {
|
||
case 'purchase':
|
||
verifyUrl = this.requestUrls.serialVerify
|
||
break;
|
||
case 'storePurchase':
|
||
verifyUrl = this.requestUrls.storeSerialVerify
|
||
break;
|
||
case 'inventory':
|
||
verifyUrl = this.requestUrls.inventorySerialVerify
|
||
break;
|
||
case 'storeInventory':
|
||
verifyUrl = this.requestUrls.storeInventorySerialVerify
|
||
break;
|
||
case 'warehousing':
|
||
verifyUrl = this.requestUrls.otherWarehousing
|
||
break;
|
||
case 'storeWarehousing':
|
||
verifyUrl = this.requestUrls.storeOtherWarehousing
|
||
break;
|
||
}
|
||
|
||
//执行验证
|
||
this.sendRequest(verifyUrl, {
|
||
data: {
|
||
goods_id: this.parentData.goods_id,
|
||
sku_id: this.parentData.sku_id,
|
||
serial_list: JSON.stringify(serialList)
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
this.$emit('serial-change', this.totalData, this.parentIndex)
|
||
this.dialogVisible = false
|
||
} else {
|
||
this.$message.error(response.message);
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
this.$emit('serial-change', this.totalData, this.parentIndex)
|
||
this.dialogVisible = false
|
||
}
|
||
} else if (this.dialogType == 'multiple') { //如果为窗口类型为多选的情况下
|
||
//验证已选择的是否已经超过了最大选择上限
|
||
if (this.maxSelected > 0 && this.maxSelected != this.selectionData.length) {
|
||
this.$message.error(`只能选择${this.maxSelected}个串号！`)
|
||
return false
|
||
}
|
||
|
||
this.$emit('serial-change', this.selectionData, this.parentIndex)
|
||
this.dialogVisible = false
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
//监听父组件的组件显示控制变量
|
||
visible() {
|
||
this.dialogVisible = this.visible
|
||
//只在显示的时候做操作
|
||
if (this.visible) {
|
||
this.totalData = this.data || [] //如果父组件指定当前组件的数据，则使用。
|
||
if (this.dialogType == 'insert') { //如果为录入或者编辑类型
|
||
this.totalData.forEach(data => {
|
||
this.serialList.push(data.mainSerial, data.assistSerial1, data.assistSerial2)
|
||
})
|
||
} else if (this.dialogType == 'multiple') { //如果为多选类型
|
||
//不为发货页面的数据类型，因为发货页面的串号数据并不是主动获取的，也不是默认主动勾选的，而是通过搜索获得的。
|
||
if (this.getDataType != 'storeAllowSalesSerial') {
|
||
//此处需要使用nextTick，因为需要等待DOM渲染，否则自动勾选会失效，找不到对应需要勾选的数据列。
|
||
this.$nextTick(() => {
|
||
//如果父组件传递过来默认需要勾选的数据，则执行默认勾选行为。
|
||
const selectedSerialList = this.parentData.serial_list
|
||
if (selectedSerialList) {
|
||
selectedSerialList.forEach(data => {
|
||
this.$refs.table.toggleRowSelection({
|
||
id: data.id,
|
||
mainSerial: data.main_serial_number,
|
||
assistSerial1: data.auxiliary_serial_number_one,
|
||
assistSerial2: data.auxiliary_serial_number_two
|
||
}, true)
|
||
})
|
||
}
|
||
this._getTableData()
|
||
})
|
||
}
|
||
} else if (this.dialogType == 'details') {
|
||
this._getTableData()
|
||
}
|
||
}
|
||
},
|
||
dialogVisible() {
|
||
this.$emit('update:visible', this.dialogVisible)
|
||
},
|
||
'totalData.length'() {
|
||
if (this.dialogType == 'insert') {
|
||
this.total = this.totalData.length
|
||
this._getTableData()
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
/**
|
||
* @description 根据父组件指定的窗口类型来显示窗口的标题
|
||
* @returns {String} 窗口的标题
|
||
*/
|
||
title() {
|
||
let titleString = ''
|
||
switch (this.dialogType) {
|
||
case 'insert':
|
||
titleString = '录入串码'
|
||
break
|
||
case 'single':
|
||
titleString = '修改串码'
|
||
break
|
||
case 'details':
|
||
titleString = '串码详情'
|
||
break
|
||
default:
|
||
titleString = '选择串号'
|
||
}
|
||
return titleString
|
||
}
|
||
},
|
||
created() {
|
||
this.dialogVisible = this.visible
|
||
//由于所有的接口前面都是统一加Retail，故在这里循环接口地址数组，逐一加上前缀地址。
|
||
Object.keys(this.requestUrls).forEach(key => {
|
||
this.requestUrls[key] = 'Retail/' + this.requestUrls[key]
|
||
})
|
||
},
|
||
props: {
|
||
parentIndex: Number, //父组件对应数据的下标
|
||
parentData: Object, //父组件对应数据集
|
||
dialogType: {
|
||
type: String,
|
||
default: 'details' //insert（录入或编辑）, single（单选）, multiple（多选），details（详情）
|
||
},
|
||
visible: Boolean, //父组件的显示控制
|
||
data: { //父组件传递过来的串号列表，用于部分页面（如录入串号页面或者在列表接口中已返回串号数据的情况）。
|
||
type: Array,
|
||
default: null
|
||
},
|
||
getDataType: String, //获取串号数据的接口类型（用于区分不同页面的串号数据类型，传递的值一定为requestUrls变量的其中一个）。
|
||
insertValidate: { //当窗口类型为录入时，需要在点击确定按钮前对串号数据进行服务端验证，父组件来决定验证的接口类型。
|
||
type: String,
|
||
default: 'purchase'
|
||
/**
|
||
* purchase（商户采购）
|
||
* storePurchase（门店采购）
|
||
* inventory（商户盘点）
|
||
* storeInventory（门店盘点）
|
||
* warehousing（其他入库）
|
||
* storeWarehousing（门店其他入库）
|
||
*
|
||
*/
|
||
},
|
||
maxSelected: { //最大允许选择的数据（仅在窗口为多选类型时有效，dialogType为multiple）
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
dataProcessMethod: { //数据处理的方式，每次获取数据后，会按照指定的方式对数据进行处理，主要用于搜索类型的选择页面使用。
|
||
type: String,
|
||
default: 'cover' //cover（覆盖），increase（累加）
|
||
}
|
||
}
|
||
}) |