bpm：完善用户组的列表

yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts

@@ -1,5 +1,14 @@
 import request from '@/config/axios'
-import { UserGroupVO } from './types'
+
+export type UserGroupVO = {
+  id: number
+  name: string
+  description: string
+  memberUserIds: number[]
+  status: number
+  remark: string
+  createTime: string
+}
 
 // 创建用户组
 export const createUserGroupApi = async (data: UserGroupVO) => {

yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts

@@ -1,9 +0,0 @@
-export type UserGroupVO = {
-  id: number
-  name: string
-  description: string
-  memberUserIds: number[]
-  status: number
-  remark: string
-  createTime: string
-}

yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts

@@ -33,7 +33,10 @@ const crudSchemas = reactive<VxeCrudSchema>({
       title: t('common.createTime'),
       field: 'createTime',
       formatter: 'formatDate',
-      isForm: false
+      isForm: false,
+      table: {
+        width: 180
+      }
     }
   ]
 })

yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts

@@ -1,69 +1,63 @@
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+
 const { t } = useI18n() // 国际化
 
 // 表单校验
 export const rules = reactive({
-  name: [required]
+  name: [required],
+  description: [required],
+  memberUserIds: [required],
+  status: [required]
 })
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'id',
+  primaryTitle: '编号',
+  action: true,
+  columns: [
+    {
+      title: '组名',
+      field: 'name',
+      isSearch: true
     },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '组名',
-    field: 'name',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '成员',
-    field: 'memberUserIds'
-  },
-  {
-    label: '描述',
-    field: 'description'
-  },
-  {
-    label: t('common.status'),
-    field: 'status',
-    dictType: DICT_TYPE.COMMON_STATUS,
-    dictClass: 'number'
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    table: {
-      show: false
-    }
-  },
-  {
-    label: t('common.createTime'),
-    field: 'createTime',
-    form: {
-      show: false
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '240px',
-    form: {
-      show: false
+    {
+      title: '成员',
+      field: 'memberUserIds',
+      table: {
+        slots: {
+          default: 'memberUserIds_default'
+        }
+      }
+    },
+    {
+      title: '描述',
+      field: 'description'
     },
-    detail: {
-      show: false
+    {
+      title: t('common.status'),
+      field: 'status',
+      dictType: DICT_TYPE.COMMON_STATUS,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: t('common.createTime'),
+      field: 'createTime',
+      formatter: 'formatDate',
+      isForm: false,
+      isSearch: true,
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      },
+      table: {
+        width: 180
+      }
     }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

yudao-ui-admin-vue3/src/views/bpm/group/index.vue

@@ -1,23 +1,110 @@
-<script setup lang="ts" name="Group">
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
-import type { FormExpose } from '@/components/Form'
-import type { UserGroupVO } from '@/api/bpm/userGroup/types'
-import { rules, allSchemas } from './group.data'
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：新增 -->
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          :title="t('action.add')"
+          v-hasPermi="['bpm:user-group:create']"
+          @click="handleCreate()"
+        />
+      </template>
+      <template #memberUserIds_default="{ row }">
+        <span v-for="userId in row.memberUserIds" :key="userId">
+          {{ getUserNickname(userId) }} &nbsp;
+        </span>
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：修改 -->
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
+          v-hasPermi="['bpm:user-group:update']"
+          @click="handleUpdate(row.id)"
+        />
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['bpm:user-group:query']"
+          @click="handleDetail(row.id)"
+        />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
+          v-hasPermi="['bpm:user-group:delete']"
+          @click="deleteData(row.id)"
+        />
+      </template>
+    </XTable>
+  </ContentWrap>
+
+  <XModal v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(添加 / 修改) -->
+    <Form
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+      ref="formRef"
+    />
+    <template #memberUserIds="form">
+      <el-select v-model="form['memberUserIds']">
+        <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
+      </el-select>
+    </template>
+    <!-- 对话框(详情) -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailData"
+    />
+    <!-- 操作按钮 -->
+    <template #footer>
+      <!-- 按钮：保存 -->
+      <XButton
+        v-if="['create', 'update'].includes(actionType)"
+        type="primary"
+        :title="t('action.save')"
+        :loading="actionLoading"
+        @click="submitForm()"
+      />
+      <!-- 按钮：关闭 -->
+      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
+    </template>
+  </XModal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+// 业务相关的 import
 import * as UserGroupApi from '@/api/bpm/userGroup'
-import { getListSimpleUsersApi } from '@/api/system/user'
-import { UserVO } from '@/api/system/user'
+import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
+import { allSchemas } from './group.data'
+import { FormExpose } from '@/components/Form'
 
 const { t } = useI18n() // 国际化
-const message = useMessage()
-
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<UserGroupVO>({
+const message = useMessage() // 消息弹窗
+// 列表相关的变量
+const [registerTable, { reload, deleteData }] = useXTable({
+  allSchemas: allSchemas,
   getListApi: UserGroupApi.getUserGroupPageApi,
-  delListApi: UserGroupApi.deleteUserGroupApi
+  deleteApi: UserGroupApi.deleteUserGroupApi
 })
-const { getList, setSearchParams, delList } = methods
+// 用户列表
+const users = ref<UserVO[]>([])
+
+const getUserNickname = (userId) => {
+  for (const user of users.value) {
+    if (user.id === userId) {
+      return user.nickname
+    }
+  }
+  return '未知(' + userId + ')'
+}
 
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
@@ -25,13 +112,7 @@ const actionType = ref('') // 操作按钮的类型
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
 const formRef = ref<FormExpose>() // 表单 Ref
-
-// ========== 用户选择  ==========
-const userOptions = ref<UserVO[]>([])
-const getUserOptions = async () => {
-  const res = await getListSimpleUsersApi()
-  userOptions.value.push(...res)
-}
+const detailData = ref() // 详情 Ref
 
 // 设置标题
 const setDialogTile = (type: string) => {
@@ -46,13 +127,19 @@ const handleCreate = () => {
 }
 
 // 修改操作
-const handleUpdate = async (row: UserGroupVO) => {
+const handleUpdate = async (rowId: number) => {
   setDialogTile('update')
   // 设置数据
-  const res = await UserGroupApi.getUserGroupApi(row.id)
+  const res = await UserGroupApi.getUserGroupApi(rowId)
   unref(formRef)?.setValues(res)
 }
 
+// 详情操作
+const handleDetail = async (rowId: number) => {
+  setDialogTile('detail')
+  detailData.value = await UserGroupApi.getUserGroupApi(rowId)
+}
+
 // 提交按钮
 const submitForm = async () => {
   const elForm = unref(formRef)?.getElFormRef()
@@ -62,7 +149,7 @@ const submitForm = async () => {
       actionLoading.value = true
       // 提交请求
       try {
-        const data = unref(formRef)?.formModel as UserGroupVO
+        const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
         if (actionType.value === 'create') {
           await UserGroupApi.createUserGroupApi(data)
           message.success(t('common.createSuccess'))
@@ -70,147 +157,20 @@ const submitForm = async () => {
           await UserGroupApi.updateUserGroupApi(data)
           message.success(t('common.updateSuccess'))
         }
-        // 操作成功，重新加载列表
         dialogVisible.value = false
-        await getList()
       } finally {
         actionLoading.value = false
+        // 刷新列表
+        await reload()
       }
     }
   })
 }
 
-// 根据用户名获取用户真实名
-const getUserNickName = (userId: number) => {
-  for (const user of userOptions.value) {
-    if (user.id === userId) return user.nickname
-  }
-  return '未知(' + userId + ')'
-}
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-
-// 详情操作
-const handleDetail = async (row: UserGroupVO) => {
-  // 设置数据
-  detailData.value = row
-  setDialogTile('detail')
-}
-
 // ========== 初始化 ==========
-onMounted(async () => {
-  await getList()
-  await getUserOptions()
+onMounted(() => {
+  getListSimpleUsersApi().then((data) => {
+    users.value = data
+  })
 })
 </script>
-
-<template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 操作工具栏 -->
-    <div class="mb-10px">
-      <el-button type="primary" v-hasPermi="['bpm:user-group:create']" @click="handleCreate()">
-        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
-      </el-button>
-    </div>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #status="{ row }">
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
-      </template>
-      <template #memberUserIds="{ row }">
-        <span v-for="userId in row.memberUserIds" :key="userId">
-          {{ getUserNickName(userId) + ' ' }}
-        </span>
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:user-group:update']"
-          @click="handleUpdate(row)"
-        >
-          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:user-group:update']"
-          @click="handleDetail(row)"
-        >
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:user-group:delete']"
-          @click="delList(row.id, false)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
-      </template>
-    </Table>
-  </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-      ref="formRef"
-    >
-      <template #memberUserIds="form">
-        <el-select v-model="form['memberUserIds']" multiple>
-          <el-option
-            v-for="item in userOptions"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </template>
-    </Form>
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
-      <template #memberUserIds="{ row }">
-        <span v-for="userId in row.memberUserIds" :key="userId">
-          {{ getUserNickName(userId) + ' ' }}
-        </span>
-      </template>
-    </Descriptions>
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
-</template>