Переглянути джерело

feat(订单管理): 新增客户地址管理功能

yz 1 місяць тому
батько
коміт
f37510a02e
3 змінених файлів з 688 додано та 1 видалено
  1. 151 0
      src/api/order/address.js
  2. 23 1
      src/router/views/index.js
  3. 514 0
      src/views/order/address/index.vue

+ 151 - 0
src/api/order/address.js

@@ -0,0 +1,151 @@
+import request from '@/router/axios';
+
+/**
+ * 客户地址分页查询
+ * @param {number} current - 当前页码
+ * @param {number} size - 每页大小
+ * @param {CustomerAddressQueryParams} params - 查询参数
+ * @returns {Promise<ApiResponse<PageResult<CustomerAddressItem>>>} 分页查询结果
+ */
+export const getList = (current, size, params) => {
+  return request({
+    url: '/blade-factory/api/factory/address',
+    method: 'get',
+    params: {
+      ...params,
+    //   pages: current,
+      size
+    }
+  })
+}
+
+/**
+ * 添加客户地址
+ * @param {CustomerAddressForm} row - 客户地址表单数据
+ * @returns {Promise<ApiResponse<boolean>>} 添加结果
+ */
+export const add = (row) => {
+  return request({
+    url: '/blade-factory/api/factory/address',
+    method: 'post',
+    data: row
+  })
+}
+
+/**
+ * 修改客户地址
+ * @param {CustomerAddressForm} row - 客户地址表单数据
+ * @returns {Promise<ApiResponse<boolean>>} 修改结果
+ */
+export const update = (row) => {
+  return request({
+    url: '/blade-factory/api/factory/address',
+    method: 'put',
+    data: row
+  })
+}
+
+/**
+ * 删除客户地址
+ * @param {string} ids - 要删除的ID,多个用逗号分隔
+ * @returns {Promise<ApiResponse<boolean>>} 删除结果
+ */
+export const remove = (ids) => {
+  return request({
+    url: '/blade-factory/api/factory/address/remove',
+    method: 'post',
+    params: {
+      ids
+    }
+  })
+}
+
+/**
+ * 获取客户地址详情
+ * @param {string|number} id - 地址ID
+ * @returns {Promise<ApiResponse<CustomerAddressItem>>} 地址详情
+ */
+export const getDetail = (id) => {
+  return request({
+    url: `/blade-factory/api/factory/address/detail`,
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+/**
+ * @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 {string|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-启用
+ */
+
+/**
+ * @typedef {Object} CustomerAddressItem
+ * @property {string} id - 地址ID
+ * @property {string} createUser - 创建用户ID
+ * @property {string} createDept - 创建部门ID
+ * @property {string} createTime - 创建时间
+ * @property {string} updateUser - 更新用户ID
+ * @property {string} updateTime - 更新时间
+ * @property {number} status - 状态
+ * @property {number} isDeleted - 是否删除 0-否 1-是
+ * @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-启用
+ */
+
+/**
+ * @typedef {Object} PageResult
+ * @template T
+ * @property {T[]} records - 数据记录
+ * @property {number} total - 总记录数
+ * @property {number} size - 每页大小
+ * @property {number} current - 当前页码
+ * @property {Array} orders - 排序信息
+ * @property {boolean} optimizeCountSql - 是否优化count查询
+ * @property {boolean} hitCount - 是否命中count缓存
+ * @property {null} countId - count查询ID
+ * @property {null} maxLimit - 最大限制
+ * @property {boolean} searchCount - 是否查询count
+ * @property {number} pages - 总页数
+ */
+
+/**
+ * @typedef {Object} ApiResponse
+ * @template T
+ * @property {number} code - 响应码
+ * @property {boolean} success - 是否成功
+ * @property {T} data - 响应数据
+ * @property {string} msg - 响应消息
+ */

+ 23 - 1
src/router/views/index.js

@@ -53,7 +53,29 @@ export default [{
         },
         component: () => import( /* webpackChunkName: "announcement" */ '@/views/announcement/category')
     }]
-}, {
+},
+{
+    path: '/order',
+    component: Layout,
+    redirect: '/order/address',
+    meta: {
+        icon: 'icon-order',
+        title: '订单管理',
+        keepAlive: true
+    },
+    children: [
+        {
+            path: 'address',
+            name: '客户地址管理',
+            component: () => import('@/views/order/address/index'),
+            meta: {
+                keepAlive: true,
+                isAuth: true
+            }
+        }
+    ]
+},
+{
     path: '/forecast',
     component: Layout,
     redirect: '/forecast/index',

+ 514 - 0
src/views/order/address/index.vue

@@ -0,0 +1,514 @@
+<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>
+    </avue-crud>
+  </basic-container>
+</template>
+
+<script>
+import { getList, add, update, remove, getDetail } from '@/api/order/address'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'OrderAddress',
+  data() {
+    return {
+      /**
+       * 表单数据
+       * @type {CustomerAddressForm}
+       */
+      form: {},
+      
+      /**
+       * 查询条件
+       * @type {CustomerAddressQueryParams}
+       */
+      query: {},
+      
+      /**
+       * 加载状态
+       * @type {boolean}
+       */
+      loading: true,
+      
+      /**
+       * 分页信息
+       * @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,
+            rules: [
+              {
+                required: true,
+                message: '请输入地区名称',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            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 {Function} done - 完成回调
+     * @param {string} type - 操作类型
+     * @returns {void}
+     */
+    beforeOpen(done, type) {
+      if (['edit', 'view'].includes(type)) {
+        getDetail(this.form.id).then(res => {
+          this.form = res.data.data
+        })
+      }
+      done()
+    },
+    
+    /**
+     * 获取数据
+     * @param {Object} page - 分页信息
+     * @param {CustomerAddressQueryParams} params - 查询参数
+     * @returns {void}
+     */
+    onLoad(page, params = {}) {
+      this.loading = true
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        const data = res.data.data
+        this.page.total = data.total
+        this.data = data.records
+        this.loading = false
+        this.selectionClear()
+      })
+    },
+    
+    /**
+     * 新增
+     * @param {CustomerAddressForm} row - 表单数据
+     * @param {Function} done - 完成回调
+     * @param {Function} loading - 加载状态回调
+     * @returns {void}
+     */
+    rowSave(row, done, loading) {
+      add(row).then(() => {
+        done()
+        this.onLoad(this.page)
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+      }, error => {
+        loading()
+        window.console.log(error)
+      })
+    },
+    
+    /**
+     * 修改
+     * @param {CustomerAddressForm} row - 表单数据
+     * @param {number} index - 行索引
+     * @param {Function} done - 完成回调
+     * @param {Function} loading - 加载状态回调
+     * @returns {void}
+     */
+    rowUpdate(row, index, done, loading) {
+      update(row).then(() => {
+        done()
+        this.onLoad(this.page)
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+      }, error => {
+        loading()
+        window.console.log(error)
+      })
+    },
+    
+    /**
+     * 删除
+     * @param {CustomerAddressItem} row - 行数据
+     * @param {number} index - 行索引
+     * @returns {void}
+     */
+    rowDel(row, index) {
+      this.$confirm('确定将选择数据删除?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return remove(row.id)
+      }).then(() => {
+        this.onLoad(this.page)
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+      })
+    },
+    
+    /**
+     * 批量删除
+     * @returns {void}
+     */
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning('请选择至少一条数据')
+        return
+      }
+      this.$confirm('确定将选择数据删除?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return remove(this.ids)
+      }).then(() => {
+        this.onLoad(this.page)
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$refs.crud.toggleSelection()
+      })
+    },
+    
+    /**
+     * 搜索回调
+     * @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>