基于vue3 setup 实战案例

最新推荐文章于 2024-07-11 15:28:13 发布

Zhouyuding_yyds

最新推荐文章于 2024-07-11 15:28:13 发布

阅读量1.6k

点赞数 17

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Zhouyuding_yyds/article/details/134670124

版权

<div >

<el-form

ref="formDom"

class="form-edit"

:model="queryParams"

label-position="top"

<el-row :gutter="40" >

<el-col :span="6">

<el-form-item :label="$t('retrieval.outordermgr.outboundOrderCode')" prop="outboundOrderCode">

<el-input v-model="queryParams.outboundOrderCode" type="textarea" :rows="1" :placeholder="$t('common.wrapSplit')" clearable>

</el-input>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('customer.customerCode')" prop="customerCodes">

<el-select

v-model="queryParams.customerCodes"

filterable

clearable

remote

multiple

collapse-tags

reserve-keyword

:remote-method="getCustomer"

<el-option

v-for="opt in customerData"

:key="opt"

:label="opt"

:value="opt"

</el-select>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('retrieval.allocate.goodsCode')" prop="barcodes">

<el-input v-model="queryParams.barcodes" placeholder='skuCode/barcode/ebarcode' clearable>

</el-input>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('partition.partitionCode')" prop="partitionCodes">

<el-select v-model="queryParams.partitionCodes" filterable clearable multiple>

<el-option

v-for="opt in partitionData"

:key="opt.key"

:label="opt.label"

:value="opt.value"

</el-select>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('retrieval.expressdelivery.deliveryMethod')" prop="shipmentMethodIds">

<el-select v-model="queryParams.shipmentMethodIds" filterable clearable multiple>

<el-option :key="-1" :label="$t('common.noChannels')" :value="-1"></el-option>

<el-option

v-for="opt in shipmentMethodData"

:key="opt.key"

:label="opt.label"

:value="opt.value"

</el-select>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('retrieval.outordermgr.platformName')" prop="platformChannelIds">

<el-select v-model="queryParams.platformChannelIds" filterable clearable multiple>

<el-option

v-for="opt in channelList"

:key="opt.key"

:label="opt.label"

:value="opt.value"

</el-select>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('common.creatTime')" prop="createTime">

<el-date-picker

v-model="queryParams.createTime"

format="YYYY-MM-DD"

value-format="YYYY-MM-DD"

type="daterange"

style="width: 100%"

range-separator="-"

:start-placeholder="$t('common.beginDate')"

:end-placeholder="$t('common.endDate')"

></el-date-picker>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('common.timeoutPeriod')" prop="timeoutPeriod">

<el-date-picker

v-model="queryParams.timeoutPeriod"

value-format="YYYY-MM-DD"

type="date"

style="width: 100%"

:placeholder="$t('common.select')"

></el-date-picker>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('material.length')+'(' + SIZE + ')'" prop="length">

<el-select style="width:120px" v-model="queryParams.lengthEquationSymbol">

<el-option

v-for="dict in symbolArr"

:key="dict.key"

:label="dict.label"

:value="dict.value"

</el-select>

<EdaUnitInput

unitType="size"

:disabled="queryParams.lengthEquationSymbol === undfined"

v-model:return-value="queryParams.length"

clearable

maxlength="7">

</EdaUnitInput>

</div>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('material.width')+'(' + SIZE + ')'" prop="width">

<el-select style="width:120px" v-model="queryParams.widthEquationSymbol">

<el-option

v-for="dict in symbolArr"

:key="dict.key"

:label="dict.label"

:value="dict.value"

</el-select>

<EdaUnitInput

unitType="size"

:disabled="queryParams.widthEquationSymbol === undfined"

v-model:return-value="queryParams.width"

clearable

maxlength="7">

</EdaUnitInput>

</div>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('material.height')+'(' + SIZE + ')'" prop="height">

<el-select style="width:120px" v-model="queryParams.heightEquationSymbol">

<el-option

v-for="dict in symbolArr"

:key="dict.key"

:label="dict.label"

:value="dict.value"

</el-select>

<EdaUnitInput

unitType="size"

:disabled="queryParams.heightEquationSymbol === undfined"

