gubersail-platform-ui/src/views/order/address/index.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :data="data"
      ref="crud"
      v-model="form"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      :table-loading="loading"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          plain
          icon="el-icon-delete"
          v-if="permission.order_address_delete"
          @click="handleDelete"
        >
          删除
        </el-button>
      </template>
      
      <template slot-scope="{row}" slot="isDefault">
        <el-tag :type="row.isDefault === 1 ? 'success' : 'info'">
          {{ row.isDefault === 1 ? '是' : '否' }}
        </el-tag>
      </template>
      
      <template slot-scope="{row}" slot="isActive">
        <el-tag :type="row.isActive === 1 ? 'success' : 'danger'">
          {{ row.isActive === 1 ? '启用' : '禁用' }}
        </el-tag>
      </template>

      <!-- 地区选择器插槽 -->
      <template slot="regionNameForm" slot-scope="{value, column}">
        <region-cascader
          v-model="form.regionName"
          @change="handleRegionChange"
          :placeholder="column.placeholder || '请选择省/市/区'"
        />
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getList, add, update, remove, getDetail } from '@/api/order/address'
import { mapGetters } from 'vuex'
import RegionCascader from '@/components/region-cascader'

/**
 * 客户地址查询参数
 * @typedef {Object} CustomerAddressQueryParams
 * @property {string} [customerCode] - 客户编码
 * @property {string} [customerName] - 客户名称
 * @property {string} [receiverName] - 收货人姓名
 * @property {string} [receiverPhone] - 收货人电话
 * @property {string} [regionName] - 地区名称
 * @property {number} [isDefault] - 是否默认地址 0-否 1-是
 * @property {number} [isActive] - 状态 0-禁用 1-启用
 */

/**
 * 客户地址表单数据
 * @typedef {Object} CustomerAddressForm
 * @property {number} [id] - 地址ID
 * @property {number} customerId - 客户ID
 * @property {string} customerCode - 客户编码
 * @property {string} customerName - 客户名称
 * @property {string} receiverName - 收货人姓名
 * @property {string} receiverPhone - 收货人电话
 * @property {string} regionCode - 地区编码
 * @property {string} regionName - 地区名称
 * @property {string} detailAddress - 详细地址
 * @property {string} [postalCode] - 邮政编码
 * @property {number} isDefault - 是否默认地址 0-否 1-是
 * @property {number} isActive - 状态 0-禁用 1-启用
 * @property {string} [createTime] - 创建时间
 * @property {string} [updateTime] - 更新时间
 */

/**
 * 客户地址列表项
 * @typedef {Object} CustomerAddressItem
 * @property {number} id - 地址ID
 * @property {number} customerId - 客户ID
 * @property {string} customerCode - 客户编码
 * @property {string} customerName - 客户名称
 * @property {string} receiverName - 收货人姓名
 * @property {string} receiverPhone - 收货人电话
 * @property {string} regionCode - 地区编码
 * @property {string} regionName - 地区名称
 * @property {string} detailAddress - 详细地址
 * @property {string} postalCode - 邮政编码
 * @property {number} isDefault - 是否默认地址 0-否 1-是
 * @property {number} isActive - 状态 0-禁用 1-启用
 * @property {string} createTime - 创建时间
 * @property {string} updateTime - 更新时间
 */

