完善订单创建重构

src/pages/create_order/components/drawee.vue

+<script setup>
+import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
+
+export default {
+  props:{
+    value:{
+      type:Array,
+      default:[]
+    }
+  },
+  data(){
+    return {
+      customDraweeList:[]
+    }
+  },
+  onMounted() {
+    console.log('drawee')
+  },
+  methods: {
+    open(){
+      this.$refs.popup.open()
+      if(!this.customDraweeList.length){
+        this.loadDictData()
+      }
+    },
+    loadDictData() {
+      this.$request.getConfig('custom_drawee').then(res => {
+        if(res.code==0&&res.data&&res.data.list.length>0){
+          res.data.list.forEach(item => {
+            const old = this.value ? this.value.find(it => it.name == item.value) : null
+            this.customDraweeList.push({
+              name: item.value,
+              label: this.$lang.locale === 'zh' ? item.label : item.labelEn,
+              value:  old ? old.value : 1
+            })
+          })
+        }
+      })
+    },
+    changeDrawee(field, e){
+      const index = this.customDraweeList.findIndex(item => item.name == field)
+      if(index < 0) return
+      this.customDraweeList[index].value = e.detail.value
+    },
+    submit(){
+      this.$refs.popup.close()
+      this.$emit("confirm", this.customDraweeList)
+    },
+    close(){
+      this.$refs.popup.close()
+    },
+  }
+}
+</script>
+
+<template>
+  <uni-popup ref="popup" type="center" :mask-click="false">
+    <view class="content">
+      <view v-for="item in customDraweeList" :key="item.id" class="flex item">
+        <view class="name">{{item.label}}</view>
+        <radio-group @change="changeDrawee(item.name, $event)" class="flex">
+          <label class="flex">
+            <view class="checkbox-item">
+              <radio value="1" :checked="item.value == 1" style="transform:scale(0.8)"/>
+            </view>
+            <view>{{$lang.lang.create.consignee}}</view>
+          </label>
+          <label class="flex">
+            <view class="checkbox-item">
+              <radio value="2" :checked="item.value == 2" style="transform:scale(0.8)"/>
+            </view>
+            <view>{{$lang.lang.create.consignor}}</view>
+          </label>
+        </radio-group>
+      </view>
+      <view class="flex action">
+        <button @click="close">{{$lang.lang.create.cancel}}</button>
+        <button @click="submit" type="primary">{{$lang.lang.create.submit}}</button>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+<style scoped lang="scss">
+.content{
+  width: 80vw;
+  background-color: #fff;
+  padding: 10px;
+  .item{
+    padding: 5px;
+    &:nth-child(2n){
+      background: #f8f8f8;
+    }
+    .name{
+      width: 100px;
+    }
+  }
+  .action{
+    margin-top: 20px;
+  }
+}
+</style>

src/pages/create_order/create_order.vue

@@ -128,14 +128,25 @@
 					</picker>
 					<image class="rgt" src="../../static/img/rgt.png" mode=""></image>
 				</view>
+        <!--目的国家-->
+        <view class="corder-tab1-item corder-picker">
+          <image src="../../static/img/corder-1-4.png" mode=""></image>
+          <text><span class="redcolor">*</span>{{$lang.lang.create.dstCountry}}</text>
+          <picker class="v-picker" :range="dstCountryList" :range-key="$lang.locale == 'zh' ? 'guojiaName' : 'guojiaNameEn'" :value="currentDstCountryIndex" @change="changeDstCountry">
+            <view class="uni-input">{{currentDstCountryIndex !== null ? dstCountryList[currentDstCountryIndex][$lang.locale == 'zh' ? 'guojiaName' : 'guojiaNameEn'] : $lang.lang.create.choose}}</view>
+          </picker>
+          <image class="rgt" src="../../static/img/rgt.png" mode=""></image>
+        </view>
+        <!--目的城市-->
 				<view class="corder-tab1-item corder-picker">
 					<image src="../../static/img/corder-1-4.png" mode=""></image>
 					<text><span class="redcolor">*</span>{{$lang.lang.create.endCity}}</text>
-					<picker :class="config.tradeCity2.index == 0 ? 'v-picker v-picker-2' : 'v-picker'" :value="config.tradeCity2.index" :range="config.tradeCity2.label" data-config="tradeCity2" data-key="objectiveId" @change="configChange" v-if="config.tradeCity2.value.length > 0">
-						<view class="uni-input">{{config.tradeCity2.label[config.tradeCity2.index]}}</view>
+          <picker class="v-picker" :range="filteredDstCityList" :range-key="$lang.locale == 'zh' ? 'shiName' : 'shiNameEn'" :value="currentDstCityIndex" @change="changeDstCity">
+            <view class="uni-input">{{ currentDstCityIndex !== null ? filteredDstCityList[currentDstCityIndex][$lang.locale == 'zh' ? 'shiName' : 'shiNameEn'] : $lang.lang.create.choose }}</view>
           </picker>
 					<image class="rgt" src="../../static/img/rgt.png" mode=""></image>
 				</view>