v-model:return-value="queryParams.height"

clearable

maxlength="7">

</EdaUnitInput>

</div>

</el-form-item>

</el-col>

<el-col :span="6">

<el-form-item :label="$t('retrieval.offshelf.weight', { WEIGHT: WEIGHT })" prop="weight">

<el-select style="width:120px" v-model="queryParams.weightEquationSymbol">

<el-option

v-for="dict in symbolArr"

:key="dict.key"

:label="dict.label"

:value="dict.value"

</el-select>

<EdaUnitInput

unitType="weight"

:disabled="queryParams.weightEquationSymbol === undfined"

v-model:return-value="queryParams.weight"

clearable

maxlength="7">

</EdaUnitInput>

</div>

</el-form-item>

</el-col>

</template>

<el-col class="search-btns" :span="6">

<el-form-item style="padding-top:22px">

<el-button

type="primary"

size="small"

@click="handleQuery"

style="width: 80px;"

>{{$t('common.search')}}</el-button>

<el-button

@click="resetQuery"

size="small"

style="width: 80px;margin-right:2px !important"

>{{$t('common.reset')}}</el-button>

<div

class="collapse-btn"

@click="onChangeCollapse"

</div>

</el-form-item>

</el-col>

</el-row>

</el-form>

</EdaCard>

<el-button type="text" size="small" @click="HandleRefresh">{{$t("common.refresh")}}</el-button>

<el-button style="margin-right:8px" type="text" size="small">|</el-button>

<el-button type="text" size="small" @click="clearAndRefresh">{{$t("common.refreshClear")}}</el-button>

</div>

<div class="tab-index color-danger" :key="index + tabSortIndexKey"> {{ tabSortIndex(item.itemField) > -1 ? tabSortIndex(item.itemField) + 1 : '' }} </div>

<div class="tab-head">{{ item.itemName }}</div>

<div

:class="item.notAll ? 'plainLight' : 'highLight'"

class="tab-content"

@click="handleAll(item)">{{$t('common.all')}}</div>

<div

class="tab-content"

@click="selectElement(el,item)"

:class="el.status == 1 ? 'highLight' : 'plainLight'"

v-for="(el, index) in item.itemValues"

:key="item+index"

>{{el.itemValueName}}({{ el.orderCount }})</div>

<el-button

type="text"

class="show-more"

@click="clickShowMorePartition(item)"

v-if="item.allItemValues && item.allItemValues.length > 30">

</el-button>

</template>

<div

class="tab-content"

@click="selectElement(el,item)"

:class="el.status == 1 ? 'highLight' : 'plainLight'"

v-for="(el, index) in item.itemValues"

:key="item+index"

>{{el.itemValueName}}({{ el.orderCount }})</div>

</template>

</div>

<el-button

class="btn"

type="primary"

size="small"

:disabled="selectArr.length<1"

@click="handleGenerate"

v-hasPermi="['wms:outbound:offshelf:create']"

>{{$t('retrieval.offshelf.generateOrder')}}</el-button>

<el-button type="primary" size="small" class="btn" @click="handleReassign" v-hasPermi="['wms:outbound:offshelf:create']">

</el-button>

<el-checkbox

class="ml10"

v-model="isMerge"

:true-label="1"

:false-label="0">{{$t('retrieval.offshelf.mergeOrders')}}</el-checkbox>

<span class="ml20 color-success">{{$t('common.list')}}({{total}})</span>

<span class="ml20">{{$t('retrieval.offshelf.checkedOrders')}}: {{orderNum}} </span>

<span class="ml20">{{$t('retrieval.offshelf.skuTypes')}}: {{skuTypeNum}} </span>

<span class="ml20">{{$t('retrieval.offshelf.skuPieces')}}: {{skuNum}} </span>

<span class="ml20">{{$t('retrieval.offshelf.skuVolume', { VOLUME: VOLUME })}}:{{$filter.unit(skuVolume, 'volume')}}</span>

<span class="ml20">{{$t('retrieval.offshelf.skuWeight', { WEIGHT: WEIGHT })}}: {{$filter.unit(skuWeight, 'weight')}}</span>

</div>

