<template> <div class="app-container"> <div class="page-title">{{$route.query.product_id ? productTitle + '-' : this.$t('全部')}}{{$t('路线价格列表')}}</div> <!-- 搜索工作栏 --> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <!-- <el-form-item label="商品编码" prop="productCode" v-if="!$route.query.product_id"> <el-input v-model="queryParams.productCode" placeholder="请输入商品编码" clearable @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="海关编码" prop="customsCode" v-if="!$route.query.product_id"> <el-input v-model="queryParams.customsCode" placeholder="请输入海关编码" clearable @keyup.enter.native="handleQuery"/> </el-form-item> --> <el-form-item :label="$t('商品名称')" prop="titleZh" v-if="!$route.query.product_id"> <el-input v-model="queryParams.titleZh" :placeholder="$t('请输入中英文名称、商品编码、海关编码')" clearable @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item :label="$t('商品类型')" prop="typeId" v-if="!$route.query.product_id"> <el-select v-model="queryParams.typeId" :placeholder="$t('选择商品类型')" clearable> <el-option v-for="type in typeList" :key="type.id" :label="type.titleZh" :value="type.id"/> </el-select> </el-form-item> <!-- <el-form-item label="商品属性" prop="attrId" v-if="!$route.query.product_id"> <el-select v-model="queryParams.attrId" placeholder="选择商品属性" clearable> <el-option v-for="attr in attrList" :key="attr.id" :label="attr.attrName" :value="attr.id"/> </el-select> </el-form-item> <el-form-item label="商品特性" prop="attrId" v-if="!$route.query.product_id"> // TODO </el-form-item> --> <el-form-item :label="$t('运输方式')" prop="transportType"> <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportType" formatter="number" clearable /> </el-form-item> <el-form-item :label="$t('出货渠道')" prop="shippingChannelId"> <el-select v-model="queryParams.shippingChannelId" clearable> <el-option v-for="item in channelList" :key="item.id" :label="$l(item, 'name')" :value="item.channelId" /> </el-select> </el-form-item> <el-form-item :label="$t('始发地')" prop="startCityId"> <el-select v-model="queryParams.startCityId" clearable> <el-option v-for="city in startCityList" :key="city.id" :label="$l(city, 'title')" :value="city.id" /> </el-select> </el-form-item> <el-form-item :label="$t('目的地')" prop="destCityId"> <el-select v-model="queryParams.destCityId" clearable> <el-option v-for="city in destCityList" :key="city.id" :label="$l(city, 'title')" :value="city.id" /> </el-select> </el-form-item> <el-form-item :label="$t('上架状态')" prop="auditStatus"> <dict-selector :type="DICT_TYPE.ECW_PRICE_AUDIT_STATUS" v-model="queryParams.auditStatus" clearable/> </el-form-item> <el-form-item :label="$t('状态')" prop="combStatus"> <el-select v-model="queryParams.combStatus" :placeholder="$t('请选择状态')" clearable> <el-option :label="$t('未设置价格')" value="setPrice_1"></el-option> <el-option :label="$t('黑名单')" value="blacklist_1"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button> <el-button icon="el-icon-refresh" @click="resetQuery">{{$t('重置')}}</el-button> </el-form-item> </el-form> <!-- 操作工具栏 --> <el-row :gutter="10" class="mb8"> <!--全部路线吗没有新增入口,指定商品的路线价格才有添加路线--> <el-col :span="1.5" v-if="$route.query.product_id"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['ecw:product-price:create']">{{$t('新建价格')}}</el-button> </el-col> <el-col :span="1.5"> <!--未指定商品--> <el-button v-if="!$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="handleBatchEdit">{{$t('批量设置价格')}}</el-button> <el-button v-if="!$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="batchBlock" :disabled="multiple">{{$t('批量加入黑名单')}}</el-button> <el-button v-if="!$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="batchOff" :disabled="multiple">{{$t('批量下架')}}</el-button> <!--指定商品--> <el-button v-if="$route.query.product_id" type="primary" plain icon="el-icon-setting" size="mini" @click="batchSetSingleProductPrice">{{$t('批量设置单个商品的路线')}}</el-button> </el-col> <!-- <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading" v-hasPermi="['ecw:product-price:export']">导出</el-button> </el-col> --> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <!-- 列表 --> <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column :label="$t('序号')" prop="id" width="50" /> <el-table-column :label="$t('商品编码')" align="center" prop="productCode" > <template slot-scope="{row}"> <el-link type="primary" @click.native="handleUpdate(row)"> {{ row.productDO ? row.productDO.productCode : $t('无productDO字段') }} </el-link> </template> </el-table-column> <el-table-column :label="$t('海关编码')" align="center" prop="customsCode"> <template slot-scope="{row}"> <div> {{ row.productDO ? row.productDO.customsCode : $t('无productDO字段') }} </div> </template> </el-table-column> <el-table-column :label="$t('商品类型')" align="center" prop="typeId"> <template slot-scope="{row}"> <span>{{ row.productDO ? getTypeName(row.productDO.typeId) : $t('无productDO字段') }}</span> </template> </el-table-column> <el-table-column :label="$t('商品名称')" align="center" prop="productName"> <template slot-scope="{row}"> <el-link type="primary" @click.native="handleUpdate(row)"> {{ row.productDO ? row.productDO.titleZh + '/' + row.productDO.titleEn : $t('无productDO字段') }} </el-link> </template> </el-table-column> <el-table-column prop="tansportType" :label="$t('运输方式')" align="center" width="100"> <template slot-scope="scope"> <div> {{ transportName(scope.row.warehouseLineDO.transportType) }} </div> </template> </el-table-column> <el-table-column prop="tansportType" :label="$t('出货渠道')" align="center" width="100"> <template slot-scope="{row}"> <div> {{ channelName(row.shippingChannelId) }} </div> </template> </el-table-column> <el-table-column prop="startDestTitle" :label="$t('始发地') + '/' + $t('目的地')" align="center"> <template slot-scope="scope"> <div> {{ scope.row.warehouseLineDO.startTitleZh }} <br /> {{ scope.row.warehouseLineDO.destTitleZh }} </div> </template> </el-table-column> <el-table-column prop="price" :label="$t('价格')" align="center"> <template slot-scope="scope"> <div v-if="scope.row.priceType == 0"> {{$t('运费')}}:{{ getCurrencySymbol(scope.row.transportPriceUnit) + scope.row.transportPrice}} {{ getCurrencyTitle(scope.row.transportPriceUnit) + '/' + getUnitTitle(scope.row.transportVolumeUnit)}} <br /> {{$t('清关费')}}:{{ getCurrencySymbol(scope.row.clearancePriceUnit) + scope.row.clearancePrice}} {{ getCurrencyTitle(scope.row.clearancePriceUnit) + '/' + getUnitTitle(scope.row.clearanceVolumeUnit)}} </div> <div v-if="scope.row.priceType == 1"> {{$t('全包价')}}:{{ getCurrencySymbol(scope.row.allPriceUnit) + scope.row.allPrice}} {{ getCurrencyTitle(scope.row.allPriceUnit) + '/' + getUnitTitle(scope.row.allVolumeUnit)}} </div> </template> </el-table-column> <el-table-column prop="auditStatus" align="center" :label="$t('状态')" width="120"> <template slot-scope="scope"> <div> {{ statusName(scope.row) }} </div> </template> </el-table-column> <el-table-column prop="advanceStatus" :label="$t('预付')" align="center" width="80"> <template slot-scope="scope"> <div> <!-- {{ getAdvanceStatuTitle(scope.row.advanceStatus) }} --> <dict-tag :type="DICT_TYPE.ECW_PAY_ADVANCE" :value="scope.row.needPay"></dict-tag> </div> </template> </el-table-column> <el-table-column :label="$t('最后修改时间')"> <template slot-scope="{row}"> <div> {{ row.updateTime|parseTime }} </div> </template> </el-table-column> <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="140"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row, true)" v-hasPermi="['ecw:product-price:update']">{{$t('查看')}}</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['ecw:product-price:update']">{{$t('编辑')}}</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="updateStatus(scope.row, 'blacklist')" >{{ scope.row.blacklist == 0 ? $t('加入黑名单') : $t('移除黑名单') }}</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="updateStatus(scope.row, 'auditStatus')" >{{scope.row.auditStatus == AuditStatusEnum.PASS ? $t('下架') : $t('上架')}}</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['ecw:product-price:delete']">{{$t('删除')}}</el-button> </template> </el-table-column> </el-table> <!-- 分页组件 --> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"/> </div> </template> <script> import { createProductPrice, updateProductPrice, deleteProductPrice, getProductPrice, getProductPricePage, exportProductPriceExcel, batchBlock, batchOff } from "@/api/ecw/productPrice"; import { openedRouterList } from "@/api/ecw/warehouse"; import { getTradeCityList } from "@/api/ecw/region"; import { getProductTypeList } from "@/api/ecw/productType"; import { getProductAttrList } from "@/api/ecw/productAttr"; import { getDictDatas, DICT_TYPE } from '@/utils/dict' import { getCurrencyList } from '@/api/ecw/currency'; import { getUnitList } from '@/api/ecw/unit'; import { AuditStatusEnum} from '@/utils/constants' import { getChannelList } from '@/api/ecw/channel'; import DictTag from '@/components/DictTag' import {arrryToKeyedObjectBy} from '@/utils/index' import { getProduct } from '@/api/ecw/product'; import {parseTime} from '@/utils/ruoyi' export default { name: "ProductPrice", filters: {parseTime}, components: { DictTag }, data() { return { // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, //特性列表 attrList:[], typeList: [], product: null, cityList: [], /* startCityList: [], //始发地城市 destCityList: [], //目的地城市 */ routedList: [], //已开头路线列表 currecyList: [], //货币列表 unitList: [], //单位列表 channelList:[] , // 渠道 routeParams:{}, //路线搜索条件 isUpdate: false, //更新操作 //货柜位置 locationList:[], // 遮罩层 loading: true, // 导出遮罩层 exportLoading: false, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 产品价格列表 list: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, dateRangeCreateTime: [], // 查询参数 queryParams: { pageNo: 1, pageSize: 10, productId: null, warehouseLineId: null, transportType: null, transportPrice: null, transportPriceUnit: null, transportVolumeUnit: null, clearancePrice: null, clearancePriceUnit: null, clearanceVolumeUnit: null, shippingChannelId: null, status: null, }, // 表单参数 form: { typeId: null, titleZh: null }, // 表单校验 rules: { typeId: [{ required: true, message: this.$t("产品类型不能为空"), trigger: "blur" }], titleZh: [{ required: true, message: this.$t("产品名称不能为空"), trigger: "blur" }], titleEn: [{ required: true, message: this.$t("英文名称不能为空"), trigger: "blur" }], transportPrice: [{ required: true, message: this.$t("海运费不能为空"), trigger: "blur" }], clearancePrice: [{ required: true, message: this.$t("清关费不能为空"), trigger: "blur" }], advanceStatus: [{ required: true, message: this.$t("是否预付不能为空"), trigger: "blur" }], containerLocation:[{ required: true, message: this.$t("货柜位置不能为空"), trigger: "blur" }], square:[{ required: true, message: this.$t("方数不能为空"), trigger: "blur" }], needBook:[{ required: true, message: this.$t("预约入仓不能为空"), trigger: "blur" }], }, lineList: [], transportDatas: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE), /* advanceStatusDictDatas: getDictDatas(DICT_TYPE.ADVANCE_STATUS), */ AuditStatusEnum: AuditStatusEnum, locationList: getDictDatas(DICT_TYPE.ECW_CONTAINER_LOCATION), }; }, computed: { // 商品名称 productTitle(){ if(!this.product){ return '' } return this.product.titleZh }, // 渠道用id做键值 keyedChannel(){ return arrryToKeyedObjectBy(this.channelList, 'channelId') }, // 根据渠道id获取渠道名 channelName(){ return id => { return this.keyedChannel[id] ? this.keyedChannel[id].nameZh : null } }, // 根据类型获取类型名称 getTypeName() { return typeId => { for(let index in this.typeList) { let typeItem = this.typeList[index]; if(typeItem.id == typeId) { return this.$l(typeItem, 'title'); } } } }, // 根据状态获取状态名称 ,这个应该可以改成字典,目前接口缺少相关数据,待定 statusName() { return row => { //判断价格是否过期 let validateStartDate = row.validateStartDate; let validateEndDate = row.validateEndDate; let notSetPrice = false; let nowDate = new Date().getTime(); if(validateStartDate && validateStartDate > nowDate) { notSetPrice = true; } if(validateEndDate && validateEndDate < nowDate) { notSetPrice = true; } let setPriceText = notSetPrice ? '(' + this.$t('未设置价格') + ')' : ''; if(row.blacklist) return this.$t('黑名单') + setPriceText; if(row.auditStatus === AuditStatusEnum.PASS) return this.$t('已上架') + setPriceText; return this.$t('已下架') + setPriceText; } }, // 根据运输方式获取名称 transportName() { return transportType => { return this.getDictDataLabel(this.DICT_TYPE.ECW_TRANSPORT_TYPE, transportType) } }, // 显示币种符号 getCurrencySymbol() { return currencyId => { for(let index in this.currecyList) { let currecyItem = this.currecyList[index]; if(currecyItem.id == currencyId) { return currecyItem.fuhao; } } } }, // 显示币种名称 getCurrencyTitle() { return currencyId => { for(let index in this.currecyList) { let currecyItem = this.currecyList[index]; if(currecyItem.id == currencyId) { return this.$l(currecyItem, 'title'); } } } }, getUnitTitle() { return unitId => { for(let index in this.unitList) { let unitItem = this.unitList[index]; if(unitItem.id == unitId) { return this.$l(unitItem, 'title'); } } } }, startCityList(){ return this.cityList.filter(item => item.type == 2 || item.type == 3) }, destCityList(){ return this.cityList.filter(item => item.type == 1 || item.type == 3) }, }, activated() { /* console.log('activated', this.product.id) this.$set(this.queryParams, 'typeId', +this.$route.query.product_type || null) let productId = this.product?.id console.log(this.$route.query.product_id, productId, this.$route.query.product_id != productId) if(this.$route.query.product_id != productId){ this.queryParams = { pageNo: 1, pageSize: 10 } } this.handleQuery() */ }, watch:{ '$route.query.product_id'(){ console.log(this.$route.query) if(!this.$route.query.product_id){ return this.product = null } let productId = this.product?.id if(this.$route.query.product_id != productId){ this.queryParams = { pageNo: 1, pageSize: 10, productId: this.$route.query.product_id } getProduct(this.$route.query.product_id).then(res => { this.product = res.data }) this.handleQuery() } } }, created() { if(this.$route.query.product_type){ this.$set(this.queryParams, 'typeId', +this.$route.query.product_type); } // 指定产品获取产品信息 if(this.$route.query.product_id){ this.$set(this.queryParams, 'productId', +this.$route.query.product_id); getProduct(this.$route.query.product_id).then(res => { this.product = res.data }) }else{ this.getAttrList(); } //获取城市列表 this.getAllCityList() this.getChannelList() this.getTypeList() //获取货币列表 this.requestCurrencyList(); //获取单位列表 this.requestUnitList(); this.$nextTick(() => { this.getList(); }) }, methods: { getChannelList(){ getChannelList().then(res => this.channelList = res.data) }, /** 获取产品属性列表 */ getAttrList() { getProductAttrList().then(response => { this.attrList = response.data; }) }, /** 获取产品类型列表 */ getTypeList() { getProductTypeList().then(response => { this.typeList = response.data; }) }, /**获取所有城市列表 */ getAllCityList() { getTradeCityList({}).then(response => { this.cityList = response.data; }) }, /**获取已开通路线列表 */ getOpenedRouterList() { openedRouterList(this.routeParams).then(response => { this.routedList = response.data; this.setDefaultSelect(); }) }, /**获取所有货币列表 */ requestCurrencyList() { getCurrencyList().then(response => { this.currecyList = response.data; }) }, /**获取所有单位列表 */ requestUnitList() { getUnitList().then(response => { this.unitList = response.data; }) }, handleSelectionChange(val) { this.lineList = val; }, /**运输线路改变 */ transportTypeChange(newVal) { this.routeParams.transportType = this.form.transportType; this.getOpenedRouterList(); }, /**始发地改变 */ startCityChange(newVal) { this.routeParams.startCityId = this.form.startCityId; this.getOpenedRouterList(); }, /**目的地改变 */ destCityChange(newVal) { this.routeParams.destCityId = this.form.destCityId; this.getOpenedRouterList(); }, handleStatusChange(row) { updateProductPrice(row).then(() => { this.$modal.msgSuccess(this.$t("修改成功")); }).catch(function() { row.auditStatus = row.auditStatus === AuditStatusEnum.PASS ? AuditStatusEnum.NOT_PASS : AuditStatusEnum.PASS; }); }, /** 查询列表 */ getList() { this.loading = true; // 处理查询参数 let params = {...this.queryParams}; this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime'); // 执行查询 getProductPricePage(params).then(response => { this.list = response.data.list; this.total = response.data.total; this.loading = false; }); }, /** 取消按钮 */ cancel() { this.open = false; this.reset(); }, /** 表单重置 */ reset() { this.form = { id: undefined, productId: undefined, warehouseLineId: undefined, transportPrice: undefined, transportPriceUnit: undefined, transportVolumeUnit: undefined, clearancePrice: undefined, clearancePriceUnit: undefined, clearanceVolumeUnit: undefined, status: undefined, }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNo = 1; this.queryParams.setPrice = undefined this.queryParams.blacklist = undefined if(this.queryParams.combStatus){ let tmp = this.queryParams.combStatus.split('_') this.queryParams[tmp[0]] = tmp[1] } this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.dateRangeCreateTime = []; this.resetForm("queryForm"); this.handleQuery(); }, /** 新增按钮操作 */ handleAdd() { return this.$router.push('../../lineProject/product-price/edit?' + (new URLSearchParams(this.$route.query)).toString()) }, // 批量修改单个商品的价格(一条或者多条,后者全部路线) batchSetSingleProductPrice(){ this.$router.push('../../lineProject/product-price/edit?action=batchUpdate&product_id=' + this.$route.query.product_id + '&ids=' + this.ids) }, // 批量设置路线 handleBatchEdit() { this.$router.push('../../lineProject/batch-edit') }, /** 修改按钮操作 */ handleUpdate(row, readonly) { let url = '../../lineProject/product-price/edit?action=update&id=' + row.id if(readonly)url += '&readonly=1' return this.$router.push(url) }, updateStatus(row, type) { if(type == 'blacklist') { row.blacklist=row.blacklist == 0 ? 1 : 0; } else if(type == 'auditStatus') { row.auditStatus=row.auditStatus === AuditStatusEnum.PASS ? AuditStatusEnum.NOT_PASS : AuditStatusEnum.PASS; } updateProductPrice(row).then(() => { this.$modal.msgSuccess(this.$t("修改成功")); }).catch(function() { if(statusType == 'blacklist') { row.blacklist = row.blacklist === 1 ? 0 : 1; } else { row.auditStatus = row.auditStatus === AuditStatusEnum.PASS ? AuditStatusEnum.NOT_PASS : AuditStatusEnum.PASS; } }); }, checkSelectable() { return !this.isUpdate; }, setDefaultSelect() { let vm = this; setTimeout(() => { // 修改线路价格,选中已经选择的 if(vm.isUpdate && vm.routedList && vm.routedList.length) { vm.$refs.routeTable.toggleRowSelection(vm.routedList[0]); } }, 300); }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (!valid) { return; } if(!this.lineList || !this.lineList.length) { this.$message.error(this.$t('请选择线路')); return; } let lineChannelList = []; //TODO ,lineChannelList实体空运的时候需要传出货渠道ID--shippingChannelId this.lineList.map((item) => { lineChannelList.push({lineId: item.id}); return item; }); this.form.lineChannelList = lineChannelList; // 修改的提交 if (this.form.id != null) { updateProductPrice(this.form).then(response => { this.$modal.msgSuccess(this.$t("修改成功")); this.open = false; this.getList(); }); return; } // 添加的提交 this.form.productId = this.product.id; createProductPrice(this.form).then(response => { this.$modal.msgSuccess(this.$t("请求成功")); this.open = false; this.getList(); }); }); }, /** 删除按钮操作 */ handleDelete(row) { const id = row.id; this.$modal.confirm(this.$t('是否确认删除产品价格编号为{id}的数据项?', {id})).then(function() { return deleteProductPrice(id); }).then(() => { this.getList(); this.$modal.msgSuccess(this.$t("删除成功")); }).catch(() => {}); }, /** 导出按钮操作 */ handleExport() { // 处理查询参数 let params = {...this.queryParams}; params.pageNo = undefined; params.pageSize = undefined; this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime'); // 执行导出 this.$modal.confirm(this.$t('是否确认导出所有产品价格数据项?')).then(() => { this.exportLoading = true; return exportProductPriceExcel(params); }).then(response => { this.$download.excel(response, '${table.classComment}.xls'); this.exportLoading = false; }).catch(() => {}); }, // 表格多选 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, batchBlock(){ batchBlock({ids: this.ids.join(',')}).then(res => { this.$message.success(res.msg || this.$t('操作成功')) this.handleQuery() }) }, batchOff(){ batchOff({ids: this.ids.join(',')}).then(res => { this.$message.success(res.msg || this.$t('操作成功')) this.handleQuery() }) }, } }; </script>