Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into feature/iot

src/views/Login/components/RegisterForm.vue

@@ -1,142 +1,279 @@
 <template>
-  <Form
+  <el-form
     v-show="getShow"
-    :rules="rules"
-    :schema="schema"
-    class="w-[100%] dark:(border-1 border-[var(--el-border-color)] border-solid)"
-    hide-required-asterisk
+    ref="formLogin"
+    :model="registerData.registerForm"
+    :rules="registerRules"
+    class="login-form"
     label-position="top"
+    label-width="120px"
     size="large"
-    @register="register"
   >
-    <template #title>
-      <LoginFormTitle style="width: 100%" />
-    </template>
-
-    <template #code="form">
-      <div class="w-[100%] flex">
-        <el-input v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
-      </div>
-    </template>
-
-    <template #register>
-      <div class="w-[100%]">
-        <XButton
-          :loading="loading"
-          :title="t('login.register')"
-          class="w-[100%]"
-          type="primary"
-          @click="loginRegister()"
-        />
-      </div>
-      <div class="mt-15px w-[100%]">
-        <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
-      </div>
-    </template>
-  </Form>
+    <el-row style="margin-right: -10px; margin-left: -10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <LoginFormTitle style="width: 100%" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="registerData.tenantEnable === 'true'" prop="tenantName">
+          <el-input
+            v-model="registerData.registerForm.tenantName"
+            :placeholder="t('login.tenantname')"
+            :prefix-icon="iconHouse"
+            link
+            type="primary"
+            size="large"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerData.registerForm.username"
+            :placeholder="t('login.username')"
+            size="large"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerData.registerForm.nickname"
+            placeholder="昵称"
+            size="large"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="password">
+          <el-input
+            v-model="registerData.registerForm.password"
+            type="password"
+            auto-complete="off"
+            :placeholder="t('login.password')"
+            size="large"
+            :prefix-icon="iconLock"
+            show-password
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="confirmPassword">
+          <el-input
+            v-model="registerData.registerForm.confirmPassword"
+            type="password"
+            size="large"
+            auto-complete="off"
+            :placeholder="t('login.checkPassword')"
+            :prefix-icon="iconLock"
+            show-password
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.register')"
+            class="w-[100%]"
+            type="primary"
+            @click="getCode()"
+          />
+        </el-form-item>
+      </el-col>
+      <Verify
+        ref="verify"
+        :captchaType="captchaType"
+        :imgSize="{ width: '400px', height: '200px' }"
+        mode="pop"
+        @success="handleRegister"
+      />
+    </el-row>
+    <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
+  </el-form>
 </template>
 <script lang="ts" setup>
-import type { FormRules } from 'element-plus'
-
-import { useForm } from '@/hooks/web/useForm'
-import { useValidator } from '@/hooks/web/useValidator'
+import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { useIcon } from '@/hooks/web/useIcon'
+import * as authUtil from '@/utils/auth'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
 import { LoginStateEnum, useLoginState } from './useLogin'
-import { FormSchema } from '@/types/form'
 
 defineOptions({ name: 'RegisterForm' })
 
 const { t } = useI18n()