<div class="color-warning" style="padding-bottom:10px;">{{$t('oth.optionNoSelected1')}}</div>

<el-table :data="dataList" @selection-change="handleSelectionChange">

<el-table-column type="selection" :selectable="selectable" width="38" align="center" />

<el-table-column label="Barcode" align="left" prop="barcode">

</div>

</template>

</el-table-column>

<el-table-column :label="$t('stockManage.stockList.skuName')" prop="barcodesName">

</div>

</template>

</el-table-column>

<el-table-column :label="$t('customer.customerCode')" align="left" prop="customerCode">

</div>

</template>

</el-table-column>

<el-table-column :label="$t('partition.partition')" prop="partitionCode">

</div>

</template>

</el-table-column>

<el-table-column :label="$t('location.location')" prop="locationCode">

</div>

</template>

</el-table-column>

<el-table-column :label="$t('retrieval.offshelf.orderNum')" prop="orderCount">

<span class="text-success" @click="handleOrder(scope.row)">{{ scope.row.orderCount }}</span>

</template>

</el-table-column>

<el-table-column :label="$t('retrieval.offshelf.offShelfNumber')" prop="offshelfCount">

<el-input

v-model="scope.row.offshelfCount"

maxlength="3"

@input="scope.row.offshelfCount = scope.row.offshelfCount.replace(/^(0+)|[^\d]+/g,'')"

</el-input>

</template>

</el-table-column>

</el-table>

<pagination

v-show="total > 0"

:total="total"

v-model:page="paging.pageNum"

v-model:limit="paging.pageSize"

@pagination="getStatusList"

</EdaCard>

<el-dialog

:title="t('retrieval.offshelf.printOffshelf')"

v-model="printForm.open"

width="450px"

@close="dialogClose">

<el-form class="form-edit" :model="printForm" :rules="rules" ref="printFormRef" label-position="top">

<el-form-item :label="t('warehouse.pickingMethod')" prop="printType">

<el-radio-group v-model="printForm.printType">

<el-radio :label="2">{{ t('retrieval.offshelf.wavePicking') }}</el-radio>

<el-radio :label="1">{{ t('retrieval.offshelf.fruitPicking') }}</el-radio>

</el-radio-group>

</el-form-item>

</el-form>

<el-button class="btn" size="small" @click="dialogClose" :loading="printForm.loading">{{$t('common.cancel')}}</el-button>

<el-button class="btn" size="small" type="primary" @click="submitPrintForm" :loading="printForm.loading">{{$t('common.confirm')}}</el-button>

</span>

</template>

</el-dialog>

<el-dialog :title="t('retrieval.offshelf.orderDetail')" v-model="openStock" append-to-body width="30%">

<el-form class="form-detail" :model="form" >

<el-table :data="form.list" height="480">

<el-table-column :label="$t('printReceipt.outboundOrderNumber')" align="left" prop="orderCode">

</el-table-column>

<el-table-column :label="$t('retrieval.expressdelivery.deliveryMethod')" align="left" prop="shipmentMethodId">

<span v-if="scope.row.shipmentMethodId == item.value">{{ item.label }}</span>

</template>

</el-table-column>

</el-table>

</el-form>

</el-dialog>

</div>

</template>

import { listByChannel,searchOffshelfBySku,createOffShelfOrderBySku,

printOffShelfListBatch,selectPickingMethodConfig } from "@/api/retrieval/offshelf";

import {partitionOptions} from "@/api/baseInfo/warehouseManage/location";

import { reAllocateInventoryLocation } from "@/api/retrieval/offshelf";

import { printOutboundOrderListBatch } from "@/api/retrieval/printDocs";

import { selectCheckBox, searchListCustomer } from "@/api/common/commonServe"

import { validateCancelMain } from '../publicUtils/index.js'

import { useI18n } from "vue-i18n"

import { SIZE, WEIGHT, WEIGHT_G, VOLUME, VOLUME_CM } from '@/utils/unit'

import EdaUnitInput from '@/components/EdaUnitInput/EdaUnitInput'

const { t } = useI18n();

const router = useRouter();

const route = useRoute();

const { proxy } = getCurrentInstance();

