生成寄售召回单完善

src/views/consignmentManagement/createConsignmentRecallOrder.vue

 <template>
   <div class="pagex">
     <div class="section-page">
-      <div style="margin-bottom: 10px;">
+      <div style="margin-bottom: 25px;">
         <el-button type="primary" @click="generateConsignmentRecall">提交</el-button>
-        <el-button>取消</el-button>
+        <el-button @click="$router.push('/consignmentRecall')">取消</el-button>
+      </div>
+      <div class="row bothSide" style="margin-bottom: 10px;">
+        <div style="width: 40%">
+          <div class="xktitle" style="margin-bottom: 10px">收货信息<i class="el-icon-edit-outline" style="margin-left: 10px;" @click="dialogVisible_3=true"></i></div>
+          <div class="row">
+            <i class="el-icon-map-location" style="margin-top: 16px;"></i>
+            <el-descriptions :column="1" :colon="false">
+              <el-descriptions-item>
+                {{ updateConsignmentRecallReceiptInfoParams.country }}
+                {{ updateConsignmentRecallReceiptInfoParams.province }}
+                {{ updateConsignmentRecallReceiptInfoParams.city }}
+                {{ updateConsignmentRecallReceiptInfoParams.district }}
+                {{ updateConsignmentRecallReceiptInfoParams.detail }}
+              </el-descriptions-item>
+              <el-descriptions-item label="">
+                {{ updateConsignmentRecallReceiptInfoParams.contact }}
+                {{ updateConsignmentRecallReceiptInfoParams.mobile }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
+        <div style="width: 40%">
+          <div class="xktitle" style="margin-bottom: 10px">配送信息</div>
+          <el-descriptions :column="2" :colon="false">
+            <el-descriptions-item label="配送方式：">快递</el-descriptions-item>
+            <el-descriptions-item label="物流承运商：">顺丰速运</el-descriptions-item>
+            <el-descriptions-item label="备注：" :span="2">
+              <el-input v-model="delivery_remark" placeholder="请输入配送备注" clearable></el-input>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
       </div>
-      <div class="xktitle" style="margin-bottom: 10px;">收货信息</div>
       <div class="xktitle" style="margin-bottom: 10px;">召回库存明细</div>
       <el-button type="primary" @click="add">添加</el-button>
       <div style="margin-top: 10px;">
@@ -65,12 +95,34 @@
       </el-table>
       <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
     </el-dialog>
+    <!--收货信息-->
+    <el-dialog title="收货信息" :close-on-click-modal="false" :visible.sync="dialogVisible_3" width="500px">
+      <el-form :model="updateConsignmentRecallReceiptInfoParams" label-width="80px" size="mini" :rules="rules" ref="updateConsignmentRecallReceiptInfoParams">
+        <el-form-item label="收货人" prop="contact">
+          <el-input v-model="updateConsignmentRecallReceiptInfoParams.contact" placeholder="请输入收货人"></el-input>
+        </el-form-item>
+        <el-form-item label="收货电话" prop="mobile">
+          <el-input v-model="updateConsignmentRecallReceiptInfoParams.mobile" placeholder="请输入收货电话"></el-input>
+        </el-form-item>
+        <el-form-item label="收货地址" prop="province">
+          <el-cascader size="mini" placeholder="请选择收货地址省市区" :options="options" v-model="selectedOptions" @change="handleChange" style="width: 100%" :props="{ checkStrictly: false }"></el-cascader>
+        </el-form-item>
+        <el-form-item prop="detail">
+          <el-input type="textarea" v-model="updateConsignmentRecallReceiptInfoParams.detail" placeholder="请输入详细地址"></el-input>
+        </el-form-item>
+        <el-form-item size="mini" style="text-align: right">
+          <el-button @click="dialogVisible_3 = false">取消</el-button>
+          <el-button type="primary" @click="updateConsignmentRecallReceiptInfo('updateConsignmentRecallReceiptInfoParams')">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 <script>
 import Vue from 'vue';
 import Menu from "@/components/menu.vue";
 import {Autocomplete, Button, Cascader, DatePicker, Descriptions, DescriptionsItem, Dialog, Divider, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Link, Message, MessageBox, Option, Pagination, Popover, Select, Table, TableColumn, Tag, Tooltip} from 'element-ui'
+import {pcaTextArr} from 'element-china-area-data'
 
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm;
@@ -80,14 +132,40 @@ export default {
   name: "createConsignmentRecallOrder",
   data() {
     return {
+      options: pcaTextArr,
+      selectedOptions: ['广东省', '深圳市', '龙岗区'],
       total: 0,
       page: 1,
       limit: 10,
       multipleSelection: [],
       recall_json: [],//召回库存明细列表
       dialogVisible_1: false,
+      dialogVisible_3: false,
       wmsStockList: [],
       delivery_remark: '',//配送备注
+      updateConsignmentRecallReceiptInfoParams: {
+        contact: '',//收货人
+        mobile: '',//收货电话
+        country: '中国',//国家
+        province: '',//省
+        city: '',//市
+        district: '',//区
+        detail: ''//详细地址
+      },
+      rules: {
+        contact: [
+          {required: true, message: '请输入收货人', trigger: 'blur'},
+        ],
+        mobile: [
+          {required: true, message: '请输入收货电话', trigger: 'blur'},
+        ],
+        province: [
+          {required: true, message: '请选择收货地址', trigger: 'change'},
+        ],
+        detail: [
+          {required: true, message: '请输入详细地址', trigger: 'blur'},
+        ]
+      },
       wmsStockListParams: {
         goods_name: '',
         brand_name: ''
@@ -95,7 +173,8 @@ export default {
     };
   },
   created() {
-    this.getData()
+    this.getData();
+    this.getConsignmentRecallReceiptInfo();
   },
   methods: {
     getData() {
@@ -110,6 +189,21 @@ export default {
       })
     },
     /**
+     * 省市区级联选择监听
+     * @param value
+     */
+    handleChange(value) {
+      if (value && value.length) {
+        this.updateConsignmentRecallReceiptInfoParams.province = value[0];//省
+        this.updateConsignmentRecallReceiptInfoParams.city = value[1];//市
+        this.updateConsignmentRecallReceiptInfoParams.district = value[2];//区
+      } else {
+        this.updateConsignmentRecallReceiptInfoParams.province = '';
+        this.updateConsignmentRecallReceiptInfoParams.city = '';
+        this.updateConsignmentRecallReceiptInfoParams.district = '';
+      }
+    },
+    /**
      * 生成寄售召回单-提交
      */
     generateConsignmentRecall() {
@@ -117,7 +211,7 @@ export default {
         this.$message.warning('请添加召回库存明细');
         return;
       }
-      
+
       // 处理 recall_json，添加 recall_num 字段
       const processedRecallJson = this.recall_json.map(item => ({
         ...item,
@@ -131,7 +225,7 @@ export default {
         type: 'normal'
       }).then(() => {
         this.$http('POST', "/api/consignmentRecall/generateConsignmentRecall", {
-          delivery_remark: this.delivery_remark, 
+          delivery_remark: this.delivery_remark,
           recall_json: JSON.stringify(processedRecallJson)
         }).then(res => {
           if (res.code === 0) {
@@ -146,6 +240,42 @@ export default {
       });
     },
     /**
+     * 寄售召回-获取收货地址
+     */
+    getConsignmentRecallReceiptInfo() {
+      this.$http('GET', "/api/consignmentRecall/getConsignmentRecallReceiptInfo", {}).then(res => {
+        if (res.code === 0) {
+          this.updateConsignmentRecallReceiptInfoParams = res.data;
+        }
+      })
+    },
+    /**
+     * 寄售召回-修改收货地址
+     */
+    updateConsignmentRecallReceiptInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$http('POST', "/api/consignmentRecall/updateConsignmentRecallReceiptInfo", this.updateConsignmentRecallReceiptInfoParams).then(res => {
+            if (res.code === 0) {
+              this.$message({
+                message: '收货信息更新成功',
+                type: 'success',
+                onClose: () => {
+                  this.dialogVisible_3 = false;
+                  this.getConsignmentRecallReceiptInfo();
+                }
+              });
+            } else {
+              this.$message.error(res.msg || '操作失败');
+            }
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    /**
      * 添加
      */
     add() {
@@ -305,4 +435,12 @@ export default {
   font-weight: bold;
   color: #333;
 }
+
+.el-icon-edit-outline {
+  cursor: pointer;
+
+  &:hover {
+    color: #409eff;
+  }
+}
 </style>
\ No newline at end of file