+
 				<view class="corder-tab1-item corder-picker">
 					<image src="../../static/img/corder-1-5.png" mode=""></image>
 					<text><span class="redcolor">*</span>{{$lang.lang.notices.lined}}</text>
@@ -338,6 +349,7 @@
 		<!-- </view> -->
 
 
+
 		<view class="corder-tab2 bgf" >
 			<view class="corder-tab-top">
 				<image src="../../static/img/corder-1.png" mode=""></image>
@@ -457,7 +469,7 @@
         <!--付款人-->
         <view class="corder-v5-v" >
           <view class="corder-v5-label"><span class="redcolor">*</span>{{$lang.lang.create.payer}}</view>
-          <view class="corder-radio-2">
+          <view class="corder-radio-2" style="flex: 1">
             <radio-group v-model="params.drawee"  @change="draweeType">
               <label class="radio">
                 <radio value="1" :checked="params.drawee==1" /><text>{{$lang.lang.create.consignor}}</text>
@@ -465,11 +477,27 @@
               <label class="radio">
                 <radio value="2" :checked="params.drawee==2" /><text>{{$lang.lang.create.consignee}}</text>
               </label>
+              <label class="radio" @click="$refs.drawee.open()">
+                <radio value="3" :checked="params.drawee==3" /><text>{{$lang.lang.create.customDrawee}}</text>
+              </label>
             </radio-group>
           </view>
         </view>
 
         <!--提单价格-->
+        <view class="corder-v5-v" >
+          <view class="corder-v5-label"><span class="redcolor">*</span>{{$lang.lang.create.billLadingPrice}}</view>
+          <view class="corder-radio-2">
+            <radio-group @change="changeBillPrice">
+              <label class="radio">
+                <radio value="1" :checked="params.displayBillLadingPrice" /><text>{{$lang.lang.create.displayBillLadingPrice}}</text>
+              </label>
+              <label class="radio">
+                <radio value="2" :checked="!params.displayBillLadingPrice" /><text>{{$lang.lang.create.hideBillLadingPrice}}</text>
+              </label>
+            </radio-group>
+          </view>
+        </view>
 
         <!--收货方式-->
         <view class="corder-v5-v corder-picker">
@@ -673,9 +701,6 @@
       </view>
     </view>
 
-
-
-
     <view class="footer">
       <view v-if="isOverSearWarehouse" class="sumbit disabled">{{$lang.lang.create.submit}}</view>
 			<view v-else class="sumbit" @click="addOrder">{{$lang.lang.create.submit}}</view>
@@ -884,17 +909,31 @@
 				</view>
 			</view>
 		</uni-popup>
+
+    <drawee ref="drawee" :value="params.customDraweeVOList" @confirm="setCustomDrawee"></drawee>
 	</view>
 </template>
 
 <script>
 	import cuihaiCombox from '../../components/cuihai-combox/cuihai-combox.vue'
