<template> <div class="app-container"> <!-- 搜索工作栏 --> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="商品编码" prop="productCode"> <el-input v-model="queryParams.productCode" placeholder="请输入商品编码" clearable @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="海关编码" prop="customsCode"> <el-input v-model="queryParams.customsCode" placeholder="请输入海关编码" clearable @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="商品名称" prop="titleZh"> <el-input v-model="queryParams.titleZh" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="商品类型" prop="typeId"> <el-select v-model="queryParams.typeId" placeholder="选择商品类型" 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"> <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="startCityId"> <el-select v-model="queryParams.startCityId" clearable> <el-option v-for="city in startCityList" :key="city.id" :label="city.titleZh" :value="city.id" /> </el-select> </el-form-item> <el-form-item label="目的地" prop="destCityId"> <el-select v-model="queryParams.destCityId" clearable> <el-option v-for="city in destCityList" :key="city.id" :label="city.titleZh" :value="city.id" /> </el-select> </el-form-item> <el-form-item label="空运渠道" prop="shippingChannelId"> <el-select v-model="queryParams.shippingChannelId" clearable> <el-option v-for="item in channelList" :key="item.id" :label="item.nameZh" :value="item.channelId" /> </el-select> </el-form-item> <el-form-item label="" prop="blacklist" v-if="false"> <el-checkbox v-model="queryParams.blacklist" :true-label="1" :false-label="0">黑名单</el-checkbox> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 操作工具栏 --> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['ecw:product-price:create']">新增</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"> <el-table-column label="序号" prop="id" width="50" /> <el-table-column label="商品编码" align="center" prop="productCode" > <template slot-scope="scope"> <div> {{ scope.row.productDO.productCode }} </div> </template> </el-table-column> <el-table-column label="海关编码" align="center" prop="customsCode" > <template slot-scope="scope"> <div> {{ scope.row.productDO.customsCode }} </div> </template> </el-table-column> <el-table-column label="商品类型" align="center" prop="typeId"> <template slot-scope="scope"> <span>{{ getTypeName(scope.row.productDO.typeId) }}</span> </template> </el-table-column> <el-table-column label="商品名称" align="center" prop="productName" > <template slot-scope="scope"> <div> {{ scope.row.productDO.titleZh }} </div> </template> </el-table-column> <el-table-column prop="tansportType" label="运输方式" 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="出货渠道" align="center" width="100"> <template slot-scope="{row}"> <div> {{ channelName(row.shippingChannelId) }} </div> </template> </el-table-column> <el-table-column prop="startDestTitle" label="始发地/目的地" 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="价格" align="center"> <template slot-scope="scope"> <div> 海运费:{{ getCurrencySymbol(scope.row.transportPriceUnit) + scope.row.transportPrice}} {{ getCurrencyTitle(scope.row.transportPriceUnit) + '/' + getUnitTitle(scope.row.transportVolumeUnit)}} <br /> 清关费:{{ getCurrencySymbol(scope.row.clearancePriceUnit) + scope.row.clearancePrice}} {{ getCurrencyTitle(scope.row.clearancePriceUnit) + '/' + getUnitTitle(scope.row.clearanceVolumeUnit)}} </div> </template> </el-table-column> <el-table-column prop="auditStatus" align="center" label="状态" width="120"> <template slot-scope="scope"> <div> {{ statusName(scope.row) }} </div> </template> </el-table-column> <el-table-column prop="advanceStatus" label="预付" align="center" width="80"> <template slot-scope="scope"> <div> {{ getAdvanceStatuTitle(scope.row.advanceStatus) }} </div> </template> </el-table-column> <el-table-column label="操作" 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)" v-hasPermi="['ecw:product-price:update']">修改</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="updateStatus(scope.row, 'blacklist')" v-hasPermi="['ecw:product-price:update']">{{ scope.row.blacklist == 0 ? '加入黑名单' : '移除黑名单' }}</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="updateStatus(scope.row, 'auditStatus')" v-hasPermi="['ecw:product-price:update']">{{scope.row.auditStatus == AuditStatusEnum.PASS ? '下架' : '上架'}}</el-button> <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['ecw:product-price:delete']">删除</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"/> <!-- 对话框(添加 / 修改) --> <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="110px"> <el-form-item label="商品类型" prop="typeId"> <el-select v-model="form.typeId" placeholder="选择产品类型" disabled> <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="titleZh"> <el-input v-model="form.titleZh" disabled /> </el-form-item> <el-form-item label="英文名称" prop="titleEn"> <el-input v-model="form.titleEn" disabled /> </el-form-item> <el-row :gutter="20" v-if="!form.id"> <el-col :span="6"> <el-form-item label="运输方式" prop="transportType"> <el-select v-model="form.transportType" clearable @change="transportTypeChange"> <el-option v-for="dict in transportDatas" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="始发地" prop="startCityId"> <el-select v-model="form.startCityId" clearable @change="startCityChange"> <el-option v-for="city in startCityList" :key="city.id" :label="city.titleZh" :value="city.id" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="目的地" prop="destCityId"> <el-select v-model="form.destCityId" clearable @change="destCityChange"> <el-option v-for="city in destCityList" :key="city.id" :label="city.titleZh" :value="city.id" /> </el-select> </el-form-item> </el-col> </el-row> <el-table ref="routeTable" :data="routedList" tooltip-effect="dark" max-height="250" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" :selectable="checkSelectable" width="55"> </el-table-column> <el-table-column label="线路" width="800"> <template slot-scope="scope">{{ transportName(scope.row.transportType) + '从【' + scope.row.startTitleZh + '】发往【' + scope.row.destTitleZh + '】'}}</template> </el-table-column> </el-table> <br /> <el-form-item label="海运费" prop="transportPrice"> <el-row :gutter="20"> <el-col :span="4"> <el-select v-model="form.transportPriceUnit"> <el-option v-for="currency in currecyList" :key="currency.id" :label="currency.titleZh" :value="currency.id" /> </el-select> </el-col> <el-col :span="6"> <el-input v-model.number="form.transportPrice" type="number" placeholder="整数或者两位小数"/> </el-col> <el-col :span="4"> <el-select v-model="form.transportVolumeUnit"> <el-option v-for="unit in unitList" :key="unit.id" :label="unit.titleZh" :value="unit.id" /> </el-select> </el-col> </el-row> </el-form-item> <el-form-item label="清关费" prop="clearancePrice"> <el-row :gutter="20"> <el-col :span="4"> <el-select v-model="form.clearancePriceUnit"> <el-option v-for="currency in currecyList" :key="currency.id" :label="currency.titleZh" :value="currency.id" /> </el-select> </el-col> <el-col :span="6"> <el-input v-model.number="form.clearancePrice" type="number" placeholder="整数或者两位小数"/> </el-col> <el-col :span="4"> <el-select v-model="form.clearanceVolumeUnit"> <el-option v-for="unit in unitList" :key="unit.id" :label="unit.titleZh" :value="unit.id" /> </el-select> </el-col> </el-row> </el-form-item> <el-form-item label="是否预付" prop="advanceStatus"> <el-radio-group v-model="form.advanceStatus"> <el-radio v-for="advanceDict in advanceStatusDictDatas" :key="advanceDict.value" :label="parseInt(advanceDict.value)">{{advanceDict.label}}</el-radio> </el-radio-group> </el-form-item> <div style="font-size:20px;"> 基础信息 </div> <el-form-item label="需要预约入仓" prop="needBook"> <el-radio v-model.number="form.needBook" :label="1">是</el-radio> <el-radio v-model.number="form.needBook" :label="0">否</el-radio> </el-form-item> <el-form-item label="每日入仓上限" prop="dayLimit"> <el-input v-model.number="form.dayLimit" type="number"> <template slot="append">立方米</template> </el-input> </el-form-item> <el-form-item label="货柜位置" prop="containerLocation"> <el-select v-model="form.containerLocation" placeholder="选择货柜位置" clearable> <el-option v-for="locationItem in locationList" :key="locationItem.value" :label="locationItem.label" :value="locationItem.value"/> </el-select> </el-form-item> <el-form-item label="方数要求" prop="square"> <el-input v-model.number="form.square" type="number"> <!-- <template slot="append">立方米</template> --> </el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { createProductPrice, updateProductPrice, deleteProductPrice, getProductPrice, getProductPricePage, exportProductPriceExcel } from "@/api/ecw/productPrice"; import { openedRouterList } from "@/api/ecw/warehouse"; import { getCityList } 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' export default { name: "ProductPrice", components: { DictTag }, data() { return { //特性列表 attrList:[], typeList: [], product: null, 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: "产品类型不能为空", trigger: "blur" }], titleZh: [{ required: true, message: "产品名称不能为空", trigger: "blur" }], titleEn: [{ required: true, message: "英文名称不能为空", trigger: "blur" }], transportPrice: [{ required: true, message: "海运费不能为空", trigger: "blur" }], clearancePrice: [{ required: true, message: "清关费不能为空", trigger: "blur" }], advanceStatus: [{ required: true, message: "是否预付不能为空", trigger: "blur" }], containerLocation:[{ required: true, message: "货柜位置不能为空", trigger: "blur" }], square:[{ required: true, message: "方数不能为空", trigger: "blur" }], needBook:[{ required: true, message: "预约入仓不能为空", 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: { keyedChannel(){ return arrryToKeyedObjectBy(this.channelList, 'channelId') }, 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 typeItem.titleZh; } } } }, statusName() { return row => { if(row.blacklist) return '黑名单'; if(row.auditStatus === AuditStatusEnum.PASS) return '已审核'; return '已下架'; } }, transportName() { return transportType => { return this.getDictDataLabel(this.DICT_TYPE.ECW_TRANSPORT_TYPE, transportType) /* for(let index in this.transportDatas) { let transportItem = this.transportDatas[index]; if(transportItem.value == transportType) { return transportItem.label; } } */ } }, 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 currecyItem.titleZh; } } } }, getUnitTitle() { return unitId => { for(let index in this.unitList) { let unitItem = this.unitList[index]; if(unitItem.id == unitId) { return unitItem.titleZh; } } } }, getAdvanceStatuTitle() { return value => { for(let index in this.advanceStatusDictDatas) { let dictItem = this.advanceStatusDictDatas[index]; if(dictItem.value === '' + value) { return dictItem.label; } } } } }, activated() { let typeId = this.$route.query.product_type; if(typeId) { if(!this.queryParams.typeId || this.queryParams.typeId != typeId) this.$set(this.queryParams, 'typeId', typeId); // this.queryParams.typeId = typeId; this.getList(); } }, created() { // this.transportDatas = getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE); // console.log(this.transportDatas); let productJson = localStorage.getItem('product'); // console.log(productJson); this.product = eval('(' + productJson + ')'); let typeListJson = localStorage.getItem('typeList'); if(typeListJson) { this.typeList = eval('(' + typeListJson + ')'); } else { this.getTypeList(); } this.getChannelList() this.getAttrList(); this.getList(); //获取城市列表 this.getAllCityList(); //获取货币列表 this.requestCurrencyList(); //获取单位列表 this.requestUnitList(); }, 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() { getCityList({}).then(response => { let cityList = response.data; for(let index in cityList) { let city = cityList[index]; if(city.type == '1') { //进口,目的地 this.destCityList.push(city); } else if(city.type == '2') { //出口,始发地 this.startCityList.push(city); } else if(city.type == '3') { //进出口 this.destCityList.push(city); this.startCityList.push(city); } } }) }, /**获取已开通路线列表 */ 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("修改成功"); }).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.getList(); }, /** 重置按钮操作 */ resetQuery() { this.dateRangeCreateTime = []; this.resetForm("queryForm"); this.handleQuery(); }, /** 新增按钮操作 */ handleAdd() { return this.$router.push('product-price/edit?' + (new URLSearchParams(this.$route.query)).toString()) this.reset(); this.routeParams = {}; this.getOpenedRouterList(); this.form.typeId = this.product.typeId; this.form.titleZh = this.product.titleZh; this.form.titleEn = this.product.titleEn; this.form.needBook = this.product.needBook; this.form.dayLimit = this.product.dayLimit; this.form.containerLocation = this.product.containerLocation; this.form.square = this.product.square; if(this.currecyList) { let priceUnitId = this.currecyList[0].id; this.form.transportPriceUnit = priceUnitId; this.form.clearancePriceUnit = priceUnitId; } if(this.unitList) { let volumeUnitId = this.unitList[0].id; this.form.transportVolumeUnit = volumeUnitId; this.form.clearanceVolumeUnit = volumeUnitId; } this.isUpdate = false; this.open = true; this.title = "添加路线价格"; }, /** 修改按钮操作 */ handleUpdate(row) { return this.$router.push('product-price/edit?id=' + row.id) this.reset(); const id = row.id; let lineId = row.warehouseLineId; this.routeParams = {lineId: lineId}; this.getOpenedRouterList(); getProductPrice(id).then(response => { this.form = response.data; this.form.typeId = this.product.typeId; this.form.titleZh = this.product.titleZh; this.form.titleEn = this.product.titleEn; this.isUpdate = true; // console.log(this.form); this.open = true; this.title = "修改路线价格"; }); }, 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("修改成功"); }).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('请选择线路'); 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.open = false; this.getList(); }); return; } // 添加的提交 this.form.productId = this.product.id; createProductPrice(this.form).then(response => { this.$modal.msgSuccess("请求成功"); this.open = false; this.getList(); }); }); }, /** 删除按钮操作 */ handleDelete(row) { const id = row.id; this.$modal.confirm('是否确认删除产品价格编号为"' + id + '"的数据项?').then(function() { return deleteProductPrice(id); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => {}); }, /** 导出按钮操作 */ handleExport() { // 处理查询参数 let params = {...this.queryParams}; params.pageNo = undefined; params.pageSize = undefined; this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime'); // 执行导出 this.$modal.confirm('是否确认导出所有产品价格数据项?').then(() => { this.exportLoading = true; return exportProductPriceExcel(params); }).then(response => { this.$download.excel(response, '${table.classComment}.xls'); this.exportLoading = false; }).catch(() => {}); } } }; </script>