mall: 订单中心->运费模板(第一版 性能有问题)

src/api/mall/trade/delivery/expressTemplate/index.ts

+import request from '@/config/axios'
+
+export interface DeliveryExpressTemplateVO {
+  id: number
+  name: string
+  chargeMode: number
+  sort: number
+  templateCharge: ExpressTemplateChargeVO[]
+  templateFree: ExpressTemplateFreeVO[]
+}
+
+export declare type ExpressTemplateChargeVO = {
+  areaId: number
+  startCount: number
+  startPrice: number
+  extraCount: number
+  extraPrice: number
+}
+
+export declare type ExpressTemplateFreeVO = {
+  areaId: number
+  freeCount: number
+  freePrice: number
+}
+
+// 查询快递运费模板列表
+export const getDeliveryExpressTemplatePage = async (params: PageParam) => {
+  return await request.get({ url: '/trade/delivery/express-template/page', params })
+}
+
+// 查询快递运费模板详情
+export const getDeliveryExpressTemplate = async (id: number) => {
+  return await request.get({ url: '/trade/delivery/express-template/get?id=' + id })
+}
+
+// 新增快递运费模板
+export const createDeliveryExpressTemplate = async (data: DeliveryExpressTemplateVO) => {
+  return await request.post({ url: '/trade/delivery/express-template/create', data })
+}
+
+// 修改快递运费模板
+export const updateDeliveryExpressTemplate = async (data: DeliveryExpressTemplateVO) => {
+  return await request.put({ url: '/trade/delivery/express-template/update', data })
+}
+
+// 删除快递运费模板
+export const deleteDeliveryExpressTemplate = async (id: number) => {
+  return await request.delete({ url: '/trade/delivery/express-template/delete?id=' + id })
+}
+
+// 导出快递运费模板 Excel
+export const exportDeliveryExpressTemplateApi = async (params) => {
+  return await request.download({ url: '/trade/delivery/express-template/export-excel', params })
+}

src/api/system/area/index.ts

 import request from '@/config/axios'
 
 // 获得地区树