+  import Drawee from "@/pages/create_order/components/drawee.vue";
 	export default {
+    components: {Drawee},
 		data() {
 			const currentDate = this.getDate({
 				format: true
 			})
 			return {
+        dstCountryList:[],
+        dstCityList: [],
+        // 当前展示的目的城市列表
+        filteredDstCityList:[],
+        // 当前国家索引
+        currentDstCountryIndex: null,
+        // 当前城市索引
+        currentDstCityIndex: null,
+        // 路线
+        routerList:[],
 				items:[
 					{
 					value:"1",
@@ -1032,35 +1071,7 @@
 					objectiveId: 0, //目的地ID
 					lineId: 0, //线路ID
 					channelId:0,//渠道ID
-					orderItemVOList:[
-            /*{
-              "prodTitleZh": "测试单询产品",
-              "prodTitleEn": "dd11",
-              "volume": "1",
-              "prodAttrs": [
-                "16"
-              ],
-              "prodAttrIds": "16",
-              "brandType": "0",
-              "num": "1",
-              "unit": "1",
-              "quantity": "1",
-              "weight": "1",
-              "worth": "123",
-              "material": null,
-              "prodId": 3719,
-              "showFull": true,
-              "charging": 0,
-              "clearanceFreight": 20,
-              "clearanceFreightCurrency": 27,
-              "clearanceFreightVolume": 7,
-              "seaFreight": 30,
-              "seaFreightCurrency": 27,
-              "seaFreightVolume": 7,
-              "isPayAdvance": 0,
-              "premium": 2
-            }*/
-          ],
+					orderItemVOList:[],
 					costVO:{},
 					deliveryDate:currentDate+' 00:00:00',
 					drawee:2,
@@ -1073,7 +1084,10 @@
 					issuingMethod:1,
 					doubleClear:2,
           // 清关证书默认否
-          customsClearCert: false
+          customsClearCert: false,
+          customDraweeVOList: [],
+          // 提单是否显示价格
+          displayBillLadingPrice: true
 				},
 				goodsModel:{
 					prodTitleZh:'',
@@ -1129,7 +1143,8 @@
         showFullConsignee: false
 			}
 		},
-		onLoad (op) {
+		async onLoad (op) {
+      await this.getDstCountryList()
 			// this.getZd()
 			this.getTreeList()
 			this.getCurrencyData()
@@ -1194,6 +1209,16 @@
           // 没有收货人必须控货
           this.params.isCargoControl = true
         }
+      },
+      "params.drawee"(drawee) {
+        // 240224 微信反馈
+        // 不好意思，这写错了，付款人=发货人----提单价格默认否；付款人=收货人，提交价格默认是
+        if (drawee == 1) {
+          this.params.displayBillLadingPrice = false
+        }
+        if (drawee == 2) {
+          this.params.displayBillLadingPrice = true
+        }
       }
 		},
 		methods: {
@@ -1423,7 +1448,7 @@
 				if(e.target.dataset.key=='channelId'){
 					that.getTradeCity('tradeCity2')
 				}
-				if(e.target.dataset.key =='channelId' || e.target.dataset.key == 'lineId' || e.target.dataset.key == 'transportId' || e.target.dataset.key == 'departureId' || e.target.dataset.key == 'objectiveId') {
+				if(e.target.dataset.key =='channelId' || e.target.dataset.key == 'transportId' || e.target.dataset.key == 'departureId' || e.target.dataset.key == 'objectiveId') {
 					if(!that.params.channelId  || !that.params.transportId  ||!that.params.lineId ||(that.params.departureId != 0 && this.params.objectiveId != 0)){
 						// if((that.params.transportId==3||that.params.transportId==4)&&!that.params.channelId){
 						// 	that.openedRouterF = true
@@ -1447,6 +1472,15 @@
 					// that.params.orderItemVOList = []
 					that.calculationPrice(-1)
 				}
+        if(e.target.dataset.key == 'lineId'){
+          // 切换路线则回显城市和国家
+          const router = this.routerList.find(item => item.id == this.config.openedRouter.value[this.config.openedRouter.index])
+          console.log("切换路线", router, this.config.openedRouter.index, [...this.routerList])
+          if(router){
+            this.currentDstCountryIndex = this.dstCountryList.findIndex(item => item.id == router.objectiveId)
+            this.currentDstCityIndex = this.filteredDstCityList.findIndex(item => item.id == router.objectiveId)
+          }
+        }
 				if(e.target.dataset.key == 'lineId'&&that.params.isCargoControl){
 					that.checkKycStatus()
 				}
@@ -1803,7 +1837,7 @@
 			},
 			getOrderData(id){
 				let that = this
-				that.$request.get('/app-api/my/order/get',{orderId:id}).then(res => {
+				that.$request.get('/app-api/my/order/get',{orderId:id}).then(async (res) => {
 					if(res.code==0&&res.data){
 						that.params = res.data
 						// if(!that.params.number) that.params.number = ''
@@ -1857,6 +1891,16 @@
             if(!that.noConsignee){
               that.hasConsignee = true
             }
+
+            // 回显目的城市和目的国
+            const dstCityIndex = this.filteredDstCityList.findIndex(item => item.shi === that.params.objectiveId)
+            if(dstCityIndex > -1){
+              const currentDstCountryId = this.filteredDstCityList[dstCityIndex].guojia
+              const currentDstCountrtyIndex = this.dstCountryList.findIndex(item => item.guojia === currentDstCountryId)
+              that.currentDstCountryIndex = currentDstCountrtyIndex
+              await this.$nextTick()
+              this.currentDstCityIndex = dstCityIndex
+            }
 					}
 				})
 			},
@@ -2340,7 +2384,8 @@
 					success: function (res) {
 						if (res.confirm) {
 							that.params.orderItemVOList.splice(index,1)
-							if(index>0){
+              console.log("删除后剩余产品数：", that.params.orderItemVOList.length)
+							if(that.params.orderItemVOList.length){
 								that.calculationPrice(-1)
 							}else{
 								that.params.costVO = {}
@@ -2700,6 +2745,7 @@
 				that.$request.get('/app-api/ecw/region/getTradeCityList', param).then(res => {
 					if(res.code==0&&res.data&&res.data.length > 0){
 						let d = res.data
+            this.tradeCityList = res.data
 						for(let i in d){
 							if(that.$lang.locale=='zh'){
 								that.config[key].label.push(d[i].titleZh)
@@ -2713,11 +2759,20 @@
 			},
 			//获取出货渠道
 			getChanel(){
+        this.config.channel = {
+          index: 0,
+          label: [this.$lang.lang.notices.please],
+          value: [''],
+        }
+
 				let that = this
 				let params={}
 				if(that.params.objectiveId){
 					params.cityId = that.params.objectiveId
 				}
+        if(that.currentDstCountryIndex !== null){
+          params.countryId = this.dstCountryList[this.currentDstCountryIndex].guojia
+        }
 				that.$request.get('/app-api/ecw/channel/select',params).then(res => {
 					if(res.code==0&&res.data&&res.data.length > 0){
 						let d = res.data
@@ -2748,9 +2803,13 @@
 				if(that.params.objectiveId){
 					params.destCityId = that.params.objectiveId
 				}
+        if(this.currentDstCountryIndex !== null){
+          params.destCountryId = this.dstCountryList[this.currentDstCountryIndex].guojia
+        }
 				that.$request.post('/app-api/ecw/warehouse/openedRouterList', params).then(res => {
 					if(res.code==0&&res.data&&res.data.length > 0){
 						let d = res.data
+            this.routerList = res.data
 						that.config.openedRouter={
 							index: 0,
 							label: [this.$lang.lang.notices.please],
@@ -2783,7 +2842,7 @@
 								that.params.departureId = that.config['tradeCity1'].value[that.config['tradeCity1'].index]
 							}
 							if(!that.params.objectiveId){
-								that.getConfigIndex('tradeCity2',res.data[that.config['openedRouter'].index-1].destCityId)
+								that.getConfigIndex('tradeCity2',res.data[that.config['openedRouter'].index-1]?.destCityId)
 								that.params.objectiveId = that.config['tradeCity2'].value[that.config['tradeCity2'].index]
 							}
 							that.currencyUnit = res.data[that.config['openedRouter'].index-1].currencyUnit
@@ -2966,6 +3025,58 @@
 						this.offerIdNoChange = true
 					}
 				})
+			},
+      setCustomDrawee(val){
+        this.$set(this.params, 'customDraweeVOList', val)
+      },
+      changeBillPrice(e){
+        this.params.displayBillLadingPrice = e.detail.value == 1 ? true : false
+      },
+      async getDstCountryList(){
+        const res = await this.$request.get("/app-api/ecw/warehouse/getGuojiaAndShiAndWarehouseList", {tradeType: 1})
+        console.log("getDstCountryList", res)
+        this.dstCountryList = res.data.guojiaList
+        this.dstCityList = res.data.shiList
+        this.filteredDstCityList = this.dstCityList
+      },
+      changeDstCountry(e){
+        console.log("changeDstCountry", e)
+        this.currentDstCountryIndex = e.detail.value
+        this.currentDstCityIndex = null
+        this.params.objectiveId = ''
+        this.filteredDstCityList = this.dstCityList.filter(item => item.guojia == this.dstCountryList[this.currentDstCountryIndex].guojia)
+
+        // 重置渠道
+        this.params.channelId = ''
+        this.getChanel()
+
+        // 切换国家，路线要重置
+        this.resetRoutes()
+        console.log("this.resetRoutes()", {...this.config.openedRouter})
+        this.getOpenedRouter()
+      },
+      changeDstCity(e){
+        console.log("changeDstCity", e)
+        this.currentDstCityIndex = e.detail.value
+        this.params.objectiveId = this.filteredDstCityList[this.currentDstCityIndex].shi
+
+        // 重置渠道
+        this.params.channelId = ''
+        this.getChanel()
+
+        // 切换城市，路线要重置
+        this.resetRoutes()
+        console.log("this.resetRoutes()", {...this.config.openedRouter})
+        this.getOpenedRouter()
+      },
+      resetRoutes(){
+        this.config.openedRouter = {
+          index: 0,
+          label: [this.$lang.lang.notices.please],
+          value: [''],
+          otherService:[''],
+          controlStatus:['']
+        }
       }
 		}
 	}

src/static/lang/zh/create.js

@@ -9,6 +9,7 @@ export default {
   "noCotrol": "非控货订单代收货款",
   "startCity": "始发城市",
   "endCity": "目的城市",
+  "dstCountry": "目的国家",
   "method": "运输方式",
   "channel": "出货渠道",
   "info": "商品",
@@ -116,4 +117,8 @@ export default {
   "choose": "请选择",
   "needCollectionAmount": "请设置代收货款金额",
   "needCollectionCurrency": "请选择代收货币单位",
+  "customDrawee": "自定义",
+  "billLadingPrice": "提单是否显示价格",
+  "displayBillLadingPrice": "显示",
+  "hideBillLadingPrice": "不显示",
 }