Forráskód Böngészése

收货地址对接

lilei 4 éve
szülő
commit
db066bd96f

+ 1 - 2
src/api/shippingAddress.js

@@ -3,7 +3,7 @@ import { axios } from '@/utils/request'
 //  收货地址 列表
 export const shippingAddressQuery = (params) => {
   return axios({
-    url: '/shippingAddress/query',
+    url: '/shippingAddress/queryList',
     data: params,
     method: 'post'
   })
@@ -20,7 +20,6 @@ export const shippingAddressSave = (params) => {
 export const shippingAddressSet = (params) => {
   return axios({
     url: `/shippingAddress/setDefault/${params.id}`,
-    data: {},
     method: 'get'
   })
 }

+ 51 - 49
src/views/purchasingManagement/purchaseOrder/receivingAddress/chooseAddressModal.vue

@@ -21,22 +21,23 @@
       :columns="columns"
       :data="loadData"
       :scroll="{ x: 1050 }"
+      :showPagination="false"
       bordered>
       <!-- 收货人 -->
       <template slot="consignee" slot-scope="text, record">
         <div class="item-box">
           <a-tooltip placement="top">
             <template slot="title">
-              <span>{{ record.consignee }}</span>
+              <span>{{ record.consigneeName }}</span>
             </template>
-            <p class="ellipsis-txt">{{ record.consignee }}</p>
+            <p class="ellipsis-txt">{{ record.consigneeName }}</p>
           </a-tooltip>
-          <span v-if="record.isDefault" class="badge-txt">默认</span>
+          <span v-if="record.defaultFlag==1" class="badge-txt">默认</span>
         </div>
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-button size="small" type="link" v-if="!record.isDefault" @click="handleDefault(record)" id="chooseAddressList-default-btn">设置为默认地址</a-button>
+        <a-button size="small" type="link" v-if="record.defaultFlag==0" @click="handleDefault(record)" id="chooseAddressList-default-btn">设置为默认地址</a-button>
         <a-divider type="vertical" style="margin: 0;" />
         <a-button size="small" type="link" @click="handleEdit(record)" id="chooseAddressList-edit-btn" style="margin-left: 5px;">编辑</a-button>
         <a-divider type="vertical" style="margin: 0;" />
@@ -48,13 +49,14 @@
       </template>
     </s-table>
     <!-- 新增/编辑地址 -->
-    <edit-address-modal :openModal="openAddrModal" @ok="handleOk" @close="openAddrModal=false" />
+    <edit-address-modal ref="addrModal" :openModal="openAddrModal" @ok="handleOk" @close="openAddrModal=false" />
   </a-modal>
 </template>
 
 <script>
 import { STable, VSelect } from '@/components'
 import editAddressModal from './editAddressModal'
+import { shippingAddressQuery, shippingAddressSet, shippingAddressDel } from '@/api/shippingAddress.js'
 export default {
   name: 'ChooseAddressModal',
   components: { STable, VSelect, editAddressModal },
@@ -67,45 +69,28 @@ export default {
   data () {
     return {
       isShow: this.openModal, //  是否打开弹框
+      queryParam: {},
       // 表头
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
         { title: '收货人', scopedSlots: { customRender: 'consignee' }, align: 'center', ellipsis: true },
-        { title: '手机号码', dataIndex: 'phone', width: 120, align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '收货地址', dataIndex: 'address', width: 300, align: 'center', ellipsis: true },
+        { title: '手机号码', dataIndex: 'consigneeTel', width: 120, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '收货地址', dataIndex: 'address', width: 400, align: 'center', ellipsis: true },
         { title: '操作', scopedSlots: { customRender: 'action' }, width: 250, align: 'center', fixed: 'right' },
         { title: '选择', scopedSlots: { customRender: 'choose' }, width: 100, align: 'center', fixed: 'right' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
         this.disabled = true
-        // return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
-        //   const data = res.data
-        //   const no = (data.pageNo - 1) * data.pageSize
-        //   for (var i = 0; i < data.list.length; i++) {
-        //     data.list[i].no = no + i + 1
-        //   }
-        //   this.disabled = false
-        //   return data
-        // })
-        const _this = this
-        return new Promise(function (resolve, reject) {
-          const data = {
-            pageNo: 1,
-            pageSize: 10,
-            list: [
-              { id: '1', consignee: '张三', phone: '15878458789', address: '陕西省西安市雁塔区高新三路', isDefault: true },
-              { id: '2', consignee: '张冀凯股份结构设计风格剑荡四方收费价格就会收到福建师范大书法家顾客三', phone: '15878458789', address: '陕西省西安市雁塔区高新三路', isDefault: false },
-              { id: '3', consignee: '张三', phone: '15878458789', address: '陕西省西安市到福建师范大书法家雁塔区高新三路', isDefault: false }
-            ],
-            count: 10
+        return shippingAddressQuery(Object.assign(parameter, this.queryParam)).then(res => {
+          const data = res.data
+          const no = 0
+          for (var i = 0; i < data.length; i++) {
+            data[i].no = no + i + 1
+            data[i].address = data[i].provinceName + '-' + data[i].cityName + '-' + data[i].countyName + '-' + data[i].addr
           }
-          const no = (data.pageNo - 1) * data.pageSize
-          for (var i = 0; i < data.list.length; i++) {
-            data.list[i].no = no + i + 1
-          }
-          _this.disabled = false
-          resolve(data)
+          this.disabled = false
+          return data
         })
       },
       openAddrModal: false // 选择地址弹框是否显示
@@ -114,10 +99,29 @@ export default {
   methods: {
     //  设为默认
     handleDefault (row) {
-
+      shippingAddressSet({ id: row.id }).then(res => {
+        if (res.status == 200) {
+          this.$refs.table.refresh(true)
+        }
+        this.$message.info(res.message)
+      })
     },
     //  新增/编辑收货地址
     handleEdit (row) {
+      if (row) {
+        this.$refs.addrModal.setData({
+          id: row.id,
+          consigneeName: row.consigneeName,
+          consigneeTel: row.consigneeTel,
+          provinceSn: row.provinceSn,
+          provinceName: row.provinceName,
+          citySn: row.citySn,
+          cityName: row.cityName,
+          countySn: row.countySn,
+          countyName: row.countyName,
+          addr: row.addr
+        })
+      }
       this.openAddrModal = true
     },
     //  选择
@@ -130,23 +134,22 @@ export default {
       this.$confirm({
         title: '提示',
         content: '删除后不可恢复,确定要进行删除吗?',
-		  centered: true,
+		    centered: true,
         onOk () {
-          // delectRolePower({
-          //   id: row.id
-          // }).then(res => {
-          //   console.log(res, 'res1111')
-          //   if (res.status == 200) {
-          //     _this.$message.success(res.message)
-          //     _this.$refs.table.refresh()
-          //   }
-          // })
+          shippingAddressDel({
+            id: row.id
+          }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh(true)
+            }
+          })
         }
       })
     },
-    //  地址保存
+    //  地址保存成功
     handleOk (data) {
-
+      this.$refs.table.refresh(true)
     }
   },
   watch: {
@@ -171,6 +174,8 @@ export default {
     }
     .item-box{
       position: relative;
+      display: flex;
+      align-items: center;
       .ellipsis-txt{
         margin: 0;
         width: 100%;
@@ -179,9 +184,6 @@ export default {
         whitewhite-space: nowrap;
       }
       .badge-txt{
-        position: absolute;
-        right: -15px;
-        top: -17px;
         line-height: 20px;
         padding: 0 7px;
         font-size: 12px;

+ 85 - 27
src/views/purchasingManagement/purchaseOrder/receivingAddress/editAddressModal.vue

@@ -16,19 +16,19 @@
       :label-col="formItemLayout.labelCol"
       :wrapper-col="formItemLayout.wrapperCol"
     >
-      <a-form-model-item label="收货人" prop="name">
+      <a-form-model-item label="收货人" prop="consigneeName">
         <a-input
           id="editAddress-name"
           :maxLength="30"
-          v-model="form.name"
+          v-model="form.consigneeName"
           placeholder="请输入收货人(最多30个字符)"
           allowClear />
       </a-form-model-item>
-      <a-form-model-item label="手机号码" prop="phone">
+      <a-form-model-item label="手机号码" prop="consigneeTel">
         <a-input
           id="editAddress-phone"
           :maxLength="11"
-          v-model="form.phone"
+          v-model="form.consigneeTel"
           placeholder="请输入手机号码(最多11个字符)"
           allowClear />
       </a-form-model-item>
@@ -36,33 +36,33 @@
         <a-row :gutter="20">
           <!-- 所在地区 -->
           <a-col span="8">
-            <a-form-model-item prop="provinceCode">
-              <a-select id="editAddress-provinceCode" @change="getCityList" v-model="form.provinceCode" placeholder="请选择省">
+            <a-form-model-item prop="provinceSn">
+              <a-select id="editAddress-provinceSn" @change="getCityList" v-model="form.provinceSn" placeholder="请选择省">
                 <a-select-option v-for="item in addrProvinceList" :value="item.sn" :key="item.sn + 'a'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-model-item>
           </a-col>
           <a-col span="8">
-            <a-form-model-item prop="cityCode">
-              <a-select id="editAddress-cityCode" @change="getAreaList" v-model="form.cityCode" placeholder="请选择市">
+            <a-form-model-item prop="citySn">
+              <a-select id="editAddress-citySn" @change="getAreaList" v-model="form.citySn" placeholder="请选择市">
                 <a-select-option v-for="item in addrCityList" :value="item.sn" :key="item.sn + 'b'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-model-item>
           </a-col>
           <a-col span="8">
-            <a-form-model-item prop="districtCode">
-              <a-select id="editAddress-districtCode" @change="areaCharged" v-model="form.districtCode" placeholder="请选择区/县">
+            <a-form-model-item prop="countySn">
+              <a-select id="editAddress-countySn" @change="areaCharged" v-model="form.countySn" placeholder="请选择区/县">
                 <a-select-option v-for="item in addrDistrictList" :value="item.sn" :key="item.sn + 'c'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-model-item>
           </a-col>
         </a-row>
       </a-form-model-item>
-      <a-form-model-item label="详细地址" prop="address">
+      <a-form-model-item label="详细地址" prop="addr">
         <a-input
           id="editAddress-address"
           :maxLength="60"
-          v-model="form.address"
+          v-model="form.addr"
           placeholder="请输入详细地址(最多60个字符)"
           allowClear />
       </a-form-model-item>
@@ -76,6 +76,7 @@
 
 <script>
 import { getArea } from '@/api/data'
+import { shippingAddressSave } from '@/api/shippingAddress.js'
 export default {
   name: 'EditAddressModal',
   props: {
@@ -87,22 +88,41 @@ export default {
   data () {
     return {
       isShow: this.openModal, //  是否打开弹框
+      isEdit: false,
       formItemLayout: {
         labelCol: { span: 4 },
         wrapperCol: { span: 16 }
       },
       form: {
-        name: '',
-        phone: '',
-        districtCode: undefined
+        consigneeName: '',
+        consigneeTel: '',
+        provinceSn: undefined,
+        provinceName: '',
+        citySn: undefined,
+        cityName: '',
+        countySn: undefined,
+        countyName: '',
+        addr: ''
       },
       rules: {
-        name: [
-          { required: true, message: '请输入收货人', trigger: 'blur' }
+        consigneeName: [
+          { required: true, message: '请输入收货人', trigger: 'change' }
         ],
-        phone: [
-          { required: true, message: '请输入手机号', trigger: 'blur' },
+        consigneeTel: [
+          { required: true, message: '请输入手机号', trigger: 'change' },
           { pattern: /^\d{11}$/, message: '请输入正确的手机号' }
+        ],
+        provinceSn: [
+          { required: true, message: '请选择省', trigger: 'change' }
+        ],
+        citySn: [
+          { required: true, message: '请选择市', trigger: 'change' }
+        ],
+        countySn: [
+          { required: true, message: '请选择区', trigger: 'change' }
+        ],
+        addr: [
+          { required: true, message: '请输入详细地址', trigger: 'change' }
         ]
       },
       addrProvinceList: [], //  省下拉
@@ -112,26 +132,43 @@ export default {
   },
   methods: {
     //  保存
-    handleSubmit () {},
+    handleSubmit () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          shippingAddressSave(this.form).then(res => {
+            if (res.status == 200) {
+              this.isShow = false
+              this.$emit('ok')
+              this.$message.success(res.message)
+            } else {
+              this.$message.error(res.message)
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
     // 获取城市列表
     getCityList (val) {
       this.addrCityList = []
       this.addrDistrictList = []
-      this.form.cityCode = undefined
-      this.form.districtCode = undefined
-      this.form.address = ''
+      this.form.citySn = undefined
+      this.form.countySn = undefined
+      this.form.provinceName = this.addrProvinceList.find(item => item.sn == val).name
       this.getArea('city', val)
     },
     // 获取区县列表
     getAreaList (val) {
       this.addrDistrictList = []
-      this.form.districtCode = undefined
-      this.form.address = ''
+      this.form.countySn = undefined
+      this.form.cityName = this.addrCityList.find(item => item.sn == val).name
       this.getArea('district', val)
     },
     // 区县变更
     areaCharged (val) {
-      this.form.address = ''
+      this.form.countyName = this.addrDistrictList.find(item => item.sn == val).name
     },
     //  省/市/区
     getArea (type, sn) {
@@ -160,6 +197,20 @@ export default {
           }
         }
       })
+    },
+    // 编辑数据
+    setData (data) {
+      this.isEdit = true
+      Promise.all([getArea({ level: '1' }), getArea({ psn: data.provinceSn }), getArea({ psn: data.citySn })]).then(res => {
+        console.log(res)
+        this.addrProvinceList = res[0].data
+        this.form.provinceName = this.addrProvinceList.find(item => item.sn == data.provinceSn).name
+        this.addrCityList = res[1].data
+        this.form.cityName = this.addrCityList.find(item => item.sn == data.citySn).name
+        this.addrDistrictList = res[2].data
+        this.form.countyName = this.addrDistrictList.find(item => item.sn == data.countySn).name
+        this.form = Object.assign({}, this.form, data)
+      })
     }
   },
   watch: {
@@ -171,8 +222,15 @@ export default {
     isShow (newValue, oldValue) {
       if (!newValue) {
         this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.addrCityList = []
+        this.addrDistrictList = []
+        this.isEdit = false
+        delete this.form.id
       } else {
-        this.getArea('province')
+        if (!this.isEdit) {
+          this.getArea('province')
+        }
       }
     }
   }