-export const getAreaTree = async () => {
-  return await request.get({ url: '/system/area/tree' })
+export const getAreaTree = async (id: number) => {
+  return await request.get({ url: '/system/area/tree?id=' + id })
 }
 
 // 获得 IP 对应的地区名

src/utils/dict.ts

@@ -148,5 +148,7 @@ export enum DICT_TYPE {
 
   // ========== MALL 模块 ==========
   PRODUCT_UNIT = 'product_unit', // 商品单位
-  PRODUCT_SPU_STATUS = 'product_spu_status' //商品状态
+  PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
+  // ========== MALL 交易模块 ==========
+  EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode' //快递的计费方式
 }

src/views/mall/trade/delivery/express/index.vue

@@ -8,10 +8,10 @@
       :inline="true"
       label-width="100px"
     >
-      <el-form-item label="快递公司编码" prop="code">
+      <el-form-item label="快递公司编号" prop="code">
         <el-input
           v-model="queryParams.code"
-          placeholder="请输快递公司编码"
+          placeholder="请输快递公司编号"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"

src/views/mall/trade/delivery/expressTemplate/DeliveryExpressTemplateForm.vue

+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="85%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="模板名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入模板名称" />
+      </el-form-item>
+      <el-form-item label="计费方式" prop="chargeMode">
+        <el-radio-group v-model="formData.chargeMode" @change="changeChargeMode">
+          <el-radio :label="1">按件数</el-radio>
+          <el-radio :label="2">按重量</el-radio>
+          <el-radio :label="3">按体积</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="运费" prop="templateCharge">
+        <el-table border style="width: 100%" :data="formData.templateCharge">
+          <el-table-column align="center" label="区域">
+            <template #default="{ row }">
+              <!--   @芋艿 TODO 数据多，性能有问题 , 如何解决 -->
+              <el-tree-select
+                v-model="row.areaId"
+                :data="areaList"
+                :props="defaultProps"
+                node-key="id"
+                check-strictly
+                show-checkbox
+                check-on-click-node
+                :render-after-expand="false"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column :label="columnTitle.startCountTitle" prop="startCount">
+            <template #default="{ row }">
+              <el-input-number v-model="row.startCount" :min="1" />
+            </template>
+          </el-table-column>
+          <!--   TODO 元转换 分       -->
+          <el-table-column label="运费(元)" prop="startPrice">
+            <template #default="{ row }">
+              <el-input-number v-model="row.startPrice" :min="1" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="columnTitle.extraCountTitle" prop="extraCount">
+            <template #default="{ row }">
+              <el-input-number v-model="row.extraCount" :min="1" />
+            </template>
+          </el-table-column>
+          <el-table-column label="续费(元)" prop="extraPrice">
+            <template #default="{ row }">
+              <el-input-number v-model="row.extraPrice" :min="1" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button link type="danger" @click="deleteChargeArea(scope.$index)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" plain @click="addChargeArea()">
+          <Icon icon="ep:plus" class="mr-5px" /> 添加区域
+        </el-button>
+      </el-form-item>
+      <el-form-item label="包邮区域" prop="templateFree">
+        <el-table border style="width: 100%" :data="formData.templateFree">
+          <el-table-column label="区域">
+            <template #default="{ row }">
+              <!--   @芋艿 TODO 数据多，性能有问题 , 如何解决 -->
+              <el-tree-select
+                v-model="row.areaId"
+                :data="areaList"
+                :props="defaultProps"
+                node-key="id"
+                check-strictly
+                show-checkbox
+                check-on-click-node
+                :render-after-expand="false"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column :label="columnTitle.freeCountTitle" prop="freeCount">
+            <template #default="{ row }">
+              <el-input-number v-model="row.freeCount" :min="1" />
+            </template>
+          </el-table-column>
+          <el-table-column label="包邮金额（元）" prop="freePrice">
+            <template #default="{ row }">
+              <el-input-number v-model="row.freePrice" :min="1" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button link type="danger" @click="deleteFreeArea(scope.$index)"> 删除 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" plain @click="addFreeArea()">
+          <Icon icon="ep:plus" class="mr-5px" /> 添加区域
+        </el-button>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DeliveryExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
+import { defaultProps } from '@/utils/tree'
+import { getAreaTree } from '@/api/system/area'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: '',
+  chargeMode: 1,
+  sort: 0,
+  templateCharge: [],
+  templateFree: []
+})
+const columnTitle = ref({
+  startCountTitle: '首件',
+  extraCountTitle: '续件',
+  freeCountTitle: '包邮件数'
+})
+const formRules = reactive({
+  name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
+  chargeMode: [{ required: true, message: '配送计费方式不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const areaList = ref([]) //区域数据
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  try {
+    // 修改时，设置数据
+    if (id) {
+      formLoading.value = true
+      formData.value = await DeliveryExpressTemplateApi.getDeliveryExpressTemplate(id)
+    }
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as DeliveryExpressTemplateApi.DeliveryExpressTemplateVO
+    if (formType.value === 'create') {
+      await DeliveryExpressTemplateApi.createDeliveryExpressTemplate(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DeliveryExpressTemplateApi.updateDeliveryExpressTemplate(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    chargeMode: 1,
+    templateCharge: [
+      {
+        areaId: 1,
+        startCount: 2,
+        startPrice: 5,
+        extraCount: 5,
+        extraPrice: 10
+      }
+    ],
+    templateFree: [],
+    sort: 0
+  }
+  columnTitle.value = {
+    startCountTitle: '首件',
+    extraCountTitle: '续件',
+    freeCountTitle: '包邮件数'
+  }
+  formRef.value?.resetFields()
+}
+/** 配送计费方法改变 */
+const changeChargeMode = (chargeMod: number) => {
+  if (chargeMod === 1) {
+    columnTitle.value = {
+      startCountTitle: '首件',
+      extraCountTitle: '续件',
+      freeCountTitle: '包邮件数'
+    }
+  }
+  if (chargeMod === 2) {
+    columnTitle.value = {
+      startCountTitle: '首件重量(kg)',
+      extraCountTitle: '续件重量(kg)',
+      freeCountTitle: '包邮重量(kg)'
+    }
+  }
+  if (chargeMod === 3) {
+    columnTitle.value = {
+      startCountTitle: '首件体积(m³)',
+      extraCountTitle: '续件体积(m³)',
+      freeCountTitle: '包邮体积(m³)'
+    }
+  }
+}
+
+/** 初始化区域数据 */
+const initAreaData = async () => {
+  formLoading.value = true
+  try {
+    const data = await getAreaTree(1)
+    areaList.value = data
+  } finally {
+    formLoading.value = false
+  }
+}
+/** 添加计费区域 */
+const addChargeArea = () => {
+  const data = formData.value
+  data.templateCharge.push({
+    areaId: undefined,
+    startCount: 1,
+    startPrice: 1,
+    extraCount: 1,
+    extraPrice: 1
+  })
+}
+/** 删除计费区域 */
+const deleteChargeArea = (index) => {
+  const data = formData.value
+  data.templateCharge.splice(index, 1)
+}
+/** 添加包邮区域 */
+const addFreeArea = () => {
+  const data = formData.value
+  data.templateFree.push({
+    areaId: undefined,
+    freeCount: 1,
+    freePrice: 1
+  })
+}
+/** 删除包邮区域 */
+const deleteFreeArea = (index) => {
+  const data = formData.value
+  data.templateFree.splice(index, 1)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  initAreaData()
+})
+</script>

src/views/mall/trade/delivery/expressTemplate/index.vue

+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="100px"
+    >
+      <el-form-item label="模板名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入模板名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="计费方式" prop="chargeMode">
+        <el-select
+          v-model="queryParams.chargeMode"
+          placeholder="计费方式"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.EXPRESS_CHARGE_MODE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['trade:delivery:express-template:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" />
+          新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" prop="id" />
+      <el-table-column label="模板名称" prop="name" />
+      <el-table-column label="计费方式" prop="chargeMode" align="center">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.EXPRESS_CHARGE_MODE" :value="scope.row.chargeMode" />
+        </template>
+      </el-table-column>
+      <el-table-column label="排序" prop="sort" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['trade:delivery:express-template:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['trade:delivery:express-template:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DeliveryExpressTemplateForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="DeliveryExpressTemplate">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as DeliveryExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
+import DeliveryExpressTemplateForm from './DeliveryExpressTemplateForm.vue'
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const total = ref(0) // 列表的总页数
+const loading = ref(true) // 列表的加载中
+const list = ref<any[]>([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: '',
+  chargeMode: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DeliveryExpressTemplateApi.getDeliveryExpressTemplatePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DeliveryExpressTemplateApi.deleteDeliveryExpressTemplate(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/system/area/index.vue

@@ -57,7 +57,8 @@ const list = ref([])
  * 获得数据列表
  */
 const getList = async () => {
-  list.value = await AreaApi.getAreaTree()
+  // id == 1 中国
+  list.value = await AreaApi.getAreaTree(1)
 }
 
 /** 添加/修改操作 */