src/views/oms/pickAddress/Index.vue

el-diolog弹框： src/views/oms/pickAddress/DialogAddress.vue

<template>
  <el-dialog center :title="title" :visible.sync="innerVisible" width="800px">
    <el-form v-loading="dialogLoading" :model="model" :label-position="labelPosition" :rules="rules" ref="ruleForm"
             label-width="87px">
      <el-row>
        <el-col :span="10" :offset="1">
          <el-form-item label="提货联系" prop="deliveryName" :rules="[
                    { required: true, message: '请输入提货联系人', trigger: 'blur' },
                  ]">
            <el-input v-model="model.deliveryName" placeholder="请输入提货联系人" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="提货电话" prop="deliveryPhone" :rules="[
                    { required: true, message: '请输入提货电话', trigger: 'blur' },
                    {validator: isPhoneOrTel, message: '请输入正确的电话号', trigger: 'blur'}
                  ]">
            <el-input v-model="model.deliveryPhone" placeholder="请输入提货电话" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20" :offset="1">
          <el-form-item label="提货地址:" prop="address" :rules="[
                    { required: true, message: '请选择提货省市区', trigger: 'change' },
                  ]">
            <!--<cascade-address level="3" v-model="model.address" placeholder="请选择省市区" style="width: 100%"></cascade-address>-->
            <Cascade-address changeOnSelect v-model="model.address" :level="3" style="width: 100%"
                             placeholder="请选择省市区"></Cascade-address>
          </el-form-item>
        </el-col>
        <el-col :span="20" :offset="1">
          <el-form-item label="详细地址:" prop="deliveryAddress" :rules="[
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                  ]">
            <el-input type="textarea" :rows="3" v-model="model.deliveryAddress" placeholder="允许输入200字内"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="设为默认:" prop="isDefault" class="noLabel" :rules="[
                    { required: true, message: '请选择是否默认', trigger: 'change' }
                  ]">
            <el-radio-group v-model="model.isDefault">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="24">
          <el-row>
            <el-col class="text-center" :span="5" :offset="6">
              <el-button @click="innerVisible = false" style="width:100%">取消</el-button>
            </el-col>
            <el-col class="text-center" :span="5" :offset="2">
              <el-button type="primary" :loading="loading" @click="submit" style="width:100%">保存</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import {dotData, copy, confirm} from '@/utils'
import CascadeAddress from '@/components/CascadeAddress'
import {isPhoneOrTel} from '@/utils/validate'

export default {
  components: {
    CascadeAddress
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (val) {
        // 重置表单
        this.resetFields()
        // 获取数据
        if (this.id) {
          this.getDetail()
        }
      }
      this.innerVisible = val
    },
    // 如果内部有新值变化，更新外部visible
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      labelPosition: 'left',
      model: {
        deliveryName: '',
        deliveryPhone: '',
        address: [],
        deliveryAddress: '',
        isDefault: ''
      },
      callBackData: {},
      rules: {
        auditMemo: [
          {required: true, max: 200, message: '允许输入200字内', trigger: 'blur'}
        ]
      },
      detailData: {},
      loading: false,
      dialogLoading: false
    }
  },
  computed: {
    title() {
      if (this.id) {
        return '编辑'
      } else {
        return '添加新的地址'
      }
    }
  },
  methods: {
    isPhoneOrTel,
    // 修改时，http请求出该id 的详情数据 并回填
    getDetail() {
      this.dialogLoading = true
      this.$ajax.get('/ms-warehouse-order/chDefaultPickupInfo/getPickupInfoById', {id: this.id}).then(response => {
        const success = response.success
        if (success) {
          this.callBackData = response.data || {}
          console.log('22222', this.callBackData)
          this.model.deliveryName = dotData(this.callBackData, 'deliveryName')
          this.model.deliveryPhone = this.callBackData.deliveryPhone
          this.model.deliveryAddress = this.callBackData.deliveryAddress
          this.model.isDefault = this.callBackData.isDefault
          if (this.callBackData.deliveryProvinceNo && this.callBackData.deliveryCityNo && this.callBackData.deliveryDistrictNo) {
            this.model.address = [
              this.callBackData.deliveryProvinceNo,
              this.callBackData.deliveryCityNo,
              this.callBackData.deliveryDistrictNo
              // {id: this.callBackData.deliveryProvinceNo, text: this.callBackData.deliveryProvince},
              // {id: this.callBackData.deliveryCityNo, text: this.callBackData.deliveryCity},
              // {id: this.callBackData.deliveryDistrictNo, text: this.callBackData.deliveryDistrict}
            ]
          }
          console.log('this.model.address', this.model.address)
        }
      }).finally(_ => {
        this.dialogLoading = false
      })
    },
    submit($event) {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        }
        let submitData = copy(this.model, true)
        submitData.deliveryProvinceNo = submitData.address[0]
        submitData.deliveryCityNo = submitData.address[1]
        submitData.deliveryDistrictNo = submitData.address[2]
        // submitData.deliveryProvinceNo = submitData.address[0].id
        // submitData.deliveryProvince = submitData.address[0].text
        // submitData.deliveryCityNo = submitData.address[1].id
        // submitData.deliveryCity = submitData.address[1].text
        // submitData.deliveryDistrictNo = submitData.address[2].id
        // submitData.deliveryDistrict = submitData.address[2].text
        delete submitData.address // 收件地址
        if (this.id) {
          submitData.id = this.id
        }
        let title = this.id ? '修改成功' : '新增成功'
        this.loading = true
        this.$ajax.post('/ms-warehouse-order/chDefaultPickupInfo/addOrUpdatePickupInfo', submitData).then(response => {
          const success = dotData(response, 'success')
          this.loading = false
          if (success) {
            this.$emit('refresh', true)
            confirm(title, '提示', {
              type: 'success',
              confirmButtonText: '确定',
              showCancelButton: false
            }).then(_ => {
              this.innerVisible = false
              this.$emit('refresh', true)
            })
          }
        }).finally(_ => {
          this.loading = false
        })
      })
    },
    resetFields() {
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].resetFields()
      }
    }
  }
}
</script>

封装el-dialog ：