const { wms_toutbound_lorry_fastMail_status } = proxy.useDict("wms_toutbound_lorry_fastMail_status"); //所有状态

//符号

const symbolArr = ref([

{ key: 0, label: ">", value: "gt" },

{ key: 1, label: "<=", value: "lte" },

]);

const isMerge = ref(0);//是否合并下架单，1表示合并；0表示不合并

const dataList = ref([]);

const loading = ref(false);

const showSearch = ref(true);

const collapse = ref(false);

const total = ref(0);

const tabList = ref([]); //节点状态数据

const partitionData = ref([]);//所有库区

const customerData = ref([]);//所有客户

const channelList = ref([]);//销售平台

const shipmentMethodData = ref([]);//提货方式

const orderNum = ref(0);//订单总数

const skuTypeNum = ref(0);//sku种类数

const skuNum = ref(0);//sku总件数

const skuVolume = ref(0);//sku总体积

const skuWeight = ref(0);//sku总重量

const outboundOrderCodeArr = ref([]);

const shipmentMethodIdArr = ref([]);//提货方式数组

const selectArr = ref([]);//勾选的数据组合的参数

const printArr = ref([]); //打印地址数组集合

const openStock = ref(false);//出库单弹窗

const showMore = ref(false)

const warehouseSettings = ref(null);// 仓库配置

const languageStatus = computed(() => {

return localStorage.getItem('language')

})