-const { required } = useValidator()
-const { register, elFormRef } = useForm()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
+const formLogin = ref()
 const { handleBackLogin, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
+const permissionStore = usePermissionStore()
+const redirect = ref<string>('')
+const loginLoading = ref(false)
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
 
-const schema = reactive<FormSchema[]>([
-  {
-    field: 'title',
-    colProps: {
-      span: 24
-    }
-  },
-  {
-    field: 'username',
-    label: t('login.username'),
-    value: '',
-    component: 'Input',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      placeholder: t('login.usernamePlaceholder')
-    }
-  },
-  {
-    field: 'password',
-    label: t('login.password'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
-    }
-  },
-  {
-    field: 'check_password',
-    label: t('login.checkPassword'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
-    }
-  },
-  {
-    field: 'code',
-    label: t('login.code'),
-    colProps: {
-      span: 24
-    }
-  },
-  {
-    field: 'register',
-    colProps: {
-      span: 24
-    }
+const equalToPassword = (rule, value, callback) => {
+  if (registerData.registerForm.password !== value) {
+    callback(new Error('两次输入的密码不一致'))
+  } else {
+    callback()
   }
-])
-
-const rules: FormRules = {
-  username: [required()],
-  password: [required()],
-  check_password: [required()],
-  code: [required()]
 }
 
-const loading = ref(false)
+const registerRules = {
+  tenantName: [
+    { required: true, trigger: 'blur', message: '请输入您所属的租户' },
+    { min: 2, max: 20, message: '租户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
+  ],
+  username: [
+    { required: true, trigger: 'blur', message: '请输入您的账号' },
+    { min: 4, max: 30, message: '用户账号长度必须介于 4 和 30 之间', trigger: 'blur' }
+  ],
+  nickname: [
+    { required: true, trigger: 'blur', message: '请输入您的昵称' },
+    { min: 0, max: 30, message: '昵称长度必须介于 0 和 30 之间', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入您的密码' },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
+  ]
+}
 
-const loginRegister = async () => {
-  const formRef = unref(elFormRef)
-  formRef?.validate(async (valid) => {
-    if (valid) {
-      try {
-        loading.value = true
-      } finally {
-        loading.value = false
-      }
+const registerData = reactive({
+  isShowPassword: false,
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+  registerForm: {
+    tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+    nickname: '',
+    tenantId: 0,
+    username: '',
+    password: '',
+    confirmPassword: '',
+    captchaVerification: ''
+  }
+})
+
+// 提交注册
+const handleRegister = async (params: any) => {
+  loading.value = true
+  try {
+    if (registerData.tenantEnable) {
+      await getTenantId()
+      registerData.registerForm.tenantId = authUtil.getTenantId()
     }
-  })
+
+    if (registerData.captchaEnable) {
+      registerData.registerForm.captchaVerification = params.captchaVerification
+    }
+
+    const res = await LoginApi.register(registerData.registerForm)
+    if (!res) {
+      return
+    }
+    loading.value = ElLoading.service({
+      lock: true,
+      text: '正在加载系统中...',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    authUtil.removeLoginForm()
+
+    authUtil.setToken(res)
+    if (!redirect.value) {
+      redirect.value = '/'
+    }
+    // 判断是否为SSO登录
+    if (redirect.value.indexOf('sso') !== -1) {
+      window.location.href = window.location.href.replace('/login?redirect=', '')
+    } else {
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
+    }
+  } finally {
+    loginLoading.value = false
+    loading.value.close()
+  }
 }
+
+// 获取验证码
+const getCode = async () => {
+  // 情况一，未开启：则直接注册
+  if (registerData.captchaEnable === 'false') {
+    await handleRegister({})
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行注册
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+
+// 获取租户 ID
+const getTenantId = async () => {
+  if (registerData.tenantEnable === 'true') {
+    const res = await LoginApi.getTenantIdByName(registerData.registerForm.tenantName)
+    authUtil.setTenantId(res)
+  }
+}
+
+// 根据域名，获得租户信息
+const getTenantByWebsite = async () => {
+  const website = location.host
+  const res = await LoginApi.getTenantByWebsite(website)
+  if (res) {
+    registerData.registerForm.tenantName = res.name
+    authUtil.setTenantId(res.id)
+  }
+}
+const loading = ref() // ElLoading.service 返回的实例
+
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
+  },
+  {
+    immediate: true
+  }
+)
+onMounted(() => {
+  // getCookie()
+  getTenantByWebsite()
+})
 </script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.login-code {
+  float: right;
+  width: 100%;
+  height: 38px;
+
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+}
+</style>

src/views/bpm/category/CategoryForm.vue

@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import { CommonStatusEnum } from '@/utils/constants'
 
 /** BPM 流程分类 表单 */
 defineOptions({ name: 'CategoryForm' })
@@ -57,7 +58,7 @@ const formData = ref({
   id: undefined,
   name: undefined,
   code: undefined,
-  status: undefined,
+  status: CommonStatusEnum.ENABLE,
   sort: undefined
 })
 const formRules = reactive({
@@ -116,7 +117,7 @@ const resetForm = () => {
     id: undefined,
     name: undefined,
     code: undefined,
-    status: undefined,
+    status: CommonStatusEnum.ENABLE,
     sort: undefined
   }
   formRef.value?.resetFields()

src/views/bpm/definition/index.vue

@@ -70,13 +70,7 @@
 
   <!-- 弹窗：流程模型图的预览 -->
   <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <MyProcessViewer
-      key="designer"
-      v-model="bpmnXml"
-      :value="bpmnXml as any"
-      v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
-    />
+    <MyProcessViewer style="height: 700px" key="designer" :xml="bpmnXml" />
   </Dialog>
 </template>
 
@@ -118,7 +112,7 @@ const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
   if (row.formType == 10) {
     // 设置表单
     setConfAndFields2(formDetailPreview, row.formConf, row.formFields)
@@ -133,13 +127,13 @@ const handleFormDetail = async (row) => {
 
 /** 流程图的详情按钮操作 */
 const bpmnDetailVisible = ref(false)
-const bpmnXml = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const handleBpmnDetail = async (row) => {
-  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
+const bpmnXml = ref('')
+const handleBpmnDetail = async (row: any) => {
+  // 设置可见
+  bpmnXml.value = ''
   bpmnDetailVisible.value = true
+  // 加载 BPMN XML
+  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
 }
 
 /** 初始化 **/

src/views/bpm/form/editor/index.vue

@@ -1,14 +1,18 @@
 <template>
-  <ContentWrap>
+  <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0">
     <!-- 表单设计器 -->
-    <FcDesigner ref="designer" height="780px">
-      <template #handle>
-        <el-button round size="small" type="primary" @click="handleSave">
-          <Icon class="mr-5px" icon="ep:plus" />
-          保存
-        </el-button>
-      </template>
-    </FcDesigner>
+    <div
+      class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
+    >
+      <fc-designer class="my-designer" ref="designer" :config="designerConfig">
+        <template #handle>
+          <el-button size="small" type="success" plain @click="handleSave">
+            <Icon class="mr-5px" icon="ep:plus" />
+            保存
+          </el-button>
+        </template>
+      </fc-designer>
+    </div>
   </ContentWrap>
 
   <!-- 表单保存的弹窗 -->
@@ -55,6 +59,35 @@ const { push, currentRoute } = useRouter() // 路由
 const { query } = useRoute() // 路由信息
 const { delView } = useTagsViewStore() // 视图操作
 
+// 表单设计器配置
+const designerConfig = ref({
+  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
+  autoActive: true, // 是否自动选中拖入的组件
+  useTemplate: false, // 是否生成vue2语法的模板组件
+  formOptions: {
+    form: {
+      labelWidth: '100px' // 设置默认的 label 宽度为 100px
+    }
+  }, // 定义表单配置默认值
+  fieldReadonly: false, // 配置field是否可以编辑
+  hiddenDragMenu: false, // 隐藏拖拽操作按钮
+  hiddenDragBtn: false, // 隐藏拖拽按钮
+  hiddenMenu: [], // 隐藏部分菜单
+  hiddenItem: [], // 隐藏部分组件
+  hiddenItemConfig: {}, // 隐藏组件的部分配置项
+  disabledItemConfig: {}, // 禁用组件的部分配置项
+  showSaveBtn: false, // 是否显示保存按钮
+  showConfig: true, // 是否显示右侧的配置界面
+  showBaseForm: true, // 是否显示组件的基础配置表单
+  showControl: true, // 是否显示组件联动
+  showPropsForm: true, // 是否显示组件的属性配置表单
+  showEventForm: true, // 是否显示组件的事件配置表单
+  showValidateForm: true, // 是否显示组件的验证配置表单
+  showFormConfig: true, // 是否显示表单配置
+  showInputData: true, // 是否显示录入按钮
+  showDevice: true, // 是否显示多端适配选项
+  appendConfigData: [] // 定义渲染规则所需的formData
+})
 const designer = ref() // 表单设计器
 useFormCreateDesigner(designer) // 表单设计器增强
 const dialogVisible = ref(false) // 弹窗是否展示
@@ -119,3 +152,13 @@ onMounted(async () => {
   setConfAndFields(designer, data.conf, data.fields)
 })
 </script>
+
+<style>
+.my-designer {
+  ._fc-l,
+  ._fc-m,
+  ._fc-r {
+    border-top: none;
+  }
+}
+</style>

src/views/bpm/form/index.vue

@@ -143,8 +143,9 @@ const openForm = (id?: number) => {
   const toRouter: { name: string; query?: { id: number } } = {
     name: 'BpmFormEditor'
   }
+  console.log(typeof id)
   // 表单新建的时候id传的是event需要排除
-  if (typeof id === 'number') {
+  if (typeof id === 'number' || typeof id === 'string') {
     toRouter.query = {
       id
     }

src/views/bpm/model/CategoryDraggableModel.vue

@@ -0,0 +1,532 @@
+<template>
+  <div class="flex items-center h-50px">
+    <!-- 头部：分类名 -->
+    <div class="flex items-center">
+      <el-tooltip content="拖动排序" v-if="isCategorySorting">
+        <Icon
+          :size="22"
+          icon="ic:round-drag-indicator"
+          class="ml-10px category-drag-icon cursor-move text-#8a909c"
+        />
+      </el-tooltip>
+      <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
+      <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
+    </div>
+    <!-- 头部：操作 -->
+    <div class="flex-1 flex" v-if="!isCategorySorting">
+      <div
+        v-if="categoryInfo.modelList.length > 0"
+        class="ml-20px flex items-center"
+        :class="[
+          'transition-transform duration-300 cursor-pointer',
+          isExpand ? 'rotate-180' : 'rotate-0'
+        ]"
+        @click="isExpand = !isExpand"
+      >
+        <Icon icon="ep:arrow-down-bold" color="#999" />
+      </div>
+      <div class="ml-auto flex items-center" :class="isModelSorting ? 'mr-15px' : 'mr-45px'">
+        <template v-if="!isModelSorting">
+          <el-button
+            v-if="categoryInfo.modelList.length > 0"
+            link
+            type="info"
+            class="mr-20px"
+            @click.stop="handleModelSort"
+          >
+            <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+            排序
+          </el-button>
+          <el-button v-else link type="info" class="mr-20px" @click.stop="openModelForm('create')">
+            <Icon icon="fa:plus" class="mr-5px" />
+            新建
+          </el-button>
+          <el-dropdown
+            @command="(command) => handleCategoryCommand(command, categoryInfo)"
+            placement="bottom"
+          >
+            <el-button link type="info">
+              <Icon icon="ep:setting" class="mr-5px" />
+              分类
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
+                <el-dropdown-item command="handleDeleteCategory"> 删除该类 </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+        <template v-else>
+          <el-button @click.stop="handleModelSortCancel"> 取 消 </el-button>
+          <el-button type="primary" @click.stop="handleModelSortSubmit"> 保存排序 </el-button>
+        </template>
+      </div>
+    </div>
+  </div>
+  <!-- 模型列表 -->
+  <el-collapse-transition>
+    <div v-show="isExpand">
+      <el-table
+        :class="categoryInfo.name"
+        ref="tableRef"
+        :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
+        :cell-style="{ paddingLeft: '10px' }"
+        :row-style="{ height: '68px' }"
+        :data="modelList"
+        row-key="id"
+      >
+        <el-table-column label="流程名" prop="name" min-width="150">
+          <template #default="scope">
+            <div class="flex items-center">
+              <el-tooltip content="拖动排序" v-if="isModelSorting">
+                <Icon
+                  icon="ic:round-drag-indicator"
+                  class="drag-icon cursor-move text-#8a909c mr-10px"
+                />
+              </el-tooltip>
+              <el-image :src="scope.row.icon" class="h-38px w-38px mr-10px rounded" />
+              {{ scope.row.name }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="可见范围" prop="startUserIds" min-width="100">
+          <template #default="scope">
+            <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+              全部可见
+            </el-text>
+            <el-text v-else-if="scope.row.startUsers.length == 1">
+              {{ scope.row.startUsers[0].nickname }}
+            </el-text>
+            <el-text v-else>
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                placement="top"
+                :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+              >
+                {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+              </el-tooltip>
+            </el-text>
+          </template>
+        </el-table-column>
+        <el-table-column label="表单信息" prop="formType" min-width="200">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.formType === BpmModelFormType.NORMAL"
+              type="primary"
+              link
+              @click="handleFormDetail(scope.row)"
+            >
+              <span>{{ scope.row.formName }}</span>
+            </el-button>
+            <el-button
+              v-else-if="scope.row.formType === BpmModelFormType.CUSTOM"
+              type="primary"
+              link
+              @click="handleFormDetail(scope.row)"
+            >
+              <span>{{ scope.row.formCustomCreatePath }}</span>
+            </el-button>
+            <label v-else>暂无表单</label>
+          </template>
+        </el-table-column>
+        <el-table-column label="最后发布" prop="deploymentTime" min-width="250">
+          <template #default="scope">
+            <div class="flex items-center">
+              <span v-if="scope.row.processDefinition" class="w-150px">
+                {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+              </span>
+              <el-tag v-if="scope.row.processDefinition">
+                v{{ scope.row.processDefinition.version }}
+              </el-tag>
+              <el-tag v-else type="warning">未部署</el-tag>
+              <el-tag
+                v-if="scope.row.processDefinition?.suspensionState === 2"
+                type="warning"
+                class="ml-10px"
+              >
+                已停用
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openModelForm('update', scope.row.id)"
+              v-hasPermi="['bpm:model:update']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              link
+              class="!ml-5px"
+              type="primary"
+              @click="handleDesign(scope.row)"
+              v-hasPermi="['bpm:model:update']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              设计
+            </el-button>
+            <el-button
+              link
+              class="!ml-5px"
+              type="primary"
+              @click="handleDeploy(scope.row)"
+              v-hasPermi="['bpm:model:deploy']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              发布
+            </el-button>
+            <el-dropdown
+              class="!align-middle ml-5px"
+              @command="(command) => handleModelCommand(command, scope.row)"
+              v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+            >
+              <el-button type="primary" link>更多</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    command="handleDefinitionList"
+                    v-if="checkPermi(['bpm:process-definition:query'])"
+                  >
+                    历史
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleChangeState"
+                    v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    type="danger"
+                    command="handleDelete"
+                    v-if="checkPermi(['bpm:model:delete'])"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    删除
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-collapse-transition>
+
+  <!-- 弹窗：重命名分类 -->
+  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameCategoryVisible" width="400">
+    <template #title>
+      <div class="pl-10px font-bold text-18px"> 重命名分类 </div>
+    </template>
+    <div class="px-30px">
+      <el-input v-model="renameCategoryForm.name" />
+    </div>
+    <template #footer>
+      <div class="pr-25px pb-25px">
+        <el-button @click="renameCategoryVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleRenameConfirm">确 定</el-button>
+      </div>
+    </template>
+  </Dialog>
+
+  <!-- 表单弹窗：添加流程模型 -->
+  <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
+</template>
+
+<script lang="ts" setup>
+import ModelForm from './ModelForm.vue'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import Sortable from 'sortablejs'
+import { propTypes } from '@/utils/propTypes'
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { useAppStore } from '@/store/modules/app'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'BpmModel' })
+
+const props = defineProps({
+  categoryInfo: propTypes.object.def([]), // 分类后的数据
+  isCategorySorting: propTypes.bool.def(false) // 是否分类在排序
+})
+const emit = defineEmits(['success'])
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
+
+const isModelSorting = ref(false) // 是否正处于排序状态
+const originalData: any = ref([]) // 原始数据
+const modelList: any = ref([]) // 模型列表
+const isExpand = ref(false) // 是否处于展开状态
+
+/** '更多'操作按钮 */
+const handleModelCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** '分类'操作按钮 */
+const handleCategoryCommand = async (command: string, row: any) => {
+  switch (command) {
+    case 'handleRename':
+      renameCategoryForm.value = await CategoryApi.getCategory(row.id)
+      renameCategoryVisible.value = true
+      break
+    case 'handleDeleteCategory':
+      await handleDeleteCategory()
+      break
+    default:
+      break
+  }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleModelDesign',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row: any) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 处理模型的排序 **/
+const handleModelSort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(props.categoryInfo.modelList)
+  isModelSorting.value = true
+  initSort()
+}
+
+/** 处理模型的排序提交 */
+const handleModelSortSubmit = async () => {
+  // 保存排序
+  const ids = modelList.value.map((item: any) => item.id)
+  await ModelApi.updateModelSortBatch(ids)
+  // 刷新列表
+  isModelSorting.value = false
+  message.success('排序模型成功')
+  emit('success')
+}
+
+/** 处理模型的排序取消 */
+const handleModelSortCancel = () => {
+  // 恢复初始数据
+  modelList.value = cloneDeep(originalData.value)
+  isModelSorting.value = false
+}
+
+/** 创建拖拽实例 */
+const tableRef = ref()
+const initSort = () => {
+  const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
+  Sortable.create(table, {
+    group: 'shared',
+    animation: 150,
+    draggable: '.el-table__row',
+    handle: '.drag-icon',
+    // 结束拖动事件
+    onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
+      if (oldDraggableIndex !== newDraggableIndex) {
+        modelList.value.splice(
+          newDraggableIndex,
+          0,
+          modelList.value.splice(oldDraggableIndex, 1)[0]
+        )
+      }
+    }
+  })
+}
+
+/** 更新 modelList 模型列表 */
+const updateModeList = () => {
+  modelList.value = cloneDeep(props.categoryInfo.modelList)
+  if (props.categoryInfo.modelList.length > 0) {
+    isExpand.value = true
+  }
+}
+
+/** 重命名弹窗确定 */
+const renameCategoryVisible = ref(false)
+const renameCategoryForm = ref({
+  name: ''
+})
+const handleRenameConfirm = async () => {
+  if (renameCategoryForm.value?.name.length === 0) {
+    return message.warning('请输入名称')
+  }
+  // 发起修改
+  await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
+  message.success('重命名成功')
+  // 刷新列表
+  renameCategoryVisible.value = false
+  emit('success')
+}
+
+/** 删除分类 */
+const handleDeleteCategory = async () => {
+  try {
+    if (props.categoryInfo.modelList.length > 0) {
+      return message.warning('该分类下仍有流程定义,不允许删除')
+    }
+    await message.confirm('确认删除分类吗?')
+    // 发起删除
+    await CategoryApi.deleteCategory(props.categoryInfo.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 添加流程模型弹窗 */
+const modelFormRef = ref()
+const openModelForm = (type: string, id?: number) => {
+  modelFormRef.value.open(type, id)
+}
+
+watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
+watch(
+  () => props.isCategorySorting,
+  (val) => {
+    if (val) isExpand.value = false
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss">
+.rename-dialog.el-dialog {
+  padding: 0 !important;
+
+  .el-dialog__header {
+    border-bottom: none;
+  }
+
+  .el-dialog__footer {
+    border-top: none !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+:deep() {
+  .el-table__cell {
+    overflow: hidden;
+    border-bottom: none !important;
+  }
+}
+</style>

src/views/bpm/model/ModelForm.vue

@@ -8,12 +8,7 @@
       label-width="110px"
     >
       <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="formData.key"
-          :disabled="!!formData.id"
-          placeholder="请输入流标标识"
-          style="width: 330px"
-        />
+        <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
         <el-tooltip
           v-if="!formData.id"
           class="item"
@@ -35,7 +30,7 @@
           placeholder="请输入流程名称"
         />
       </el-form-item>
-      <el-form-item v-if="formData.id" label="流程分类" prop="category">
+      <el-form-item label="流程分类" prop="category">
         <el-select
           v-model="formData.category"
           clearable
@@ -50,73 +45,108 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="formData.id" label="流程图标" prop="icon">
-        <UploadImg v-model="formData.icon" :limit="1" height="128px" width="128px" />
+      <el-form-item label="流程图标" prop="icon">
+        <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
       </el-form-item>
       <el-form-item label="流程描述" prop="description">
         <el-input v-model="formData.description" clearable type="textarea" />
       </el-form-item>
-      <div v-if="formData.id">
-        <el-form-item label="表单类型" prop="formType">
-          <el-radio-group v-model="formData.formType">
-            <el-radio
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
-          <el-select v-model="formData.formId" clearable style="width: 100%">
-            <el-option
-              v-for="form in formList"
-              :key="form.id"
-              :label="form.name"
-              :value="form.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单提交路由"
-          prop="formCustomCreatePath"
-        >
-          <el-input
-            v-model="formData.formCustomCreatePath"
-            placeholder="请输入表单提交路由"
-            style="width: 330px"
-          />
-          <el-tooltip
-            class="item"
-            content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
-            effect="light"
-            placement="top"
+      <el-form-item label="流程类型" prop="type">
+        <el-radio-group v-model="formData.type">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
           >
-            <i class="el-icon-question" style="padding-left: 5px"></i>
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单查看地址"
-          prop="formCustomViewPath"
-        >
-          <el-input
-            v-model="formData.formCustomViewPath"
-            placeholder="请输入表单查看的组件地址"
-            style="width: 330px"
-          />
-          <el-tooltip
-            class="item"
-            content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail"
-            effect="light"
-            placement="top"
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="表单类型" prop="formType">
+        <el-radio-group v-model="formData.formType">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
           >
-            <i class="el-icon-question" style="padding-left: 5px"></i>
-          </el-tooltip>
-        </el-form-item>
-      </div>
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
+        <el-select v-model="formData.formId" clearable style="width: 100%">
+          <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.formType === 20"
+        label="表单提交路由"
+        prop="formCustomCreatePath"
+      >
+        <el-input
+          v-model="formData.formCustomCreatePath"
+          placeholder="请输入表单提交路由"
+          style="width: 330px"
+        />
+        <el-tooltip
+          class="item"
+          content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
+          effect="light"
+          placement="top"
+        >
+          <i class="el-icon-question" style="padding-left: 5px"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
+        <el-input
+          v-model="formData.formCustomViewPath"
+          placeholder="请输入表单查看的组件地址"
+          style="width: 330px"
+        />
+        <el-tooltip
+          class="item"
+          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+          effect="light"
+          placement="top"
+        >
+          <i class="el-icon-question" style="padding-left: 5px"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label="是否可见" prop="visible">
+        <el-radio-group v-model="formData.visible">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value as string"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="谁可以发起" prop="startUserIds">
+        <el-select
+          v-model="formData.startUserIds"
+          multiple
+          placeholder="请选择可发起人，默认（不选择）则所有人都可以发起"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程管理员" prop="managerUserIds">
+        <el-select v-model="formData.managerUserIds" multiple placeholder="请选择流程管理员">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -125,45 +155,65 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { propTypes } from '@/utils/propTypes'
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { ElMessageBox } from 'element-plus'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { UserVO } from '@/api/system/user'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
 
 defineOptions({ name: 'ModelForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const userStore = useUserStoreWithOut() // 用户信息缓存
+const props = defineProps({
+  categoryId: propTypes.number
+})
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  formType: 10,
+  id: undefined,
   name: '',
+  key: '',
   category: undefined,
   icon: undefined,
   description: '',
+  type: BpmModelType.BPMN,
+  formType: BpmModelFormType.NORMAL,
   formId: '',
   formCustomCreatePath: '',
-  formCustomViewPath: ''
+  formCustomViewPath: '',
+  visible: true,
+  startUserIds: [],
+  managerUserIds: []
 })
 const formRules = reactive({
-  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
-  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
-  icon: [{ required: true, message: '参数图标不能为空', trigger: 'blur' }],
-  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
+  icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
+  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
+  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const formList = ref([]) // 流程表单的下拉框的数据
 const categoryList = ref([]) // 流程分类列表
+const userList = ref<UserVO[]>([]) // 用户列表
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: string) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
@@ -176,11 +226,18 @@ const open = async (type: string, id?: number) => {
     } finally {
       formLoading.value = false
     }
+  } else {
+    formData.value.managerUserIds.push(userStore.getUser.id)
   }
   // 获得流程表单的下拉框的数据
   formList.value = await FormApi.getFormSimpleList()
   // 查询流程分类列表
   categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 查询用户列表
+  userList.value = await UserApi.getSimpleUserList()
+  if (props.categoryId) {
+    formData.value.category = props.categoryId
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -199,10 +256,9 @@ const submitForm = async () => {
       await ModelApi.createModel(data)
       // 提示，引导用户做后续的操作
       await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
-          '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
-          '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+        '<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
+          '<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
+          '<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
           '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
         '重要提示',
         {
@@ -225,14 +281,20 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    formType: 10,
+    id: undefined,
     name: '',
+    key: '',
     category: undefined,
-    icon: '',
+    icon: undefined,
     description: '',
+    type: BpmModelType.BPMN,
+    formType: BpmModelFormType.NORMAL,
     formId: '',
     formCustomCreatePath: '',
-    formCustomViewPath: ''
+    formCustomViewPath: '',
+    visible: true,
+    startUserIds: [],
+    managerUserIds: []
   }
   formRef.value?.resetFields()
 }

src/views/bpm/model/ModelImportForm.vue

@@ -1,141 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="导入流程" width="400">
-    <div>
-      <el-upload
-        ref="uploadRef"
-        v-model:file-list="fileList"
-        :action="importUrl"
-        :auto-upload="false"
-        :data="formData"
-        :disabled="formLoading"
-        :headers="uploadHeaders"
-        :limit="1"
-        :on-error="submitFormError"
-        :on-exceed="handleExceed"
-        :on-success="submitFormSuccess"
-        accept=".bpmn, .xml"
-        drag
-        name="bpmnFile"
-      >
-        <Icon class="el-icon--upload" icon="ep:upload-filled" />
-        <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
-        <template #tip>
-          <div class="el-upload__tip" style="color: red">
-            提示：仅允许导入“bpm”或“xml”格式文件！
-          </div>
-          <div>
-            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
-              <el-form-item label="流程标识" prop="key">
-                <el-input
-                  v-model="formData.key"
-                  placeholder="请输入流标标识"
-                  style="width: 250px"
-                />
-              </el-form-item>
-              <el-form-item label="流程名称" prop="name">
-                <el-input v-model="formData.name" clearable placeholder="请输入流程名称" />
-              </el-form-item>
-              <el-form-item label="流程描述" prop="description">
-                <el-input v-model="formData.description" clearable type="textarea" />
-              </el-form-item>
-            </el-form>
-          </div>
-        </template>
-      </el-upload>
-    </div>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import { getAccessToken, getTenantId } from '@/utils/auth'
-
-defineOptions({ name: 'ModelImportForm' })
-
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  key: '',
-  name: '',
-  description: ''
-})
-const formRules = reactive({
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-const uploadRef = ref() // 上传 Ref
-const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
-const uploadHeaders = ref() // 上传 Header 头
-const fileList = ref([]) // 文件列表
-
-/** 打开弹窗 */
-const open = async () => {
-  dialogVisible.value = true
-  resetForm()
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  if (fileList.value.length == 0) {
-    message.error('请上传文件')
-    return
-  }
-  // 提交请求
-  uploadHeaders.value = {
-    Authorization: 'Bearer ' + getAccessToken(),
-    'tenant-id': getTenantId()
-  }
-  formLoading.value = true
-  uploadRef.value!.submit()
-}
-
-/** 文件上传成功 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitFormSuccess = async (response: any) => {
-  if (response.code !== 0) {
-    message.error(response.msg)
-    formLoading.value = false
-    return
-  }
-  // 提示成功
-  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
-  dialogVisible.value = false
-  // 发送操作成功的事件
-  emit('success')
-}
-
-/** 上传错误提示 */
-const submitFormError = (): void => {
-  message.error('导入流程失败，请您重新上传！')
-  formLoading.value = false
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  // 重置上传状态和文件
-  formLoading.value = false
-  uploadRef.value?.clearFiles()
-  // 重置表单
-  formData.value = {
-    key: '',
-    name: '',
-    description: ''
-  }
-  formRef.value?.resetFields()
-}
-
-/** 文件数超出提示 */
-const handleExceed = (): void => {
-  message.error('最多只能上传一个文件！')
-}
-</script>

src/views/bpm/model/editor/index.vue

@@ -58,17 +58,17 @@ const initModeler = (item) => {
 }
 
 /** 添加/修改模型 */
-const save = async (bpmnXml) => {
+const save = async (bpmnXml: string) => {
   const data = {
     ...model.value,
     bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
   } as unknown as ModelApi.ModelVO
   // 提交
   if (data.id) {
-    await ModelApi.updateModel(data)
+    await ModelApi.updateModelBpmn(data)
     message.success('修改成功')
   } else {
-    await ModelApi.createModel(data)
+    await ModelApi.updateModelBpmn(data)
     message.success('新增成功')
   }
   // 跳转回去

src/views/bpm/model/index.vue

@@ -1,415 +1,221 @@
 <template>
-  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
-  <doc-alert
-    title="流程设计器（钉钉、飞书）"
-    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
-  />
-  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
-  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
-
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <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="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </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="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建流程
-        </el-button>
-        <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
-          <Icon icon="ep:upload" class="mr-5px" /> 导入流程
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+    <div class="flex justify-between pl-20px items-center">
+      <h3 class="font-extrabold">流程模型</h3>
+      <!-- 搜索工作栏 -->
+      <el-form
+        v-if="!isCategorySorting"
+        class="-mb-15px flex mr-10px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+        @submit.prevent
+      >
+        <el-form-item prop="name" class="ml-auto">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="搜索流程"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          >
+            <template #prefix>
+              <Icon icon="ep:search" class="mx-10px" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <!-- 右上角：新建模型、更多操作 -->
+        <el-form-item>
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新建模型
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
+            <el-button class="w-30px" plain>
+              <Icon icon="ep:setting" />
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleCategoryAdd">
+                  <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
+                  新建分类
+                </el-dropdown-item>
+                <el-dropdown-item command="handleCategorySort">
+                  <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
+                  分类排序
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-form-item>
+      </el-form>
+      <div class="mr-20px" v-else>
+        <el-button @click="handleCategorySortCancel"> 取 消 </el-button>
+        <el-button type="primary" @click="handleCategorySortSubmit"> 保存排序 </el-button>
+      </div>
+    </div>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程标识" align="center" prop="key" width="200" />
-      <el-table-column label="流程名称" align="center" prop="name" width="200">
-        <template #default="scope">
-          <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
-            <span>{{ scope.row.name }}</span>
-          </el-button>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程图标" align="center" prop="icon" width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="w-32px h-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
+    <el-divider />
+
+    <!-- 按照分类，展示其所属的模型列表 -->
+    <div class="px-15px">
+      <draggable
+        :disabled="!isCategorySorting"
+        v-model="categoryGroup"
+        item-key="id"
+        :animation="400"
+      >
+        <template #item="{ element }">
+          <ContentWrap
+            class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
+            v-loading="loading"
+            :body-style="{ padding: 0 }"
+            :key="element.id"
           >
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="最新部署的流程定义" align="center">
-        <el-table-column
-          label="流程版本"
-          align="center"
-          prop="processDefinition.version"
-          width="100"
-        >
-          <template #default="scope">
-            <el-tag v-if="scope.row.processDefinition">
-              v{{ scope.row.processDefinition.version }}
-            </el-tag>
-            <el-tag v-else type="warning">未部署</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="激活状态"
-          align="center"
-          prop="processDefinition.version"
-          width="85"
-        >
-          <template #default="scope">
-            <el-switch
-              v-if="scope.row.processDefinition"
-              v-model="scope.row.processDefinition.suspensionState"
-              :active-value="1"
-              :inactive-value="2"
-              @change="handleChangeState(scope.row)"
+            <CategoryDraggableModel
+              :isCategorySorting="isCategorySorting"
+              :categoryInfo="element"
+              @success="getList"
             />
-          </template>
-        </el-table-column>
-        <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
-          <template #default="scope">
-            <span v-if="scope.row.processDefinition">
-              {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-            </span>
-          </template>
-        </el-table-column>
-      </el-table-column>
-      <el-table-column label="操作" align="center" min-width="240" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-          >
-            修改流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-          >
-            设计流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleSimpleDesign(scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-          >
-            仿钉钉设计流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-          >
-            发布流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            v-hasPermi="['bpm:process-definition:query']"
-            @click="handleDefinitionList(scope.row)"
-          >
-            流程定义
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['bpm:model:delete']"
-          >
-            删除
-          </el-button>
+          </ContentWrap>
         </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+      </draggable>
+    </div>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
   <ModelForm ref="formRef" @success="getList" />
-
-  <!-- 表单弹窗：导入流程 -->
-  <ModelImportForm ref="importFormRef" @success="getList" />
-
+  <!-- 表单弹窗：添加分类 -->
+  <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
   </Dialog>
-
-  <!-- 弹窗：流程模型图的预览 -->
-  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <MyProcessViewer
-      key="designer"
-      v-model="bpmnXML"
-      :value="bpmnXML as any"
-      v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
-    />
-  </Dialog>
 </template>
 
 <script lang="ts" setup>
-import { dateFormatter, formatDate } from '@/utils/formatTime'
-import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import ModelForm from './ModelForm.vue'
-import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
+import draggable from 'vuedraggable'
 import { CategoryApi } from '@/api/bpm/category'
+import * as ModelApi from '@/api/bpm/model'
+import ModelForm from './ModelForm.vue'
+import CategoryForm from '../category/CategoryForm.vue'
+import { cloneDeep } from 'lodash-es'
+import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
+const isCategorySorting = ref(false) // 是否 category 正处于排序状态
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
+  name: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ModelApi.getModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
+const categoryGroup: any = ref([]) // 按照 category 分组的数据
+const originalData: any = ref([]) // 原始数据
 
 /** 搜索按钮操作 */
 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 importFormRef = ref()
-const openImportForm = () => {
-  importFormRef.value.open()
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 更新状态操作 */
-const handleChangeState = async (row) => {
-  const state = row.processDefinition.suspensionState
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    const statusState = state === 1 ? '激活' : '挂起'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, state)
-    // 刷新列表
-    await getList()
-  } catch {
-    // 取消后，进行恢复按钮
-    row.processDefinition.suspensionState = state === 1 ? 2 : 1
-  }
-}
-
-/** 设计流程 */
-const handleDesign = (row) => {
-  push({
-    name: 'BpmModelEditor',
-    query: {
-      modelId: row.id
-    }
-  })
-}
-
-const handleSimpleDesign = (row) => {
-  push({
-    name: 'SimpleWorkflowDesignEditor',
-    query: {
-      modelId: row.id
-    }
-  })
-}
-
-/** 发布流程 */
-const handleDeploy = async (row) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
-}
-
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (row) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
+
+/** 右上角设置按钮 */
+const handleCommand = (command: string) => {
+  switch (command) {
+    case 'handleCategoryAdd':
+      handleCategoryAdd()
+      break
+    case 'handleCategorySort':
+      handleCategorySort()
+      break
+    default:
+      break
   }
 }
 
-/** 流程图的详情按钮操作 */
-const bpmnDetailVisible = ref(false)
-const bpmnXML = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const handleBpmnDetail = async (row) => {
-  const data = await ModelApi.getModel(row.id)
-  bpmnXML.value = data.bpmnXml || ''
-  bpmnDetailVisible.value = true
+/** 新建分类 */
+const categoryFormRef = ref()
+const handleCategoryAdd = () => {
+  categoryFormRef.value.open('create')
+}
+
+/** 分类排序的提交 */
+const handleCategorySort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(categoryGroup.value)
+  isCategorySorting.value = true
+}
+
+/** 分类排序的取消 */
+const handleCategorySortCancel = () => {
+  // 恢复初始数据
+  categoryGroup.value = cloneDeep(originalData.value)
+  isCategorySorting.value = false
+}
+
+/** 分类排序的保存 */
+const handleCategorySortSubmit = async () => {
+  // 保存排序
+  const ids = categoryGroup.value.map((item: any) => item.id)
+  await CategoryApi.updateCategorySortBatch(ids)
+  // 刷新列表
+  isCategorySorting.value = false
+  message.success('排序分类成功')
+  await getList()
+}
+
+/** 加载数据 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 查询模型 + 分裂的列表
+    const modelList = await ModelApi.getModelList(queryParams.name)
+    const categoryList = await CategoryApi.getCategorySimpleList()
+    // 按照 category 聚合
+    // 注意：必须一次性赋值给 categoryGroup，否则每次操作后，列表会重新渲染，滚动条的位置会偏离！！！
+    categoryGroup.value = categoryList.map((category: any) => ({
+      ...category,
+      modelList: modelList.filter((model: any) => model.categoryName == category.name)
+    }))
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 初始化 **/
-onMounted(async () => {
-  await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
+onMounted(() => {
+  getList()
 })
 </script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-table--fit .el-table__inner-wrapper:before {
+    height: 0;
+  }
+  .el-card {
+    border-radius: 8px;
+  }
+  .el-form--inline .el-form-item {
+    margin-right: 10px;
+  }
+  .el-divider--horizontal {
+    margin-top: 6px;
+  }
+}
+</style>

src/views/bpm/model/index_old.vue

@@ -0,0 +1,404 @@
+<template>
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <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="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </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="['bpm:model: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="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.formType === 10"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button
+            v-else-if="scope.row.formType === 20"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition?.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDesign(scope.row)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            设计
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDeploy(scope.row)"
+            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            发布
+          </el-button>
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+          >
+            <el-button type="primary" link>更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
+                >
+                  历史
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改流程 -->
+  <ModelForm ref="formRef" @success="getList" />
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import ModelForm from './ModelForm.vue'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+defineOptions({ name: 'BpmModel' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelList(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 handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleModelDesign',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+})
+</script>

src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue

@@ -0,0 +1,259 @@
+<template>
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }">
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
+        <div class="text-#878c93 h-15px">流程：{{ selectProcessDefinition.name }}</div>
+        <el-divider class="!my-8px" />
+
+        <!-- 中间主要内容 tab 栏 -->
+        <el-tabs v-model="activeTab">
+          <!-- 表单信息 -->
+          <el-tab-pane label="表单填写" name="form">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <el-row>
+                  <el-col :span="17">
+                    <form-create
+                      :rule="detailForm.rule"
+                      v-model:api="fApi"
+                      v-model="detailForm.value"
+                      :option="detailForm.option"
+                      @submit="submitForm"
+                    />
+                  </el-col>
+
+                  <el-col :span="6" :offset="1">
+                    <!-- 流程时间线 -->
+                    <ProcessInstanceTimeline
+                      ref="timelineRef"
+                      :activity-nodes="activityNodes"
+                      :show-status-icon="false"
+                      @select-user-confirm="selectUserConfirm"
+                    />
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
+          <!-- 流程图 -->
+          <el-tab-pane label="流程图" name="diagram">
+            <div class="form-scroll-area">
+              <!-- BPMN 流程图预览 -->
+              <ProcessInstanceBpmnViewer
+                :bpmn-xml="bpmnXML"
+                v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
+              />
+
+              <!-- Simple 流程图预览 -->
+              <ProcessInstanceSimpleViewer
+                :simple-json="simpleJson"
+                v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
+              />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <!-- 底部操作栏 -->
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
+          <!-- 操作栏按钮 -->
+          <div
+            v-if="activeTab === 'form'"
+            class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+          >
+            <el-button plain type="success" @click="submitForm">
+              <Icon icon="ep:select" />&nbsp; 发起
+            </el-button>
+            <el-button plain type="danger" @click="handleCancel">
+              <Icon icon="ep:close" />&nbsp; 取消
+            </el-button>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelType } from '@/utils/constants'
+import { CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
+import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as DefinitionApi from '@/api/bpm/definition'
+import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
+
+defineOptions({ name: 'ProcessDefinitionDetail' })
+const props = defineProps<{
+  selectProcessDefinition: any
+}>()
+const emit = defineEmits(['cancel'])
+
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息弹窗
+const { delView } = useTagsViewStore() // 视图操作
+
+const detailForm: any = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程表单详情
+const fApi = ref<ApiAttrs>()
+// 指定审批人
+const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人或抄送人的任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const bpmnXML: any = ref(null) // BPMN 数据
+const simpleJson = ref<string | undefined>() // Simple 设计器数据 json 格式
+
+const activeTab = ref('form') // 当前的 Tab
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
+
+/** 设置表单信息、获取流程图数据 **/
+const initProcessInfo = async (row: any, formVariables?: any) => {
+  // 重置指定审批人
+  startUserSelectTasks.value = []
+  startUserSelectAssignees.value = {}
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+    for (const key in formVariables) {
+      if (!allowedFields.includes(key)) {
+        delete formVariables[key]
+      }
+    }
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+    await nextTick()
+    fApi.value?.btn.show(false) // 隐藏提交按钮
+    // 获取流程审批信息
+    await getApprovalDetail(row)
+
+    // 加载流程图
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml
+      simpleJson.value = processDefinitionDetail.simpleModel
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 获取审批详情 */
+const getApprovalDetail = async (row: any) => {
+  try {
+    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id })
+    if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+
+    // 获取发起人自选的任务
+    startUserSelectTasks.value = data.activityNodes?.filter(
+      (node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
+    )
+    if (startUserSelectTasks.value?.length > 0) {
+      for (const node of startUserSelectTasks.value) {
+        startUserSelectAssignees.value[node.id] = []
+      }
+    }
+
+    // 获取审批节点，显示 Timeline 的数据
+    activityNodes.value = data.activityNodes
+  } finally {
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async () => {
+  if (!fApi.value || !props.selectProcessDefinition) {
+    return
+  }
+  // 如果有指定审批人，需要校验
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const userTask of startUserSelectTasks.value) {
+      if (
+        Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
+        startUserSelectAssignees.value[userTask.id].length === 0
+      )
+        return message.warning(`请选择${userTask.name}的候选人`)
+    }
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstance({
+      processDefinitionId: props.selectProcessDefinition.id,
+      variables: detailForm.value.value,
+      startUserSelectAssignees: startUserSelectAssignees.value
+    })
+    // 提示
+    message.success('发起流程成功')
+    // 跳转回去
+    delView(unref(currentRoute))
+    await push({
+      name: 'BpmProcessInstanceMy'
+    })
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
+
+/** 取消发起审批 */
+const handleCancel = () => {
+  emit('cancel')
+}
+
+/** 选择发起人 */
+const selectUserConfirm = (id: string, userList: any[]) => {
+  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id)
+}
+
+defineExpose({ initProcessInfo })
+</script>
+
+<style lang="scss" scoped>
+$wrap-padding-height: 20px;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 105px;
+
+.processInstance-wrap-main {
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  overflow: auto;
+
+  .form-scroll-area {
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    overflow: auto;
+  }
+}
+
+.form-box {
+  :deep(.el-card) {
+    border: none;
+  }
+}
+</style>

src/views/bpm/processInstance/create/index.vue

@@ -1,133 +1,115 @@
 <template>
-  <doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
-
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
-    <el-tabs tab-position="left" v-model="categoryActive">
-      <el-tab-pane
-        :label="category.name"
-        :name="category.code"
-        :key="category.code"
-        v-for="category in categoryList"
-      >
-        <el-row :gutter="20">
-          <el-col
-            :lg="6"
-            :sm="12"
-            :xs="24"
-            v-for="definition in categoryProcessDefinitionList"
-            :key="definition.id"
-          >
-            <el-card
-              shadow="hover"
-              class="mb-20px cursor-pointer"
-              @click="handleSelect(definition)"
+  <template v-if="!selectProcessDefinition">
+    <el-input
+      v-model="searchName"
+      class="!w-50% mb-15px"
+      placeholder="请输入流程名称"
+      clearable
+      @input="handleQuery"
+      @clear="handleQuery"
+    >
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+    <ContentWrap
+      :class="{ 'process-definition-container': filteredProcessDefinitionList?.length }"
+      class="position-relative pb-20px h-700px"
+      v-loading="loading"
+    >
+      <el-row v-if="filteredProcessDefinitionList?.length" :gutter="20" class="!flex-nowrap">
+        <el-col :span="5">
+          <div class="flex flex-col">
+            <div
+              v-for="category in availableCategories"
+              :key="category.code"
+              class="flex items-center p-10px cursor-pointer text-14px rounded-md"
+              :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
+              @click="handleCategoryClick(category)"
             >
-              <template #default>
-                <div class="flex">
-                  <el-image :src="definition.icon" class="w-32px h-32px" />
-                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
-                </div>
-              </template>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
+              {{ category.name }}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="19">
+          <el-scrollbar ref="scrollWrapper" height="700" @scroll="handleScroll">
+            <div
+              class="mb-20px pl-10px"
+              v-for="(definitions, categoryCode) in processDefinitionGroup"
+              :key="categoryCode"
+              :ref="`category-${categoryCode}`"
+            >
+              <h3 class="text-18px font-bold mb-10px mt-5px">
+                {{ getCategoryName(categoryCode as any) }}
+              </h3>
+              <div class="grid grid-cols-3 gap3">
+                <el-tooltip
+                  v-for="definition in definitions"
+                  :key="definition.id"
+                  :content="definition.description"
+                  :disabled="!definition.description || definition.description.trim().length === 0"
+                  placement="top"
+                >
+                  <el-card
+                    shadow="hover"
+                    class="cursor-pointer definition-item-card"
+                    @click="handleSelect(definition)"
+                  >
+                    <template #default>
+                      <div class="flex">
+                        <el-image :src="definition.icon" class="w-32px h-32px" />
+                        <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                      </div>
+                    </template>
+                  </el-card>
+                </el-tooltip>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-col>
+      </el-row>
+      <el-empty class="!py-200px" :image-size="200" description="没有找到搜索结果" v-else />
+    </ContentWrap>
+  </template>
 
   <!-- 第二步，填写表单，进行流程的提交 -->
-  <ContentWrap v-else>
-    <el-card class="box-card">
-      <div class="clearfix">
-        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
-        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
-          <Icon icon="ep:delete" /> 选择其它流程
-        </el-button>
-      </div>
-      <el-col :span="16" :offset="6" style="margin-top: 20px">
-        <form-create
-          :rule="detailForm.rule"
-          v-model:api="fApi"
-          v-model="detailForm.value"
-          :option="detailForm.option"
-          @submit="submitForm"
-        >
-          <template #type-startUserSelect>
-            <el-col :span="24">
-              <el-card class="mb-10px">
-                <template #header>指定审批人</template>
-                <el-form
-                  :model="startUserSelectAssignees"
-                  :rules="startUserSelectAssigneesFormRules"
-                  ref="startUserSelectAssigneesFormRef"
-                >
-                  <el-form-item
-                    v-for="userTask in startUserSelectTasks"
-                    :key="userTask.id"
-                    :label="`任务【${userTask.name}】`"
-                    :prop="userTask.id"
-                  >
-                    <el-select
-                      v-model="startUserSelectAssignees[userTask.id]"
-                      multiple
-                      placeholder="请选择审批人"
-                    >
-                      <el-option
-                        v-for="user in userList"
-                        :key="user.id"
-                        :label="user.nickname"
-                        :value="user.id"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-form>
-              </el-card>
-            </el-col>
-          </template>
-        </form-create>
-      </el-col>
-    </el-card>
-    <!-- 流程图预览 -->
-    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
-  </ContentWrap>
+  <ProcessDefinitionDetail
+    v-else
+    ref="processDefinitionDetailRef"
+    :selectProcessDefinition="selectProcessDefinition"
+    @cancel="selectProcessDefinition = undefined"
+  />
 </template>
+
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
-import { CategoryApi } from '@/api/bpm/category'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import * as UserApi from '@/api/system/user'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
+import { groupBy } from 'lodash-es'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
+const { proxy } = getCurrentInstance() as any
 const route = useRoute() // 路由
-const { push, currentRoute } = useRouter() // 路由
 const message = useMessage() // 消息
-const { delView } = useTagsViewStore() // 视图操作
 
-const processInstanceId = route.query.processInstanceId
+const searchName = ref('') // 当前搜索关键字
+const processInstanceId: any = route.query.processInstanceId // 流程实例编号。场景：重新发起时
 const loading = ref(true) // 加载中
-const categoryList = ref([]) // 分类的列表
-const categoryActive = ref('') // 选中的分类
+const categoryList: any = ref([]) // 分类的列表
+const categoryActive: any = ref({}) // 选中的分类
 const processDefinitionList = ref([]) // 流程定义的列表
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    // 流程分类
-    categoryList.value = await CategoryApi.getCategorySimpleList()
-    if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0].code
-    }
-    // 流程定义
-    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
-      suspensionState: 1
-    })
+    // 所有流程分类数据
+    await getCategoryList()
+    // 所有流程定义数据
+    await getProcessDefinitionList()
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
@@ -137,7 +119,7 @@ const getList = async () => {
         return
       }
       const processDefinition = processDefinitionList.value.find(
-        (item) => item.key == processInstance.processDefinition?.key
+        (item: any) => item.key == processInstance.processDefinition?.key
       )
       if (!processDefinition) {
         message.error('重新发起流程失败，原因：流程定义不存在')
@@ -150,108 +132,168 @@ const getList = async () => {
   }
 }
 
-/** 选中分类对应的流程定义列表 */
-const categoryProcessDefinitionList = computed(() => {
-  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+/** 获取所有流程分类数据 */
+const getCategoryList = async () => {
+  try {
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+  } finally {
+  }
+}
+
+/** 获取所有流程定义数据 */
+const getProcessDefinitionList = async () => {
+  try {
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+    // 初始化过滤列表为全部流程定义
+    filteredProcessDefinitionList.value = processDefinitionList.value
+
+    // 在获取完所有数据后，设置第一个有效分类为激活状态
+    if (availableCategories.value.length > 0 && !categoryActive.value?.code) {
+      categoryActive.value = availableCategories.value[0]
+    }
+  } finally {
+  }
+}
+
+/** 搜索流程 */
+const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
+const handleQuery = () => {
+  if (searchName.value.trim()) {
+    // 如果有搜索关键字，进行过滤
+    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+      (definition: any) => definition.name.toLowerCase().includes(searchName.value.toLowerCase()) // 假设搜索依据是流程定义的名称
+    )
+  } else {
+    // 如果没有搜索关键字，恢复所有数据
+    filteredProcessDefinitionList.value = processDefinitionList.value
+  }
+}
+
+/** 流程定义的分组 */
+const processDefinitionGroup: any = computed(() => {
+  if (!processDefinitionList.value?.length) {
+    return {}
+  }
+
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
+  // 按照 categoryList 的顺序重新组织数据
+  const orderedGroup = {}
+  categoryList.value.forEach((category: any) => {
+    if (grouped[category.code]) {
+      orderedGroup[category.code] = grouped[category.code]
+    }
+  })
+  return orderedGroup
 })
 
-// ========== 表单相关 ==========
-const fApi = ref<ApiAttrs>()
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-}) // 流程表单详情
-const selectProcessDefinition = ref() // 选择的流程定义
+/** 左侧分类切换 */
+const handleCategoryClick = (category: any) => {
+  categoryActive.value = category
+  const categoryRef = proxy.$refs[`category-${category.code}`] // 获取点击分类对应的 DOM 元素
+  if (categoryRef?.length) {
+    const scrollWrapper = proxy.$refs.scrollWrapper // 获取右侧滚动容器
+    const categoryOffsetTop = categoryRef[0].offsetTop
 
-// 指定审批人
-const bpmnXML = ref(null) // BPMN 数据
-const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
-const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
-const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
-const userList = ref<any[]>([]) // 用户列表
+    // 滚动到对应位置
+    scrollWrapper.scrollTo({ top: categoryOffsetTop, behavior: 'smooth' })
+  }
+}
+
+/** 通过分类 code 获取对应的名称 */
+const getCategoryName = (categoryCode: string) => {
+  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)?.name
+}
+
+// ========== 表单相关 ==========
+const selectProcessDefinition = ref() // 选择的流程定义
+const processDefinitionDetailRef = ref()
 
 /** 处理选择流程的按钮操作 **/
-const handleSelect = async (row, formVariables) => {
+const handleSelect = async (row, formVariables?) => {
   // 设置选择的流程
   selectProcessDefinition.value = row
+  // 初始化流程定义详情
+  await nextTick()
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
+}
 
-  // 重置指定审批人
-  startUserSelectTasks.value = []
-  startUserSelectAssignees.value = {}
-  startUserSelectAssigneesFormRules.value = {}
+/** 处理滚动事件，和左侧分类联动 */
+const handleScroll = (e: any) => {
+  // 直接使用事件对象获取滚动位置
+  const scrollTop = e.scrollTop
 
-  // 情况一：流程表单
-  if (row.formType == 10) {
-    // 设置表单
-    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-    // 加载流程图
-    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
-    if (processDefinitionDetail) {
-      bpmnXML.value = processDefinitionDetail.bpmnXml
-      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
-
-      // 设置指定审批人
-      if (startUserSelectTasks.value?.length > 0) {
-        detailForm.value.rule.push({
-          type: 'startUserSelect',
-          props: {
-            title: '指定审批人'
-          }
-        })
-        // 设置校验规则
-        for (const userTask of startUserSelectTasks.value) {
-          startUserSelectAssignees.value[userTask.id] = []
-          startUserSelectAssigneesFormRules.value[userTask.id] = [
-            { required: true, message: '请选择审批人', trigger: 'blur' }
-          ]
+  // 获取所有分类区域的位置信息
+  const categoryPositions = categoryList.value
+    .map((category: CategoryVO) => {
+      const categoryRef = proxy.$refs[`category-${category.code}`]
+      if (categoryRef?.[0]) {
+        return {
+          code: category.code,
+          offsetTop: categoryRef[0].offsetTop,
+          height: categoryRef[0].offsetHeight
         }
-        // 加载用户列表
-        userList.value = await UserApi.getSimpleUserList()
       }
+      return null
+    })
+    .filter(Boolean)
+
+  // 查找当前滚动位置对应的分类
+  let currentCategory = categoryPositions[0]
+  for (const position of categoryPositions) {
+    // 为了更好的用户体验，可以添加一个缓冲区域（比如 50px）
+    if (scrollTop >= position.offsetTop - 50) {
+      currentCategory = position
+    } else {
+      break
     }
-    // 情况二：业务表单
-  } else if (row.formCustomCreatePath) {
-    await push({
-      path: row.formCustomCreatePath
-    })
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+
+  // 更新当前 active 的分类
+  if (currentCategory && categoryActive.value.code !== currentCategory.code) {
+    categoryActive.value = categoryList.value.find(
+      (c: CategoryVO) => c.code === currentCategory.code
+    )
   }
 }
 
-/** 提交按钮 */
-const submitForm = async (formData) => {
-  if (!fApi.value || !selectProcessDefinition.value) {
-    return
-  }
-  // 如果有指定审批人，需要校验
-  if (startUserSelectTasks.value?.length > 0) {
-    await startUserSelectAssigneesFormRef.value.validate()
+/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
+const availableCategories = computed(() => {
+  if (!categoryList.value?.length || !processDefinitionGroup.value) {
+    return []
   }
 
-  // 提交请求
-  fApi.value.btn.loading(true)
-  try {
-    await ProcessInstanceApi.createProcessInstance({
-      processDefinitionId: selectProcessDefinition.value.id,
-      variables: formData,
-      startUserSelectAssignees: startUserSelectAssignees.value
-    })
-    // 提示
-    message.success('发起流程成功')
-    // 跳转回去
-    delView(unref(currentRoute))
-    await push({
-      name: 'BpmProcessInstanceMy'
-    })
-  } finally {
-    fApi.value.btn.loading(false)
-  }
-}
+  // 获取所有有流程的分类代码
+  const availableCategoryCodes = Object.keys(processDefinitionGroup.value)
+
+  // 过滤出有流程的分类
+  return categoryList.value.filter((category: CategoryVO) =>
+    availableCategoryCodes.includes(category.code)
+  )
+})
 
 /** 初始化 */
 onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.process-definition-container::before {
+  content: '';
+  border-left: 1px solid #e6e6e6;
+  position: absolute;
+  left: 20.8%;
+  height: 100%;
+}
+:deep() {
+  .definition-item-card {
+    .el-card__body {
+      padding: 14px;
+    }
+  }
+}
+</style>

src/views/bpm/processInstance/create/index_old.vue

@@ -0,0 +1,267 @@
+<template>
+  <doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
+
+  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
+    <el-tabs tab-position="left" v-model="categoryActive">
+      <el-tab-pane
+        :label="category.name"
+        :name="category.code"
+        :key="category.code"
+        v-for="category in categoryList"
+      >
+        <el-row :gutter="20">
+          <el-col
+            :lg="6"
+            :sm="12"
+            :xs="24"
+            v-for="definition in categoryProcessDefinitionList"
+            :key="definition.id"
+          >
+            <el-card
+              shadow="hover"
+              class="mb-20px cursor-pointer"
+              @click="handleSelect(definition)"
+            >
+              <template #default>
+                <div class="flex">
+                  <el-image :src="definition.icon" class="w-32px h-32px" />
+                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                </div>
+              </template>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+
+  <!-- 第二步，填写表单，进行流程的提交 -->
+  <ContentWrap v-else>
+    <el-card class="box-card">
+      <div class="clearfix">
+        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
+        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
+          <Icon icon="ep:delete" /> 选择其它流程
+        </el-button>
+      </div>
+      <el-col :span="16" :offset="6" style="margin-top: 20px">
+        <form-create
+          :rule="detailForm.rule"
+          v-model:api="fApi"
+          v-model="detailForm.value"
+          :option="detailForm.option"
+          @submit="submitForm"
+        >
+          <template #type-startUserSelect>
+            <el-col :span="24">
+              <el-card class="mb-10px">
+                <template #header>指定审批人</template>
+                <el-form
+                  :model="startUserSelectAssignees"
+                  :rules="startUserSelectAssigneesFormRules"
+                  ref="startUserSelectAssigneesFormRef"
+                >
+                  <el-form-item
+                    v-for="userTask in startUserSelectTasks"
+                    :key="userTask.id"
+                    :label="`任务【${userTask.name}】`"
+                    :prop="userTask.id"
+                  >
+                    <el-select
+                      v-model="startUserSelectAssignees[userTask.id]"
+                      multiple
+                      placeholder="请选择审批人"
+                    >
+                      <el-option
+                        v-for="user in userList"
+                        :key="user.id"
+                        :label="user.nickname"
+                        :value="user.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </el-card>
+            </el-col>
+          </template>
+        </form-create>
+      </el-col>
+    </el-card>
+    <!-- 流程图预览 -->
+    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import { CategoryApi } from '@/api/bpm/category'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'BpmProcessInstanceCreate' })
+
+const route = useRoute() // 路由
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息
+const { delView } = useTagsViewStore() // 视图操作
+
+const processInstanceId = route.query.processInstanceId
+const loading = ref(true) // 加载中
+const categoryList = ref([]) // 分类的列表
+const categoryActive = ref('') // 选中的分类
+const processDefinitionList = ref([]) // 流程定义的列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+    if (categoryList.value.length > 0) {
+      categoryActive.value = categoryList.value[0].code
+    }
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+
+    // 如果 processInstanceId 非空，说明是重新发起
+    if (processInstanceId?.length > 0) {
+      const processInstance = await ProcessInstanceApi.getProcessInstance(processInstanceId)
+      if (!processInstance) {
+        message.error('重新发起流程失败，原因：流程实例不存在')
+        return
+      }
+      const processDefinition = processDefinitionList.value.find(
+        (item) => item.key == processInstance.processDefinition?.key
+      )
+      if (!processDefinition) {
+        message.error('重新发起流程失败，原因：流程定义不存在')
+        return
+      }
+      await handleSelect(processDefinition, processInstance.formVariables)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 选中分类对应的流程定义列表 */
+const categoryProcessDefinitionList = computed(() => {
+  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+})
+
+// ========== 表单相关 ==========
+const fApi = ref<ApiAttrs>()
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程表单详情
+const selectProcessDefinition = ref() // 选择的流程定义
+
+// 指定审批人
+const bpmnXML = ref(null) // BPMN 数据
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row, formVariables) => {
+  // 设置选择的流程
+  selectProcessDefinition.value = row
+
+  // 重置指定审批人
+  startUserSelectTasks.value = []
+  startUserSelectAssignees.value = {}
+  startUserSelectAssigneesFormRules.value = {}
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+    for (const key in formVariables) {
+      if (!allowedFields.includes(key)) {
+        delete formVariables[key]
+      }
+    }
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+
+    // 加载流程图
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml
+      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+
+      // 设置指定审批人
+      if (startUserSelectTasks.value?.length > 0) {
+        detailForm.value.rule.push({
+          type: 'startUserSelect',
+          props: {
+            title: '指定审批人'
+          }
+        })
+        // 设置校验规则
+        for (const userTask of startUserSelectTasks.value) {
+          startUserSelectAssignees.value[userTask.id] = []
+          startUserSelectAssigneesFormRules.value[userTask.id] = [
+            { required: true, message: '请选择审批人', trigger: 'blur' }
+          ]
+        }
+        // 加载用户列表
+        userList.value = await UserApi.getSimpleUserList()
+      }
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async (formData) => {
+  if (!fApi.value || !selectProcessDefinition.value) {
+    return
+  }
+  // 如果有指定审批人，需要校验
+  if (startUserSelectTasks.value?.length > 0) {
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstance({
+      processDefinitionId: selectProcessDefinition.value.id,
+      variables: formData,
+      startUserSelectAssignees: startUserSelectAssignees.value
+    })
+    // 提示
+    message.success('发起流程成功')
+    // 跳转回去
+    delView(unref(currentRoute))
+    await push({
+      name: 'BpmProcessInstanceMy'
+    })
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>

src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

@@ -1,54 +1,61 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header>
-      <span class="el-icon-picture-outline">流程图</span>
-    </template>
-    <MyProcessViewer
-      key="designer"
-      :activityData="activityList"
-      :prefix="bpmnControlForm.prefix"
-      :processInstanceData="processInstance"
-      :taskData="tasks"
-      :value="bpmnXml"
-      v-bind="bpmnControlForm"
-    />
+    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
   </el-card>
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
-import * as ActivityApi from '@/api/bpm/activity'
 
 defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 
 const props = defineProps({
-  loading: propTypes.bool, // 是否加载中
-  id: propTypes.string, // 流程实例的编号
-  processInstance: propTypes.any, // 流程实例的信息
-  tasks: propTypes.array, // 流程任务的数组
-  bpmnXml: propTypes.string // BPMN XML
+  loading: propTypes.bool.def(false), // 是否加载中
+  bpmnXml: propTypes.string, // BPMN XML
+  modelView: propTypes.object
 })
 
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const activityList = ref([]) // 任务列表
+const view = ref({
+  bpmnXml: ''
+}) // BPMN 流程图数据
+
 
 /** 只有 loading 完成时，才去加载流程列表 */
 watch(
-  () => props.loading,
-  async (value) => {
-    if (value && props.id) {
-      activityList.value = await ActivityApi.getActivityList({
-        processInstanceId: props.id
-      })
+  () => props.modelView,
+  async (newModelView) => {
+    // 加载最新
+    if (newModelView) {
+      //@ts-ignore
+      view.value = newModelView
     }
   }
 )
+
+/** 监听 bpmnXml */
+watch(
+  () => props.bpmnXml,
+  (value) => {
+    view.value.bpmnXml = value
+  }
+)
 </script>
-<style>
+<style lang="scss" scoped>
 .box-card {
+  height: 100%;
   width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: 0;
+
+  :deep(.el-card__body) {
+    height: 100%;
+    padding: 0;
+  }
+
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>

src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

@@ -0,0 +1,168 @@
+<template>
+  <div v-loading="loading" class="process-viewer-container">
+    <SimpleProcessViewer
+      :flow-node="simpleModel"
+      :tasks="tasks"
+      :process-instance="processInstance"
+      class="process-viewer"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
+defineOptions({ name: 'BpmProcessInstanceSimpleViewer' })
+
+const props = defineProps({
+  loading: propTypes.bool.def(false), // 是否加载中
+  modelView: propTypes.object,
+  simpleJson: propTypes.string // Simple 模型结构数据 (json 格式)
+})
+const simpleModel = ref()
+// 用户任务
+const tasks = ref([])
+// 流程实例
+const processInstance = ref()
+
+/** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
+watch(
+  () => props.modelView,
+  async (newModelView) => {
+    if (newModelView) {
+      tasks.value = newModelView.tasks
+      processInstance.value = newModelView.processInstance
+      // 已经拒绝的活动节点编号集合，只包括 UserTask
+      const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
+      // 进行中的活动节点编号集合， 只包括 UserTask
+      const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
+      // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+      const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
+      // 已经完成的连线节点编号集合，只包括 SequenceFlow
+      const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
+      setSimpleModelNodeTaskStatus(
+        newModelView.simpleModel,
+        newModelView.processInstance.status,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds
+      )
+      simpleModel.value = newModelView.simpleModel
+    }
+  }
+)
+/** 监控模型结构数据 */
+watch(
+  () => props.simpleJson,
+  async (value) => {
+    if (value) {
+      simpleModel.value = JSON.parse(value)
+    }
+  }
+)
+const setSimpleModelNodeTaskStatus = (
+  simpleModel: SimpleFlowNode | undefined,
+  processStatus: number,
+  rejectedTaskActivityIds: string[],
+  unfinishedTaskActivityIds: string[],
+  finishedActivityIds: string[],
+  finishedSequenceFlowActivityIds: string[]
+) => {
+  if (!simpleModel) {
+    return
+  }
+  // 结束节点
+  if (simpleModel.type === NodeType.END_EVENT_NODE) {
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = processStatus
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+    return
+  }
+
+  // 审批节点
+  if (
+    simpleModel.type === NodeType.START_USER_NODE ||
+    simpleModel.type === NodeType.USER_TASK_NODE
+  ) {
+    simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    if (rejectedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.REJECT
+    } else if (unfinishedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.RUNNING
+    } else if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    }
+    // TODO 是不是还缺一个 cancel 的状态
+  }
+
+  // 抄送节点
+  if (simpleModel.type === NodeType.COPY_TASK_NODE) {
+    // 抄送节点 只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+  // 条件节点 对应 SequenceFlow
+  if (simpleModel.type === NodeType.CONDITION_NODE) {
+    // 条件节点。只有通过和未执行状态
+    if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+
+  // 网关节点
+  if (
+    simpleModel.type === NodeType.CONDITION_BRANCH_NODE ||
+    simpleModel.type === NodeType.PARALLEL_BRANCH_NODE ||
+    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE
+  ) {
+    // 网关节点。只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+    simpleModel.conditionNodes?.forEach((node) => {
+      setSimpleModelNodeTaskStatus(
+        node,
+        processStatus,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds
+      )
+    })
+  }
+
+  setSimpleModelNodeTaskStatus(
+    simpleModel.childNode,
+    processStatus,
+    rejectedTaskActivityIds,
+    unfinishedTaskActivityIds,
+    finishedActivityIds,
+    finishedSequenceFlowActivityIds
+  )
+}
+</script>
+
+<style lang="scss" scoped>
+.process-viewer-container {
+  height: 100%;
+  width: 100%;
+  
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
+}
+</style>

src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue

@@ -1,85 +1,50 @@
 <template>
-  <el-card v-loading="loading" class="box-card">
-    <template #header>
-      <span class="el-icon-picture-outline">审批记录</span>
-    </template>
-    <el-col :offset="3" :span="17">
-      <div class="block">
-        <el-timeline>
-          <el-timeline-item
-            v-if="processInstance.endTime"
-            :type="getProcessInstanceTimelineItemType(processInstance)"
-          >
-            <p style="font-weight: 700">
-              结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
-              <dict-tag
-                :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
-                :value="processInstance.status"
-              />
-            </p>
-          </el-timeline-item>
-          <el-timeline-item
-            v-for="(item, index) in tasks"
-            :key="index"
-            :type="getTaskTimelineItemType(item)"
-          >
-            <p style="font-weight: 700">
-              审批任务：{{ item.name }}
-              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
-              <el-button
-                class="ml-10px"
-                v-if="!isEmpty(item.children)"
-                @click="openChildrenTask(item)"
-                size="small"
-              >
-                <Icon icon="ep:memo" /> 子任务
-              </el-button>
-              <el-button
-                class="ml-10px"
-                size="small"
-                v-if="item.formId > 0"
-                @click="handleFormDetail(item)"
-              >
-                <Icon icon="ep:document" /> 查看表单
-              </el-button>
-            </p>
-            <el-card :body-style="{ padding: '10px' }">
-              <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
-                审批人：{{ item.assigneeUser.nickname }}
-                <el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
-              </label>
-              <label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
-              <label style="font-weight: normal; color: #8a909c">
-                {{ formatDate(item?.createTime) }}
-              </label>
-              <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
-                审批时间：
-              </label>
-              <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
-                {{ formatDate(item?.endTime) }}
-              </label>
-              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
-                耗时：
-              </label>
-              <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
-                {{ formatPast2(item?.durationInMillis) }}
-              </label>
-              <p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item type="success">
-            <p style="font-weight: 700">
-              发起流程：【{{ processInstance.startUser?.nickname }}】在
-              {{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
-            </p>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-    </el-col>
-  </el-card>
+  <el-table :data="tasks" border header-cell-class-name="table-header-gray">
+    <el-table-column label="审批节点" prop="name" min-width="120" align="center" />
+    <el-table-column label="审批人" min-width="100" align="center">
+      <template #default="scope">
+        {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      :formatter="dateFormatter"
+      align="center"
+      label="开始时间"
+      prop="createTime"
+      min-width="140"
+    />
+    <el-table-column
+      :formatter="dateFormatter"
+      align="center"
+      label="结束时间"
+      prop="endTime"
+      min-width="140"
+    />
+    <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="审批建议" prop="reason" min-width="200">
+      <template #default="scope">
+        {{ scope.row.reason }}
+        <el-button
+          class="ml-10px"
+          size="small"
+          v-if="scope.row.formId > 0"
+          @click="handleFormDetail(scope.row)"
+        >
+          <Icon icon="ep:document" /> 查看表单
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100">
+      <template #default="scope">
+        {{ formatPast2(scope.row.durationInMillis) }}
+      </template>
+    </el-table-column>
+  </el-table>
 
-  <!-- 弹窗：子任务  -->
-  <TaskSignList ref="taskSignListRef" @success="refresh" />
   <!-- 弹窗：表单 -->
   <Dialog title="表单详情" v-model="taskFormVisible" width="600">
     <form-create
@@ -91,61 +56,20 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { formatDate, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
 import { DICT_TYPE } from '@/utils/dict'
-import { isEmpty } from '@/utils/is'
-import TaskSignList from './dialog/TaskSignList.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import * as TaskApi from '@/api/bpm/task'
 
 defineOptions({ name: 'BpmProcessInstanceTaskList' })
 
-defineProps({
-  loading: propTypes.bool, // 是否加载中
-  processInstance: propTypes.object, // 流程实例
-  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+const props = defineProps({
+  loading: propTypes.bool.def(false), // 是否加载中
+  id: propTypes.string // 流程实例的编号
 })
-
-/** 获得流程实例对应的颜色 */
-const getProcessInstanceTimelineItemType = (item: any) => {
-  if (item.status === 2) {
-    return 'success'
-  }
-  if (item.status === 3) {
-    return 'danger'
-  }
-  if (item.status === 4) {
-    return 'warning'
-  }
-  return ''
-}
-
-/** 获得任务对应的颜色 */
-const getTaskTimelineItemType = (item: any) => {
-  if ([0, 1, 6, 7].includes(item.status)) {
-    return 'primary'
-  }
-  if (item.status === 2) {
-    return 'success'
-  }
-  if (item.status === 3) {
-    return 'danger'
-  }
-  if (item.status === 4) {
-    return 'info'
-  }
-  if (item.status === 5) {
-    return 'warning'
-  }
-  return ''
-}
-
-/** 子任务 */
-const taskSignListRef = ref()
-const openChildrenTask = (item: any) => {
-  taskSignListRef.value.open(item)
-}
+const tasks = ref([]) // 流程任务的数组
 
 /** 查看表单 */
 const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
@@ -155,7 +79,7 @@ const taskForm = ref({
   value: {}
 }) // 流程任务的表单详情
 const taskFormVisible = ref(false)
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
   // 设置表单
   setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
   // 弹窗打开
@@ -167,9 +91,13 @@ const handleFormDetail = async (row) => {
   fApi.value?.fapi?.disabled(true)
 }
 
-/** 刷新数据 */
-const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
-const refresh = () => {
-  emit('refresh')
-}
+/** 只有 loading 完成时，才去加载流程列表 */
+watch(
+  () => props.loading,
+  async (value) => {
+    if (value) {
+      tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id)
+    }
+  }
+)
 </script>

src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue

@@ -1,161 +1,292 @@
+<!-- 审批详情的右侧：审批流 -->
 <template>
   <el-timeline class="pt-20px">
-    <el-timeline-item v-for="(activity, index) in mockData" :key="index" size="large">
-      <div class="flex flex-col items-start">
-        <div class="font-bold"> {{ activity.name }}</div>
-        <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
-        <div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
-          <div class="mb-5px">审批意见：</div>
-          <div
-            class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
-          >
-            {{ activity.opinion }}
-          </div>
-        </div>
-        <div v-if="activity.createTime" class="text-#a5a5a5 text-13px">
-          {{ formatDate(activity.createTime) }}
-        </div>
-      </div>
-      <!-- 该节点用户的头像 -->
+    <!-- 遍历每个审批节点 -->
+    <el-timeline-item
+      v-for="(activity, index) in activityNodes"
+      :key="index"
+      size="large"
+      :icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
+      :color="getApprovalNodeColor(activity.status)"
+    >
       <template #dot>
-        <div class="w-35px h-35px position-relative">
-          <img
-            src="@/assets/imgs/avatar.jpg"
-            class="rounded-full w-full h-full position-absolute bottom-6px right-12px"
-            alt=""
-          />
+        <div
+          class="position-absolute left--10px top--6px rounded-full border border-solid border-#dedede w-30px h-30px flex justify-center items-center bg-#3f73f7 p-5px"
+        >
+          <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
           <div
-            class="position-absolute top-16px left-8px bg-#fff rounded-full flex items-center content-center p-2px"
+            v-if="showStatusIcon"
+            class="position-absolute top-17px left-17px rounded-full flex items-center p-1px border-2 border-white border-solid"
+            :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
           >
-            <Icon
-              :size="12"
-              :icon="optIconMap[activity.status]?.icon"
-              :color="optIconMap[activity.status]?.color"
-            />
+            <el-icon :size="11" color="#fff">
+              <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
+            </el-icon>
           </div>
         </div>
       </template>
+      <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}`">
+        <!-- 第一行：节点名称、时间 -->
+        <div class="flex w-full">
+          <div class="font-bold"> {{ activity.name }}</div>
+          <!-- 信息：时间 -->
+          <div
+            v-if="activity.status !== TaskStatusEnum.NOT_START"
+            class="text-#a5a5a5 text-13px mt-1 ml-auto"
+          >
+            {{ getApprovalNodeTime(activity) }}
+          </div>
+        </div>
+        <!-- 需要自定义选择审批人 -->
+        <div
+          class="flex flex-wrap gap2 items-center"
+          v-if="
+            isEmpty(activity.tasks) &&
+            isEmpty(activity.candidateUsers) &&
+            CandidateStrategy.START_USER_SELECT === activity.candidateStrategy
+          "
+        >
+          <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
+
+          <el-tooltip content="添加用户" placement="left">
+            <el-button
+              class="!px-6px"
+              @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
+            >
+              <img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" />
+            </el-button>
+          </el-tooltip>
+          <div
+            v-for="(user, idx1) in customApproveUsers[activity.id]"
+            :key="idx1"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+          >
+            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar class="!m-5px" :size="28" v-else>
+              {{ user.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ user.nickname }}
+          </div>
+        </div>
+        <div v-else class="flex items-center flex-wrap mt-1 gap2">
+          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
+          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
+            <div
+              class="position-relative flex flex-wrap gap2"
+              v-if="task.assigneeUser || task.ownerUser"
+            >
+              <!-- 信息：头像昵称 -->
+              <div
+                class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+              >
+                <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
+                  <el-avatar
+                    class="!m-5px"
+                    :size="28"
+                    v-if="task.assigneeUser?.avatar"
+                    :src="task.assigneeUser?.avatar"
+                  />
+                  <el-avatar class="!m-5px" :size="28" v-else>
+                    {{ task.assigneeUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.assigneeUser?.nickname }}
+                </template>
+                <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
+                  <el-avatar
+                    class="!m-5px"
+                    :size="28"
+                    v-if="task.ownerUser?.avatar"
+                    :src="task.ownerUser?.avatar"
+                  />
+                  <el-avatar class="!m-5px" :size="28" v-else>
+                    {{ task.ownerUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.ownerUser?.nickname }}
+                </template>
+                <!-- 信息：任务 ICON -->
+                <div
+                  v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
+                  class="position-absolute top-19px left-23px rounded-full flex items-center p-1px border-2 border-white border-solid"
+                  :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
+                >
+                  <Icon :size="11" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
+                </div>
+              </div>
+            </div>
+            <teleport defer :to="`#activity-task-${activity.id}`">
+              <div
+                v-if="
+                  task.reason &&
+                  [NodeType.USER_TASK_NODE, NodeType.END_EVENT_NODE].includes(activity.nodeType)
+                "
+                class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+              >
+                审批意见：{{ task.reason }}
+              </div>
+            </teleport>
+          </div>
+          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
+          <div
+            v-for="(user, idx1) in activity.candidateUsers"
+            :key="idx1"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+          >
+            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar class="!m-5px" :size="28" v-else>
+              {{ user.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ user.nickname }}
+
+            <!-- 信息：任务 ICON -->
+            <div
+              v-if="showStatusIcon"
+              class="position-absolute top-20px left-24px rounded-full flex items-center p-1px border-2 border-white border-solid"
+              :style="{ backgroundColor: statusIconMap2['-1']?.color }"
+            >
+              <Icon :size="11" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
+            </div>
+          </div>
+        </div>
+      </div>
     </el-timeline-item>
   </el-timeline>
+
+  <!-- 用户选择弹窗 -->
+  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
 </template>
 
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
-import { propTypes } from '@/utils/propTypes'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import { NodeType, CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { isEmpty } from '@/utils/is'
+import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
+import starterSvg from '@/assets/svgs/bpm/starter.svg'
+import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
+import copySvg from '@/assets/svgs/bpm/copy.svg'
+import conditionSvg from '@/assets/svgs/bpm/condition.svg'
+import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+import finishSvg from '@/assets/svgs/bpm/finish.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps({
-  tasks: propTypes.array // 流程任务的数组
-})
+withDefaults(
+  defineProps<{
+    activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+    showStatusIcon?: boolean // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true // 默认值为 true
+  }
+)
 
-const optIconMap = {
+// 审批节点
+const statusIconMap2 = {
+  // 未开始
+  '-1': { color: '#909398', icon: 'ep-clock' },
+  // 待审批
+  '0': { color: '#00b32a', icon: 'ep:loading' },
   // 审批中
-  '1': {
-    color: '#00b32a',
-    icon: 'fa-solid:clock'
-  },
+  '1': { color: '#448ef7', icon: 'ep:loading' },
   // 审批通过
-  '2': { color: '#00b32a', icon: 'fa-solid:check-circle' },
+  '2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
   // 审批不通过
-  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' }
+  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
+  // 取消
+  '4': { color: '#cccccc', icon: 'ep:delete-filled' },
+  // 退回
+  '5': { color: '#f46b6c', icon: 'ep:remove-filled' },
+  // 委派中
+  '6': { color: '#448ef7', icon: 'ep:loading' },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' }
 }
 
-const mockData: any = [
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '发起人',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 1,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '测试号',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
-  },
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '领导审批',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 2,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '领导',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
-  },
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '财务总监审核',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 3,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '财务总监',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
+const statusIconMap = {
+  // 审批未开始
+  '-1': { color: '#909398', icon: Clock },
+  '0': { color: '#00b32a', icon: Clock },
+  // 审批中
+  '1': { color: '#448ef7', icon: Loading },
+  // 审批通过
+  '2': { color: '#00b32a', icon: Check },
+  // 审批不通过
+  '3': { color: '#f46b6c', icon: Close },
+  // 已取消
+  '4': { color: '#cccccc', icon: Delete },
+  // 退回
+  '5': { color: '#f46b6c', icon: Minus },
+  // 委派中
+  '6': { color: '#448ef7', icon: Loading },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: Check }
+}
+
+const nodeTypeSvgMap = {
+  // 结束节点
+  [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
+  // 发起人节点
+  [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
+  // 审批人节点
+  [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
+  // 抄送人节点
+  [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
+  // 条件分支节点
+  [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
+  // 并行分支节点
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
+}
+
+// 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
+const onlyStatusIconShow = [-1, 0, 1]
+
+// timeline时间线上icon图标
+const getApprovalNodeImg = (nodeType: NodeType) => {
+  return nodeTypeSvgMap[nodeType]?.svg
+}
+
+const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
+  if (taskStatus == TaskStatusEnum.NOT_START) {
+    return statusIconMap[taskStatus]?.icon
   }
-]
+
+  if (
+    nodeType === NodeType.START_USER_NODE ||
+    nodeType === NodeType.USER_TASK_NODE ||
+    nodeType === NodeType.END_EVENT_NODE
+  ) {
+    return statusIconMap[taskStatus]?.icon
+  }
+}
+
+const getApprovalNodeColor = (taskStatus: number) => {
+  return statusIconMap[taskStatus]?.color
+}
+
+const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
+  if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
+    return `${formatDate(node.startTime)}`
+  }
+  if (node.endTime) {
+    return `${formatDate(node.endTime)}`
+  }
+  if (node.startTime) {
+    return `${formatDate(node.startTime)}`
+  }
+}
+
+// 选择自定义审批人
+const userSelectFormRef = ref()
+const handleSelectUser = (activityId, selectedList) => {
+  userSelectFormRef.value.open(activityId, selectedList)
+}
+const emit = defineEmits<{
+  selectUserConfirm: [id: any, userList: any[]]
+}>()
+const customApproveUsers: any = ref({}) // key：activityId，value：用户列表
+// 选择完成
+const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
+  customApproveUsers.value[activityId] = userList || []
+  emit('selectUserConfirm', activityId, userList)
+}
 </script>

src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue

@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="委派任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="接收人" prop="delegateUserId">
-        <el-select v-model="formData.delegateUserId" clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="委派理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入委派理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'BpmTaskDelegateForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  delegateUserId: undefined,
-  reason: ''
-})
-const formRules = ref({
-  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '委派理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.delegateTask(formData.value)
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    delegateUserId: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>

src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue

@@ -1,90 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="回退任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="退回节点" prop="targetTaskDefinitionKey">
-        <el-select v-model="formData.targetTaskDefinitionKey" clearable style="width: 100%">
-          <el-option
-            v-for="item in returnList"
-            :key="item.taskDefinitionKey"
-            :label="item.name"
-            :value="item.taskDefinitionKey"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="回退理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入回退理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" name="TaskRollbackDialogForm" setup>
-import * as TaskApi from '@/api/bpm/task'
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  targetTaskDefinitionKey: undefined,
-  reason: ''
-})
-const formRules = ref({
-  targetTaskDefinitionKey: [{ required: true, message: '必须选择回退节点', trigger: 'change' }],
-  reason: [{ required: true, message: '回退理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const returnList = ref([] as any)
-/** 打开弹窗 */
-const open = async (id: string) => {
-  returnList.value = await TaskApi.getTaskListByReturn(id)
-  if (returnList.value.length === 0) {
-    message.warning('当前没有可回退的节点')
-    return false
-  }
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.returnTask(formData.value)
-    message.success('回退成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    targetTaskDefinitionKey: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>

src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue

@@ -1,99 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="加签" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="加签处理人" prop="userIds">
-        <el-select v-model="formData.userIds" multiple clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="加签理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入加签理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm('before')">
-        向前加签
-      </el-button>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm('after')">
-        向后加签
-      </el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'TaskSignCreateForm' })
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  userIds: [],
-  type: '',
-  reason: ''
-})
-const formRules = ref({
-  userIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '加签理由不能为空', trigger: 'change' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async (type: string) => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  formData.value.type = type
-  try {
-    await TaskApi.signCreateTask(formData.value)
-    message.success('加签成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    userIds: [],
-    type: '',
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>

src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue

@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="减签" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="减签任务" prop="id">
-        <el-radio-group v-model="formData.id">
-          <el-radio-button v-for="item in childrenTaskList" :key="item.id" :value="item.id">
-            {{ item.name }}
-            ({{ item.assigneeUser?.deptName || item.ownerUser?.deptName }} -
-            {{ item.assigneeUser?.nickname || item.ownerUser?.nickname }})
-          </el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="减签理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入减签理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import { isEmpty } from '@/utils/is'
-
-defineOptions({ name: 'TaskSignDeleteForm' })
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  reason: ''
-})
-const formRules = ref({
-  id: [{ required: true, message: '必须选择减签任务', trigger: 'change' }],
-  reason: [{ required: true, message: '减签理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const childrenTaskList = ref([])
-/** 打开弹窗 */
-const open = async (id: string) => {
-  childrenTaskList.value = await TaskApi.getChildrenTaskList(id)
-  if (isEmpty(childrenTaskList.value)) {
-    message.warning('当前没有可减签的任务')
-    return false
-  }
-  dialogVisible.value = true
-  resetForm()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.signDeleteTask(formData.value)
-    message.success('减签成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>

src/views/bpm/processInstance/detail/dialog/TaskSignList.vue

@@ -1,106 +0,0 @@
-<template>
-  <el-drawer v-model="drawerVisible" title="子任务" size="880px">
-    <!-- 当前任务 -->
-    <template #header>
-      <h4>【{{ parentTask.name }} 】审批人：{{ parentTask?.assigneeUser?.nickname }}</h4>
-      <el-button
-        style="margin-left: 5px"
-        v-if="isSignDeleteButtonVisible(parentTask)"
-        type="danger"
-        plain
-        @click="handleSignDelete(parentTask)"
-      >
-        <Icon icon="ep:remove" /> 减签
-      </el-button>
-    </template>
-    <!-- 子任务列表 -->
-    <el-table :data="parentTask.children" style="width: 100%" row-key="id" border>
-      <el-table-column prop="assigneeUser.nickname" label="审批人" min-width="100">
-        <template #default="scope">
-          {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="assigneeUser.deptName" label="所在部门" min-width="100">
-        <template #default="scope">
-          {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
-        </template>
-      </el-table-column>
-      <el-table-column label="审批状态" prop="status" width="120">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="提交时间"
-        align="center"
-        prop="createTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column
-        label="结束时间"
-        align="center"
-        prop="endTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="操作" prop="operation" width="90">
-        <template #default="scope">
-          <el-button
-            v-if="isSignDeleteButtonVisible(scope.row)"
-            type="danger"
-            plain
-            size="small"
-            @click="handleSignDelete(scope.row)"
-          >
-            <Icon icon="ep:remove" /> 减签
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 减签 -->
-    <TaskSignDeleteForm ref="taskSignDeleteFormRef" @success="handleSignDeleteSuccess" />
-  </el-drawer>
-</template>
-<script lang="ts" setup>
-import { isEmpty } from '@/utils/is'
-import { DICT_TYPE } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
-import TaskSignDeleteForm from './TaskSignDeleteForm.vue'
-
-defineOptions({ name: 'TaskSignList' })
-
-const message = useMessage() // 消息弹窗
-const drawerVisible = ref(false) // 抽屉的是否展示
-const parentTask = ref({} as any)
-
-/** 打开弹窗 */
-const open = async (task: any) => {
-  if (isEmpty(task.children)) {
-    message.warning('该任务没有子任务')
-    return
-  }
-  parentTask.value = task
-  // 展开抽屉
-  drawerVisible.value = true
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 发起减签 */
-const taskSignDeleteFormRef = ref()
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const handleSignDelete = (item: any) => {
-  taskSignDeleteFormRef.value.open(item.id)
-}
-const handleSignDeleteSuccess = () => {
-  emit('success')
-  // 关闭抽屉
-  drawerVisible.value = false
-}
-
-/** 是否显示减签按钮 */
-const isSignDeleteButtonVisible = (task: any) => {
-  return task && task.children && !isEmpty(task.children)
-}
-</script>

src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue

@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="转派任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="新审批人" prop="assigneeUserId">
-        <el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="转派理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入转派理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'TaskTransferForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  assigneeUserId: undefined,
-  reason: ''
-})
-const formRules = ref({
-  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '转派理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.transferTask(formData.value)
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    assigneeUserId: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>

src/views/bpm/processInstance/detail/index.vue

@@ -1,174 +1,167 @@
 <template>
-  <ContentWrap>
-    <!-- 审批信息 -->
-    <el-card
-      v-for="(item, index) in runningTasks"
-      :key="index"
-      v-loading="processInstanceLoading"
-      class="box-card"
-    >
-      <template #header>
-        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
-      </template>
-      <el-col :offset="6" :span="16">
-        <el-form
-          :ref="'form' + index"
-          :model="auditForms[index]"
-          :rules="auditRule"
-          label-width="100px"
-        >
-          <el-form-item v-if="processInstance && processInstance.name" label="流程名">
-            {{ processInstance.name }}
-          </el-form-item>
-          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-            {{ processInstance?.startUser.nickname }}
-            <el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag>
-          </el-form-item>
-          <el-card v-if="runningTasks[index].formId > 0" class="mb-15px !-mt-10px">
-            <template #header>
-              <span class="el-icon-picture-outline">
-                填写表单【{{ runningTasks[index]?.formName }}】
-              </span>
-            </template>
-            <form-create
-              v-model="approveForms[index].value"
-              v-model:api="approveFormFApis[index]"
-              :option="approveForms[index].option"
-              :rule="approveForms[index].rule"
-            />
-          </el-card>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input
-              v-model="auditForms[index].reason"
-              placeholder="请输入审批建议"
-              type="textarea"
-            />
-          </el-form-item>
-          <el-form-item label="抄送人" prop="copyUserIds">
-            <el-select v-model="auditForms[index].copyUserIds" multiple placeholder="请选择抄送人">
-              <el-option
-                v-for="itemx in userOptions"
-                :key="itemx.id"
-                :label="itemx.nickname"
-                :value="itemx.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-form>
-        <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
-          <el-button type="success" @click="handleAudit(item, true)">
-            <Icon icon="ep:select" />
-            通过
-          </el-button>
-          <el-button type="danger" @click="handleAudit(item, false)">
-            <Icon icon="ep:close" />
-            不通过
-          </el-button>
-          <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
-            <Icon icon="ep:edit" />
-            转办
-          </el-button>
-          <el-button type="primary" @click="handleDelegate(item)">
-            <Icon icon="ep:position" />
-            委派
-          </el-button>
-          <el-button type="primary" @click="handleSign(item)">
-            <Icon icon="ep:plus" />
-            加签
-          </el-button>
-          <el-button type="warning" @click="handleBack(item)">
-            <Icon icon="ep:back" />
-            回退
-          </el-button>
-        </div>
-      </el-col>
-    </el-card>
-
-    <!-- 申请信息 -->
-    <el-card v-loading="processInstanceLoading" class="box-card">
-      <template #header>
-        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
-      </template>
-      <!-- 情况一：流程表单 -->
-      <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
-        <form-create
-          v-model="detailForm.value"
-          v-model:api="fApi"
-          :option="detailForm.option"
-          :rule="detailForm.rule"
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }" class="position-relative">
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
+        <img
+          class="position-absolute right-20px"
+          width="150"
+          :src="auditIconsMap[processInstance.status]"
+          alt=""
         />
-      </el-col>
-      <!-- 情况二：业务表单 -->
-      <div v-if="processInstance?.processDefinition?.formType === 20">
-        <BusinessFormComponent :id="processInstance.businessKey" />
-      </div>
-    </el-card>
+        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
+        <el-divider class="!my-8px" />
+        <div class="flex items-center gap-5 mb-10px h-40px">
+          <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
+          <dict-tag
+            v-if="processInstance.status"
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="processInstance.status"
+          />
+        </div>
 
-    <!-- 审批记录 -->
-    <ProcessInstanceTaskList
-      :loading="tasksLoad"
-      :process-instance="processInstance"
-      :tasks="tasks"
-      @refresh="getTaskList"
-    />
+        <div class="flex items-center gap-5 mb-10px text-13px h-35px">
+          <div
+            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
+          >
+            <el-avatar
+              :size="28"
+              v-if="processInstance?.startUser?.avatar"
+              :src="processInstance?.startUser?.avatar"
+            />
+            <el-avatar :size="28" v-else-if="processInstance?.startUser?.nickname">
+              {{ processInstance?.startUser?.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ processInstance?.startUser?.nickname }}
+          </div>
+          <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
+        </div>
 
-    <!-- 高亮流程图 -->
-    <ProcessInstanceBpmnViewer
-      :id="`${id}`"
-      :bpmn-xml="bpmnXml"
-      :loading="processInstanceLoading"
-      :process-instance="processInstance"
-      :tasks="tasks"
-    />
+        <el-tabs v-model="activeTab">
+          <!-- 表单信息 -->
+          <el-tab-pane label="审批详情" name="form">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <el-row>
+                  <el-col :span="17" class="!flex !flex-col formCol">
+                    <!-- 表单信息 -->
+                    <div
+                      v-loading="processInstanceLoading"
+                      class="form-box flex flex-col mb-30px flex-1"
+                    >
+                      <!-- 情况一：流程表单 -->
+                      <el-col v-if="processDefinition?.formType === 10">
+                        <form-create
+                          v-model="detailForm.value"
+                          v-model:api="fApi"
+                          :option="detailForm.option"
+                          :rule="detailForm.rule"
+                        />
+                      </el-col>
+                      <!-- 情况二：业务表单 -->
+                      <div v-if="processDefinition?.formType === 20">
+                        <BusinessFormComponent :id="processInstance.businessKey" />
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="7">
+                    <!-- 审批记录时间线 -->
+                    <ProcessInstanceTimeline :activity-nodes="activityNodes" />
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
 
-    <!-- 弹窗：转派审批人 -->
-    <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
-    <!-- 弹窗：回退节点 -->
-    <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
-    <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
-    <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-    <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
+          <!-- 流程图 -->
+          <el-tab-pane label="流程图" name="diagram">
+            <div class="form-scroll-area">
+              <ProcessInstanceSimpleViewer
+                v-show="
+                  processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
+              <ProcessInstanceBpmnViewer
+                v-show="
+                  processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
+            </div>
+          </el-tab-pane>
+
+          <!-- 流转记录 -->
+          <el-tab-pane label="流转记录" name="record">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <ProcessInstanceTaskList :loading="processInstanceLoading" :id="id" />
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
+
+          <!-- 流转评论 TODO 待开发 -->
+          <el-tab-pane label="流转评论" name="comment" v-if="false">
+            <div class="form-scroll-area">
+              <el-scrollbar> 流转评论 </el-scrollbar>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
+          <!-- 操作栏按钮 -->
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :userOptions="userOptions"
+            @success="refresh"
+          />
+        </div>
+      </el-scrollbar>
+    </div>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { useUserStore } from '@/store/modules/user'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { BpmModelType } from '@/utils/constants'
 import { setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import * as DefinitionApi from '@/api/bpm/definition'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as TaskApi from '@/api/bpm/task'
-import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
-import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
-import TaskReturnForm from './dialog/TaskReturnForm.vue'
-import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
-import TaskTransferForm from './dialog/TaskTransferForm.vue'
-import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
 import { registerComponent } from '@/utils/routerHelper'
-import { isEmpty } from '@/utils/is'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
+import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
+import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
+import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
+import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
+import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import runningSvg from '@/assets/svgs/bpm/running.svg'
+import approveSvg from '@/assets/svgs/bpm/approve.svg'
+import rejectSvg from '@/assets/svgs/bpm/reject.svg'
+import cancelSvg from '@/assets/svgs/bpm/cancel.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
-
-const { query } = useRoute() // 查询参数
+const props = defineProps<{
+  id: string // 流程实例的编号
+  taskId?: string // 任务编号
+  activityId?: string //流程活动编号，用于抄送查看
+}>()
 const message = useMessage() // 消息弹窗
-const { proxy } = getCurrentInstance() as any
-
-const userId = useUserStore().getUser.id // 当前登录的编号
-const id = query.id as unknown as string // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
-const bpmnXml = ref('') // BPMN XML
-const tasksLoad = ref(true) // 任务的加载中
-const tasks = ref<any[]>([]) // 任务列表
-// ========== 审批信息 ==========
-const runningTasks = ref<any[]>([]) // 运行中的任务
-const auditForms = ref<any[]>([]) // 审批任务的表单
-const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
-})
-const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
-const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
+const processDefinition = ref<any>({}) // 流程定义
+const processModelView = ref<any>({}) // 流程模型视图
+const operationButtonRef = ref() // 操作按钮组件 ref
+const auditIconsMap = {
+  [TaskStatusEnum.RUNNING]: runningSvg,
+  [TaskStatusEnum.APPROVE]: approveSvg,
+  [TaskStatusEnum.REJECT]: rejectSvg,
+  [TaskStatusEnum.CANCEL]: cancelSvg
+}
 
 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
@@ -178,199 +171,124 @@ const detailForm = ref({
   value: {}
 }) // 流程实例的表单详情
 
-/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
-watch(
-  () => approveFormFApis.value,
-  (value) => {
-    value?.forEach((api) => {
-      api.btn.show(false)
-      api.resetBtn.show(false)
-    })
-  },
-  {
-    deep: true
-  }
-)
-
-/** 处理审批通过和不通过的操作 */
-const handleAudit = async (task, pass) => {
-  // 1.1 获得对应表单
-  const index = runningTasks.value.indexOf(task)
-  const auditFormRef = proxy.$refs['form' + index][0]
-  // 1.2 校验表单
-  const elForm = unref(auditFormRef)
-  if (!elForm) return
-  const valid = await elForm.validate()
-  if (!valid) return
-
-  // 2.1 提交审批
-  const data = {
-    id: task.id,
-    reason: auditForms.value[index].reason,
-    copyUserIds: auditForms.value[index].copyUserIds
-  }
-  if (pass) {
-    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
-    const formCreateApi = approveFormFApis.value[index]
-    if (formCreateApi) {
-      await formCreateApi.validate()
-      data.variables = approveForms.value[index].value
-    }
-    await TaskApi.approveTask(data)
-    message.success('审批通过成功')
-  } else {
-    await TaskApi.rejectTask(data)
-    message.success('审批不通过成功')
-  }
-  // 2.2 加载最新数据
-  getDetail()
-}
-
-/** 转派审批人 */
-const taskTransferFormRef = ref()
-const openTaskUpdateAssigneeForm = (id: string) => {
-  taskTransferFormRef.value.open(id)
-}
-
-/** 处理审批退回的操作 */
-const taskDelegateForm = ref()
-const handleDelegate = async (task) => {
-  taskDelegateForm.value.open(task.id)
-}
-
-/** 处理审批退回的操作 */
-const taskReturnFormRef = ref()
-const handleBack = async (task: any) => {
-  taskReturnFormRef.value.open(task.id)
-}
-
-/** 处理审批加签的操作 */
-const taskSignCreateFormRef = ref()
-const handleSign = async (task: any) => {
-  taskSignCreateFormRef.value.open(task.id)
-}
-
 /** 获得详情 */
 const getDetail = () => {
-  // 1. 获得流程实例相关
-  getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
-  getTaskList()
+  getApprovalDetail()
+
+  getProcessModelView()
 }
 
 /** 加载流程实例 */
-const BusinessFormComponent = ref(null) // 异步组件
-const getProcessInstance = async () => {
+const BusinessFormComponent = ref<any>(null) // 异步组件
+/** 获取审批详情 */
+const getApprovalDetail = async () => {
+  processInstanceLoading.value = true
   try {
-    processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(id)
+    const param = {
+      processInstanceId: props.id,
+      activityId: props.activityId,
+      taskId: props.taskId
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param)
     if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    if (!data.processDefinition || !data.processInstance) {
       message.error('查询不到流程信息！')
       return
     }
-    processInstance.value = data
+    processInstance.value = data.processInstance
+    processDefinition.value = data.processDefinition
 
     // 设置表单信息
-    const processDefinition = data.processDefinition
-    if (processDefinition.formType === 10) {
-      setConfAndFields2(
-        detailForm,
-        processDefinition.formConf,
-        processDefinition.formFields,
-        data.formVariables
-      )
+    if (processDefinition.value.formType === 10) {
+      // 获取表单字段权限
+      const formFieldsPermission = data.formFieldsPermission
+
+      if (detailForm.value.rule.length > 0) {
+        // 避免刷新 form-create 显示不了
+        detailForm.value.value = processInstance.value.formVariables
+      } else {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.value.formConf,
+          processDefinition.value.formFields,
+          processInstance.value.formVariables
+        )
+      }
       nextTick().then(() => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
+        //@ts-ignore
         fApi.value?.disabled(true)
+        // 设置表单字段权限
+        if (formFieldsPermission) {
+          Object.keys(data.formFieldsPermission).forEach((item) => {
+            setFieldPermission(item, formFieldsPermission[item])
+          })
+        }
       })
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
       BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
 
-    // 加载流程图
-    bpmnXml.value = (
-      await DefinitionApi.getProcessDefinition(processDefinition.id as number)
-    )?.bpmnXml
+    // 获取审批节点，显示 Timeline 的数据
+    activityNodes.value = data.activityNodes
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask)
   } finally {
     processInstanceLoading.value = false
   }
 }
 
-/** 加载任务列表 */
-const getTaskList = async () => {
-  runningTasks.value = []
-  auditForms.value = []
-  approveForms.value = []
-  approveFormFApis.value = []
-  try {
-    // 获得未取消的任务
-    tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(id)
-    tasks.value = []
-    // 1.1 移除已取消的审批
-    data.forEach((task) => {
-      if (task.status !== 4) {
-        tasks.value.push(task)
-      }
-    })
-    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
-    tasks.value.sort((a, b) => {
-      // 有已完成的情况，按照完成时间倒序
-      if (a.endTime && b.endTime) {
-        return b.endTime - a.endTime
-      } else if (a.endTime) {
-        return 1
-      } else if (b.endTime) {
-        return -1
-        // 都是未完成，按照创建时间倒序
-      } else {
-        return b.createTime - a.createTime
-      }
-    })
+/** 获取流程模型视图*/
+const getProcessModelView = async () => {
+  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
+    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
+    processModelView.value = {
+      bpmnXml: ''
+    }
+  }
+  const data = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+  if (data) {
+    processModelView.value = data
+  }
+}
 
-    // 获得需要自己审批的任务
-    loadRunningTask(tasks.value)
-  } finally {
-    tasksLoad.value = false
+// 审批节点信息
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+/**
+ * 设置表单权限
+ */
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === FieldPermissionType.READ) {
+    //@ts-ignore
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === FieldPermissionType.WRITE) {
+    //@ts-ignore
+    fApi.value?.disabled(false, field)
+  }
+  if (permission === FieldPermissionType.NONE) {
+    //@ts-ignore
+    fApi.value?.hidden(true, field)
   }
 }
 
 /**
- * 设置 runningTasks 中的任务
+ * 操作成功后刷新
  */
-const loadRunningTask = (tasks) => {
-  tasks.forEach((task) => {
-    if (!isEmpty(task.children)) {
-      loadRunningTask(task.children)
-    }
-    // 2.1 只有待处理才需要
-    if (task.status !== 1 && task.status !== 6) {
-      return
-    }
-    // 2.2 自己不是处理人
-    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-      return
-    }
-    // 2.3 添加到处理任务
-    runningTasks.value.push({ ...task })
-    auditForms.value.push({
-      reason: '',
-      copyUserIds: []
-    })
-
-    // 2.4 处理 approve 表单
-    if (task.formId && task.formConf) {
-      const approveForm = {}
-      setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariables)
-      approveForms.value.push(approveForm)
-    } else {
-      approveForms.value.push({}) // 占位，避免为空
-    }
-  })
+const refresh = () => {
+  // 重新获取详情
+  getDetail()
 }
 
+/** 当前的Tab */
+const activeTab = ref('form')
+
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {
@@ -379,3 +297,50 @@ onMounted(async () => {
   userOptions.value = await UserApi.getSimpleUserList()
 })
 </script>
+
+<style lang="scss" scoped>
+$wrap-padding-height: 20px;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 194px;
+
+.processInstance-wrap-main {
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  overflow: auto;
+
+  .form-scroll-area {
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    :deep(.box-card) {
+      height: 100%;
+      flex: 1;
+
+      .el-card__body {
+        height: 100%;
+        padding: 0;
+      }
+    }
+  }
+}
+
+.form-box {
+  :deep(.el-card) {
+    border: none;
+  }
+}
+</style>

src/views/bpm/processInstance/detail/index_new.vue

@@ -1,227 +0,0 @@
-<template>
-  <ContentWrap :bodyStyle="{ padding: '10px 20px' }" class="position-relative">
-    <img
-      class="position-absolute right-20px"
-      width="150"
-      :src="auditIcons[processInstance.status]"
-      alt=""
-    />
-    <div class="text-#878c93">编号：{{ id }}</div>
-    <el-divider class="!my-8px" />
-    <div class="flex items-center gap-5 mb-10px">
-      <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
-      <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="processInstance.status" />
-    </div>
-
-    <div class="flex items-center gap-5 mb-10px text-13px">
-      <div class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600">
-        <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" />
-        {{ processInstance?.startUser?.nickname }}
-      </div>
-      <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
-    </div>
-
-    <el-tabs>
-      <!-- 表单信息 -->
-      <el-tab-pane label="表单信息">
-        <el-row :gutter="10">
-          <el-col :span="18" class="!flex !flex-col formCol">
-            <!-- 表单信息 -->
-            <div v-loading="processInstanceLoading" class="form-box flex flex-col mb-30px flex-1">
-              <!-- 情况一：流程表单 -->
-              <el-col
-                v-if="processInstance?.processDefinition?.formType === 10"
-                :offset="6"
-                :span="16"
-              >
-                <form-create
-                  v-model="detailForm.value"
-                  v-model:api="fApi"
-                  :option="detailForm.option"
-                  :rule="detailForm.rule"
-                />
-              </el-col>
-              <!-- 情况二：业务表单 -->
-              <div v-if="processInstance?.processDefinition?.formType === 20">
-                <BusinessFormComponent :id="processInstance.businessKey" />
-              </div>
-            </div>
-
-            <!-- 操作栏按钮 -->
-            <ProcessInstanceOperationButton
-              ref="operationButtonRef"
-              :processInstance="processInstance"
-              :userOptions="userOptions"
-              @success="getDetail"
-            />
-          </el-col>
-          <el-col :span="6">
-            <!-- 审批记录时间线 -->
-            <ProcessInstanceTimeline :process-instance="processInstance" :tasks="tasks" />
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-      <!-- 流程图 -->
-      <el-tab-pane label="流程图">
-        <ProcessInstanceBpmnViewer
-          :id="`${id}`"
-          :bpmn-xml="bpmnXml"
-          :loading="processInstanceLoading"
-          :process-instance="processInstance"
-          :tasks="tasks"
-        />
-      </el-tab-pane>
-      <!-- 流转记录 -->
-      <el-tab-pane label="流转记录">
-        <ProcessInstanceTaskList
-          :loading="tasksLoad"
-          :process-instance="processInstance"
-          :tasks="tasks"
-          @refresh="getTaskList"
-        />
-      </el-tab-pane>
-      <!-- 流转评论 -->
-      <el-tab-pane label="流转评论"> 流转评论 </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
-</template>
-<script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
-import { DICT_TYPE } from '@/utils/dict'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import * as DefinitionApi from '@/api/bpm/definition'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as TaskApi from '@/api/bpm/task'
-import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
-import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
-import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
-import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
-import { registerComponent } from '@/utils/routerHelper'
-import * as UserApi from '@/api/system/user'
-import audit1 from '@/assets/svgs/bpm/audit1.svg'
-import audit2 from '@/assets/svgs/bpm/audit2.svg'
-import audit3 from '@/assets/svgs/bpm/audit3.svg'
-
-defineOptions({ name: 'BpmProcessInstanceDetail' })
-
-const { query } = useRoute() // 查询参数
-const message = useMessage() // 消息弹窗
-const id = query.id as unknown as string // 流程实例的编号
-const processInstanceLoading = ref(false) // 流程实例的加载中
-const processInstance = ref<any>({}) // 流程实例
-const operationButtonRef = ref()
-const bpmnXml = ref('') // BPMN XML
-const tasksLoad = ref(true) // 任务的加载中
-const tasks = ref<any[]>([]) // 任务列表
-const auditIcons = {
-  1: audit1,
-  2: audit2,
-  3: audit3
-}
-
-// ========== 申请信息 ==========
-const fApi = ref<ApiAttrs>() //
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-}) // 流程实例的表单详情
-
-/** 获得详情 */
-const getDetail = () => {
-  // 1. 获得流程实例相关
-  getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
-  getTaskList()
-}
-
-/** 加载流程实例 */
-const BusinessFormComponent = ref<any>(null) // 异步组件
-const getProcessInstance = async () => {
-  try {
-    processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(id)
-    if (!data) {
-      message.error('查询不到流程信息！')
-      return
-    }
-    processInstance.value = data
-
-    // 设置表单信息
-    const processDefinition = data.processDefinition
-    if (processDefinition.formType === 10) {
-      setConfAndFields2(
-        detailForm,
-        processDefinition.formConf,
-        processDefinition.formFields,
-        data.formVariables
-      )
-      nextTick().then(() => {
-        fApi.value?.btn.show(false)
-        fApi.value?.resetBtn.show(false)
-        fApi.value?.disabled(true)
-      })
-    } else {
-      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
-    }
-
-    // 加载流程图
-    bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
-  } finally {
-    processInstanceLoading.value = false
-  }
-}
-
-/** 加载任务列表 */
-const getTaskList = async () => {
-  try {
-    // 获得未取消的任务
-    tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(id)
-    tasks.value = []
-    // 1.1 移除已取消的审批
-    data.forEach((task) => {
-      if (task.status !== 4) {
-        tasks.value.push(task)
-      }
-    })
-    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
-    tasks.value.sort((a, b) => {
-      // 有已完成的情况，按照完成时间倒序
-      if (a.endTime && b.endTime) {
-        return b.endTime - a.endTime
-      } else if (a.endTime) {
-        return 1
-      } else if (b.endTime) {
-        return -1
-        // 都是未完成，按照创建时间倒序
-      } else {
-        return b.createTime - a.createTime
-      }
-    })
-
-    // 获得需要自己审批的任务
-    operationButtonRef.value?.loadRunningTask(tasks.value)
-  } finally {
-    tasksLoad.value = false
-  }
-}
-
-/** 初始化 */
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-onMounted(async () => {
-  getDetail()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-})
-</script>
-
-<style lang="scss" scoped>
-.form-box {
-  :deep(.el-card) {
-    border: none;
-  }
-}
-</style>

src/views/bpm/processInstance/index.vue

@@ -10,7 +10,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="流程名称" prop="name">
+      <el-form-item label="" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入流程名称"
@@ -19,21 +19,19 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="所属流程" prop="processDefinitionId">
-        <el-input
-          v-model="queryParams.processDefinitionId"
-          placeholder="请输入流程定义的编号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
       </el-form-item>
-      <el-form-item label="流程分类" prop="category">
+
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
+      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
+        <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 -->
         <el-select
           v-model="queryParams.category"
           placeholder="请选择流程分类"
           clearable
-          class="!w-240px"
+          class="!w-155px"
         >
           <el-option
             v-for="category in categoryList"
@@ -43,43 +41,79 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="流程状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择流程状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </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
-          v-hasPermi="['bpm:process-instance:query']"
-          @click="handleCreate(undefined)"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
+
+      <!-- 高级筛选 -->
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
+      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+        <el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List">
+          高级筛选
         </el-button>
+        <el-popover
+          ref="popoverRef"
+          trigger="click"
+          virtual-triggering
+          persistent
+          :width="400"
+          :show-arrow="false"
+          placement="bottom-end"
+        >
+          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+            <el-select
+              v-model="queryParams.category"
+              placeholder="请选择流程发起人"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="category in categoryList"
+                :key="category.code"
+                :label="category.name"
+                :value="category.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="所属流程"
+            class="bold-label"
+            label-position="top"
+            prop="processDefinitionKey"
+          >
+            <el-input
+              v-model="queryParams.processDefinitionKey"
+              placeholder="请输入流程定义的标识"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-390px"
+            />
+          </el-form-item>
+          <el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="请选择流程状态"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="发起时间" class="bold-label" label-position="top" 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-popover>
+        <!-- TODO @tuituji：这里应该有确认，和取消、清空搜索条件，三个按钮。 -->
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -95,6 +129,8 @@
         min-width="100"
         fixed="left"
       />
+      <!-- TODO @芋艿：摘要 -->
+      <!-- TODO @tuituji：流程状态。可见需求文档里  -->
       <el-table-column label="流程状态" prop="status" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
@@ -114,7 +150,7 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
+      <!--<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
         <template #default="scope">
           {{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
         </template>
@@ -126,7 +162,7 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />
+      -->
       <el-table-column label="操作" align="center" fixed="right" width="180">
         <template #default="scope">
           <el-button
@@ -162,11 +198,13 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
+// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。
+import { List } from '@element-plus/icons-vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import { ProcessInstanceVO } from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
 
@@ -183,13 +221,13 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: '',
-  processDefinitionId: undefined,
+  processDefinitionKey: undefined,
   category: undefined,
   status: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -222,7 +260,6 @@ const handleCreate = async (row?: ProcessInstanceVO) => {
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
       row.processDefinitionId
     )
-    debugger
     if (processDefinitionDetail.formType === 20) {
       message.error('重新发起流程失败，原因：该流程使用业务表单，不支持重新发起')
       return
@@ -261,6 +298,15 @@ const handleCancel = async (row) => {
   await getList()
 }
 
+// TODO @tuituji：这个 import 是不是没用哈？
+import { ClickOutside as vClickOutside } from 'element-plus'
+
+// TODO @tuituji：onClickAdvancedSearch。方法名叫这个，会更好一些哇？打开高级搜索。
+const popoverRef = ref()
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
+
 /** 激活时 **/
 onActivated(() => {
   getList()
@@ -272,3 +318,8 @@ onMounted(async () => {
   categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
+<style>
+.bold-label .el-form-item__label {
+  font-weight: bold; /* 将字体加粗 */
+}
+</style>

src/views/bpm/processInstance/manager/index.vue

@@ -79,6 +79,10 @@
           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-form-item>
     </el-form>
   </ContentWrap>
 

src/views/bpm/simple/SimpleModelDesign.vue

@@ -0,0 +1,19 @@
+<template>
+  <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
+    <SimpleProcessDesigner :model-id="modelId" @success="close" />
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
+
+defineOptions({
+  name: 'SimpleModelDesign'
+})
+const router = useRouter() // 路由
+const { query } = useRoute() // 路由的查询
+const modelId = query.modelId as string
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
+</script>
+<style lang="scss" scoped></style>

src/views/bpm/simpleWorkflow/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <section class="dingflow-design">
-      <div class="box-scale">
-        <nodeWrap v-model:nodeConfig="nodeConfig" />
-        <div class="end-node">
-          <div class="end-node-circle"></div>
-          <div class="end-node-text">流程结束</div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts" setup>
-import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
-defineOptions({ name: 'SimpleWorkflowDesignEditor' })
-let nodeConfig = ref({
-  nodeName: '发起人',
-  type: 0,
-  id: 'root',
-  formPerms: {},
-  nodeUserList: [],
-  childNode: {}
-})
-</script>
-<style>
-@import url('@/components/SimpleProcessDesigner/theme/workflow.css');
-</style>

src/views/bpm/task/copy/index.vue

@@ -45,7 +45,12 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column align="center" label="流程名" prop="processInstanceName" min-width="180" />
-      <el-table-column align="center" label="流程发起人" prop="startUserName" min-width="100" />
+      <el-table-column
+        align="center"
+        label="流程发起人"
+        prop="startUser.nickname"
+        min-width="100"
+      />
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -53,8 +58,11 @@
         prop="processInstanceStartTime"
         width="180"
       />
-      <el-table-column align="center" label="抄送任务" prop="taskName" min-width="180" />
-      <el-table-column align="center" label="抄送人" prop="creatorName" min-width="100" />
+      <el-table-column align="center" label="抄送节点" prop="activityName" min-width="180" />
+      <el-table-column align="center" label="抄送人" min-width="100">
+        <template #default="scope"> {{ scope.row.createUser?.nickname || '系统' }} </template>
+      </el-table-column>
+      <el-table-column align="center" label="抄送意见" prop="reason" width="150" />
       <el-table-column
         align="center"
         label="抄送时间"
@@ -111,11 +119,16 @@ const getList = async () => {
 
 /** 处理审批按钮 */
 const handleAudit = (row: any) => {
+  const query = {
+    id: row.processInstanceId,
+    activityId: undefined
+  }
+  if (row.activityId) {
+    query.activityId = row.activityId
+  }
   push({
     name: 'BpmProcessInstanceDetail',
-    query: {
-      id: row.processInstanceId
-    }
+    query: query
   })
 }
 

src/views/bpm/task/done/index.vue

@@ -158,7 +158,8 @@ const handleAudit = (row: any) => {
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
     }
   })
 }

src/views/bpm/task/todo/index.vue

@@ -140,7 +140,8 @@ const handleAudit = (row: any) => {
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
     }
   })
 }

src/views/crm/contract/detail/index.vue

@@ -36,7 +36,7 @@
           ref="permissionListRef"
           :biz-id="contract.id!"
           :biz-type="BizTypeEnum.CRM_CONTRACT"
-          :show-action="!permissionListRef?.isPool || false"
+          :show-action="true"
           @quit-team="close"
         />
       </el-tab-pane>

src/views/crm/product/detail/index.vue

@@ -24,7 +24,7 @@ defineOptions({ name: 'CrmProductDetail' })
 
 const route = useRoute()
 const message = useMessage()
-const id = Number(route.params.id) // 编号
+const id = route.params.id // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductApi.ProductVO>({} as ProductApi.ProductVO) // 详情
 

src/views/infra/build/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <ContentWrap>
-    <el-row>
-      <el-col>
-        <div class="float-right mb-2">
-          <el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
-          <el-button size="small" type="success" @click="showOption">生成 Options</el-button>
-          <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
-        </div>
-      </el-col>
-    </el-row>
+  <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0">
     <!-- 表单设计器 -->
-    <FcDesigner ref="designer" height="780px" />
+    <div
+      class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
+    >
+      <fc-designer class="my-designer" ref="designer" :config="designerConfig">
+        <template #handle>
+          <el-button size="small" type="primary" plain @click="showJson">生成JSON</el-button>
+          <el-button size="small" type="success" plain @click="showOption">生成Options</el-button>
+          <el-button size="small" type="danger" plain @click="showTemplate">生成组件</el-button>
+        </template>
+      </fc-designer>
+    </div>
   </ContentWrap>
 
   <!-- 弹窗：表单预览 -->
@@ -43,6 +44,35 @@ defineOptions({ name: 'InfraBuild' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
 
+// 表单设计器配置
+const designerConfig = ref({
+  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
+  autoActive: true, // 是否自动选中拖入的组件
+  useTemplate: false, // 是否生成vue2语法的模板组件
+  formOptions: {
+    form: {
+      labelWidth: '100px' // 设置默认的 label 宽度为 100px
+    }
+  }, // 定义表单配置默认值
+  fieldReadonly: false, // 配置field是否可以编辑
+  hiddenDragMenu: false, // 隐藏拖拽操作按钮
+  hiddenDragBtn: false, // 隐藏拖拽按钮
+  hiddenMenu: [], // 隐藏部分菜单
+  hiddenItem: [], // 隐藏部分组件
+  hiddenItemConfig: {}, // 隐藏组件的部分配置项
+  disabledItemConfig: {}, // 禁用组件的部分配置项
+  showSaveBtn: false, // 是否显示保存按钮
+  showConfig: true, // 是否显示右侧的配置界面
+  showBaseForm: true, // 是否显示组件的基础配置表单
+  showControl: true, // 是否显示组件联动
+  showPropsForm: true, // 是否显示组件的属性配置表单
+  showEventForm: true, // 是否显示组件的事件配置表单
+  showValidateForm: true, // 是否显示组件的验证配置表单
+  showFormConfig: true, // 是否显示表单配置
+  showInputData: true, // 是否显示录入按钮
+  showDevice: true, // 是否显示多端适配选项
+  appendConfigData: [] // 定义渲染规则所需的formData
+})
 const designer = ref() // 表单设计器
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
@@ -140,3 +170,13 @@ onMounted(async () => {
   hljs.registerLanguage('json', json)
 })
 </script>
+
+<style>
+.my-designer {
+  ._fc-l,
+  ._fc-m,
+  ._fc-r {
+    border-top: none;
+  }
+}
+</style>

src/views/infra/webSocket/index.vue

@@ -71,7 +71,7 @@
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import { useWebSocket } from '@vueuse/core'
-import { getAccessToken } from '@/utils/auth'
+import { getRefreshToken } from '@/utils/auth'
 import * as UserApi from '@/api/system/user'
 
 defineOptions({ name: 'InfraWebSocket' })
@@ -79,7 +79,9 @@ defineOptions({ name: 'InfraWebSocket' })
 const message = useMessage() // 消息弹窗
 
 const server = ref(
-  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
+  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+    '?token=' +
+    getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
 ) // WebSocket 服务地址
 const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
 const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色

src/views/iot/device/detail/index.vue

@@ -31,7 +31,7 @@ defineOptions({ name: 'IoTDeviceDetail' })
 
 const route = useRoute()
 const message = useMessage()
-const id = Number(route.params.id) // 编号
+const id = route.params.id // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 产品详情
 const device = ref<DeviceVO>({} as DeviceVO) // 设备详情

src/views/iot/product/detail/index.vue

@@ -33,7 +33,7 @@ const { currentRoute } = useRouter()
 
 const route = useRoute()
 const message = useMessage()
-const id = Number(route.params.id) // 编号
+const id = route.params.id // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 详情
 const activeTab = ref('info') // 默认激活的标签页

src/views/knowledge/dataset-form/form-step1.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="upload-container">
+    <!-- 标题 -->
+    <div class="title">
+      <div>选择数据源</div>
+    </div>
+
+    <!-- 数据源选择 -->
+    <div class="resource-btn" >导入已有文本</div>
+
+    <!-- 上传文件区域 -->
+    <el-form>
+      <div class="upload-section">
+        <div class="upload-label">上传文本文件</div>
+        <el-upload
+          class="upload-area"
+          action="#"
+          :file-list="fileList"
+          :on-remove="handleRemove"
+          :before-upload="beforeUpload"
+          list-type="text"
+          drag
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">拖拽文件至此，或者 <em>选择文件</em></div>
+          <div class="el-upload__tip">
+            已支持 TXT、MARKDOWN、PDF、HTML、XLSX、XLS、DOCX、CSV、EML、MSG、PPTX、PPT、XML、EPUB，每个文件不超过 15MB。
+          </div>
+        </el-upload>
+      </div>
+
+      <!-- 下一步按钮 -->
+      <div class="next-button">
+        <el-button type="primary" :disabled="!fileList.length">下一步</el-button>
+      </div>
+    </el-form>
+
+    <!-- 知识库创建 -->
+    <div class="create-knowledge">
+      <el-link type="primary" underline>创建一个空知识库</el-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const fileList = ref([])
+
+const handleRemove = (file, fileList) => {
+  console.log(file, fileList)
+}
+
+const beforeUpload = (file) => {
+  fileList.value.push(file)
+  return false
+}
+</script>
+
+<style scoped lang="scss">
+.upload-container {
+  width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #ebebeb;
+}
+
+.title {
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.resource-btn {
+  margin-top: 20px;
+  border-radius: 10px;
+  cursor: pointer;
+  width: 150px;
+  border: 1.5px solid #528bff;
+  padding: 10px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 30px;
+  color: #101828;
+}
+
+.upload-section {
+  margin: 20px 0;
+  padding-top: 10px;
+}
+
+.upload-label {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #303133;
+}
+
+.upload-area {
+  margin-top: 10px;
+  border: 1px dashed #d9d9d9;
+  padding: 40px;
+  text-align: center;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+}
+
+.el-upload__text em {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.el-upload__tip {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.next-button {
+  text-align: left;
+  margin-top: 20px;
+}
+
+.create-knowledge {
+  text-align: left;
+  margin-top: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+
+.source-radio-group {
+  display: flex;
+  justify-content: space-between;
+}
+
+.el-radio-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  padding: 10px 20px;
+}
+
+.el-radio-button .el-icon {
+  margin-right: 8px;
+}
+</style>

src/views/knowledge/dataset-form/form-step2.vue

@@ -0,0 +1,168 @@
+<template>
+  <el-row>
+    <!-- Left Section -->
+    <el-col :span="12">
+      <el-card>
+        <!-- 分段设置 -->
+        <el-form>
+          <el-form-item label="分段设置">
+            <el-radio-group v-model="segmentSetting">
+              <el-radio label="自动分段与清洗">自动分段与清洗</el-radio>
+              <el-radio label="自定义">自定义</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <!-- 索引方式 -->
+          <el-form-item label="索引方式">
+            <el-radio-group v-model="indexingMethod">
+              <el-radio label="高质量">高质量</el-radio>
+              <el-radio label="经济">经济</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <!-- Embedding 模型 -->
+          <el-form-item label="Embedding 模型">
+            <el-select v-model="embeddingModel" placeholder="Select Embedding Model">
+              <el-option label="text-embedding-3-large" value="text-embedding-3-large"/>
+            </el-select>
+          </el-form-item>
+
+          <!-- 检索设置 -->
+          <el-form-item label="检索设置">
+            <el-card style="width: 400px;">
+              <div class="card-header">
+                <span>向量检索</span>
+              </div>
+              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
+              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
+            </el-card>
+
+            <el-card style="width: 400px;">
+              <div class="card-header">
+                <span>全文检索</span>
+              </div>
+              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
+              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
+            </el-card>
+
+            <el-card style="width: 400px;">
+              <div class="card-header">
+                <span>混合检索</span>
+              </div>
+              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
+              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
+            </el-card>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-col>
+
+    <!-- Right Section: 分段预览 -->
+    <el-col :span="9">
+      <el-card shadow="never">
+        <div class="previews-title">分段预览</div>
+        <template v-for="(segment, index) in segmentPreviews" :key="index">
+          <div class="segment-preview">
+            <div class="title">
+              <div class="left">
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25"
+                    stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="id">{{ segment.number }}</span>
+              </div>
+
+              <div class="right">
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M4 3.5H8M6 3.5V8.5M3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V3.9C10.5 3.05992 10.5 2.63988 10.3365 2.31901C10.1927 2.03677 9.96323 1.8073 9.68099 1.66349C9.36012 1.5 8.94008 1.5 8.1 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5Z"
+                    stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="char-size">7777 字符</span>
+              </div>
+            </div>
+
+            <div class="content">{{ segment.text }}</div>
+          </div>
+        </template>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+// Reactive variables for form control
+const segmentSetting = ref('自动分段与清洗');
+const indexingMethod = ref('高质量');
+const embeddingModel = ref('text-embedding-3-large');
+const directionalSearch = ref(true);
+const topK = ref(3);
+const scoreThreshold = ref(0.5);
+
+// Mock data for segment previews
+const segmentPreviews = ref([
+  {number: '001', text: "同步obs模型...'UAE-large-V1'"},
+  {number: '002', text: "同步obs模型...'plip'"},
+  {number: '003', text: "同步obs模型...'phoBERT-base-v2'"},
+  {number: '004', text: "同步obs模型...'lama3-bb-bnb-4bit'"},
+  {number: '005', text: "同步obs模型...'t5-base-split-and-rephrase'"}
+]);
+</script>
+
+<style scoped lang="scss">
+/* Add any custom styles here */
+
+.previews-title {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.segment-preview {
+  background-color: rgba(228, 228, 228, 0.38);
+  border-radius: 10px;
+  padding: 15px;
+  margin-top: 15px;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      border-right: 5px;
+      font-size: 13px;
+      font-style: italic;
+      font-weight: 500;
+      color: #676767;
+      box-sizing: border-box;
+      align-items: center;
+
+      .id {
+        margin-left: 5px;
+      }
+    }
+
+    .right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .char-size {
+        margin-left: 5px;
+        font-size: 13px;
+        color: rgba(57, 57, 57, 0.66);
+      }
+    }
+  }
+
+  .content {
+    margin-top: 10px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+</style>

src/views/knowledge/dataset.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="knowledge-base-container">
+    <div class="card-container">
+      <el-card class="create-card" shadow="hover">
+        <div class="create-content">
+          <el-icon class="create-icon"><Plus /></el-icon>
+          <span class="create-text">创建知识库</span>
+        </div>
+        <div class="create-footer">
+          导入您自己的文本数据或通过 Webhook 实时写入数据以增强 LLM 的上下文。
+        </div>
+      </el-card>
+
+      <el-card class="document-card" shadow="hover" v-for="index in 4" :key="index">
+        <div class="document-header">
+          <el-icon><Folder /></el-icon>
+          <span>接口鉴权示例代码.md</span>
+        </div>
+        <div class="document-info">
+          <el-tag size="small">1 文档</el-tag>
+          <el-tag size="small" type="info">5 千字符</el-tag>
+          <el-tag size="small" type="warning">0 关联应用</el-tag>
+        </div>
+        <p class="document-description">
+          useful for when you want to answer queries about the 接口鉴权示例代码.md
+        </p>
+      </el-card>
+    </div>
+
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        :small="false"
+        :disabled="false"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Folder, Plus } from '@element-plus/icons-vue'
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(100) // 假设总共有100条数据
+
+const handleSizeChange = (val) => {
+  console.log(`每页 ${val} 条`)
+}
+
+const handleCurrentChange = (val) => {
+  console.log(`当前页: ${val}`)
+}
+</script>
+
+<style scoped>
+.knowledge-base-container {
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  position: absolute;
+  padding: 20px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  bottom: 40px;
+  width: 100%;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap; /* Enable wrapping */
+  gap: 20px;
+  margin-bottom: auto; /* Pushes pagination to the bottom */
+}
+
+.create-card, .document-card {
+  flex: 1 1 360px; /* Allow cards to grow and shrink */
+  min-width: 0;
+  max-width: 400px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.create-card {
+  background-color: rgba(168, 168, 168, 0.22);
+}
+.create-card:hover {
+  background-color: #fff;
+}
+
+.create-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.create-icon {
+  font-size: 24px;
+  color: #409EFF;
+}
+
+.create-text {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.create-footer {
+  font-size: 14px;
+  color: #909399;
+  line-height: 1.5;
+}
+
+.document-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.document-info {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.document-description {
+  color: #606266;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.pagination-container {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+</style>

src/views/mall/product/property/value/index.vue

@@ -105,7 +105,7 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  propertyId: Number(params.propertyId),
+  propertyId: params.propertyId,
   name: undefined
 })
 const queryFormRef = ref() // 搜索的表单

src/views/mall/product/spu/components/SkuList.vue

@@ -180,17 +180,17 @@
     </el-table-column>
     <el-table-column align="center" label="销售价(元)" min-width="80">
       <template #default="{ row }">
-        {{ formatToFraction(row.price) }}
+        {{ row.price }}
       </template>
     </el-table-column>
     <el-table-column align="center" label="市场价(元)" min-width="80">
       <template #default="{ row }">
-        {{ formatToFraction(row.marketPrice) }}
+        {{ row.marketPrice }}
       </template>
     </el-table-column>
     <el-table-column align="center" label="成本价(元)" min-width="80">
       <template #default="{ row }">
-        {{ formatToFraction(row.costPrice) }}
+        {{ row.costPrice }}
       </template>
     </el-table-column>
     <el-table-column align="center" label="库存" min-width="80">
@@ -211,12 +211,12 @@
     <template v-if="formData!.subCommissionType">
       <el-table-column align="center" label="一级返佣(元)" min-width="80">
         <template #default="{ row }">
-          {{ formatToFraction(row.firstBrokeragePrice) }}
+          {{ row.firstBrokeragePrice }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="二级返佣(元)" min-width="80">
         <template #default="{ row }">
-          {{ formatToFraction(row.secondBrokeragePrice) }}
+          {{ row.secondBrokeragePrice }}
         </template>
       </el-table-column>
     </template>

src/views/mall/product/spu/form/InfoForm.vue

@@ -45,7 +45,7 @@
         :show-word-limit="true"
         class="w-80!"
         maxlength="128"
-        placeholder="请输入商品名称"
+        placeholder="请输入商品简介"
         type="textarea"
       />
     </el-form-item>

src/views/mall/product/spu/form/SkuForm.vue

@@ -8,7 +8,7 @@
     :rules="rules"
     label-width="120px"
   >
-    <el-form-item label="分销类型" props="subCommissionType">
+    <el-form-item label="分销类型" prop="subCommissionType">
       <el-radio-group
         v-model="formData.subCommissionType"
         class="w-80"
@@ -18,7 +18,7 @@
         <el-radio :value="true" class="radio">单独设置</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="商品规格" props="specType">
+    <el-form-item label="商品规格" prop="specType">
       <el-radio-group v-model="formData.specType" class="w-80" @change="onChangeSpec">
         <el-radio :value="false" class="radio">单规格</el-radio>
         <el-radio :value="true">多规格</el-radio>

src/views/mall/promotion/article/index.vue

@@ -80,6 +80,7 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="ID" min-width="180" prop="id" />
       <el-table-column align="center" label="封面" min-width="80" prop="picUrl">
         <template #default="{ row }">
           <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />

src/views/mall/promotion/combination/activity/index.vue

@@ -4,27 +4,27 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="活动名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入活动名称"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
+          clearable
+          placeholder="请输入活动名称"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="活动状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          placeholder="请选择活动状态"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择活动状态"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -35,15 +35,22 @@
         </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 @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
         <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
           v-hasPermi="['promotion:combination-activity:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
         </el-button>
       </el-form-item>
     </el-form>
@@ -51,77 +58,77 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="活动编号" prop="id" min-width="80" />
-      <el-table-column label="活动名称" prop="name" min-width="140" />
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column label="活动编号" min-width="80" prop="id" />
+      <el-table-column label="活动名称" min-width="140" prop="name" />
       <el-table-column label="活动时间" min-width="210">
         <template #default="scope">
           {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
           ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
         </template>
       </el-table-column>
-      <el-table-column label="商品图片" prop="spuName" min-width="80">
+      <el-table-column label="商品图片" min-width="80" prop="spuName">
         <template #default="scope">
           <el-image
+            :preview-src-list="[scope.row.picUrl]"
             :src="scope.row.picUrl"
             class="h-40px w-40px"
-            :preview-src-list="[scope.row.picUrl]"
             preview-teleported
           />
         </template>
       </el-table-column>
-      <el-table-column label="商品标题" prop="spuName" min-width="300" />
+      <el-table-column label="商品标题" min-width="300" prop="spuName" />
       <el-table-column
-        label="原价"
-        prop="marketPrice"
-        min-width="100"
         :formatter="fenToYuanFormat"
+        label="原价"
+        min-width="100"
+        prop="marketPrice"
       />
-      <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+      <el-table-column label="拼团价" min-width="100" prop="seckillPrice">
         <template #default="scope">
           {{ formatCombinationPrice(scope.row.products) }}
         </template>
       </el-table-column>
-      <el-table-column label="开团组数" prop="groupCount" min-width="100" />
-      <el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
-      <el-table-column label="购买次数" prop="recordCount" min-width="100" />
-      <el-table-column label="活动状态" align="center" prop="status" min-width="100">
+      <el-table-column label="开团组数" min-width="100" prop="groupCount" />
+      <el-table-column label="成团组数" min-width="100" prop="groupSuccessCount" />
+      <el-table-column label="购买次数" min-width="100" prop="recordCount" />
+      <el-table-column align="center" label="活动状态" min-width="100" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
         :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="150px" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" width="150px">
         <template #default="scope">
           <el-button
+            v-hasPermi="['promotion:combination-activity:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['promotion:combination-activity:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-if="scope.row.status === 0"
+            v-hasPermi="['promotion:combination-activity:close']"
             link
             type="danger"
             @click="handleClose(scope.row.id)"
-            v-if="scope.row.status === 0"
-            v-hasPermi="['promotion:combination-activity:close']"
           >
             关闭
           </el-button>
           <el-button
+            v-else
+            v-hasPermi="['promotion:combination-activity:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-else
-            v-hasPermi="['promotion:combination-activity:delete']"
           >
             删除
           </el-button>
@@ -130,9 +137,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -141,12 +148,11 @@
   <CombinationActivityForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
 import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
 import CombinationActivityForm from './CombinationActivityForm.vue'
-import { formatDate } from '@/utils/formatTime'
 import { fenToYuanFormat } from '@/utils/formatter'
 import { fenToYuan } from '@/utils'
 
@@ -165,7 +171,6 @@ const queryParams = reactive({
   status: null
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
 /** 查询列表 */
 const getList = async () => {
@@ -197,12 +202,11 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-// TODO 芋艿：这里要改下
 /** 关闭按钮操作 */
 const handleClose = async (id: number) => {
   try {
     // 关闭的二次确认
-    await message.confirm('确认关闭该秒杀活动吗？')
+    await message.confirm('确认关闭该拼团活动吗？')
     // 发起关闭
     await CombinationActivityApi.closeCombinationActivity(id)
     message.success('关闭成功')

src/views/mall/promotion/components/SpuAndSkuList.vue

@@ -30,13 +30,13 @@
     <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
     <el-table-column align="center" label="库存" min-width="90" prop="stock" />
     <el-table-column
-      v-if="spuData.length > 1 && isDelete"
+      v-if="spuData.length > 1 && deletable"
       align="center"
       label="操作"
       min-width="90"
     >
       <template #default="scope">
-        <el-button type="primary" link @click="deleteSpu(scope.row.id)"> 删除 </el-button>
+        <el-button link type="primary" @click="deleteSpu(scope.row.id)"> 删除</el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -56,13 +56,13 @@ const props = defineProps<{
   spuList: T[]
   ruleConfig: RuleConfig[]
   spuPropertyListP: SpuProperty<T>[]
-  isDelete?: boolean // SPU 是否可删除；TODO deletable 换成这个名字好点。
+  deletable?: boolean // SPU 是否可删除；
 }>()
 
 const spuData = ref<Spu[]>([]) // spu 详情数据列表
 const skuListRef = ref() // 商品属性列表Ref
 const spuPropertyList = ref<SpuProperty<T>[]>([]) // spuId 对应的 sku 的属性列表
-const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
+const expandRowKeys = ref<string[]>([]) // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
 
 /**
  * 获取所有 sku 活动配置
@@ -71,10 +71,10 @@ const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属
  */
 const getSkuConfigs = (extendedAttribute: string) => {
   skuListRef.value.validateSku()
-  const seckillProducts = []
+  const seckillProducts: any[] = []
   spuPropertyList.value.forEach((item) => {
-    item.spuDetail.skus.forEach((sku) => {
-      seckillProducts.push(sku[extendedAttribute])
+    item.spuDetail.skus?.forEach((sku: any) => {
+      seckillProducts.push(sku[extendedAttribute] as any)
     })
   })
   return seckillProducts
@@ -124,10 +124,10 @@ watch(
   () => props.spuPropertyListP,
   (data) => {
     if (!data) return
-    spuPropertyList.value = data as SpuProperty<T>[]
+    spuPropertyList.value = data as SpuProperty<T>[] as any
     // 解决如果之前选择的是单规格 spu 的话后面选择多规格 sku 多规格属性信息不展示的问题。解决方法：让 SkuList 组件重新渲染（行折叠会干掉包含的组件展开时会重新加载）
     setTimeout(() => {
-      expandRowKeys.value = data.map((item) => item.spuId)
+      expandRowKeys.value = data.map((item) => item.spuId + '')
     }, 200)
   },
   {

src/views/mall/promotion/components/SpuSelect.vue

@@ -115,7 +115,7 @@ import { getPropertyList, PropertyAndValues, SkuList } from '@/views/mall/produc
 import { ElTable } from 'element-plus'
 import { dateFormatter } from '@/utils/formatTime'
 import { createImageViewer } from '@/components/ImageViewer'
-import { formatToFraction } from '@/utils'
+import { floatToFixed2, formatToFraction } from '@/utils'
 import { defaultProps, handleTree } from '@/utils/tree'
 
 import * as ProductCategoryApi from '@/api/mall/product/category'
@@ -228,6 +228,13 @@ const expandChange = async (row: ProductSpuApi.Spu, expandedRows?: ProductSpuApi
   }
   // 获取 SPU 详情
   const res = (await ProductSpuApi.getSpu(row.id as number)) as ProductSpuApi.Spu
+  res.skus?.forEach((item) => {
+    item.price = floatToFixed2(item.price)
+    item.marketPrice = floatToFixed2(item.marketPrice)
+    item.costPrice = floatToFixed2(item.costPrice)
+    item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
+    item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
+  })
   propertyList.value = getPropertyList(res)
   spuData.value = res
   isExpand.value = true

src/views/mall/promotion/coupon/components/CouponSelect.vue

@@ -116,6 +116,7 @@ import {
   validityTypeFormat
 } from '@/views/mall/promotion/coupon/formatter'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { CouponTemplateTakeTypeEnum } from '@/utils/constants'
 
 defineOptions({ name: 'CouponSelect' })
 
@@ -128,7 +129,7 @@ const emit = defineEmits<{
   (e: 'change', v: CouponTemplateApi.CouponTemplateVO[]): void
 }>()
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('选择优惠卷') // 弹窗的标题
+const dialogTitle = ref('选择优惠劵') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -138,7 +139,7 @@ const queryParams = reactive({
   pageSize: 10,
   name: null,
   discountType: null,
-  canTakeTypes: null
+  canTakeTypes: [CouponTemplateTakeTypeEnum.USER.type] // 只获得直接领取的券
 })
 const queryFormRef = ref() // 搜索的表单
 const selectedCouponList = ref<CouponTemplateApi.CouponTemplateVO[]>([]) // 选择的数据

src/views/mall/promotion/coupon/formatter.ts

@@ -16,10 +16,14 @@ export const discountFormat = (row: CouponTemplateVO) => {
 
 // 格式化【领取上限】
 export const takeLimitCountFormat = (row: CouponTemplateVO) => {
-  if (row.takeLimitCount === -1) {
-    return '无领取限制'
+  if (row.takeLimitCount) {
+    if (row.takeLimitCount === -1) {
+      return '无领取限制'
+    }
+    return `${row.takeLimitCount} 张/人`
+  } else {
+    return ' '
   }
-  return `${row.takeLimitCount} 张/人`
 }
 
 // 格式化【有效期限】
@@ -33,8 +37,19 @@ export const validityTypeFormat = (row: CouponTemplateVO) => {
   return '未知【' + row.validityType + '】'
 }
 
+// 格式化【totalCount】
+export const totalCountFormat = (row: CouponTemplateVO) => {
+  if (row.totalCount === -1) {
+    return '不限制'
+  }
+  return row.totalCount
+}
+
 // 格式化【剩余数量】
 export const remainedCountFormat = (row: CouponTemplateVO) => {
+  if (row.totalCount === -1) {
+    return '不限制'
+  }
   return row.totalCount - row.takeCount
 }
 

src/views/mall/promotion/coupon/template/CouponTemplateForm.vue

@@ -115,6 +115,7 @@
         <el-radio-group v-model="formData.takeType">
           <el-radio :key="1" :value="1">直接领取</el-radio>
           <el-radio :key="2" :value="2">指定发放</el-radio>
+          <el-radio :key="2" :value="3">新人劵</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item v-if="formData.takeType === 1" label="发放数量" prop="totalCount">
@@ -309,7 +310,9 @@ const submitForm = async () => {
       validEndTime:
         formData.value.validTimes && formData.value.validTimes.length === 2
           ? formData.value.validTimes[1]
-          : undefined
+          : undefined,
+      totalCount: formData.value.takeType === 1 ? formData.value.totalCount : -1,
+      takeLimitCount: formData.value.takeType === 1 ? formData.value.takeLimitCount : -1
     } as unknown as CouponTemplateApi.CouponTemplateVO
 
     // 设置商品范围

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

@@ -109,7 +109,12 @@
         prop="validityType"
         width="185"
       />
-      <el-table-column align="center" label="发放数量" prop="totalCount" />
+      <el-table-column
+        :formatter="totalCountFormat"
+        align="center"
+        label="发放数量"
+        prop="totalCount"
+      />
       <el-table-column
         :formatter="remainedCountFormat"
         align="center"
@@ -189,6 +194,7 @@ import {
   discountFormat,
   remainedCountFormat,
   takeLimitCountFormat,
+  totalCountFormat,
   validityTypeFormat
 } from '@/views/mall/promotion/coupon/formatter'
 

src/views/mall/promotion/discountActivity/DiscountActivityForm.vue

@@ -8,28 +8,40 @@
       :schema="allSchemas.formSchema"
     >
       <!-- 先选择 -->
-      <!-- TODO @zhangshuai：商品允许选择多个 -->
-      <!-- TODO @zhangshuai：选择后的 SKU，需要后面加个【删除】按钮 -->
-      <!-- TODO @zhangshuai：展示的金额，貌似不对，大了 100 倍，需要看下 -->
-      <!-- TODO @zhangshuai：“优惠类型”，是每个 SKU 可以自定义已设置哈。因为每个商品 SKU 的折扣和减少价格，可能不同。具体交互，可以注册一个 youzan.com 看看；它的交互方式是，如果设置了“优惠金额”，则算“减价”；如果再次设置了“折扣百分比”，就算“打折”；这样形成一个互斥的优惠类型 -->
       <template #spuId>
         <el-button @click="spuSelectRef.open()">选择商品</el-button>
         <SpuAndSkuList
           ref="spuAndSkuListRef"
+          :deletable="true"
           :rule-config="ruleConfig"
           :spu-list="spuList"
           :spu-property-list-p="spuPropertyList"
-          :isDelete="true"
           @delete="deleteSpu"
         >
           <el-table-column align="center" label="优惠金额" min-width="168">
-            <template #default="{ row: sku }">
-              <el-input-number v-model="sku.productConfig.discountPrice" :min="0" class="w-100%" />
+            <template #default="{ row }">
+              <el-input-number
+                v-model="row.productConfig.discountPrice"
+                :max="parseFloat(fenToYuan(row.price))"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="w-100%"
+                @change="handleSkuDiscountPriceChange(row)"
+              />
             </template>
           </el-table-column>
           <el-table-column align="center" label="折扣百分比(%)" min-width="168">
-            <template #default="{ row: sku }">
-              <el-input-number v-model="sku.productConfig.discountPercent" class="w-100%" />
+            <template #default="{ row }">
+              <el-input-number
+                v-model="row.productConfig.discountPercent"
+                :max="100"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="w-100%"
+                @change="handleSkuDiscountPercentChange(row)"
+              />
             </template>
           </el-table-column>
         </SpuAndSkuList>
@@ -45,11 +57,12 @@
 <script lang="ts" setup>
 import { SpuAndSkuList, SpuProperty, SpuSelect } from '../components'
 import { allSchemas, rules } from './discountActivity.data'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, debounce } from 'lodash-es'
 import * as DiscountActivityApi from '@/api/mall/promotion/discount/discountActivity'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
-import { formatToFraction } from '@/utils'
+import { convertToInteger, erpCalculatePercentage, fenToYuan, yuanToFen } from '@/utils'
+import { PromotionDiscountTypeEnum } from '@/utils/constants'
 
 defineOptions({ name: 'PromotionDiscountActivityForm' })
 
@@ -65,7 +78,13 @@ const formRef = ref() // 表单 Ref
 
 const spuSelectRef = ref() // 商品和属性选择 Ref
 const spuAndSkuListRef = ref() // sku 限时折扣  配置组件Ref
-const ruleConfig: RuleConfig[] = []
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.discountPrice',
+    rule: (arg) => arg > 0,
+    message: '商品优惠金额不能为 0 ！！！'
+  }
+]
 const spuList = ref<DiscountActivityApi.SpuExtension[]>([]) // 选择的 spu
 const spuPropertyList = ref<SpuProperty<DiscountActivityApi.SpuExtension>[]>([])
 const spuIds = ref<number[]>([])
@@ -101,21 +120,20 @@ const getSpuDetails = async (
   selectSkus?.forEach((sku) => {
     let config: DiscountActivityApi.DiscountProductVO = {
       skuId: sku.id!,
-      spuId: spu.id,
+      spuId: spu.id!,
       discountType: 1,
       discountPercent: 0,
       discountPrice: 0
     }
     if (typeof products !== 'undefined') {
       const product = products.find((item) => item.skuId === sku.id)
+      if (product) {
+        product.discountPercent = fenToYuan(product.discountPercent) as any
+        product.discountPrice = fenToYuan(product.discountPrice) as any
+      }
       config = product || config
     }
     sku.productConfig = config
-    sku.price = formatToFraction(sku.price)
-    sku.marketPrice = formatToFraction(sku.marketPrice)
-    sku.costPrice = formatToFraction(sku.costPrice)
-    sku.firstBrokeragePrice = formatToFraction(sku.firstBrokeragePrice)
-    sku.secondBrokeragePrice = formatToFraction(sku.secondBrokeragePrice)
   })
   spu.skus = selectSkus as DiscountActivityApi.SkuExtension[]
   spuPropertyList.value.push({
@@ -168,25 +186,13 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formRef.value.formModel as DiscountActivityApi.DiscountActivityVO
     // 获取折扣商品配置
     const products = cloneDeep(spuAndSkuListRef.value.getSkuConfigs('productConfig'))
-    // 校验优惠金额、折扣百分比，是否正确
-    // TODO @puhui999：这个交互，可以参考下 youzan 的
-    let discountInvalid = false
     products.forEach((item: DiscountActivityApi.DiscountProductVO) => {
-      if (item.discountPrice != null && item.discountPrice > 0) {
-        item.discountType = 1
-      } else if (item.discountPercent != null && item.discountPercent > 0) {
-        item.discountType = 2
-      } else {
-        discountInvalid = true
-      }
+      item.discountPercent = convertToInteger(item.discountPercent)
+      item.discountPrice = convertToInteger(item.discountPrice)
     })
-    if (discountInvalid) {
-      message.error('优惠金额和折扣百分比需要填写一个')
-      return
-    }
+    const data = cloneDeep(formRef.value.formModel) as DiscountActivityApi.DiscountActivityVO
     data.products = products
     // 真正提交
     if (formType.value === 'create') {
@@ -204,6 +210,36 @@ const submitForm = async () => {
   }
 }
 
+/** 处理 sku 优惠金额变动 */
+const handleSkuDiscountPriceChange = debounce((row: any) => {
+  // 校验边界
+  if (row.productConfig.discountPrice <= 0) {
+    return
+  }
+
+  // 设置优惠类型：满减
+  row.productConfig.discountType = PromotionDiscountTypeEnum.PRICE.type
+  // 设置折扣
+  row.productConfig.discountPercent = erpCalculatePercentage(
+    row.price - yuanToFen(row.productConfig.discountPrice),
+    row.price
+  )
+}, 200)
+/** 处理 sku 优惠折扣变动 */
+const handleSkuDiscountPercentChange = debounce((row: any) => {
+  // 校验边界
+  if (row.productConfig.discountPercent <= 0 || row.productConfig.discountPercent >= 100) {
+    return
+  }
+
+  // 设置优惠类型：折扣
+  row.productConfig.discountType = PromotionDiscountTypeEnum.PERCENT.type
+  // 设置满减金额
+  row.productConfig.discountPrice = fenToYuan(
+    row.price - row.price * (row.productConfig.discountPercent / 100.0 || 0)
+  )
+}, 200)
+
 /** 重置表单 */
 const resetForm = async () => {
   spuList.value = []

src/views/mall/promotion/discountActivity/discountActivity.data.ts

@@ -1,10 +1,8 @@
 import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
 import { dateFormatter2 } from '@/utils/formatTime'
 
-// TODO @zhangshai：
 // 表单校验
 export const rules = reactive({
-  spuId: [required],
   name: [required],
   startTime: [required],
   endTime: [required],

src/views/mall/promotion/kefu/components/KeFuConversationList.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="kefu">
+  <el-aside class="kefu pt-5px h-100%" width="260px">
+    <div class="color-[#999] font-bold my-10px">
+      会话记录({{ kefuStore.getConversationList.length }})
+    </div>
     <div
-      v-for="item in conversationList"
+      v-for="item in kefuStore.getConversationList"
       :key="item.id"
       :class="{ active: item.id === activeConversationId, pinned: item.adminPinned }"
-      class="kefu-conversation flex items-center"
+      class="kefu-conversation px-10px flex items-center"
       @click="openRightMessage(item)"
       @contextmenu.prevent="rightClick($event as PointerEvent, item)"
     >
@@ -22,14 +25,16 @@
         <div class="ml-10px w-100%">
           <div class="flex justify-between items-center w-100%">
             <span class="username">{{ item.userNickname }}</span>
-            <span class="color-[var(--left-menu-text-color)]" style="font-size: 13px;">
-              {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
+            <span class="color-[#999]" style="font-size: 13px">
+              {{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
             </span>
           </div>
           <!-- 最后聊天内容 -->
           <div
-            v-dompurify-html="getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)"
-            class="last-message flex items-center color-[var(--left-menu-text-color)]"
+            v-dompurify-html="
+              getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
+            "
+            class="last-message flex items-center color-[#999]"
           >
           </div>
         </div>
@@ -63,7 +68,7 @@
         取消
       </li>
     </ul>
-  </div>
+  </el-aside>
 </template>
 
 <script lang="ts" setup>
@@ -72,29 +77,36 @@ import { useEmoji } from './tools/emoji'
 import { formatPast } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { useAppStore } from '@/store/modules/app'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
 
 defineOptions({ name: 'KeFuConversationList' })
 
 const message = useMessage() // 消息弹窗
 const appStore = useAppStore()
+const kefuStore = useMallKefuStore() // 客服缓存
 const { replaceEmoji } = useEmoji()
-const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const activeConversationId = ref(-1) // 选中的会话
 const collapse = computed(() => appStore.getCollapse) // 折叠菜单
 
-/** 加载会话列表 */
-const getConversationList = async () => {
-  const list = await KeFuConversationApi.getConversationList()
-  list.sort((a: KeFuConversationRespVO, _) => (a.adminPinned ? -1 : 1))
-  conversationList.value = list
+/** 计算消息最后发送时间距离现在过去了多久 */
+const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>())
+const calculationLastMessageTime = () => {
+  kefuStore.getConversationList?.forEach((item) => {
+    lastMessageTimeMap.value.set(item.id, formatPast(item.lastMessageTime, 'YYYY-MM-DD'))
+  })
 }
-defineExpose({ getConversationList })
+defineExpose({ calculationLastMessageTime })
 
 /** 打开右侧的消息列表 */
 const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void
 }>()
 const openRightMessage = (item: KeFuConversationRespVO) => {
+  // 同一个会话则不处理
+  if (activeConversationId.value === item.id) {
+    return
+  }
   activeConversationId.value = item.id
   emits('change', item)
 }
@@ -116,7 +128,7 @@ const getConversationDisplayText = computed(
       case KeFuMessageContentTypeEnum.VOICE:
         return '[语音消息]'
       case KeFuMessageContentTypeEnum.TEXT:
-        return replaceEmoji(lastMessageContent)
+        return replaceEmoji(jsonParse(lastMessageContent).text || lastMessageContent)
       default:
         return ''
     }
@@ -153,7 +165,7 @@ const updateConversationPinned = async (adminPinned: boolean) => {
   message.notifySuccess(adminPinned ? '置顶成功' : '取消置顶成功')
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu()
-  await getConversationList()
+  await kefuStore.updateConversation(rightClickConversation.value.id)
 }
 
 /** 删除会话 */
@@ -163,7 +175,7 @@ const deleteConversation = async () => {
   await KeFuConversationApi.deleteConversation(rightClickConversation.value.id)
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu()
-  await getConversationList()
+  kefuStore.deleteConversation(rightClickConversation.value.id)
 }
 
 /** 监听右键菜单的显示状态，添加点击事件监听器 */
@@ -174,48 +186,54 @@ watch(showRightMenu, (val) => {
     document.body.removeEventListener('click', closeRightMenu)
   }
 })
+
+const timer = ref<any>()
+/** 初始化 */
+onMounted(() => {
+  timer.value = setInterval(calculationLastMessageTime, 1000 * 10) // 十秒计算一次
+})
+/** 组件卸载前 */
+onBeforeUnmount(() => {
+  clearInterval(timer.value)
+})
 </script>
 
 <style lang="scss" scoped>
 .kefu {
+  background-color: #e5e4e4;
+
   &-conversation {
     height: 60px;
-    padding: 10px;
     //background-color: #fff;
-    transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
+    //transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
 
     .username {
       min-width: 0;
       max-width: 60%;
+    }
+
+    .last-message {
+      font-size: 13px;
+    }
+
+    .last-message,
+    .username {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
     }
-
-    .last-message {
-      font-size: 13px;
-      width: 200px;
-      overflow: hidden; // 隐藏超出的文本
-      white-space: nowrap; // 禁止换行
-      text-overflow: ellipsis; // 添加省略号
-    }
   }
 
   .active {
-    border-left: 5px #3271ff solid;
-    background-color: var(--left-menu-bg-active-color);
-  }
-
-  .pinned {
-    background-color: var(--left-menu-bg-active-color);
+    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
   }
 
   .right-menu-ul {
     position: absolute;
     background-color: var(--app-content-bg-color);
-    padding: 10px;
+    padding: 5px;
     margin: 0;
     list-style-type: none; /* 移除默认的项目符号 */
     border-radius: 12px;

src/views/mall/promotion/kefu/components/KeFuMessageList.vue

@@ -1,11 +1,11 @@
 <template>
   <el-container v-if="showKeFuMessageList" class="kefu">
-    <el-header>
+    <el-header class="kefu-header">
       <div class="kefu-title">{{ conversation.userNickname }}</div>
     </el-header>
     <el-main class="kefu-content overflow-visible">
-      <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)" @scroll="handleScroll">
-        <div v-if="refreshContent" ref="innerRef" class="w-[100%] pb-3px">
+      <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
+        <div v-if="refreshContent" ref="innerRef" class="w-[100%] px-10px">
           <!-- 消息列表 -->
           <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
             <div class="flex justify-center items-center mb-20px">
@@ -43,15 +43,16 @@
                 class="w-60px h-60px"
               />
               <div
-                :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
-                class="p-10px"
+                :class="{
+                  'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
+                }"
               >
                 <!-- 文本消息 -->
                 <MessageItem :message="item">
                   <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                     <div
-                      v-dompurify-html="replaceEmoji(item.content)"
-                      class="flex items-center"
+                      v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
+                      class="line-height-normal text-justify h-1/1 w-full"
                     ></div>
                   </template>
                 </MessageItem>
@@ -60,9 +61,9 @@
                   <el-image
                     v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
                     :initial-index="0"
-                    :preview-src-list="[item.content]"
-                    :src="item.content"
-                    class="w-200px"
+                    :preview-src-list="[getMessageContent(item).picUrl || item.content]"
+                    :src="getMessageContent(item).picUrl || item.content"
+                    class="w-200px mx-10px"
                     fit="contain"
                     preview-teleported
                   />
@@ -71,14 +72,13 @@
                 <MessageItem :message="item">
                   <ProductItem
                     v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
-                    :spuId="getMessageContent(item).spuId"
                     :picUrl="getMessageContent(item).picUrl"
                     :price="getMessageContent(item).price"
-                    :skuText="getMessageContent(item).introduction"
+                    :sales-count="getMessageContent(item).salesCount"
+                    :spuId="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
                     :title="getMessageContent(item).spuName"
-                    :titleWidth="400"
-                    class="max-w-70%"
-                    priceColor="#FF3000"
+                    class="max-w-300px mx-10px"
                   />
                 </MessageItem>
                 <!-- 订单消息 -->
@@ -86,7 +86,7 @@
                   <OrderItem
                     v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
                     :message="item"
-                    class="max-w-100%"
+                    class="max-w-100% mx-10px"
                   />
                 </MessageItem>
               </div>
@@ -108,23 +108,29 @@
         <Icon class="ml-5px" icon="ep:bottom" />
       </div>
     </el-main>
-    <el-footer height="230px">
-      <div class="h-[100%]">
-        <div class="chat-tools flex items-center">
-          <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
-          <PictureSelectUpload
-            class="ml-15px mt-3px cursor-pointer"
-            @send-picture="handleSendPicture"
-          />
-        </div>
-        <el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
-        <div class="h-45px flex justify-end">
-          <el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
-        </div>
+    <el-footer class="kefu-footer">
+      <div class="chat-tools flex items-center">
+        <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+        <PictureSelectUpload
+          class="ml-15px mt-3px cursor-pointer"
+          @send-picture="handleSendPicture"
+        />
       </div>
+      <el-input
+        v-model="message"
+        :rows="6"
+        placeholder="输入消息，Enter发送，Shift+Enter换行"
+        style="border-style: none"
+        type="textarea"
+        @keyup.enter.prevent="handleSendMessage"
+      />
     </el-footer>
   </el-container>
-  <el-empty v-else description="请选择左侧的一个会话后开始" />
+  <el-container v-else class="kefu">
+    <el-main>
+      <el-empty description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
 </template>
 
 <script lang="ts" setup>
@@ -144,6 +150,7 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { debounce } from 'lodash-es'
 import { jsonParse } from '@/utils'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
 
 dayjs.extend(relativeTime)
 
@@ -156,25 +163,31 @@ const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
 const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
 const showNewMessageTip = ref(false) // 显示有新消息提示
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  conversationId: 0
+  conversationId: 0,
+  createTime: undefined
 })
 const total = ref(0) // 消息总条数
 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+const kefuStore = useMallKefuStore() // 客服缓存
 
 /** 获悉消息内容 */
 const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
 /** 获得消息列表 */
 const getMessageList = async () => {
-  const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
-  total.value = res.total
+  const res = await KeFuMessageApi.getKeFuMessageList(queryParams)
+  if (isEmpty(res)) {
+    // 当返回的是空列表说明没有消息或者已经查询完了历史消息
+    skipGetMessageList.value = true
+    return
+  }
+  queryParams.createTime = formatDate(res.at(-1).createTime) as any
+
   // 情况一：加载最新消息
-  if (queryParams.pageNo === 1) {
-    messageList.value = res.list
+  if (!queryParams.createTime) {
+    messageList.value = res
   } else {
     // 情况二：加载历史消息
-    for (const item of res.list) {
+    for (const item of res) {
       pushMessage(item)
     }
   }
@@ -208,8 +221,7 @@ const refreshMessageList = async (message?: any) => {
     }
     pushMessage(message)
   } else {
-    // TODO @puhui999：不基于 page 做。而是流式分页；通过 createTime 排序查询；
-    queryParams.pageNo = 1
+    queryParams.createTime = undefined
     await getMessageList()
   }
 
@@ -222,28 +234,27 @@ const refreshMessageList = async (message?: any) => {
   }
 }
 
-/** 获得新会话的消息列表 */
-// TODO @puhui999：可优化：可以考虑本地做每个会话的消息 list 缓存；然后点击切换时，读取缓存；然后异步获取新消息，merge 下；
+/** 获得新会话的消息列表, 点击切换时，读取缓存；然后异步获取新消息，merge 下； */
 const getNewMessageList = async (val: KeFuConversationRespVO) => {
-  // 会话切换,重置相关参数
-  queryParams.pageNo = 1
-  messageList.value = []
-  total.value = 0
+  // 1. 缓存当前会话消息列表
+  kefuStore.saveMessageList(conversation.value.id, messageList.value)
+  // 2.1 会话切换,重置相关参数
+  messageList.value = kefuStore.getConversationMessageList(val.id) || []
+  total.value = messageList.value.length || 0
   loadHistory.value = false
   refreshContent.value = false
-  // 设置会话相关属性
+  skipGetMessageList.value = false
+  // 2.2 设置会话相关属性
   conversation.value = val
   queryParams.conversationId = val.id
-  // 获取消息
+  queryParams.createTime = undefined
+  // 3. 获取消息
   await refreshMessageList()
 }
 defineExpose({ getNewMessageList, refreshMessageList })
 
 const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
-const skipGetMessageList = computed(() => {
-  // 已加载到最后一页的话则不触发新的消息获取
-  return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
-}) // 跳过消息获取
+const skipGetMessageList = ref(false) // 跳过消息获取
 
 /** 处理表情选择 */
 const handleEmojiSelect = (item: Emoji) => {
@@ -256,13 +267,17 @@ const handleSendPicture = async (picUrl: string) => {
   const msg = {
     conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.IMAGE,
-    content: picUrl
+    content: JSON.stringify({ picUrl })
   }
   await sendMessage(msg)
 }
 
 /** 发送文本消息 */
-const handleSendMessage = async () => {
+const handleSendMessage = async (event: any) => {
+  // shift 不发送
+  if (event.shiftKey) {
+    return
+  }
   // 1. 校验消息是否为空
   if (isEmpty(unref(message.value))) {
     messageTool.notifyWarning('请输入消息后再发送哦！')
@@ -272,7 +287,7 @@ const handleSendMessage = async () => {
   const msg = {
     conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.TEXT,
-    content: message.value
+    content: JSON.stringify({ text: message.value })
   }
   await sendMessage(msg)
 }
@@ -284,6 +299,8 @@ const sendMessage = async (msg: any) => {
   message.value = ''
   // 加载消息列表
   await refreshMessageList()
+  // 更新会话缓存
+  await kefuStore.updateConversation(conversation.value.id)
 }
 
 /** 滚动到底部 */
@@ -333,8 +350,6 @@ const handleOldMessage = async () => {
     return
   }
   loadHistory.value = true
-  // 加载消息列表
-  queryParams.pageNo += 1
   await getMessageList()
   // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
@@ -357,14 +372,51 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
 <style lang="scss" scoped>
 .kefu {
-  &-title {
-    border-bottom: #e4e0e0 solid 1px;
-    height: 60px;
-    line-height: 60px;
+  background-color: #f5f5f5;
+  position: relative;
+  width: calc(100% - 300px - 260px);
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    background-color: var(--el-border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
+
+  .kefu-header {
+    background-color: #f5f5f5;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
   }
 
   &-content {
+    margin: 0;
+    padding: 10px;
     position: relative;
+    height: 100%;
+    width: 100%;
 
     .newMessageTip {
       position: absolute;
@@ -381,21 +433,12 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-start;
 
       .kefu-message {
-        margin-left: 20px;
-        position: relative;
-
-        &::before {
-          content: '';
-          width: 10px;
-          height: 10px;
-          left: -19px;
-          top: calc(50% - 10px);
-          position: absolute;
-          border-left: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          border-right: 5px solid var(--app-content-bg-color);
-        }
+        background-color: #fff;
+        margin-left: 10px;
+        margin-top: 3px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
       }
     }
 
@@ -403,37 +446,25 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-end;
 
       .kefu-message {
-        margin-right: 20px;
-        position: relative;
-
-        &::after {
-          content: '';
-          width: 10px;
-          height: 10px;
-          right: -19px;
-          top: calc(50% - 10px);
-          position: absolute;
-          border-left: 5px solid var(--app-content-bg-color);
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          border-right: 5px solid transparent;
-        }
+        background-color: rgb(206, 223, 255);
+        margin-right: 10px;
+        margin-top: 3px;
+        border-top-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
       }
     }
 
     // 消息气泡
     .kefu-message {
-      color: #a9a9a9;
-      border-radius: 5px;
-      box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
+      color: #414141;
+      font-weight: 500;
       padding: 5px 10px;
       width: auto;
       max-width: 50%;
-      text-align: left;
-      display: inline-block !important;
-      position: relative;
-      word-break: break-all;
-      background-color: var(--app-content-bg-color);
+      //text-align: left;
+      //display: inline-block !important;
+      //word-break: break-all;
       transition: all 0.2s;
 
       &:hover {
@@ -444,24 +475,51 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
     .date-message,
     .system-message {
       width: fit-content;
-      border-radius: 12rpx;
-      padding: 8rpx 16rpx;
-      margin-bottom: 16rpx;
-      //background-color: #e8e8e8;
-      color: #999;
-      font-size: 24rpx;
+      background-color: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      padding: 0 5px;
+      color: #fff;
+      font-size: 10px;
     }
   }
 
-  .chat-tools {
-    width: 100%;
-    border: var(--el-border-color) solid 1px;
-    border-radius: 10px;
-    height: 44px;
+  .kefu-footer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin: 0;
+    padding: 0;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    .chat-tools {
+      width: 100%;
+      height: 44px;
+    }
   }
 
   ::v-deep(textarea) {
     resize: none;
+    background-color: #f5f5f5;
+  }
+
+  :deep(.el-input__wrapper) {
+    box-shadow: none !important;
+    border-radius: 0;
+  }
+
+  ::v-deep(.el-textarea__inner) {
+    box-shadow: none !important;
   }
 }
 </style>

src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue

@@ -1,97 +0,0 @@
-<!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
-<template>
-  <div v-show="!isEmpty(conversation)" class="kefu">
-    <div class="header-title h-60px flex justify-center items-center">他的足迹</div>
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="最近浏览" name="a" />
-      <el-tab-pane label="订单列表" name="b" />
-    </el-tabs>
-    <div>
-      <el-scrollbar ref="scrollbarRef" always height="calc(115vh - 400px)" @scroll="handleScroll">
-        <!-- 最近浏览 -->
-        <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
-        <!-- 订单列表 -->
-        <OrderBrowsingHistory v-if="activeName === 'b'" ref="orderBrowsingHistoryRef" />
-      </el-scrollbar>
-    </div>
-  </div>
-  <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
-</template>
-
-<script lang="ts" setup>
-import type { TabsPaneContext } from 'element-plus'
-import ProductBrowsingHistory from './ProductBrowsingHistory.vue'
-import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
-import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
-import { isEmpty } from '@/utils/is'
-import { debounce } from 'lodash-es'
-import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
-
-defineOptions({ name: 'MemberBrowsingHistory' })
-
-const activeName = ref('a')
-
-/** tab 切换 */
-const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
-const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
-const handleClick = async (tab: TabsPaneContext) => {
-  activeName.value = tab.paneName as string
-  await nextTick()
-  await getHistoryList()
-}
-
-/** 获得历史数据 */
-// TODO @puhui：不要用 a、b 哈。就订单列表、浏览列表这种噶
-const getHistoryList = async () => {
-  switch (activeName.value) {
-    case 'a':
-      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
-      break
-    case 'b':
-      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value)
-      break
-    default:
-      break
-  }
-}
-
-/** 加载下一页数据 */
-const loadMore = async () => {
-  switch (activeName.value) {
-    case 'a':
-      await productBrowsingHistoryRef.value?.loadMore()
-      break
-    case 'b':
-      await orderBrowsingHistoryRef.value?.loadMore()
-      break
-    default:
-      break
-  }
-}
-
-/** 浏览历史初始化 */
-const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
-const initHistory = async (val: KeFuConversationRespVO) => {
-  activeName.value = 'a'
-  conversation.value = val
-  await nextTick()
-  await getHistoryList()
-}
-defineExpose({ initHistory })
-
-/** 处理消息列表滚动事件(debounce 限流) */
-const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
-const handleScroll = debounce(() => {
-  const wrap = scrollbarRef.value?.wrapRef
-  // 触底重置
-  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
-    loadMore()
-  }
-}, 200)
-</script>
-
-<style lang="scss" scoped>
-.header-title {
-  border-bottom: #e4e0e0 solid 1px;
-}
-</style>

src/views/mall/promotion/kefu/components/index.ts

@@ -1,5 +1,5 @@
 import KeFuConversationList from './KeFuConversationList.vue'
 import KeFuMessageList from './KeFuMessageList.vue'
-import MemberBrowsingHistory from './history/MemberBrowsingHistory.vue'
+import MemberInfo from './member/MemberInfo.vue'
 
-export { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory }
+export { KeFuConversationList, KeFuMessageList, MemberInfo }

src/views/mall/promotion/kefu/components/member/MemberInfo.vue

@@ -0,0 +1,252 @@
+<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
+<template>
+  <el-container class="kefu">
+    <el-header class="kefu-header">
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('会员信息') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('会员信息')"
+      >
+        会员信息
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('最近浏览') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('最近浏览')"
+      >
+        最近浏览
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('交易订单') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('交易订单')"
+      >
+        交易订单
+      </div>
+    </el-header>
+    <el-main class="kefu-content p-10px!">
+      <div v-if="!isEmpty(conversation)" v-loading="loading">
+        <!-- 基本信息 -->
+        <UserBasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
+          <template #header>
+            <CardTitle title="基本信息" />
+          </template>
+        </UserBasicInfo>
+        <!-- 账户信息 -->
+        <el-card v-if="activeTab === '会员信息'" class="h-full mt-10px" shadow="never">
+          <template #header>
+            <CardTitle title="账户信息" />
+          </template>
+          <UserAccountInfo :column="1" :user="user" :wallet="wallet" />
+        </el-card>
+      </div>
+      <div v-show="!isEmpty(conversation)">
+        <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
+          <!-- 最近浏览 -->
+          <ProductBrowsingHistory v-if="activeTab === '最近浏览'" ref="productBrowsingHistoryRef" />
+          <!-- 交易订单 -->
+          <OrderBrowsingHistory v-if="activeTab === '交易订单'" ref="orderBrowsingHistoryRef" />
+        </el-scrollbar>
+      </div>
+      <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
+</template>
+
+<script lang="ts" setup>
+import ProductBrowsingHistory from './ProductBrowsingHistory.vue'
+import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { isEmpty } from '@/utils/is'
+import { debounce } from 'lodash-es'
+import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
+import { CardTitle } from '@/components/Card'
+import UserBasicInfo from '@/views/member/user/detail/UserBasicInfo.vue'
+import UserAccountInfo from '@/views/member/user/detail/UserAccountInfo.vue'
+import * as UserApi from '@/api/member/user'
+import * as WalletApi from '@/api/pay/wallet/balance'
+
+defineOptions({ name: 'MemberBrowsingHistory' })
+
+const activeTab = ref('会员信息')
+const tabActivation = computed(() => (tab: string) => activeTab.value === tab)
+
+/** tab 切换 */
+const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
+const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
+const handleClick = async (tab: string) => {
+  activeTab.value = tab
+  await nextTick()
+  await getHistoryList()
+}
+
+/** 获得历史数据 */
+const getHistoryList = async () => {
+  switch (activeTab.value) {
+    case '会员信息':
+      await getUserData()
+      await getUserWallet()
+      break
+    case '最近浏览':
+      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
+      break
+    case '交易订单':
+      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value)
+      break
+    default:
+      break
+  }
+}
+
+/** 加载下一页数据 */
+const loadMore = async () => {
+  switch (activeTab.value) {
+    case '会员信息':
+      break
+    case '最近浏览':
+      await productBrowsingHistoryRef.value?.loadMore()
+      break
+    case '交易订单':
+      await orderBrowsingHistoryRef.value?.loadMore()
+      break
+    default:
+      break
+  }
+}
+
+/** 浏览历史初始化 */
+const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
+const initHistory = async (val: KeFuConversationRespVO) => {
+  activeTab.value = '会员信息'
+  conversation.value = val
+  await nextTick()
+  await getHistoryList()
+}
+defineExpose({ initHistory })
+
+/** 处理消息列表滚动事件(debounce 限流) */
+const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
+const handleScroll = debounce(() => {
+  const wrap = scrollbarRef.value?.wrapRef
+  // 触底重置
+  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
+    loadMore()
+  }
+}, 200)
+
+/** 查询用户钱包信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+const getUserWallet = async () => {
+  if (!conversation.value.userId) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  wallet.value =
+    (await WalletApi.getWallet({ userId: conversation.value.userId })) || WALLET_INIT_DATA
+}
+
+/** 获得用户 */
+const loading = ref(true) // 加载中
+const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
+const getUserData = async () => {
+  loading.value = true
+  try {
+    user.value = await UserApi.getUser(conversation.value.userId)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.kefu {
+  position: relative;
+  width: 300px !important;
+  background-color: #f5f5f5;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    background-color: var(--el-border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
+
+  &-header {
+    background-color: #f5f5f5;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    &-item {
+      height: 100%;
+      width: 100%;
+      position: relative;
+
+      &-activation::before {
+        content: '';
+        position: absolute; /* 绝对定位 */
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0; /* 覆盖整个元素 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+      }
+
+      &:hover::before {
+        content: '';
+        position: absolute; /* 绝对定位 */
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0; /* 覆盖整个元素 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+      }
+    }
+  }
+
+  &-content {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  &-tabs {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.header-title {
+  border-bottom: #e4e0e0 solid 1px;
+}
+</style>

src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue

@@ -1,15 +1,14 @@
 <template>
   <ProductItem
     v-for="item in list"
-    :spu-id="item.spuId"
     :key="item.id"
     :picUrl="item.picUrl"
     :price="item.price"
-    :skuText="item.introduction"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
     :title="item.spuName"
-    :titleWidth="400"
     class="mb-10px"
-    priceColor="#FF3000"
   />
 </template>
 

src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -1,19 +1,24 @@
 <template>
-  <div v-if="isObject(getMessageContent)" @click="openDetail(getMessageContent.id)" style="cursor: pointer;">
+  <div v-if="isObject(getMessageContent)">
     <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
       <div class="order-card-header flex items-center justify-between p-x-5px">
-        <div class="order-no">订单号：{{ getMessageContent.no }}</div>
+        <div class="order-no">
+          订单号：
+          <span style="cursor: pointer" @click="openDetail(getMessageContent.id)">
+            {{ getMessageContent.no }}
+          </span>
+        </div>
         <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
           {{ formatOrderStatus(getMessageContent) }}
         </div>
       </div>
       <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
         <ProductItem
-          :spu-id="item.spuId"
           :num="item.count"
           :picUrl="item.picUrl"
           :price="item.price"
           :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+          :spu-id="item.spuId"
           :title="item.spuName"
         />
       </div>
@@ -107,36 +112,45 @@ function formatOrderStatus(order: any) {
   border-radius: 10px;
   padding: 10px;
   border: 1px var(--el-border-color) solid;
-  background-color: var(--app-content-bg-color);
+  background-color: #fff; // 透明色，暗黑模式下也能体现
 
   .order-card-header {
     height: 28px;
+    font-weight: bold;
 
     .order-no {
-      font-size: 10px;
-      font-weight: 500;
+      font-size: 13px;
+
+      span {
+        &:hover {
+          text-decoration: underline;
+          color: var(--left-menu-bg-active-color);
+        }
+      }
+    }
+
+    .order-state {
+      font-size: 13px;
     }
   }
 
   .pay-box {
     padding-top: 10px;
+    font-weight: bold;
 
     .discounts-title {
       font-size: 16px;
       line-height: normal;
-      color: #999999;
     }
 
     .discounts-money {
       font-size: 16px;
       line-height: normal;
-      color: #999;
       font-family: OPPOSANS;
     }
 
     .pay-color {
       font-size: 13px;
-      color: var(--left-menu-text-color);
     }
   }
 }

src/views/mall/promotion/kefu/components/message/ProductItem.vue

@@ -1,51 +1,27 @@
 <template>
-  <div @click.stop="openDetail(props.spuId)" style="cursor: pointer;">
-    <div>
-      <slot name="top"></slot>
+  <div class="product-warp" style="cursor: pointer" @click.stop="openDetail(spuId)">
+    <!-- 左侧商品图片-->
+    <div class="product-warp-left mr-24px">
+      <el-image
+        :initial-index="0"
+        :preview-src-list="[picUrl]"
+        :src="picUrl"
+        class="product-warp-left-img"
+        fit="contain"
+        preview-teleported
+        @click.stop
+      />
     </div>
-    <div
-      :style="[{ borderRadius: radius + 'px', marginBottom: marginBottom + 'px' }]"
-      class="ss-order-card-warp flex items-stretch justify-between bg-white"
-    >
-      <div class="img-box mr-24px">
-        <el-image
-          :initial-index="0"
-          :preview-src-list="[picUrl]"
-          :src="picUrl"
-          class="order-img"
-          fit="contain"
-          preview-teleported
-          @click.stop
-        />
+    <!-- 右侧商品信息 -->
+    <div class="product-warp-right">
+      <div class="description">{{ title }}</div>
+      <div class="my-5px">
+        <span class="mr-20px">库存: {{ stock || 0 }}</span>
+        <span>销量: {{ salesCount || 0 }}</span>
       </div>
-      <div
-        :style="[{ width: titleWidth ? titleWidth + 'px' : '' }]"
-        class="box-right flex flex-col justify-between"
-      >
-        <div v-if="title" class="title-text ss-line-2">{{ title }}</div>
-        <div v-if="skuString" class="spec-text mt-8px mb-12px">{{ skuString }}</div>
-        <div class="groupon-box">
-          <slot name="groupon"></slot>
-        </div>
-        <div class="flex">
-          <div class="flex items-center">
-            <div
-              v-if="price && Number(price) > 0"
-              :style="[{ color: priceColor }]"
-              class="price-text flex items-center"
-            >
-              ￥{{ fenToYuan(price) }}
-            </div>
-            <div v-if="num" class="total-text flex items-center">x {{ num }}</div>
-            <slot name="priceSuffix"></slot>
-          </div>
-        </div>
-        <div class="tool-box">
-          <slot name="tool"></slot>
-        </div>
-        <div>
-          <slot name="rightBottom"></slot>
-        </div>
+      <div class="flex justify-between items-center">
+        <span class="price">￥{{ fenToYuan(price) }}</span>
+        <el-button size="small" text type="primary">详情</el-button>
       </div>
     </div>
   </div>
@@ -57,7 +33,7 @@ import { fenToYuan } from '@/utils'
 const { push } = useRouter()
 
 defineOptions({ name: 'ProductItem' })
-const props = defineProps({
+defineProps({
   spuId: {
     type: Number,
     default: 0
@@ -70,134 +46,70 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  titleWidth: {
-    type: Number,
-    default: 0
-  },
-  skuText: {
-    type: [String, Array],
-    default: ''
-  },
   price: {
     type: [String, Number],
     default: ''
   },
-  priceColor: {
-    type: [String],
-    default: ''
-  },
-  num: {
-    type: [String, Number],
-    default: 0
-  },
-  score: {
+  salesCount: {
     type: [String, Number],
     default: ''
   },
-  radius: {
-    type: [String],
-    default: ''
-  },
-  marginBottom: {
-    type: [String],
+  stock: {
+    type: [String, Number],
     default: ''
   }
 })
 
-/** SKU 展示字符串 */
-const skuString = computed(() => {
-  if (!props.skuText) {
-    return ''
-  }
-  if (typeof props.skuText === 'object') {
-    return props.skuText.join(',')
-  }
-  return props.skuText
-})
-
 /** 查看商品详情 */
 const openDetail = (spuId: number) => {
-  console.log(props.spuId)
   push({ name: 'ProductSpuDetail', params: { id: spuId } })
 }
 </script>
 
 <style lang="scss" scoped>
-.ss-order-card-warp {
-  padding: 20px;
-  border-radius: 10px;
-  border: 1px var(--el-border-color) solid;
-  background-color: var(--app-content-bg-color);
-
-  .img-box {
-    width: 80px;
-    height: 80px;
-    border-radius: 10px;
-    overflow: hidden;
-
-    .order-img {
-      width: 80px;
-      height: 80px;
-    }
-  }
-
-  .box-right {
-    flex: 1;
-    position: relative;
-
-    .tool-box {
-      position: absolute;
-      right: 0;
-      bottom: -10px;
-    }
-  }
-
-  .title-text {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 20px;
-  }
-
-  .spec-text {
-    font-size: 10px;
-    font-weight: 400;
-    color: #999999;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-
-  .price-text {
-    font-size: 11px;
-    font-weight: 500;
-    font-family: OPPOSANS;
-  }
-
-  .total-text {
-    font-size: 10px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #999999;
-    margin-left: 8px;
-  }
+.button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
 }
 
-.ss-line {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
+.product-warp {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding: 10px;
 
-  &-1 {
-    -webkit-line-clamp: 1;
+  &-left {
+    width: 70px;
+
+    &-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+    }
   }
 
-  &-2 {
-    -webkit-line-clamp: 2;
+  &-right {
+    flex: 1;
+
+    .description {
+      width: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      display: -webkit-box;
+      -webkit-line-clamp: 1; /* 显示一行 */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .price {
+      color: #ff3000;
+    }
   }
 }
 </style>

src/views/mall/promotion/kefu/components/tools/emoji.ts

@@ -93,7 +93,7 @@ export const useEmoji = () => {
           const emojiFile = getEmojiFileByName(item)
           newData = newData.replace(
             item,
-            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>`
+            `<img style="width: 20px;height: 20px;margin:0 1px 3px 1px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
           )
         })
       }

src/views/mall/promotion/kefu/index.vue

@@ -1,40 +1,33 @@
 <template>
-  <el-row :gutter="10">
+  <el-container class="kefu-layout">
     <!-- 会话列表 -->
-    <el-col :span="6">
-      <ContentWrap>
-        <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
-      </ContentWrap>
-    </el-col>
+    <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
     <!-- 会话详情（选中会话的消息列表） -->
-    <el-col :span="12">
-      <ContentWrap>
-        <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
-      </ContentWrap>
-    </el-col>
-    <!-- 会员足迹（选中会话的会员足迹） -->
-    <el-col :span="6">
-      <ContentWrap>
-        <MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
-      </ContentWrap>
-    </el-col>
-  </el-row>
+    <KeFuMessageList ref="keFuChatBoxRef" />
+    <!-- 会员信息（选中会话的会员信息） -->
+    <MemberInfo ref="memberInfoRef" />
+  </el-container>
 </template>
 
 <script lang="ts" setup>
-import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } from './components'
+import { KeFuConversationList, KeFuMessageList, MemberInfo } from './components'
 import { WebSocketMessageTypeConstants } from './components/tools/constants'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
-import { getAccessToken } from '@/utils/auth'
+import { getRefreshToken } from '@/utils/auth'
 import { useWebSocket } from '@vueuse/core'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
 
 defineOptions({ name: 'KeFu' })
 
 const message = useMessage() // 消息弹窗
+const kefuStore = useMallKefuStore() // 客服缓存
 
 // ======================= WebSocket start =======================
 const server = ref(
-  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
+  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+    '?token=' +
+    getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
 ) // WebSocket 服务地址
 
 /** 发起 WebSocket 连接 */
@@ -53,7 +46,6 @@ watchEffect(() => {
     if (data.value === 'pong') {
       return
     }
-
     // 2.1 解析 type 消息类型
     const jsonMessage = JSON.parse(data.value)
     const type = jsonMessage.type
@@ -63,41 +55,39 @@ watchEffect(() => {
     }
     // 2.2 消息类型：KEFU_MESSAGE_TYPE
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+      const message = JSON.parse(jsonMessage.content)
       // 刷新会话列表
-      // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
-      getConversationList()
+      kefuStore.updateConversation(message.conversationId)
       // 刷新消息列表
-      keFuChatBoxRef.value?.refreshMessageList(JSON.parse(jsonMessage.content))
+      keFuChatBoxRef.value?.refreshMessageList(message)
       return
     }
     // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
-      // 刷新会话列表
-      // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
-      getConversationList()
+      // 更新会话已读
+      kefuStore.updateConversationStatus(jsonParse(jsonMessage.content))
     }
   } catch (error) {
     console.error(error)
   }
 })
 // ======================= WebSocket end =======================
-/** 加载会话列表 */
-const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
-const getConversationList = () => {
-  keFuConversationRef.value?.getConversationList()
-}
 
 /** 加载指定会话的消息列表 */
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
-const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>()
 const handleChange = (conversation: KeFuConversationRespVO) => {
   keFuChatBoxRef.value?.getNewMessageList(conversation)
-  memberBrowsingHistoryRef.value?.initHistory(conversation)
+  memberInfoRef.value?.initHistory(conversation)
 }
 
+const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
 /** 初始化 */
 onMounted(() => {
-  getConversationList()
+  /** 加载会话列表 */
+  kefuStore.setConversationList().then(() => {
+    keFuConversationRef.value?.calculationLastMessageTime()
+  })
   // 打开 websocket 连接
   open()
 })
@@ -110,9 +100,13 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
-.kefu {
-  height: calc(100vh - 165px);
-  overflow: auto; /* 确保内容可滚动 */
+.kefu-layout {
+  position: absolute;
+  flex: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 }
 
 /* 定义滚动条样式 */

src/views/mall/promotion/point/activity/PointActivityForm.vue

@@ -0,0 +1,227 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
+    <Form
+      ref="formRef"
+      v-loading="formLoading"
+      :isCol="true"
+      :rules="rules"
+      :schema="allSchemas.formSchema"
+    >
+      <!-- 先选择 -->
+      <template #spuId>
+        <el-button v-if="!isFormUpdate" @click="spuSelectRef.open()">选择商品</el-button>
+        <SpuAndSkuList
+          ref="spuAndSkuListRef"
+          :rule-config="ruleConfig"
+          :spu-list="spuList"
+          :spu-property-list-p="spuPropertyList"
+        >
+          <el-table-column align="center" label="可兑换库存" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number
+                v-model="sku.productConfig.stock"
+                :max="sku.stock"
+                :min="0"
+                class="w-100%"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="可兑换次数" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number v-model="sku.productConfig.count" :min="0" class="w-100%" />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="所需积分" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number v-model="sku.productConfig.point" :min="0" class="w-100%" />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="所需金额(元)" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number
+                v-model="sku.productConfig.price"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="w-100%"
+              />
+            </template>
+          </el-table-column>
+        </SpuAndSkuList>
+      </template>
+    </Form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <SpuSelect ref="spuSelectRef" :isSelectSku="true" @confirm="selectSpu" />
+</template>
+<script lang="ts" setup>
+import { SpuAndSkuList, SpuProperty, SpuSelect } from '../../components'
+import { allSchemas, rules } from './pointActivity.data'
+import { cloneDeep } from 'lodash-es'
+import {
+  PointActivityApi,
+  PointActivityVO,
+  PointProductVO,
+  SkuExtension,
+  SpuExtension
+} from '@/api/mall/promotion/point'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
+import { convertToInteger, formatToFraction } from '@/utils'
+
+defineOptions({ name: 'PromotionSeckillActivityForm' })
+
+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 formRef = ref() // 表单 Ref
+const isFormUpdate = ref(false) // 是否更新表单
+
+// ================= 商品选择相关 =================
+
+const spuSelectRef = ref() // 商品和属性选择 Ref
+const spuAndSkuListRef = ref() // sku 积分商城商品配置组件Ref
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换库存必须大于等于 1 ！！！'
+  },
+  {
+    name: 'productConfig.point',
+    rule: (arg) => arg >= 1,
+    message: '商品所需兑换积分必须大于等于 1 ！！！'
+  },
+  {
+    name: 'productConfig.count',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换次数必须大于等于 1 ！！！'
+  }
+]
+const spuList = ref<SpuExtension[]>([]) // 选择的 spu
+const spuPropertyList = ref<SpuProperty<SpuExtension>[]>([])
+const selectSpu = (spuId: number, skuIds: number[]) => {
+  formRef.value.setValues({ spuId })
+  getSpuDetails(spuId, skuIds)
+}
+/**
+ * 获取 SPU 详情
+ */
+const getSpuDetails = async (
+  spuId: number,
+  skuIds: number[] | undefined,
+  products?: PointProductVO[]
+) => {
+  const spuProperties: SpuProperty<SpuExtension>[] = []
+  const res = (await ProductSpuApi.getSpuDetailList([spuId])) as SpuExtension[]
+  if (res.length == 0) {
+    return
+  }
+  spuList.value = []
+  // 因为只能选择一个
+  const spu = res[0]
+  const selectSkus =
+    typeof skuIds === 'undefined' ? spu?.skus : spu?.skus?.filter((sku) => skuIds.includes(sku.id!))
+  selectSkus?.forEach((sku) => {
+    let config: PointProductVO = {
+      skuId: sku.id!,
+      stock: 0,
+      price: 0,
+      point: 0,
+      count: 0
+    }
+    if (typeof products !== 'undefined') {
+      const product = products.find((item) => item.skuId === sku.id)
+      if (product) {
+        product.price = formatToFraction(product.price) as any
+      }
+      config = product || config
+    }
+    sku.productConfig = config
+  })
+  spu.skus = selectSkus as SkuExtension[]
+  spuProperties.push({
+    spuId: spu.id!,
+    spuDetail: spu,
+    propertyList: getPropertyList(spu)
+  })
+  spuList.value.push(spu)
+  spuPropertyList.value = spuProperties
+}
+
+// ================= end =================
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  await resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = (await PointActivityApi.getPointActivity(id)) as PointActivityVO
+      isFormUpdate.value = true
+      await getSpuDetails(
+        data.spuId!,
+        data.products?.map((sku) => sku.skuId),
+        data.products
+      )
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    // 获取秒杀商品配置
+    const products = cloneDeep(spuAndSkuListRef.value.getSkuConfigs('productConfig'))
+    products.forEach((item: PointProductVO) => {
+      item.price = convertToInteger(item.price)
+    })
+    const data = formRef.value.formModel as PointActivityVO
+    data.products = products
+    // 真正提交
+    if (formType.value === 'create') {
+      await PointActivityApi.createPointActivity(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await PointActivityApi.updatePointActivity(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = async () => {
+  spuList.value = []
+  spuPropertyList.value = []
+  isFormUpdate.value = false
+  await nextTick()
+  formRef.value.getElFormRef().resetFields()
+}
+</script>

src/views/mall/promotion/point/activity/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <doc-alert title="【营销】积分商城活动" url="https://doc.iocoder.cn/mall/promotion-point/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="活动状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-240px"
+          clearable
+          placeholder="请选择活动状态"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:point-activity:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column label="活动编号" min-width="80" prop="id" />
+      <el-table-column label="商品图片" min-width="80" prop="spuName">
+        <template #default="scope">
+          <el-image
+            :preview-src-list="[scope.row.picUrl]"
+            :src="scope.row.picUrl"
+            class="h-40px w-40px"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="商品标题" min-width="300" prop="spuName" />
+      <el-table-column
+        :formatter="fenToYuanFormat"
+        label="原价"
+        min-width="100"
+        prop="marketPrice"
+      />
+      <el-table-column label="原价" min-width="100" prop="marketPrice" />
+      <el-table-column align="center" label="活动状态" min-width="100" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="库存" min-width="80" prop="stock" />
+      <el-table-column align="center" label="总库存" min-width="80" prop="totalStock" />
+      <el-table-column align="center" label="已兑换数量" min-width="100" prop="redeemedQuantity">
+        <template #default="{ row }">
+          {{ getRedeemedQuantity(row) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" fixed="right" label="操作" width="150px">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['promotion:point-activity:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-if="scope.row.status === 0"
+            v-hasPermi="['promotion:point-activity:close']"
+            link
+            type="danger"
+            @click="handleClose(scope.row.id)"
+          >
+            关闭
+          </el-button>
+          <el-button
+            v-else
+            v-hasPermi="['promotion:point-activity:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <PointActivityForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import PointActivityForm from './PointActivityForm.vue'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { PointActivityApi } from '@/api/mall/promotion/point'
+
+defineOptions({ name: 'PointActivity' })
+
+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,
+  status: null
+})
+const queryFormRef = ref() // 搜索的表单
+const getRedeemedQuantity = computed(() => (row: any) => (row.totalStock || 0) - (row.stock || 0)) // 获得商品已兑换数量
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PointActivityApi.getPointActivityPage(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 handleClose = async (id: number) => {
+  try {
+    // 关闭的二次确认
+    await message.confirm('确认关闭该积分商城活动吗？')
+    // 发起关闭
+    await PointActivityApi.closePointActivity(id)
+    message.success('关闭成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await PointActivityApi.deletePointActivity(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
+</script>

src/views/mall/promotion/point/activity/pointActivity.data.ts

@@ -0,0 +1,55 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+
+// 表单校验
+export const rules = reactive({
+  spuId: [required],
+  sort: [required]
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: '排序',
+    field: 'sort',
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 80
+    }
+  },
+  {
+    label: '积分商城活动商品',
+    field: 'spuId',
+    isTable: true,
+    isSearch: false,
+    form: {
+      colProps: {
+        span: 24
+      }
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    isSearch: false,
+    form: {
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 4
+      },
+      colProps: {
+        span: 24
+      }
+    },
+    table: {
+      width: 300
+    }
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)

src/views/mall/promotion/point/components/PointShowcase.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="flex flex-wrap items-center gap-8px">
+    <div
+      v-for="(pointActivity, index) in pointActivityList"
+      :key="pointActivity.id"
+      class="select-box spu-pic"
+    >
+      <el-tooltip :content="pointActivity.name">
+        <div class="relative h-full w-full">
+          <el-image :src="pointActivity.picUrl" class="h-full w-full" />
+          <Icon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </el-tooltip>
+    </div>
+    <el-tooltip v-if="canAdd" content="选择活动">
+      <div class="select-box" @click="openSeckillActivityTableSelect">
+        <Icon icon="ep:plus" />
+      </div>
+    </el-tooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <PointTableSelect
+    ref="pointActivityTableSelectRef"
+    :multiple="limit != 1"
+    @change="handleActivitySelected"
+  />
+</template>
+<script lang="ts" setup>
+import PointTableSelect from './PointTableSelect.vue'
+import { PointActivityApi, PointActivityVO } from '@/api/mall/promotion/point'
+import { propTypes } from '@/utils/propTypes'
+import { oneOfType } from 'vue-types'
+import { isArray } from '@/utils/is'
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'PointShowcase' })
+
+const props = defineProps({
+  modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
+  // 限制数量：默认不限制
+  limit: propTypes.number.def(Number.MAX_VALUE),
+  disabled: propTypes.bool.def(false)
+})
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true
+  // 情况三：检查已添加数量是否小于限制数量
+  return pointActivityList.value.length < props.limit
+})
+
+// 拼团活动列表
+const pointActivityList = ref<PointActivityVO[]>([])
+
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = isArray(props.modelValue)
+      ? // 情况一：多选
+        props.modelValue
+      : // 情况二：单选
+        props.modelValue
+        ? [props.modelValue]
+        : []
+    // 不需要返显
+    if (ids.length === 0) {
+      pointActivityList.value = []
+      return
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      pointActivityList.value.length === 0 ||
+      pointActivityList.value.some((pointActivity) => !ids.includes(pointActivity.id!))
+    ) {
+      pointActivityList.value = await PointActivityApi.getPointActivityListByIds(ids)
+    }
+  },
+  { immediate: true }
+)
+
+/** 活动表格选择对话框 */
+const pointActivityTableSelectRef = ref()
+// 打开对话框
+const openSeckillActivityTableSelect = () => {
+  pointActivityTableSelectRef.value.open(pointActivityList.value)
+}
+
+/**
+ * 选择活动后触发
+ * @param activityList 选中的活动列表
+ */
+const handleActivitySelected = (activityList: PointActivityVO | PointActivityVO[]) => {
+  pointActivityList.value = isArray(activityList) ? activityList : [activityList]
+  emitActivityChange()
+}
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  pointActivityList.value.splice(index, 1)
+  emitActivityChange()
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const pointActivity = pointActivityList.value.length > 0 ? pointActivityList.value[0] : null
+    emit('update:modelValue', pointActivity?.id || 0)
+    emit('change', pointActivity)
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((pointActivity) => pointActivity.id)
+    )
+    emit('change', pointActivityList.value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>

src/views/mall/promotion/point/components/PointTableSelect.vue

@@ -0,0 +1,300 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择活动" width="70%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <el-form-item label="活动状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            class="!w-240px"
+            clearable
+            placeholder="请选择活动状态"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column v-if="multiple" width="55">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column v-else label="#" width="55">
+          <template #default="{ row }">
+            <el-radio
+              v-model="selectedActivityId"
+              :value="row.id"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" min-width="80" prop="id" />
+        <el-table-column label="商品图片" min-width="80" prop="spuName">
+          <template #default="scope">
+            <el-image
+              :preview-src-list="[scope.row.picUrl]"
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" min-width="300" prop="spuName" />
+        <el-table-column
+          :formatter="fenToYuanFormat"
+          label="原价"
+          min-width="100"
+          prop="marketPrice"
+        />
+        <el-table-column label="原价" min-width="100" prop="marketPrice" />
+        <el-table-column align="center" label="活动状态" min-width="100" prop="status">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="库存" min-width="80" prop="stock" />
+        <el-table-column align="center" label="总库存" min-width="80" prop="totalStock" />
+        <el-table-column align="center" label="已兑换数量" min-width="100" prop="redeemedQuantity">
+          <template #default="{ row }">
+            {{ getRedeemedQuantity(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="创建时间"
+          prop="createTime"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template v-if="multiple" #footer>
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { CHANGE_EVENT } from 'element-plus'
+import { PointActivityApi, PointActivityVO } from '@/api/mall/promotion/point'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'PointTableSelect' })
+
+defineProps({
+  // 多选模式
+  multiple: propTypes.bool.def(false)
+})
+
+// 列表的总页数
+const total = ref(0)
+// 列表的数据
+const list = ref<PointActivityVO[]>([])
+// 列表的加载中
+const loading = ref(false)
+// 弹窗的是否展示
+const dialogVisible = ref(false)
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: undefined
+})
+const getRedeemedQuantity = computed(() => (row: any) => (row.totalStock || 0) - (row.stock || 0)) // 获得商品已兑换数量
+/** 打开弹窗 */
+const open = (pointList?: PointActivityVO[]) => {
+  // 重置
+  checkedActivities.value = []
+  checkedStatus.value = {}
+  isCheckAll.value = false
+  isIndeterminate.value = false
+
+  // 处理已选中
+  if (pointList && pointList.length > 0) {
+    checkedActivities.value = [...pointList]
+    checkedStatus.value = Object.fromEntries(pointList.map((activityVO) => [activityVO.id, true]))
+  }
+
+  dialogVisible.value = true
+  resetQuery()
+}
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open })
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PointActivityApi.getPointActivityPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id] = checkedStatus.value[activityVO.id] || false)
+    )
+    // 计算全选框状态
+    calculateIsCheckAll()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: null,
+    status: undefined
+  }
+  getList()
+}
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedActivities = ref<PointActivityVO[]>([])
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+// 选中的活动 activityId
+const selectedActivityId = ref()
+/** 单选中时触发 */
+const handleSingleSelected = (pointActivityVO: PointActivityVO) => {
+  emits(CHANGE_EVENT, pointActivityVO)
+  // 关闭弹窗
+  dialogVisible.value = false
+  // 记住上次选择的ID
+  selectedActivityId.value = pointActivityVO.id
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits(CHANGE_EVENT, [...checkedActivities.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  (e: CHANGE_EVENT, v: PointActivityVO | PointActivityVO[] | any): void
+}>()
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((pointActivity) => handleCheckOne(checked, pointActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param pointActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  pointActivity: PointActivityVO,
+  isCalcCheckAll: boolean
+) => {
+  if (checked) {
+    checkedActivities.value.push(pointActivity)
+    checkedStatus.value[pointActivity.id] = true
+  } else {
+    const index = findCheckedIndex(pointActivity)
+    if (index > -1) {
+      checkedActivities.value.splice(index, 1)
+      checkedStatus.value[pointActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (activityVO: PointActivityVO) =>
+  checkedActivities.value.findIndex((item) => item.id === activityVO.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((activityVO) => checkedStatus.value[activityVO.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((activityVO) => checkedStatus.value[activityVO.id])
+}
+</script>

src/views/mall/promotion/rewardActivity/RewardForm.vue

@@ -56,7 +56,7 @@
         label="分类"
         prop="productCategoryIds"
       >
-        <ProductCategorySelect v-model="formData.productCategoryIds" />
+        <ProductCategorySelect v-model="formData.productCategoryIds" :multiple="true" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" placeholder="请输入备注" />
@@ -119,6 +119,9 @@ const open = async (type: string, id?: number) => {
       // 规则分转元
       data.rules?.forEach((item: any) => {
         item.discountPrice = fenToYuan(item.discountPrice || 0)
+        if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = fenToYuan(item.limit || 0)
+        }
       })
       formData.value = data
       // 获得商品范围
@@ -151,6 +154,9 @@ const submitForm = async () => {
     // 规则元转分
     data.rules.forEach((item) => {
       item.discountPrice = yuanToFen(item.discountPrice || 0)
+      if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+        item.limit = yuanToFen(item.limit || 0)
+      }
     })
     // 设置商品范围
     setProductScopeValues(data)
@@ -188,7 +194,7 @@ const getProductScope = async () => {
     case PromotionProductScopeEnum.CATEGORY.scope:
       await nextTick()
       let productCategoryIds = formData.value.productScopeValues as any
-      if (Array.isArray(productCategoryIds) && productCategoryIds.length > 0) {
+      if (Array.isArray(productCategoryIds) && productCategoryIds.length === 1) {
         // 单选时使用数组不能反显
         productCategoryIds = productCategoryIds[0]
       }

src/views/mall/promotion/rewardActivity/components/RewardRule.vue

@@ -10,14 +10,25 @@
         <el-form ref="formRef" :model="rule">
           <el-form-item label="优惠门槛:" label-width="100px" prop="limit">
             满
+            <el-input-number
+              v-if="PromotionConditionTypeEnum.PRICE.type === formData.conditionType"
+              v-model="rule.limit"
+              :min="0"
+              :precision="2"
+              :step="0.1"
+              class="w-150px! p-x-20px!"
+              placeholder=""
+              type="number"
+              controls-position="right"
+            />
             <el-input
+              v-else
               v-model="rule.limit"
               :min="0"
               class="w-150px! p-x-20px!"
               placeholder=""
               type="number"
             />
-            <!-- TODO @puhui999：走字典数据？ -->
             {{ PromotionConditionTypeEnum.PRICE.type === formData.conditionType ? '元' : '件' }}
           </el-form-item>
           <el-form-item label="优惠内容:" label-width="100px">

src/views/mall/promotion/rewardActivity/components/RewardRuleCouponSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button class="ml-10px" type="text" @click="selectCoupon">添加优惠卷</el-button>
+  <el-button class="ml-10px" type="text" @click="selectCoupon">添加优惠劵</el-button>
 
   <div
     v-for="(item, index) in list"
@@ -57,7 +57,7 @@ const emits = defineEmits<{
 const rewardRule = useVModel(props, 'modelValue', emits) // 赠送规则
 const list = ref<GiveCouponVO[]>([]) // 选择的优惠券列表
 
-/** 选择赠送的优惠卷类型拓展 */
+/** 选择赠送的优惠类型拓展 */
 interface GiveCouponVO extends CouponTemplateApi.CouponTemplateVO {
   giveCount?: number
 }

src/views/mall/promotion/rewardActivity/index.vue

@@ -27,7 +27,7 @@
           placeholder="请选择活动状态"
         >
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_ACTIVITY_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -55,7 +55,7 @@
           重置
         </el-button>
         <el-button
-          v-hasPermi="['product:brand:create']"
+          v-hasPermi="['promotion:reward-activity:create']"
           plain
           type="primary"
           @click="openForm('create')"
@@ -71,6 +71,11 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list" default-expand-all row-key="id">
       <el-table-column label="活动名称" prop="name" />
+      <el-table-column label="活动范围" prop="productScope" >
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
+        </template>
+      </el-table-column>
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -85,7 +90,7 @@
       />
       <el-table-column align="center" label="状态" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.PROMOTION_ACTIVITY_STATUS" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column
@@ -98,7 +103,7 @@
       <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button
-            v-hasPermi="['product:brand:update']"
+            v-hasPermi="['promotion:reward-activity:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
@@ -106,7 +111,16 @@
             编辑
           </el-button>
           <el-button
-            v-hasPermi="['product:brand:delete']"
+            v-if="scope.row.status === 0"
+            v-hasPermi="['promotion:reward-activity:close']"
+            link
+            type="danger"
+            @click="handleClose(scope.row.id)"
+          >
+            关闭
+          </el-button>
+          <el-button
+            v-hasPermi="['promotion:reward-activity:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
@@ -180,6 +194,19 @@ const openForm = (type: string, id?: number) => {
   formRef.value?.open(type, id)
 }
 
+/** 关闭按钮操作 */
+const handleClose = async (id: number) => {
+  try {
+    // 关闭的二次确认
+    await message.confirm('确认关闭该满减活动吗？')
+    // 发起关闭
+    await RewardActivityApi.closeRewardActivity(id)
+    message.success('关闭成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {

src/views/mall/promotion/seckill/components/SeckillShowcase.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="flex flex-wrap items-center gap-8px">
+    <div
+      v-for="(seckillActivity, index) in Activitys"
+      :key="seckillActivity.id"
+      class="select-box spu-pic"
+    >
+      <el-tooltip :content="seckillActivity.name">
+        <div class="relative h-full w-full">
+          <el-image :src="seckillActivity.picUrl" class="h-full w-full" />
+          <Icon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </el-tooltip>
+    </div>
+    <el-tooltip content="选择活动" v-if="canAdd">
+      <div class="select-box" @click="openSeckillActivityTableSelect">
+        <Icon icon="ep:plus" />
+      </div>
+    </el-tooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <SeckillTableSelect
+    ref="seckillActivityTableSelectRef"
+    :multiple="limit != 1"
+    @change="handleActivitySelected"
+  />
+</template>
+<script lang="ts" setup>
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { propTypes } from '@/utils/propTypes'
+import { oneOfType } from 'vue-types'
+import { isArray } from '@/utils/is'
+import SeckillTableSelect from '@/views/mall/promotion/seckill/components/SeckillTableSelect.vue'
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'SeckillShowcase' })
+
+const props = defineProps({
+  modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
+  // 限制数量：默认不限制
+  limit: propTypes.number.def(Number.MAX_VALUE),
+  disabled: propTypes.bool.def(false)
+})
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true
+  // 情况三：检查已添加数量是否小于限制数量
+  return Activitys.value.length < props.limit
+})
+
+// 拼团活动列表
+const Activitys = ref<SeckillActivityApi.SeckillActivityVO[]>([])
+
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = isArray(props.modelValue)
+      ? // 情况一：多选
+        props.modelValue
+      : // 情况二：单选
+        props.modelValue
+        ? [props.modelValue]
+        : []
+    // 不需要返显
+    if (ids.length === 0) {
+      Activitys.value = []
+      return
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      Activitys.value.length === 0 ||
+      Activitys.value.some((seckillActivity) => !ids.includes(seckillActivity.id!))
+    ) {
+      Activitys.value = await SeckillActivityApi.getSeckillActivityListByIds(ids)
+    }
+  },
+  { immediate: true }
+)
+
+/** 活动表格选择对话框 */
+const seckillActivityTableSelectRef = ref()
+// 打开对话框
+const openSeckillActivityTableSelect = () => {
+  seckillActivityTableSelectRef.value.open(Activitys.value)
+}
+
+/**
+ * 选择活动后触发
+ * @param activityVOs 选中的活动列表
+ */
+const handleActivitySelected = (
+  activityVOs: SeckillActivityApi.SeckillActivityVO | SeckillActivityApi.SeckillActivityVO[]
+) => {
+  Activitys.value = isArray(activityVOs) ? activityVOs : [activityVOs]
+  emitActivityChange()
+}
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  Activitys.value.splice(index, 1)
+  emitActivityChange()
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const seckillActivity = Activitys.value.length > 0 ? Activitys.value[0] : null
+    emit('update:modelValue', seckillActivity?.id || 0)
+    emit('change', seckillActivity)
+  } else {
+    emit(
+      'update:modelValue',
+      Activitys.value.map((seckillActivity) => seckillActivity.id)
+    )
+    emit('change', Activitys.value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>

src/views/mall/promotion/seckill/components/SeckillTableSelect.vue

@@ -0,0 +1,343 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择活动" width="70%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        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="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择活动状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column width="55" v-if="multiple">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column label="#" width="55" v-else>
+          <template #default="{ row }">
+            <el-radio
+              :value="row.id"
+              v-model="selectedActivityId"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" prop="id" min-width="80" />
+        <el-table-column label="活动名称" prop="name" min-width="140" />
+        <el-table-column label="活动时间" min-width="210">
+          <template #default="scope">
+            {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
+            ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商品图片" prop="spuName" min-width="80">
+          <template #default="scope">
+            <el-image
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              :preview-src-list="[scope.row.picUrl]"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" prop="spuName" min-width="300" />
+        <el-table-column
+          label="原价"
+          prop="marketPrice"
+          min-width="100"
+          :formatter="fenToYuanFormat"
+        />
+        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+          <template #default="scope">
+            {{ formatSeckillPrice(scope.row.products) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
+        <el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
+        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
+        <el-table-column label="活动状态" align="center" prop="status" min-width="100">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer v-if="multiple">
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { handleTree } from '@/utils/tree'
+
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import { propTypes } from '@/utils/propTypes'
+import { CHANGE_EVENT } from 'element-plus'
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { fenToYuan } from '@/utils'
+
+type SeckillActivityVO = Required<SeckillActivityApi.SeckillActivityVO>
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'SeckillTableSelect' })
+
+defineProps({
+  // 多选模式
+  multiple: propTypes.bool.def(false)
+})
+
+// 列表的总页数
+const total = ref(0)
+// 列表的数据
+const list = ref<SeckillActivityVO[]>([])
+// 列表的加载中
+const loading = ref(false)
+// 弹窗的是否展示
+const dialogVisible = ref(false)
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: undefined
+})
+
+/** 打开弹窗 */
+const open = (SeckillList?: SeckillActivityVO[]) => {
+  // 重置
+  checkedActivitys.value = []
+  checkedStatus.value = {}
+  isCheckAll.value = false
+  isIndeterminate.value = false
+
+  // 处理已选中
+  if (SeckillList && SeckillList.length > 0) {
+    checkedActivitys.value = [...SeckillList]
+    checkedStatus.value = Object.fromEntries(SeckillList.map((activityVO) => [activityVO.id, true]))
+  }
+
+  dialogVisible.value = true
+  resetQuery()
+}
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open })
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SeckillActivityApi.getSeckillActivityPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id] = checkedStatus.value[activityVO.id] || false)
+    )
+    // 计算全选框状态
+    calculateIsCheckAll()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: undefined,
+    createTime: []
+  }
+  getList()
+}
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatSeckillPrice = (products) => {
+  const seckillPrice = Math.min(...products.map((item) => item.seckillPrice))
+  return `￥${fenToYuan(seckillPrice)}`
+}
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedActivitys = ref<SeckillActivityVO[]>([])
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+// 选中的活动 activityId
+const selectedActivityId = ref()
+/** 单选中时触发 */
+const handleSingleSelected = (seckillActivityVO: SeckillActivityVO) => {
+  emits(CHANGE_EVENT, seckillActivityVO)
+  // 关闭弹窗
+  dialogVisible.value = false
+  // 记住上次选择的ID
+  selectedActivityId.value = seckillActivityVO.id
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits(CHANGE_EVENT, [...checkedActivitys.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [SeckillActivityApi: SeckillActivityVO | SeckillActivityVO[] | any]
+}>()
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((seckillActivity) => handleCheckOne(checked, seckillActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param seckillActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  seckillActivity: SeckillActivityVO,
+  isCalcCheckAll: boolean
+) => {
+  if (checked) {
+    checkedActivitys.value.push(seckillActivity)
+    checkedStatus.value[seckillActivity.id] = true
+  } else {
+    const index = findCheckedIndex(seckillActivity)
+    if (index > -1) {
+      checkedActivitys.value.splice(index, 1)
+      checkedStatus.value[seckillActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (activityVO: SeckillActivityVO) =>
+  checkedActivitys.value.findIndex((item) => item.id === activityVO.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((activityVO) => checkedStatus.value[activityVO.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((activityVO) => checkedStatus.value[activityVO.id])
+}
+
+// 分类列表
+const categoryList = ref()
+// 分类树
+const categoryTreeList = ref()
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获得分类树
+  categoryList.value = await ProductCategoryApi.getCategoryList({})
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId')
+})
+</script>

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

@@ -26,9 +26,8 @@
         <el-select
           v-model="queryParams.pickUpStoreId"
           class="!w-280px"
-          clearable
-          multiple
           placeholder="全部"
+          @change="handleQuery"
         >
           <el-option
             v-for="item in pickUpStoreList"
@@ -73,10 +72,22 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button @click="handlePickup" type="success" plain v-hasPermi="['trade:order:pick-up']">
+        <el-button
+          @click="handlePickup"
+          type="success"
+          plain
+          v-hasPermi="['trade:order:pick-up']"
+          :disabled="isUse"
+        >
           <Icon class="mr-5px" icon="ep:check" />
           核销
         </el-button>
+        <el-button type="primary" @click="connectToSerialPort" :disabled="serialPort || isUse">
+          连接扫描枪
+        </el-button>
+        <el-button type="danger" @click="cutPort" :disabled="!serialPort || isUse">
+          断开扫描枪
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -216,18 +227,20 @@ import { DeliveryTypeEnum } from '@/utils/constants'
 import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'
 import { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
 import OrderPickUpForm from '@/views/mall/trade/order/form/OrderPickUpForm.vue'
+import { ref, onMounted } from 'vue'
+import { useUserStore } from '@/store/modules/user'
+const message = useMessage() // 消息弹窗
+
+const port = ref('')
+const ports = ref([])
+const reader = ref('')
 
 defineOptions({ name: 'PickUpOrder' })
 
-// 列表的加载中
-const loading = ref(true)
-// 列表的总页数
-const total = ref(2)
-// 列表的数据
-const list = ref<TradeOrderApi.OrderVO[]>([])
-// 搜索的表单
-const queryFormRef = ref<FormInstance>()
-// 初始表单参数
+const loading = ref(true) // 列表的加载中
+const total = ref(2) // 列表的总页数
+const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
+const queryFormRef = ref<FormInstance>() // 搜索的表单
 const INIT_QUERY_PARAMS = {
   // 页数
   pageNo: 1,
@@ -238,14 +251,15 @@ const INIT_QUERY_PARAMS = {
   // 配送方式
   deliveryType: DeliveryTypeEnum.PICK_UP.type,
   // 自提门店
-  pickUpStoreId: undefined
-}
-// 表单搜索
-const queryParams = ref({ ...INIT_QUERY_PARAMS })
-// 订单搜索类型 queryParam
-const queryType = reactive({ queryParam: 'no' })
-// 订单统计数据
-const summary = ref<TradeOrderSummaryRespVO>()
+  pickUpStoreId: -1
+} // 初始表单参数
+
+const queryParams = ref({ ...INIT_QUERY_PARAMS }) // 表单搜索
+const queryType = reactive({ queryParam: 'no' }) // 订单搜索类型 queryParam
+const summary = ref<TradeOrderSummaryRespVO>() // 订单统计数据
+
+const serialPort = ref(false) // 是否连接扫码枪
+const isUse = ref(true) // 是否可核销
 
 // 订单聚合搜索 select 类型配置（动态搜索）
 const dynamicSearchList = ref([
@@ -294,13 +308,21 @@ const handleQuery = async () => {
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   queryParams.value = { ...INIT_QUERY_PARAMS }
+  if (pickUpStoreList.value.length > 0) {
+    queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+  }
   handleQuery()
 }
 
 /** 自提门店精简列表 */
 const pickUpStoreList = ref<DeliveryPickUpStoreVO[]>([])
 const getPickUpStoreList = async () => {
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
+  // 移除自己无法核销的门店
+  const userId = useUserStore().getUser.id
+  pickUpStoreList.value = pickUpStoreList.value.filter((item) =>
+    item.verifyUserIds?.includes(userId)
+  )
 }
 
 /** 显示核销表单 */
@@ -309,10 +331,96 @@ const handlePickup = () => {
   pickUpForm.value.open()
 }
 
+/** 连接扫码枪 */
+const connectToSerialPort = async () => {
+  try {
+    // 判断浏览器支持串口通信
+    if (
+      'serial' in navigator &&
+      navigator.serial != null &&
+      typeof navigator.serial === 'object' &&
+      'requestPort' in navigator.serial
+    ) {
+      // 提示用户选择一个串口
+      port.value = await navigator.serial.requestPort()
+    } else {
+      message.error('浏览器不支持扫码枪连接，请更换浏览器重试')
+      return
+    }
+
+    // 获取用户之前授予该网站访问权限的所有串口。
+    ports.value = await navigator.serial.getPorts()
+
+    // console.log(port.value, ports.value);
+    // console.log(port.value)
+    // 等待串口打开
+    await port.value.open({ baudRate: 9600, dataBits: 8, stopBits: 2 })
+
+    // console.log(typeof port.value);
+    message.success('成功连接扫码枪')
+    serialPort.value = true
+    // readData(port.value);
+    readData()
+  } catch (error) {
+    // 处理连接串口出错的情况
+    console.log('Error connecting to serial port:', error)
+  }
+}
+
+/** 监听扫码枪输入 */
+const readData = async () => {
+  reader.value = port.value.readable.getReader()
+  let data = '' //扫码数据
+  // 监听来自串口的数据
+  while (true) {
+    const { value, done } = await reader.value.read()
+    if (done) {
+      // 允许稍后关闭串口
+      reader.value.releaseLock()
+      break
+    }
+    // 获取发送的数据
+    const serialData = new TextDecoder().decode(value)
+    data = `${data}${serialData}`
+    if (serialData.includes('\r')) {
+      //读取结束
+      let codeData = data.replace('\r', '')
+      data = '' //清空下次读取不会叠加
+      console.log(`二维码数据:${codeData}`)
+      //处理拿到数据逻辑
+      pickUpForm.value.open(codeData)
+    }
+  }
+}
+
+/** 断开扫码枪 */
+const cutPort = async () => {
+  if (port.value !== '') {
+    await reader.value.cancel()
+    await port.value.close()
+    port.value = ''
+    console.log('断开扫码枪连接')
+    message.success('已成功断开扫码枪连接')
+    serialPort.value = false
+  } else {
+    message.warning('请先连接或打开扫码枪')
+  }
+}
+
 /** 初始化 **/
-onMounted(() => {
-  getList()
-  getPickUpStoreList()
+onMounted(async () => {
+  await getPickUpStoreList()
+  if (pickUpStoreList.value.length === 0) {
+    message.error('当前登录人没绑定任何自提点')
+    loading.value = false
+    isUse.value = true
+    return
+  }
+
+  // 查询
+  queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+  isUse.value = false
+  await getList()
 })
 </script>
 <style lang="scss" scoped>

src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue

@@ -0,0 +1,143 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="20%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="门店名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入门店名称" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="门店店员" prop="verifyUserIds">
+            <el-button type="primary" @click="storeStaffTableSelect.open()">选择店员</el-button>
+          </el-form-item>
+          <!-- 店员列表 -->
+          <ContentWrap v-if="formData.verifyUsers.length > 0">
+            <el-table :data="formData.verifyUsers">
+              <el-table-column label="编号" align="center" prop="id" />
+              <el-table-column
+                label="用户昵称"
+                align="center"
+                prop="nickname"
+                :show-overflow-tooltip="true"
+              />
+              <el-table-column label="状态" align="center" key="status">
+                <template #default="scope">
+                  <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="操作">
+                <template #default="scope">
+                  <el-button
+                    v-hasPermi="['trade:delivery:pick-up-store:delete']"
+                    link
+                    type="danger"
+                    @click="handleDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </ContentWrap>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+
+  <!-- 选择员工弹窗 -->
+  <StoreStaffTableSelect ref="storeStaffTableSelect" @change="handleSelect" />
+</template>
+<script setup lang="ts">
+import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
+import StoreStaffTableSelect from './components/StoreStaffTableSelect.vue'
+import { DICT_TYPE } from '@/utils/dict'
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  name: '',
+  verifyUserIds: [],
+  verifyUsers: []
+})
+const formRules = reactive({})
+const formRef = ref() // 表单 Ref
+const storeStaffTableSelect = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = '绑定自提门店员工'
+  resetForm()
+  formLoading.value = true
+  try {
+    formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = {
+      id: formData.value.id,
+      verifyUserIds: formData.value.verifyUsers.map((item: any) => item.id)
+    }
+    await DeliveryPickUpStoreApi.bindStoreStaffId(data)
+    message.success('绑定成功')
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理选择员工操作 */
+const handleSelect = (checkedUsers: []) => {
+  formData.value.verifyUsers = checkedUsers
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  const index = formData.value.verifyUsers.findIndex((item: any) => {
+    if (item.id == id) {
+      return true
+    }
+  })
+  formData.value.verifyUsers.splice(index, 1)
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    verifyUserIds: [],
+    verifyUsers: []
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue

@@ -0,0 +1,265 @@
+<!-- TODO 芋艿：这块后续抽个独立的组件出来 -->
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
+    <el-row :gutter="20">
+      <!-- 左侧部门树 -->
+      <el-col :span="4" :xs="24">
+        <ContentWrap class="h-1/1">
+          <DeptTree @node-click="handleDeptNodeClick" />
+        </ContentWrap>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <!-- 搜索 -->
+        <ContentWrap>
+          <el-form
+            class="-mb-15px"
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="用户名称" prop="username">
+              <el-input
+                v-model="queryParams.username"
+                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>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                class="!w-240px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </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="datetimerange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+              <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <ContentWrap>
+          <el-table v-loading="loading" :data="list">
+            <el-table-column width="55">
+              <template #header>
+                <el-checkbox
+                  v-model="isCheckAll"
+                  :indeterminate="isIndeterminate"
+                  @change="handleCheckAll"
+                />
+              </template>
+              <template #default="{ row }">
+                <el-checkbox
+                  v-model="checkedStatus[row.id]"
+                  @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="用户编号" align="center" key="id" prop="id" />
+            <el-table-column
+              label="用户名称"
+              align="center"
+              prop="username"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="用户昵称"
+              align="center"
+              prop="nickname"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="部门"
+              align="center"
+              key="deptName"
+              prop="deptName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+            <el-table-column label="状态" key="status">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              :formatter="dateFormatter"
+              width="180"
+            />
+          </el-table>
+          <Pagination
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as UserApi from '@/api/system/user'
+import DeptTree from '@/views/system/user/DeptTree.vue'
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedUsers = ref([])
+// 选中状态：key为用户ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+const dialogTitle = '选择店员'
+const dialogVisible = ref(false)
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  roleId: 5,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(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 handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  await getList()
+}
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  loading.value = true
+  try {
+    await getList()
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((combinationActivity) => handleCheckOne(checked, combinationActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param combinationActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (checked: boolean, combinationActivity, isCalcCheckAll: boolean) => {
+  if (checked) {
+    checkedUsers.value.push(combinationActivity as never)
+    checkedStatus.value[combinationActivity.id] = true
+  } else {
+    const index = findCheckedIndex(combinationActivity)
+    if (index > -1) {
+      checkedUsers.value.splice(index, 1)
+      checkedStatus.value[combinationActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (user) => checkedUsers.value.findIndex((item) => item.id === user.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((user) => checkedStatus.value[user.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((user) => checkedStatus.value[user.id])
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits('change', [...checkedUsers.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [CombinationActivityApi: any]
+}>()
+</script>

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

@@ -93,7 +93,7 @@
         prop="createTime"
         width="180"
       />
-      <el-table-column align="center" label="操作">
+      <el-table-column align="center" label="操作" min-width="110">
         <template #default="scope">
           <el-button
             v-hasPermi="['trade:delivery:pick-up-store:update']"
@@ -103,6 +103,14 @@
           >
             编辑
           </el-button>
+          <el-button
+            v-hasPermi="['trade:delivery:pick-up-store:update']"
+            link
+            type="primary"
+            @click="openFormBind(scope.row.id)"
+          >
+            绑定店员
+          </el-button>
           <el-button
             v-hasPermi="['trade:delivery:pick-up-store:delete']"
             link
@@ -115,12 +123,16 @@
       </el-table-column>
     </el-table>
   </ContentWrap>
+
   <!-- 表单弹窗：添加/修改 -->
   <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：绑定店员 -->
+  <DeliveryPickUpStoreBindForm ref="formBindRef" />
 </template>
 <script lang="ts" name="DeliveryPickUpStore" setup>
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import DeliveryPickUpStoreForm from './PickUpStoreForm.vue'
+import DeliveryPickUpStoreBindForm from './DeliveryPickUpStoreBindForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 
@@ -146,6 +158,11 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+const formBindRef = ref()
+const openFormBind = (id?: number) => {
+  formBindRef.value.open(id)
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {

src/views/mall/trade/order/form/OrderPickUpForm.vue

@@ -13,7 +13,7 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button type="primary" :disabled="formLoading" @click="getOrderByPickUpVerifyCode">
+      <el-button type="primary" :disabled="formLoading" @click="getOrderByPickUpVerifyCodeClick">
         查询
       </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -52,9 +52,14 @@ const formRef = ref() // 表单 Ref
 const orderDetails = ref<OrderVO>({})
 
 /** 打开弹窗 */
-const open = async () => {
+const open = async (pickUpVerifyCode: string) => {
   resetForm()
-  dialogVisible.value = true
+  if(pickUpVerifyCode != null){
+    formData.value.pickUpVerifyCode = pickUpVerifyCode;
+    await getOrderByPickUpVerifyCode()
+  }else{
+    dialogVisible.value = true
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -83,18 +88,21 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
-/** 查询核销码对应的订单 */
-const getOrderByPickUpVerifyCode = async () => {
+const getOrderByPickUpVerifyCodeClick = async () => {
   // 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
   if (!valid) return
+  await getOrderByPickUpVerifyCode()
+}
 
+/** 查询核销码对应的订单 */
+const getOrderByPickUpVerifyCode = async () => {
   formLoading.value = true
   const data = await TradeOrderApi.getOrderByPickUpVerifyCode(formData.value.pickUpVerifyCode)
   formLoading.value = false
   if (data?.deliveryType !== DeliveryTypeEnum.PICK_UP.type) {
-    message.error('请输入正确的核销码')
+    message.error('未查询到订单')
     return
   }
   if (data?.status !== TradeOrderStatusEnum.UNDELIVERED.status) {

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

@@ -351,7 +351,7 @@ const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) //
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <el-descriptions :column="2">
+  <el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
     <el-descriptions-item>
       <template #label>
         <descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
@@ -50,7 +50,9 @@ import * as UserApi from '@/api/member/user'
 import * as WalletApi from '@/api/pay/wallet/balance'
 import { fenToYuan } from '@/utils'
 
-defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>() // 用户信息
+withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; column?: number }>(), {
+  column: 2
+}) // 用户信息
 </script>
 <style lang="scss" scoped>
 .cell-item {
@@ -60,4 +62,23 @@ defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>() // 用户信
 .cell-item::after {
   content: ':';
 }
+
+.kefu-descriptions {
+  ::v-deep(.el-descriptions__cell) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .el-descriptions__label {
+      width: 120px;
+      display: block;
+      text-align: left;
+    }
+
+    .el-descriptions__content {
+      flex: 1;
+      text-align: end;
+    }
+  }
+}
 </style>

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

@@ -3,83 +3,163 @@
     <template #header>
       <slot name="header"></slot>
     </template>
-    <el-row>
+    <el-row v-if="mode === 'member'">
       <el-col :span="4">
-        <ElAvatar shape="square" :size="140" :src="user.avatar || undefined" />
+        <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
       </el-col>
       <el-col :span="20">
         <el-descriptions :column="2">
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="用户名" icon="ep:user" />
+              <descriptions-item-label icon="ep:user" label="用户名" />
             </template>
             {{ user.name || '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="昵称" icon="ep:user" />
+              <descriptions-item-label icon="ep:user" label="昵称" />
             </template>
             {{ user.nickname }}
           </el-descriptions-item>
           <el-descriptions-item label="手机号">
             <template #label>
-              <descriptions-item-label label="手机号" icon="ep:phone" />
+              <descriptions-item-label icon="ep:phone" label="手机号" />
             </template>
             {{ user.mobile }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="性别" icon="fa:mars-double" />
+              <descriptions-item-label icon="fa:mars-double" label="性别" />
             </template>
             <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="所在地" icon="ep:location" />
+              <descriptions-item-label icon="ep:location" label="所在地" />
             </template>
             {{ user.areaName }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="注册 IP" icon="ep:position" />
+              <descriptions-item-label icon="ep:position" label="注册 IP" />
             </template>
             {{ user.registerIp }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="生日" icon="fa:birthday-cake" />
+              <descriptions-item-label icon="fa:birthday-cake" label="生日" />
             </template>
-            {{ user.birthday ? formatDate(user.birthday) : '空' }}
+            {{ user.birthday ? formatDate(user.birthday as any) : '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="注册时间" icon="ep:calendar" />
+              <descriptions-item-label icon="ep:calendar" label="注册时间" />
             </template>
-            {{ user.createTime ? formatDate(user.createTime) : '空' }}
+            {{ user.createTime ? formatDate(user.createTime as any) : '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="最后登录时间" icon="ep:calendar" />
+              <descriptions-item-label icon="ep:calendar" label="最后登录时间" />
             </template>
-            {{ user.loginDate ? formatDate(user.loginDate) : '空' }}
+            {{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
           </el-descriptions-item>
         </el-descriptions>
       </el-col>
     </el-row>
+    <template v-if="mode === 'kefu'">
+      <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
+      <el-descriptions :column="1" class="kefu-descriptions">
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:user" label="用户名" />
+          </template>
+          {{ user.name || '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:user" label="昵称" />
+          </template>
+          {{ user.nickname }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:phone" label="手机号" />
+          </template>
+          {{ user.mobile }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="fa:mars-double" label="性别" />
+          </template>
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:location" label="所在地" />
+          </template>
+          {{ user.areaName }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:position" label="注册 IP" />
+          </template>
+          {{ user.registerIp }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="fa:birthday-cake" label="生日" />
+          </template>
+          {{ user.birthday ? formatDate(user.birthday as any) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:calendar" label="注册时间" />
+          </template>
+          {{ user.createTime ? formatDate(user.createTime as any) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:calendar" label="最后登录时间" />
+          </template>
+          {{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </template>
   </el-card>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as UserApi from '@/api/member/user'
 import { DescriptionsItemLabel } from '@/components/Descriptions/index'
 
-const { user } = defineProps<{ user: UserApi.UserVO }>()
+withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
+  mode: 'member'
+})
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
+::v-deep(.kefu-descriptions) {
+  .el-descriptions__cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .el-descriptions__label {
+      width: 120px;
+      display: block;
+      text-align: left;
+    }
+
+    .el-descriptions__content {
+      flex: 1;
+      text-align: end;
+    }
+  }
+}
 </style>

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

@@ -273,7 +273,7 @@ const openDetail = (id: number) => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>

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

@@ -113,7 +113,7 @@ const getUserData = async (id: number) => {
 const { currentRoute } = useRouter() // 路由
 const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
-const id = Number(route.params.id)
+const id = route.params.id
 /* 用户钱包相关信息 */
 const WALLET_INIT_DATA = {
   balance: 0,

src/views/member/user/index.vue

@@ -140,7 +140,7 @@
                 'member:user:update',
                 'member:user:update-level',
                 'member:user:update-point',
-                'member:user:update-balance'
+                'pay:wallet:update-balance'
               ]"
               @command="(command) => handleCommand(command, scope.row)"
             >
@@ -169,7 +169,7 @@
                     修改积分
                   </el-dropdown-item>
                   <el-dropdown-item
-                    v-if="checkPermi(['member:user:update-balance'])"
+                    v-if="checkPermi(['pay:wallet:update-balance'])"
                     command="handleUpdateBlance"
                   >
                     修改余额

src/views/mp/components/wx-account-select/main.vue

@@ -6,6 +6,11 @@
 
 <script lang="ts" setup>
 import * as MpAccountApi from '@/api/mp/account'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+
+const message = useMessage() // 消息弹窗
+const { delView } = useTagsViewStore() // 视图操作
+const { push, currentRoute } = useRouter() // 路由
 
 defineOptions({ name: 'WxAccountSelect' })
 
@@ -22,6 +27,12 @@ const emit = defineEmits<{
 
 const handleQuery = async () => {
   accountList.value = await MpAccountApi.getSimpleAccountList()
+  if (accountList.value.length == 0) {
+    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置')
+    delView(unref(currentRoute))
+    await push({ name: 'MpAccount' })
+    return
+  }
   // 默认选中第一个
   if (accountList.value.length > 0) {
     account.id = accountList.value[0].id

src/views/mp/statistics/index.vue

@@ -3,14 +3,7 @@
   <ContentWrap>
     <el-form class="-mb-15px" ref="queryForm" :inline="true" label-width="68px">
       <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="accountId" @change="getSummary" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <WxAccountSelect @change="onAccountChanged" />
       </el-form-item>
       <el-form-item label="时间范围" prop="dateRange">
         <el-date-picker
@@ -76,7 +69,7 @@
 <script lang="ts" setup>
 import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
 import * as StatisticsApi from '@/api/mp/statistics'
-import * as MpAccountApi from '@/api/mp/account'
+import WxAccountSelect from '@/views/mp/components/wx-account-select'
 
 defineOptions({ name: 'MpStatistics' })
 
@@ -88,7 +81,6 @@ const dateRange = ref([
   endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
 ])
 const accountId = ref(-1) // 选中的公众号编号
-const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
 const xAxisDate = ref([] as any[]) // X 轴的日期范围
 // 用户增减数据图表配置项
@@ -230,13 +222,10 @@ const interfaceSummaryOption = reactive({
   ]
 })
 
-/** 加载公众号账号的列表 */
-const getAccountList = async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    accountId.value = accountList.value[0].id!
-  }
+/** 侦听公众号变化 **/
+const onAccountChanged = (id: number) => {
+  accountId.value = id
+  getSummary()
 }
 
 /** 加载数据 */
@@ -357,12 +346,4 @@ const interfaceSummaryChart = async () => {
     })
   } catch {}
 }
-
-/** 初始化 */
-onMounted(async () => {
-  // 获取公众号下拉列表
-  await getAccountList()
-  // 加载数据
-  getSummary()
-})
 </script>

src/views/pay/app/components/AppForm.vue

@@ -10,7 +10,7 @@
       <el-form-item label="应用名" prop="name">
         <el-input v-model="formData.name" placeholder="请输入应用名" />
       </el-form-item>
-      <el-form-item label="应用标识" prop="name">
+      <el-form-item label="应用标识" prop="appKey">
         <el-input v-model="formData.appKey" placeholder="请输入应用标识" />
       </el-form-item>
       <el-form-item label="开启状态" prop="status">
@@ -30,6 +30,9 @@
       <el-form-item label="退款结果的回调地址" prop="refundNotifyUrl">
         <el-input v-model="formData.refundNotifyUrl" placeholder="请输入退款结果的回调地址" />
       </el-form-item>
+      <el-form-item label="转账结果的回调地址" prop="transferNotifyUrl">
+        <el-input v-model="formData.transferNotifyUrl" placeholder="请输入转账结果的回调地址" />
+      </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
@@ -62,7 +65,8 @@ const formData = ref({
   status: CommonStatusEnum.ENABLE,
   remark: undefined,
   orderNotifyUrl: undefined,
-  refundNotifyUrl: undefined
+  refundNotifyUrl: undefined,
+  transferNotifyUrl: undefined
 })
 const formRules = reactive({
   name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
@@ -126,6 +130,7 @@ const resetForm = () => {
     remark: undefined,
     orderNotifyUrl: undefined,
     refundNotifyUrl: undefined,
+    transferNotifyUrl: undefined,
     appKey: undefined
   }
   formRef.value?.resetFields()

src/views/pay/app/components/channel/WeixinChannelForm.vue

@@ -257,7 +257,6 @@ const resetForm = (appId, code) => {
 const fileBeforeUpload = (file, fileAccept) => {
   let format = '.' + file.name.split('.')[1]
   if (format !== fileAccept) {
-    debugger
     message.error('请上传指定格式"' + fileAccept + '"文件')
     return false
   }

src/views/pay/cashier/index.vue

@@ -231,7 +231,7 @@ const getDetail = async () => {
     goReturnUrl('cancel')
     return
   }
-  const data = await PayOrderApi.getOrder(id.value)
+  const data = await PayOrderApi.getOrder(id.value, true)
   payOrder.value = data
   // 1.2 无法查询到支付信息
   if (!data) {

src/views/pay/order/index.vue

@@ -97,7 +97,7 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['system:tenant:export']"
+          v-hasPermi="['pay:order:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -192,6 +192,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import * as OrderApi from '@/api/pay/order'
 import OrderDetail from './OrderDetail.vue'
 import download from '@/utils/download'
+import { getAppList } from '@/api/pay/app'
 
 defineOptions({ name: 'PayOrder' })
 
@@ -263,6 +264,7 @@ const openDetail = (id: number) => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  appList.value = await getAppList()
 })
 </script>
 <style>

src/views/pay/refund/index.vue

@@ -121,7 +121,7 @@
         label="创建时间"
         align="center"
         prop="createTime"
-        width="180"
+        width="170"
         :formatter="dateFormatter"
       />
       <el-table-column label="支付金额" align="center" prop="payPrice" width="100">
@@ -157,7 +157,7 @@
           </p>
         </template>
       </el-table-column>
-      <el-table-column label="退款状态" align="center" prop="status">
+      <el-table-column label="退款状态" align="center" prop="status" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PAY_REFUND_STATUS" :value="scope.row.status" />
         </template>

src/views/report/jmreport/index.vue

@@ -6,9 +6,10 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { getAccessToken } from '@/utils/auth'
+import { getRefreshToken } from '@/utils/auth'
 
 defineOptions({ name: 'JimuReport' })
 
-const src = ref(import.meta.env.VITE_BASE_URL + '/jmreport/list?token=' + getAccessToken())
+// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：积木报表无法方便的刷新访问令牌
+const src = ref(import.meta.env.VITE_BASE_URL + '/jmreport/list?token=' + getRefreshToken())
 </script>