Merge remote-tracking branch 'origin/dev' into dev

src/views/Login/components/MobileForm.vue

@@ -102,6 +102,7 @@ import { usePermissionStore } from '@/store/modules/permission'
 import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+import { ElLoading } from 'element-plus'
 
 defineOptions({ name: 'MobileForm' })
 

src/views/crm/clue/ClueForm.vue

@@ -7,28 +7,6 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="转化状态" prop="transformStatus">
-        <el-radio-group v-model="formData.transformStatus">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="跟进状态" prop="followUpStatus">
-        <el-radio-group v-model="formData.followUpStatus">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
       <el-form-item label="线索名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入线索名称" />
       </el-form-item>
@@ -80,8 +58,6 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  transformStatus: undefined,
-  followUpStatus: undefined,
   name: undefined,
   customerId: undefined,
   contactNextTime: undefined,
@@ -93,10 +69,8 @@ const formData = ref({
   remark: undefined
 })
 const formRules = reactive({
-  transformStatus: [{ required: true, message: '转化状态不能为空', trigger: 'blur' }],
-  followUpStatus: [{ required: true, message: '跟进状态不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '线索名称不能为空', trigger: 'blur' }],
-  customerId: [{ required: true, message: '客户id不能为空', trigger: 'blur' }]
+  customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
@@ -148,8 +122,6 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    transformStatus: undefined,
-    followUpStatus: undefined,
     name: undefined,
     customerId: undefined,
     contactNextTime: undefined,

src/views/crm/clue/index.vue

@@ -8,36 +8,6 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="转化状态" prop="transformStatus">
-        <el-select
-          v-model="queryParams.transformStatus"
-          placeholder="请选择转化状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="跟进状态" prop="followUpStatus">
-        <el-select
-          v-model="queryParams.followUpStatus"
-          placeholder="请选择跟进状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="线索名称" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -47,26 +17,6 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="客户id" prop="customerId">
-        <el-input
-          v-model="queryParams.customerId"
-          placeholder="请输入客户id"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="下次联系时间" prop="contactNextTime">
-        <el-date-picker
-          v-model="queryParams.contactNextTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
       <el-form-item label="电话" prop="telephone">
         <el-input
           v-model="queryParams.telephone"
@@ -85,46 +35,6 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="地址" prop="address">
-        <el-input
-          v-model="queryParams.address"
-          placeholder="请输入地址"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="负责人" prop="ownerUserId">
-        <el-input
-          v-model="queryParams.ownerUserId"
-          placeholder="请输入负责人"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="最后跟进时间" prop="contactLastTime">
-        <el-date-picker
-          v-model="queryParams.contactLastTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </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>
@@ -238,17 +148,9 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  transformStatus: null,
-  followUpStatus: null,
   name: null,
-  customerId: null,
-  contactNextTime: [],
   telephone: null,
-  mobile: null,
-  address: null,
-  ownerUserId: null,
-  contactLastTime: [],
-  createTime: []
+  mobile: null
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中

src/views/crm/contract/index.vue

@@ -166,7 +166,7 @@ import download from '@/utils/download'
 import * as ContractApi from '@/api/crm/contract'
 import ContractForm from './ContractForm.vue'
 
-defineOptions({ name: 'Contract' })
+defineOptions({ name: 'CrmContract' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化

src/views/crm/customer/CustomerForm.vue

@@ -0,0 +1,205 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <!-- TODO @wanwan：name 参数校验，必填 -->
+        <el-form-item label="客户名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入客户名称" />
+        </el-form-item>
+        <el-form-item label="所属行业" prop="industryId">
+          <el-select v-model="formData.industryId" placeholder="请选择所属行业">
+            <el-option
+              v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="客户来源" prop="source">
+          <el-select v-model="formData.source" placeholder="请选择客户来源">
+            <el-option
+              v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户等级" prop="level">
+          <el-select v-model="formData.level" placeholder="请选择客户等级">
+            <el-option
+              v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="手机" prop="mobile">
+          <el-input v-model="formData.mobile" placeholder="请输入手机" />
+        </el-form-item>
+        <el-form-item label="电话" prop="telephone">
+          <el-input v-model="formData.telephone" placeholder="请输入电话" />
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="formData.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="QQ" prop="qq">
+          <el-input v-model="formData.qq" placeholder="请输入QQ" />
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="微信" prop="wechat">
+          <el-input v-model="formData.wechat" placeholder="请输入微信" />
+        </el-form-item>
+        <el-form-item label="网址" prop="website">
+          <el-input v-model="formData.website" placeholder="请输入网址" />
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <!-- TODO @wanwan：地区的多级选择，可以参考 UserForm.vue 的 所在地 areaId -->
+        <el-form-item label="地区编号" prop="areaId">
+          <el-input v-model="formData.areaId" placeholder="请输入地区编号" />
+        </el-form-item>
+        <el-form-item label="详细地址" prop="detailAddress">
+          <el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
+        </el-form-item>
+      </el-row>
+      <!-- TODO @wanwan： 少一个负责人字段，默认先选中自己；可以先参考 TaskAssignRuleForm.vue 的 formData.userIds；注意，新增的时候，可以选择；修改的时候，只展示 -->
+      <el-row>
+        <el-form-item label="下次联系时间" prop="contactNextTime">
+          <el-date-picker
+            v-model="formData.contactNextTime"
+            type="date"
+            value-format="x"
+            placeholder="选择下次联系时间"
+          />
+        </el-form-item>
+      </el-row>
+      <el-form-item label="客户描述" prop="description">
+        <el-input v-model="formData.description" placeholder="请输入客户描述" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" />
+      </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 { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+import * as CustomerApi from '@/api/crm/customer'
+
+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: undefined,
+  mobile: undefined,
+  industryId: undefined,
+  level: undefined,
+  source: undefined,
+  telephone: undefined,
+  website: undefined,
+  qq: undefined,
+  wechat: undefined,
+  email: undefined,
+  description: undefined,
+  remark: undefined,
+  areaId: undefined,
+  detailAddress: undefined,
+  contactNextTime: undefined
+})
+const formRules = reactive({
+  name: [{ require: true, message: '客户名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await CustomerApi.getCustomer(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 unknown as CustomerApi.CustomerVO
+    if (formType.value === 'create') {
+      await CustomerApi.createCustomer(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CustomerApi.updateCustomer(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    mobile: undefined,
+    industryId: undefined,
+    level: undefined,
+    source: undefined,
+    telephone: undefined,
+    website: undefined,
+    qq: undefined,
+    wechat: undefined,
+    email: undefined,
+    description: undefined,
+    remark: undefined,
+    areaId: undefined,
+    detailAddress: undefined,
+    contactNextTime: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/crm/customer/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <!-- TODO @wanwan：看看怎么表单可以对齐一点； -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <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="mobile">
+        <el-input
+          v-model="queryParams.mobile"
+          placeholder="请输入手机"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <!-- TODO @wanwan：筛选字段，加所属行业、客户等级、客户来源 -->
+      <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" @click="openForm('create')" v-hasPermi="['crm:customer:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['crm:customer:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <!-- TODO @wanwan：列表，按照 docs 的再改下 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="客户名称" align="center" prop="name" width="160" />
+      <el-table-column label="所属行业" align="center" prop="industryId" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
+        </template>
+      </el-table-column>
+      <el-table-column label="客户来源" align="center" prop="source" width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
+        </template>
+      </el-table-column>
+      <el-table-column label="客户等级" align="center" prop="level" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
+        </template>
+      </el-table-column>
+      <el-table-column label="手机" align="center" prop="mobile" width="120" />
+      <el-table-column label="详细地址" align="center" prop="detailAddress" width="200" />
+      <!--  TODO @Wanwan 负责人回显，所属部门，创建人    -->
+      <el-table-column label="负责人" align="center" prop="ownerUserId" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="成交状态" align="center" prop="dealStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.dealStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="下次联系时间"
+        align="center"
+        prop="contactNextTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column
+        label="最后跟进时间"
+        align="center"
+        prop="contactLastTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="锁定状态" align="center" prop="lockStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.lockStatus" />
+        </template>
+      </el-table-column>
+      <!--  TODO @wanwan 距进入公海天数    -->
+      <!-- TODO @wanwan：操作要 fixed 再右侧哈； -->
+      <el-table-column label="操作" align="center" width="160">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['crm:customer:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['crm:customer:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CustomerForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as CustomerApi from '@/api/crm/customer'
+import CustomerForm from './CustomerForm.vue'
+
+defineOptions({ name: 'CrmCustomer' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  mobile: null
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CustomerApi.getCustomerPage(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 CustomerApi.deleteCustomer(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await CustomerApi.exportCustomer(queryParams)
+    download.excel(data, '客户.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/mall/promotion/banner/BannerForm.vue

@@ -9,12 +9,12 @@
     >
       <el-row>
         <el-col :span="24">
-          <el-form-item label="Banner标题" prop="title">
-            <el-input v-model="formData.title" placeholder="请输入Banner标题" />
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入 Banner 标题" />
           </el-form-item>
         </el-col>
         <el-col :span="24">
-          <el-form-item label="图片">
+          <el-form-item label="图片" prop="picUrl">
             <UploadImg v-model="formData.picUrl" />
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="24">
-          <el-form-item label="定位" prop="position">
+          <el-form-item label="位置" prop="position">
             <el-radio-group v-model="formData.position">
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_BANNER_POSITION)"
@@ -89,9 +89,11 @@ const formData = ref({
   memo: undefined
 })
 const formRules = reactive({
-  title: [{ required: true, message: 'Banner标题不能为空', trigger: 'blur' }],
-  picUrl: [{ required: true, message: '图片URL不能为空', trigger: 'blur' }],
+  title: [{ required: true, message: 'Banner 标题不能为空', trigger: 'blur' }],
+  picUrl: [{ required: true, message: '图片 URL 不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }],
+  position: [{ required: true, message: '位置不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
   url: [{ required: true, message: '跳转地址不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref

src/views/mall/promotion/diy/page/DiyPageForm.vue

@@ -0,0 +1,114 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="页面名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入页面名称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="预览图" prop="previewImageUrls">
+        <UploadImgs v-model="formData.previewImageUrls" />
+      </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 DiyPageApi from '@/api/mall/promotion/diy/page'
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageForm' })
+
+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: undefined,
+  remark: undefined,
+  previewImageUrls: []
+})
+const formRules = reactive({
+  name: [{ required: true, message: '页面名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const diyPage = await DiyPageApi.getDiyPage(id) // 处理预览图
+      if (diyPage?.previewImageUrls?.length > 0) {
+        diyPage.previewImageUrls = diyPage.previewImageUrls.map((url: string) => {
+          return { url }
+        })
+      }
+      formData.value = diyPage
+    } 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 previewImageUrls = formData.value.previewImageUrls.map((item) => {
+      return item['url'] ? item['url'] : item
+    })
+    const data = { ...formData.value, previewImageUrls } as unknown as DiyPageApi.DiyPageVO
+    if (formType.value === 'create') {
+      await DiyPageApi.createDiyPage(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DiyPageApi.updateDiyPage(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    remark: undefined,
+    previewImageUrls: []
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/mall/promotion/diy/page/decorate.vue

@@ -0,0 +1,99 @@
+<template>
+  <DiyEditor
+    v-if="formData && !formLoading"
+    v-model="formData.property"
+    :title="formData.name"
+    :libs="componentLibs"
+    :show-navigation-bar="true"
+    :show-tab-bar="false"
+    @save="submitForm"
+  />
+</template>
+<script setup lang="ts">
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageDecorate' })
+
+// 组件库
+const componentLibs = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'GridNavigation',
+      'ListNavigation',
+      'Divider',
+      'TitleBar'
+    ]
+  },
+  { name: '图文组件', extended: true, components: ['Carousel'] },
+  { name: '商品组件', extended: true, components: ['ProductCard'] },
+  {
+    name: '会员组件',
+    extended: true,
+    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
+  },
+  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
+] as DiyComponentLibrary[]
+
+const message = useMessage() // 消息弹窗
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref<DiyPageApi.DiyPageVO>()
+const formRef = ref() // 表单 Ref
+
+// 获取详情
+const getPageDetail = async (id: any) => {
+  formLoading.value = true
+  try {
+    formData.value = await DiyPageApi.getDiyPage(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+// 提交表单
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await DiyPageApi.updateDiyPage(unref(formData)!)
+    message.success('保存成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    templateId: undefined,
+    name: '',
+    remark: '',
+    previewImageUrls: [],
+    property: ''
+  } as DiyPageApi.DiyPageVO
+  formRef.value?.resetFields()
+}
+
+/** 初始化 **/
+const { currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+onMounted(() => {
+  resetForm()
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  getPageDetail(route.params.id)
+})
+</script>

src/views/mall/promotion/diy/page/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <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="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </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="['promotion:diy-page:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="预览图" align="center" prop="previewImageUrls">
+        <template #default="scope">
+          <el-image
+            class="h-40px max-w-40px"
+            v-for="(url, index) in scope.row.previewImageUrls"
+            :key="index"
+            :src="url"
+            :preview-src-list="scope.row.previewImageUrls"
+            :initial-index="index"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="页面名称" align="center" prop="name" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handleDecorate(scope.row.id)"
+            v-hasPermi="['promotion:diy-page:update']"
+          >
+            装修
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['promotion:diy-page:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['promotion:diy-page:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DiyPageForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+import DiyPageForm from './DiyPageForm.vue'
+
+/** 装修页面 */
+defineOptions({ name: 'DiyPage' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DiyPageApi.getDiyPagePage(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 DiyPageApi.deleteDiyPage(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 打开装修页面 */
+const { push } = useRouter()
+const handleDecorate = (id: number) => {
+  push({ name: 'DiyPageDecorate', params: { id } })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/mall/promotion/diy/template/DiyTemplateForm.vue

@@ -0,0 +1,115 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="模板名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入模板名称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
+      </el-form-item>
+      <el-form-item label="预览图" prop="previewImageUrls">
+        <UploadImgs v-model="formData.previewImageUrls" />
+      </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 DiyTemplateApi from '@/api/mall/promotion/diy/template'
+
+/** 装修模板表单 */
+defineOptions({ name: 'DiyTemplateForm' })
+
+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: undefined,
+  remark: undefined,
+  previewImageUrls: []
+})
+const formRules = reactive({
+  name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const diyTemplate = await DiyTemplateApi.getDiyTemplate(id)
+      // 处理预览图
+      if (diyTemplate?.previewImageUrls?.length > 0) {
+        diyTemplate.previewImageUrls = diyTemplate.previewImageUrls.map((url: string) => {
+          return { url }
+        })
+      }
+      formData.value = diyTemplate
+    } 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 previewImageUrls = formData.value.previewImageUrls.map((item) => {
+      return item['url'] ? item['url'] : item
+    })
+    const data = { ...formData.value, previewImageUrls } as unknown as DiyTemplateApi.DiyTemplateVO
+    if (formType.value === 'create') {
+      await DiyTemplateApi.createDiyTemplate(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DiyTemplateApi.updateDiyTemplate(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    remark: undefined,
+    previewImageUrls: []
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/mall/promotion/diy/template/decorate.vue

@@ -0,0 +1,134 @@
+<template>
+  <DiyEditor
+    v-if="formData && !formLoading"
+    v-model="formData.property"
+    :title="templateItems[selectedTemplateItem].name"
+    :libs="libs"
+    :show-tab-bar="selectedTemplateItem === 0"
+    :show-navigation-bar="selectedTemplateItem > 0"
+    @save="submitForm"
+  >
+    <template #toolBarLeft>
+      <el-radio-group
+        v-model="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+          <el-radio-button :label="index">
+            <Icon :icon="item.icon" :size="24" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group>
+    </template>
+  </DiyEditor>
+</template>
+<script setup lang="ts">
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+
+/** 装修模板表单 */
+defineOptions({ name: 'DiyTemplateDecorate' })
+
+// 左上角工具栏操作按钮
+const selectedTemplateItem = ref(0)
+const templateItems = reactive([
+  { name: '基础设置', icon: 'ep:iphone' },
+  { name: '首页', icon: 'ep:home-filled' },
+  { name: '我的', icon: 'ep:user-filled' }
+])
+
+const message = useMessage() // 消息弹窗
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref<DiyTemplateApi.DiyTemplateVO>()
+const formRef = ref() // 表单 Ref
+
+// 获取详情
+const getPageDetail = async (id: any) => {
+  formLoading.value = true
+  try {
+    formData.value = await DiyTemplateApi.getDiyTemplate(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+// 模板组件库
+const templateLibs = [] as DiyComponentLibrary[]
+// 页面组件库
+const pageLibs = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'GridNavigation',
+      'ListNavigation',
+      'Divider',
+      'TitleBar'
+    ]
+  },
+  { name: '图文组件', extended: true, components: ['Carousel'] },
+  { name: '商品组件', extended: true, components: ['ProductCard'] },
+  {
+    name: '会员组件',
+    extended: true,
+    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
+  },
+  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
+] as DiyComponentLibrary[]
+// 当前组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs)
+const handleTemplateItemChange = () => {
+  if (selectedTemplateItem.value === 0) {
+    libs.value = templateLibs
+  } else {
+    libs.value = pageLibs
+  }
+}
+
+// 提交表单
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await DiyTemplateApi.updateDiyTemplate(unref(formData)!)
+    message.success('保存成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    used: false,
+    usedTime: undefined,
+    remark: '',
+    previewImageUrls: [],
+    property: ''
+  } as DiyTemplateApi.DiyTemplateVO
+  formRef.value?.resetFields()
+}
+
+/** 初始化 **/
+const { currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+onMounted(() => {
+  resetForm()
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  getPageDetail(route.params.id)
+})
+</script>

src/views/mall/promotion/diy/template/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <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="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </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="['promotion:diy-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" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="预览图" align="center" prop="previewImageUrls">
+        <template #default="scope">
+          <el-image
+            class="h-40px max-w-40px"
+            v-for="(url, index) in scope.row.previewImageUrls"
+            :key="index"
+            :src="url"
+            :preview-src-list="scope.row.previewImageUrls"
+            :initial-index="index"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="模板名称" align="center" prop="name" />
+      <el-table-column label="是否使用" align="center" prop="used">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.used" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="使用时间"
+        align="center"
+        prop="usedTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handleDecorate(scope.row.id)"
+            v-hasPermi="['promotion:diy-template:update']"
+          >
+            装修
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['promotion:diy-template:update']"
+          >
+            编辑
+          </el-button>
+          <template v-if="!scope.row.used">
+            <el-button
+              link
+              type="primary"
+              @click="handleUse(scope.row)"
+              v-hasPermi="['promotion:diy-template:use']"
+            >
+              使用
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['promotion:diy-template:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DiyTemplateForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import DiyTemplateForm from './DiyTemplateForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+
+/** 装修模板 */
+defineOptions({ name: 'DiyTemplate' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DiyTemplateApi.getDiyTemplatePage(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 DiyTemplateApi.deleteDiyTemplate(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 使用模板 */
+const handleUse = async (row: DiyTemplateApi.DiyTemplateVO) => {
+  try {
+    // 使用模板的二次确认
+    await message.confirm(`是否使用模板“${row.name}”?`)
+    // 发起删除
+    await DiyTemplateApi.useDiyTemplate(row.id)
+    message.success('使用成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 打开装修页面 */
+const { push } = useRouter()
+const handleDecorate = (id: number) => {
+  push({ name: 'DiyTemplateDecorate', params: { id } })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/mall/trade/order/detail/index.vue

@@ -16,7 +16,7 @@
       <el-descriptions-item label="付款方式: ">
         <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="formData.payChannelCode!" />
       </el-descriptions-item>
-      <el-descriptions-item label="推广用户: " v-if="formData.brokerageUser">
+      <el-descriptions-item v-if="formData.brokerageUser" label="推广用户: ">
         {{ formData.brokerageUser?.nickname }}
       </el-descriptions-item>
     </el-descriptions>
@@ -26,7 +26,7 @@
       <el-descriptions-item label="订单状态: ">
         <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status!" />
       </el-descriptions-item>
-      <el-descriptions-item label-class-name="no-colon">
+      <el-descriptions-item v-hasPermi="['trade:order:update']" label-class-name="no-colon">
         <el-button
           v-if="formData.status! === TradeOrderStatusEnum.UNPAID.status"
           type="primary"
@@ -150,7 +150,7 @@
       <el-descriptions-item label="联系电话: ">{{ formData.receiverMobile }}</el-descriptions-item>
       <!-- 快递配送 -->
       <div v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type">
-        <el-descriptions-item label="收货地址: " v-if="formData.receiverDetailAddress">
+        <el-descriptions-item v-if="formData.receiverDetailAddress" label="收货地址: ">
           {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
           <el-link
             v-clipboard:copy="formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
@@ -159,17 +159,17 @@
             type="primary"
           />
         </el-descriptions-item>
-        <el-descriptions-item label="物流公司: " v-if="formData.logisticsId">
+        <el-descriptions-item v-if="formData.logisticsId" label="物流公司: ">
           {{ deliveryExpressList.find((item) => item.id === formData.logisticsId)?.name }}
         </el-descriptions-item>
-        <el-descriptions-item label="运单号: " v-if="formData.logisticsId">
+        <el-descriptions-item v-if="formData.logisticsId" label="运单号: ">
           {{ formData.logisticsNo }}
         </el-descriptions-item>
-        <el-descriptions-item label="发货时间: " v-if="formatDate.deliveryTime">
+        <el-descriptions-item v-if="formatDate.deliveryTime" label="发货时间: ">
           {{ formatDate(formData.deliveryTime) }}
         </el-descriptions-item>
         <el-descriptions-item v-for="item in 2" :key="item" label-class-name="no-colon" />
-        <el-descriptions-item label="物流详情: " v-if="expressTrackList.length > 0">
+        <el-descriptions-item v-if="expressTrackList.length > 0" label="物流详情: ">
           <el-timeline>
             <el-timeline-item
               v-for="(express, index) in expressTrackList"
@@ -183,7 +183,7 @@
       </div>
       <!-- 自提门店 -->
       <div v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type">
-        <el-descriptions-item label="自提门店: " v-if="formData.pickUpStoreId">
+        <el-descriptions-item v-if="formData.pickUpStoreId" label="自提门店: ">
           {{ pickUpStore?.name }}
         </el-descriptions-item>
       </div>

src/views/mall/trade/order/index.vue

@@ -125,10 +125,10 @@
         <el-input
           v-show="true"
           v-model="queryParams[queryType.queryParam]"
+          :type="queryType.queryParam === 'userId' ? 'number' : 'text'"
           class="!w-280px"
           clearable
           placeholder="请输入"
-          :type="queryType.queryParam === 'userId' ? 'number' : 'text'"
         >
           <template #prepend>
             <el-select
@@ -163,16 +163,24 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
+    <!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题  -->
+    <el-table v-loading="loading" :data="list" row-key="id">
       <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
         <template #default="{ row }">
-          <!-- TODO 权限后续补齐 -->
           <div class="flex items-center justify-center">
-            <el-button link type="primary" @click="openDetail(row.id)">
+            <el-button
+              v-hasPermi="['trade:order:query']"
+              link
+              type="primary"
+              @click="openDetail(row.id)"
+            >
               <Icon icon="ep:notification" />
               详情
             </el-button>
-            <el-dropdown @command="(command) => handleCommand(command, row)">
+            <el-dropdown
+              v-hasPermi="['trade:order:update']"
+              @command="(command) => handleCommand(command, row)"
+            >
               <el-button link type="primary">
                 <Icon icon="ep:d-arrow-right" />
                 更多

src/views/member/user/detail/UserOrderList.vue

@@ -162,7 +162,8 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
+    <!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题  -->
+    <el-table v-loading="loading" :data="list" row-key="id">
       <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
         <template #default="{ row }">
           <el-button link type="primary" @click="openDetail(row.id)">