const data = reactive({

tabSortIndexKey: 1,

rules: {

remark: [{ required: true, message: '请输入原因', trigger: "blur" }],

queryParams: {

paging:{

pageNum: 1,

pageSize: 50,

printForm: {

open: false,

printType: 2,

offshelfCodeArr:[],

loading: false,

form:{

customLoading: false,

});

const { queryParams, rules, paging, printForm ,form, tabSortIndexKey } = toRefs(data);

/**是否显示下架拣货方式，没有配置拣货方式或者拣货方式（目前两种）都有的情况下显示拣货方式选择 */

const pickingMethodShow = computed(() => !warehouseSettings.value)

/**标签tab选择后排序，只能按倒序取消当前项 */

const tabSortIndex = computed(() => (itemField) => {

return getSortIndex(itemField)

})

//根据仓库获取库区

function getPartition(){

partitionOptions().then(response => {

partitionData.value = response.data

partitionData.value.map(item => {

item.value = item.partitionCode;

item.label = item.partitionCode;

item.key = item.partitionCode

})

}

//点击某个元素

function selectElement(el,item) {

if (!queryParams.value.selectedItems?.length) {

queryParams.value.selectedItems = []

}

//记录状态传给后端

let obj = {}

obj.currentItemKey = item.itemField

if(item.itemField == 'partitionCode') {

obj.currentItemOldValue = item.allItemValues

}else {

obj.currentItemOldValue = item.itemValues

}

// 判断是否已存在当前选择的类型

let findIndex = queryParams.value.selectedItems?.findIndex(sub => sub.currentItemKey === item.itemField)

// 存在将数据覆盖至该数组下标所属key下的对象中

if (findIndex > -1) {

queryParams.value.selectedItems[findIndex].currentItemOldValue = obj.currentItemOldValue

} else {

// 不存在直接新增至提交数据的最外层

queryParams.value.selectedItems.push(obj)

}

// 查找排序下标，如果当前取消的不是传值列表最后一项，则提示按倒序取消后再点击这一项

let sortIndex = getSortIndex(item.itemField)

// let selectSortItem = queryParams.value.selectedItems[sortIndex]

if (sortIndex > -1 && (sortIndex !== queryParams.value.selectedItems.length - 1)) {

return proxy.$modal.alert(t('retrieval.offshelf.tips011'))

}

//切换选中状态

el.status = (el.status == 0 || el.status == undefined ) ? 1 : 0

let arr1 = item.itemValues.filter(vl => vl.status == 1 )

if(arr1.length < 1){

item.notAll = false

}

else{

item.notAll = true

}

if(item.itemField == 'shipmentMethodId' && arr1.length == 2) {//提货方式选择多条提示

proxy.$modal.confirm(t('retrieval.offshelf.tips012')).then(()=>{

// 查找status不为1的数据，若其中所有选项都不为1，就干掉它

let noEqualIndex = queryParams.value.selectedItems.findIndex(sub => sub.currentItemOldValue.every(lit => !lit?.status))

if (noEqualIndex > -1) {

queryParams.value.selectedItems.splice(noEqualIndex, 1)

}

getStatusList()

queryParams.value.selectedItems.map(item=>{

item.totalCount = 0

if(item.currentItemOldValue?.length>0){

item.currentItemOldValue.map(el => {

el.pageCount = el.pageCount || el.orderCount

if(el.status){

item.totalCount += Number(el.pageCount)

}

})

}

})

}).catch(() => {

el.status = 0

// 查找status不为1的数据，若其中所有选项都不为1，就干掉它

let noEqualIndex = queryParams.value.selectedItems.findIndex(sub => sub.currentItemOldValue.every(lit => !lit?.status))

if (noEqualIndex > -1) {

queryParams.value.selectedItems.splice(noEqualIndex, 1)

}

getStatusList()

})

}

else{

// 查找status不为1的数据，若其中所有选项都不为1，就干掉它

let noEqualIndex = queryParams.value.selectedItems.findIndex(sub => sub.currentItemOldValue.every(lit => !lit?.status))

if (noEqualIndex > -1) {

queryParams.value.selectedItems.splice(noEqualIndex, 1)

}

queryParams.value.selectedItems.map(item=>{

item.totalCount = 0

if(item.currentItemOldValue?.length>0){

item.currentItemOldValue.map(el => {

el.pageCount = el.pageCount || el.orderCount

if(el.status){

item.totalCount += Number(el.pageCount)

}

})

}

})

getStatusList()

}

// 获取排序下标

function getSortIndex(itemField) {

let sortIndex = queryParams.value.selectedItems?.findIndex(sub => sub.currentItemKey === itemField)

return sortIndex

}

//点击某个全部按钮

function handleAll(item){

// 查找排序下标，如果当前取消的不是传值列表最后一项，则提示按倒序取消后再点击这一项

let sortIndex = getSortIndex(item.itemField)

if (sortIndex > -1 && (sortIndex !== queryParams.value.selectedItems.length - 1)) {

return proxy.$modal.alert(t('retrieval.offshelf.tips011'))

}

item.notAll = false

item.itemValues.map(el => {

el.status = 0

})

let findIndex = queryParams.value.selectedItems.findIndex(sub => sub.currentItemKey === item.itemField)

if (findIndex > -1) {

queryParams.value.selectedItems?.splice(findIndex, 1)

}

getStatusList()

}

//记录，组装传值

function paramAssembly(){

tabList.value.forEach(element => {

queryParams.value[element.itemField] = element.itemValues.filter(item => item.status).map(item => item.itemValueKey)

});

}

//获取筛选条件及列表数据

function getStatusList(){

paramAssembly()

loading.value = true;

searchOffshelfBySku(queryParams.value,paging.value).then(res => {

tabList.value = res.data.tabs

dataList.value = res.data.rows

dataList.value.map(item=>{//默认下架数量等于订单数量

item.offshelfCount = JSON.parse(JSON.stringify(item.orderCount))

})

total.value = Number(res.data.total)

tabList.value.map(item => {

if(item.itemValues?.length>8 && item.itemField != 'partitionCode'){//如果某一项的长度大于8，则截取前八项

let arr1 = item.itemValues.slice(0,8)

item.itemValues = arr1

}

if(item.itemField == 'partitionCode' && item.itemValues?.length>30) {

showMore.value = true

item.allItemValues = item.itemValues

let arr2 = item.itemValues.slice(0,30)

item.itemValues = arr2

}else{

item.allItemValues = item.itemValues

item.itemValues = item.itemValues

}

if(queryParams.value[item.itemField]?.length>0){//记录数据选中状态

item.notAll = true

if(item.itemField == 'partitionCode') {

item.allItemValues.map(el=> {

if(queryParams.value[item.itemField].includes(el.itemValueKey)){

el.status = 1

}

else{

el.status = 0

}

})

}else {

item.itemValues.map(el=> {

if(queryParams.value[item.itemField].includes(el.itemValueKey)){

el.status = 1

}

else{

el.status = 0

}

})

}

else{

item.notAll = false

}

loading.value = false;

})

}).catch(() => {

dataList.value = [];

total.value = 0;

loading.value = false;

});

}

//生成下架单

function handleGenerate(){

// if(orderNum.value>200){

// return proxy.$modal.msgError('最多只支持200个订单生成一个下架单');

// }

let paramArr = [], outboundOrderCodeArr = []

selectArr.value.map(item => {

item.shipmentMethodIds = item.shipmentMethodIds.slice(0,item.offshelfCount) //截取提货方式的数量等于下架数量

let obj = {

offshelfCount:item.offshelfCount,

outboundOrderCodes:item.outboundOrderCodes,

locationType:item.locationType

}

paramArr.push(obj)

if (item.outboundOrderCodes && item.outboundOrderCodes.length) {

item.outboundOrderCodes.map(n => outboundOrderCodeArr.push(n))

}

})

shipmentMethodIdArr.value = selectArr.value.map(item=>item.shipmentMethodIds).flat()//用于判断提货方式是否单一

shipmentMethodIdArr.value = Array.from(new Set(shipmentMethodIdArr.value)) //数组去重

if(shipmentMethodIdArr.value.length>1){//提示提货方式不单一

proxy.$modal.confirm(t('retrieval.offshelf.tips012')).then(()=>{

createOffShelfOrderBySku(paramArr,isMerge.value).then(res => {

proxy.$modal.msgSuccess(t('common.success'));

if(queryParams.value.selectedItems?.length>0){

//统计下架数量

let shelfNum = 0

paramArr.map(item => {

shelfNum += item.offshelfCount

})

let num = 0

//更新搜索条件

queryParams.value.selectedItems.map(item => {

if(item.totalCount == shelfNum){

num = num + 1

tabList.value.map(el=> {// 更新显示变为全部

if(el.itemField == item.currentItemKey){

el.itemValues.map(t => {

t.status = 0

})

}

})

}

})

queryParams.value.selectedItems.splice(queryParams.value.selectedItems.length - num);

//更新index

tabSortIndexKey.value++;

}

getStatusList()

proxy.$nextTick().then(() => {//生成数据后需要更新pageCount，但这种更新本身是存在问题的

queryParams.value.selectedItems.map(item=>{

item.totalCount = 0

if(item.currentItemOldValue?.length>0){

item.currentItemOldValue.map(el => {

el.pageCount = el.orderCount

if(el.status){

item.totalCount += Number(el.pageCount)

}

})

}

})

printForm.value.offshelfCodeArr = res.data

if (res && res.data && res.data.length) {

getWarehouseConfig(res.data) //获取仓库下架配置用于判断是否显示播种摘果

// 是否需要打印出库清单

printOutboundOrderListBatch({

orderCodes: res.data.join(',')

}).then(response => {

if (response && response.data) {

window.open(response.data);

}

});

}

handlePrint()//调用打印方法

})

}

else{

createOffShelfOrderBySku(paramArr,isMerge.value).then(res => {

proxy.$modal.msgSuccess(t('common.success'));

if(queryParams.value.selectedItems?.length>0){

//统计下架数量

let shelfNum = 0

paramArr.map(item => {

shelfNum += item.offshelfCount

})

let num = 0

//更新搜索条件

queryParams.value.selectedItems.map(item => {

if(item.totalCount == shelfNum){

num = num + 1

tabList.value.map(el=> {// 更新显示变为全部

if(el.itemField == item.currentItemKey){

el.itemValues.map(t => {

t.status = 0

})

}

})

}

})

queryParams.value.selectedItems.splice(queryParams.value.selectedItems.length - num);

//更新index

tabSortIndexKey.value++;

}

getStatusList()

proxy.$nextTick().then(() => {//生成数据后需要更新pageCount，但这种更新本身是存在问题的

queryParams.value.selectedItems.map(item=>{

item.totalCount = 0

if(item.currentItemOldValue?.length>0){

item.currentItemOldValue.map(el => {

el.pageCount = el.orderCount

if(el.status){

item.totalCount += Number(el.pageCount)

}

})

}

})

printForm.value.offshelfCodeArr = res.data

if (res && res.data && res.data.length) {

getWarehouseConfig(res.data) //获取仓库下架配置用于判断是否显示播种摘果

// 是否需要打印出库清单

printOutboundOrderListBatch({

orderCodes: res.data.join(',')

}).then(response => {

if (response && response.data) {

window.open(response.data);

}

});

}

handlePrint()//调用打印方法

})

}

//重新分配库位

function handleReassign(){

let obj = {

isAll:true,

outboundOrderCodeList:[]

}

proxy.$modal.confirm(t('retrieval.offshelf.tips003')).then(function () {

return reAllocateInventoryLocation(obj);

}).then((res) => {

let orderString = JSON.stringify(res.data)

let str1 = orderString.slice(1)

let str2 = str1.substring(0,str1.length-1)

if(str2.length){

proxy.$modal.msgWarning(str2);

}

else{

proxy.$modal.msgSuccess(t('common.success'));

}

getList()

})

}

/** 搜索按钮操作 */

function handleQuery() {

queryParams.value.pageNum = 1;

if(queryParams.value.createTime){

queryParams.value.createTimeBegin = new Date(queryParams.value.createTime[0]).getTime()

queryParams.value.createTimeEnd = new Date(queryParams.value.createTime[1]).getTime()

}

if(!queryParams.value.createTime){

queryParams.value.createTimeBegin = ''

queryParams.value.createTimeEnd = ''

}

if (queryParams.value.outboundOrderCode) {

queryParams.value.outboundOrderCodes = queryParams.value.outboundOrderCode.split(/[,\r\n\t]/);

} else {

queryParams.value.outboundOrderCodes = [];

}

clearAndRefresh();

}

/** 重置按钮操作 */

function resetQuery() {

queryParams.value = {

}

clearAndRefresh()

}

//字符串超出部分显示省略。。。

function filterLongEst(value){

if (!value) return ''

if (value.length > 28) {

return value.slice(0,26) + '...'

}

return value

}

//销售平台

const getSaleChannelList = () => {

listByChannel().then(res=>{

channelList.value = res.data

channelList.value.map(item=> {

item.value = item.channelId

item.key = item.channelId

item.label = item.channelName

})

}

//解决精度丢失问题

function floatAdd(arg1,arg2){

var r1,r2,m;

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2));

return (arg1*m+arg2*m)/m;

}

//获取所有客户

const getCustomer = (val) => {

if (!val || val.length < 2 || data.customLoading) {

return;

}

data.customLoading = true;

searchListCustomer({

codeStr: val

}).then(res => {

data.customLoading = false;

customerData.value = res.data

}).catch(() => {

data.customLoading = false;

})

}

/**获取发货方式 */

const getShipmentMethodData = async () => {

let query = {

businessType: 3,

}

try {

let res = await selectCheckBox(query)

if (res) {

shipmentMethodData.value = res.data || []

}

shipmentMethodData.value.forEach(item => {

item.label = item.shipmentMethod

item.value = item.shipmentMethodId

})

} catch (error) {

}

//禁选

function selectable (row){

// 只有下架数量大于0的才能选

if (row.offshelfCount) {

return true;

} else {

return false;

}

//刷新

function HandleRefresh(){

getStatusList()

}

//展开收起

const onChangeCollapse = () => {

collapse.value = !collapse.value

}

//清空并刷新

function clearAndRefresh(){

tabList.value.map(item=>{//每一项都恢复为全部

item.notAll = false

item.itemValues.map(el=>{

el.status = 0

})

if (queryParams.value.selectedItems?.length) delete queryParams.value.selectedItems

getStatusList()

}

//多选

function handleSelectionChange(selection){

orderNum.value = 0

skuTypeNum.value = 0

skuNum .value = 0

skuVolume.value = 0

skuWeight.value = 0

outboundOrderCodeArr.value = []

selectArr.value = selection

outboundOrderCodeArr.value = selection.map(item=>item.outboundOrderCodes).flat()

selection.map(item => {

orderNum.value += item.orderCount

skuTypeNum.value += item.barcodes.length

skuNum.value += item.groupSkuPcs

skuVolume.value = floatAdd(skuVolume.value,item.groupVolume)

skuWeight.value = floatAdd(skuWeight.value,item.groupWeight)

})

}

//打印

function handlePrint() {

validateCancelMain(outboundOrderCodeArr.value, () => donePrint(), 'truckBatch', (res) => {

if (res && res.exception) {

proxy.$refs.freeModalRef && proxy.$refs.freeModalRef.showModel(res && res.edaCancelOrderExceptionChildVOList);

} else {

getList()

}

})

}

//打印

function donePrint() {

// 判断是否配置了单一拣货方式，单一拣货方式直接取配置值

if (!pickingMethodShow.value) {

printForm.value.printType = warehouseSettings.value

// 跳过弹窗直接请求打印

submitPrintForm()

return

}

printForm.value.printType = 2

printForm.value.open = true

}

// 提交打印信息

async function submitPrintForm() {

if(printForm.value.offshelfCodeArr?.length>0){

dialogClose()

//打印下架单

printOffShelfListBatch({

offshelfCodes: printForm.value.offshelfCodeArr,

printType: printForm.value.printType

}).then(res => {

if (res.data) {

if (res && res.data) {

window.open(res.data);

}

}).finally(() => {

printForm.value.loading = false

})

}

// 关闭打印窗口

function dialogClose() {

printForm.value.data = {}

printForm.value.open = false

return Promise.resolve(true)

}

// 获取仓库配置信息

function getWarehouseConfig(offshelfCodeArr) {

let obj = {

offshelfCodes:offshelfCodeArr

}

selectPickingMethodConfig(obj).then(res => {//如果返回有具体的值就是拣货方式，则表示不需要显示弹窗，其他则需要弹窗选择

warehouseSettings.value = res.data

})

}

//查看订单信息

function handleOrder(row){

// form.value = row

form.value.list = []

for(let i=0;i<row.outboundOrderCodes.length;i++){

let obj={

orderCode:row.outboundOrderCodes[i],

shipmentMethodId:row.shipmentMethodIds[i]

}

form.value.list.push(obj)

}

openStock.value = true

}

function clickShowMorePartition(item) {

showMore.value = !showMore.value

if(showMore.value) {

item.itemValues = item.itemValues.slice(0,30)

}else {

item.itemValues = item.allItemValues

}

onMounted(() => {

getPartition();

getSaleChannelList();

getStatusList();

getShipmentMethodData()

})

</script>

@import "@/assets/styles/variables.module.scss";

.btn{

min-width: 80px;

border-radius: 0;

margin-left: 2px;

}

.checkbox-style{

margin-left: 10px;

}

.tab-item{

border: 1px solid #f0f2f5;

line-height: 30px;

.row-item{

display: flex;

.tab-index {

min-width: 32px;

text-align: center;

line-height: 40px;

}

.tab-head{

line-height: 40px;

min-width: 120px;

padding-left: 15px;

background-color: #D4F3F4;

}

.tab-content{

padding: 5px 10px;

min-width: 50px;

cursor: pointer;

}

.highLight{

color: #007BFF;

}

.tab-item_group {

display: flex;

flex-wrap: wrap;

}

.refreshBtn{

display: flex;

flex-direction: row-reverse;

}

.collapse-btn {

position: relative;

margin-left: 20px;

margin-right: 25px;

cursor: pointer;

color: $--color-primary;

.arrow-icon {

position: absolute;

right: -20px;

top: 8px;

width: 16px;

height: 16px;

color: $--color-primary;

}

.show-more{

padding-top: 16px;

padding-left: 20px;

}

</style>

Zhouyuding_yyds

关注

17
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
基于vue3 setup 实战案例

shipmentMethodIdArr.value = selectArr.value.map(item=>item.shipmentMethodIds).flat()//用于判断提货方式是否单一。proxy.$nextTick().then(() => {//生成数据后需要更新pageCount，但这种更新本身是存在问题的。if(item.itemField == 'shipmentMethodId' && arr1.length == 2) {//提货方式选择多条提示。'展开' : '收起' }}
复制链接

扫一扫