export default {
  name: 'OrderAddress',
  components: {
    RegionCascader
  },
  // 在data中添加regionCascaderValue
  data() {
    return {
      /**
       * 表单数据
       * @type {CustomerAddressForm}
       */
      form: {},
      
      /**
       * 查询条件
       * @type {CustomerAddressQueryParams}
       */
      query: {},
      
      /**
       * 加载状态
       * @type {boolean}
       */
      loading: true,
      
      /**
       * 地区级联选择器的值
       * @type {Array}
       */
      regionCascaderValue: [],
      
      /**
       * 分页信息
       * @type {{pageSize: number, currentPage: number, total: number}}
       */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      
      /**
       * 选中的行数据
       * @type {CustomerAddressItem[]}
       */
      selectionList: [],
      
      /**
       * 表格配置
       * @type {Object}
       */
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        dialogClickModal: false,
        dialogWidth: 900,
        column: [
          {
            label: '客户编码',
            prop: 'customerCode',
            search: true,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入客户编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '客户名称',
            prop: 'customerName',
            search: true,
            width: 200,
            rules: [
              {
                required: true,
                message: '请输入客户名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '收货人姓名',
            prop: 'receiverName',
            search: true,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入收货人姓名',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '收货人电话',
            prop: 'receiverPhone',
            search: true,
            width: 130,
            rules: [
              {
                required: true,
                message: '请输入收货人电话',
                trigger: 'blur'
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '地区',
            prop: 'regionName',
            search: true,
            width: 150,
            formSlot: true, // 启用表单插槽
            rules: [
              {
                required: true,
                message: '请选择地区',
                trigger: 'change'
              }
            ]
          },
          {
            label: '地区编码',
            prop: 'regionCode',
            hide: true,
            rules: [
              {
                required: true,
                message: '请输入地区编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '详细地址',
            prop: 'detailAddress',
            width: 250,
            overHidden: true,
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入详细地址',
                trigger: 'blur'
              },
              {
                min: 5,
                max: 200,
                message: '详细地址长度在5到200个字符',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '邮政编码',
            prop: 'postalCode',
            width: 100,
            rules: [
              {
                pattern: /^\d{6}$/,
                message: '请输入正确的邮政编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '默认地址',
            prop: 'isDefault',
            type: 'select',
            dicData: [
              { label: '否', value: 0 },
              { label: '是', value: 1 }
            ],
            search: true,
            slot: true,
            width: 100,
            value: 0
          },
          {
            label: '状态',
            prop: 'isActive',
            type: 'select',
            dicData: [
              { label: '禁用', value: 0 },
              { label: '启用', value: 1 }
            ],
            search: true,
            slot: true,
            width: 100,
            value: 1
          },
          {
            label: '客户ID',
            prop: 'customerId',
            type: 'number',
            hide: true,
            rules: [
              {
                required: true,
                message: '请输入客户ID',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '创建时间',
            prop: 'createTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            width: 160,
            addDisplay: false,
            editDisplay: false
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            width: 160,
            addDisplay: false,
            editDisplay: false
          }
        ]
      },
      
      /**
       * 表格数据
       * @type {CustomerAddressItem[]}
       */
      data: []
    }
  },
  computed: {
    ...mapGetters(['permission']),
    
    /**
     * 权限配置
     * @returns {{addBtn: boolean, viewBtn: boolean, delBtn: boolean, editBtn: boolean}}
     */
    permissionList() {
      return {
        // addBtn: this.vaildData(this.permission.order_address_add, false),
        // viewBtn: this.vaildData(this.permission.order_address_view, false),
        // delBtn: this.vaildData(this.permission.order_address_delete, false),
        // editBtn: this.vaildData(this.permission.order_address_edit, false)
        addBtn: true,
        viewBtn: true,
        delBtn: false,
        editBtn: true
      }
    },
    
    /**
     * 选中的ID字符串
     * @returns {string} 逗号分隔的ID字符串
     */
    ids() {
      let ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.id)
      })
      return ids.join(',')
    }
  },
  methods: {
    /**
     * 地区选择改变事件
     * @param {Object} data - 选择的地区数据
     */
    handleRegionChange(data) {
      const { regionName } = data
      
      // 只设置regionName，regionCode保持独立
      this.form.regionName = regionName
      
      // 手动触发表单验证
      this.$nextTick(() => {
        if (this.$refs.crud && this.$refs.crud.$refs.dialogForm) {
          this.$refs.crud.$refs.dialogForm.validateField('regionName')
        }
      })
    },

    /**
     * 新增前的回调
     * @param {Function} done - 完成回调
     * @param {string} type - 操作类型
     * @returns {Promise<void>}
     */
    async beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        try {
          const res = await getDetail(this.form.id)
          this.form = res.data.data
          
          // regionName会通过组件的watch自动解析和回显
          // 不需要额外处理regionCascaderValue
        } catch (error) {
          window.console.log(error)
        }
      }
      done()
    },
    
    /**
     * 获取数据
     * @param {Object} page - 分页信息
     * @param {CustomerAddressQueryParams} params - 查询参数
     * @returns {Promise<void>}
     */
    async onLoad(page, params = {}) {
      this.loading = true
      try {
        const res = await getList(page.currentPage, page.pageSize, Object.assign(params, this.query))
        const data = res.data.data
        this.page.total = data.total
        this.data = data.records
        this.loading = false
        this.selectionClear()
      } catch (error) {
        this.loading = false
        window.console.log(error)
      }
    },
    
    /**
     * 新增
     * @param {CustomerAddressForm} row - 表单数据
     * @param {Function} done - 完成回调
     * @param {Function} loading - 加载状态回调
     * @returns {Promise<void>}
     */
    async rowSave(row, done, loading) {
      try {
        await add(row)
        done()
        this.onLoad(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      } catch (error) {
        loading()
        window.console.log(error)
      }
    },
    
    /**
     * 修改
     * @param {CustomerAddressForm} row - 表单数据
     * @param {number} index - 行索引
     * @param {Function} done - 完成回调
     * @param {Function} loading - 加载状态回调
     * @returns {Promise<void>}
     */
    async rowUpdate(row, index, done, loading) {
      try {
        await update(row)
        done()
        this.onLoad(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      } catch (error) {
        loading()
        window.console.log(error)
      }
    },
    
    /**
     * 删除
     * @param {CustomerAddressItem} row - 行数据
     * @param {number} index - 行索引
     * @returns {Promise<void>}
     */
    async rowDel(row, index) {
      try {
        await this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row.id)
        this.onLoad(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      } catch (error) {
        // 用户取消删除或删除失败
        if (error !== 'cancel') {
          window.console.log(error)
        }
      }
    },
    
    /**
     * 批量删除
     * @returns {Promise<void>}
     */
    async handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据')
        return
      }
      try {
        await this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(this.ids)
        this.onLoad(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.$refs.crud.toggleSelection()
      } catch (error) {
        // 用户取消删除或删除失败
        if (error !== 'cancel') {
          window.console.log(error)
        }
      }
    },
    
    /**
     * 搜索回调
     * @param {CustomerAddressQueryParams} params - 搜索参数
     * @param {Function} done - 完成回调
     * @returns {void}
     */
    searchChange(params, done) {
      this.query = params
      this.onLoad(this.page, params)
      done()
    },
    
    /**
     * 搜索重置回调
     * @returns {void}
     */
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    
    /**
     * 选择改变回调
     * @param {CustomerAddressItem[]} list - 选中的数据
     * @returns {void}
     */
    selectionChange(list) {
      this.selectionList = list
    },
    
    /**
     * 清空选择
     * @returns {void}
     */
    selectionClear() {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },
    
    /**
     * 当前页改变回调
     * @param {number} currentPage - 当前页
     * @returns {void}
     */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    
    /**
     * 页大小改变回调
     * @param {number} pageSize - 页大小
     * @returns {void}
     */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    
    /**
     * 刷新回调
     * @returns {void}
     */
    refreshChange() {
      this.onLoad(this.page, this.query)
    }
  }
}
</script>