BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 9d9590212fa4d994356cd30f608bcbcd78c4c662

Authored by YunaiV
1 parent fe6adf69

bpm：完善用户组的列表

Inline Side-by-side
Showing 5 changed files with 185 additions and 228 deletions
yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
  View file @9d95902
1 1 import request from '@/config/axios'
2   -import { UserGroupVO } from './types'
  2 +
  3 +export type UserGroupVO = {
  4 + id: number
  5 + name: string
  6 + description: string
  7 + memberUserIds: number[]
  8 + status: number
  9 + remark: string
  10 + createTime: string
  11 +}
3 12  
4 13 // 创建用户组
5 14 export const createUserGroupApi = async (data: UserGroupVO) => {
... ...
yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts deleted
View file @fe6adf6
1   -export type UserGroupVO = {
2   - id: number
3   - name: string
4   - description: string
5   - memberUserIds: number[]
6   - status: number
7   - remark: string
8   - createTime: string
9   -}
yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
  View file @9d95902
... ... @@ -33,7 +33,10 @@ const crudSchemas = reactive<VxeCrudSchema>({
33 33 title: t('common.createTime'),
34 34 field: 'createTime',
35 35 formatter: 'formatDate',
36   - isForm: false
  36 + isForm: false,
  37 + table: {
  38 + width: 180
  39 + }
37 40 }
38 41 ]
39 42 })
... ...
yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
  View file @9d95902
1   -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
  1 +import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
  2 +
2 3 const { t } = useI18n() // 国际化
3 4  
4 5 // 表单校验
5 6 export const rules = reactive({
6   - name: [required]
  7 + name: [required],
  8 + description: [required],
  9 + memberUserIds: [required],
  10 + status: [required]
7 11 })
8 12  
9 13 // CrudSchema
10   -const crudSchemas = reactive<CrudSchema[]>([
11   - {
12   - label: t('common.index'),
13   - field: 'id',
14   - type: 'index',
15   - form: {
16   - show: false
  14 +const crudSchemas = reactive<VxeCrudSchema>({
  15 + primaryKey: 'id',
  16 + primaryType: 'id',
  17 + primaryTitle: '编号',
  18 + action: true,
  19 + columns: [
  20 + {
  21 + title: '组名',
  22 + field: 'name',
  23 + isSearch: true
17 24 },
18   - detail: {
19   - show: false
20   - }
21   - },
22   - {
23   - label: '组名',
24   - field: 'name',
25   - search: {
26   - show: true
27   - }
28   - },
29   - {
30   - label: '成员',
31   - field: 'memberUserIds'
32   - },
33   - {
34   - label: '描述',
35   - field: 'description'
36   - },
37   - {
38   - label: t('common.status'),
39   - field: 'status',
40   - dictType: DICT_TYPE.COMMON_STATUS,
41   - dictClass: 'number'
42   - },
43   - {
44   - label: '备注',
45   - field: 'remark',
46   - table: {
47   - show: false
48   - }
49   - },
50   - {
51   - label: t('common.createTime'),
52   - field: 'createTime',
53   - form: {
54   - show: false
55   - }
56   - },
57   - {
58   - label: t('table.action'),
59   - field: 'action',
60   - width: '240px',
61   - form: {
62   - show: false
  25 + {
  26 + title: '成员',
  27 + field: 'memberUserIds',
  28 + table: {
  29 + slots: {
  30 + default: 'memberUserIds_default'
  31 + }
  32 + }
  33 + },
  34 + {
  35 + title: '描述',
  36 + field: 'description'
63 37 },
64   - detail: {
65   - show: false
  38 + {
  39 + title: t('common.status'),
  40 + field: 'status',
  41 + dictType: DICT_TYPE.COMMON_STATUS,
  42 + dictClass: 'number',
  43 + isSearch: true
  44 + },
  45 + {
  46 + title: t('common.createTime'),
  47 + field: 'createTime',
  48 + formatter: 'formatDate',
  49 + isForm: false,
  50 + isSearch: true,
  51 + search: {
  52 + show: true,
  53 + itemRender: {
  54 + name: 'XDataTimePicker'
  55 + }
  56 + },
  57 + table: {
  58 + width: 180
  59 + }
66 60 }
67   - }
68   -])
69   -export const { allSchemas } = useCrudSchemas(crudSchemas)
  61 + ]
  62 +})
  63 +export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
... ...
yudao-ui-admin-vue3/src/views/bpm/group/index.vue
  View file @9d95902
1   -<script setup lang="ts" name="Group">
2   -import dayjs from 'dayjs'
3   -import { DICT_TYPE } from '@/utils/dict'
4   -import { useTable } from '@/hooks/web/useTable'
5   -import type { FormExpose } from '@/components/Form'
6   -import type { UserGroupVO } from '@/api/bpm/userGroup/types'
7   -import { rules, allSchemas } from './group.data'
  1 +<template>
  2 + <ContentWrap>
  3 + <!-- 列表 -->
  4 + <XTable @register="registerTable">
  5 + <template #toolbar_buttons>
  6 + <!-- 操作：新增 -->
  7 + <XButton
  8 + type="primary"
  9 + preIcon="ep:zoom-in"
  10 + :title="t('action.add')"
  11 + v-hasPermi="['bpm:user-group:create']"
  12 + @click="handleCreate()"
  13 + />
  14 + </template>
  15 + <template #memberUserIds_default="{ row }">
  16 + <span v-for="userId in row.memberUserIds" :key="userId">
  17 + {{ getUserNickname(userId) }} &nbsp;
  18 + </span>
  19 + </template>
  20 + <template #actionbtns_default="{ row }">
  21 + <!-- 操作：修改 -->
  22 + <XTextButton
  23 + preIcon="ep:edit"
  24 + :title="t('action.edit')"
  25 + v-hasPermi="['bpm:user-group:update']"
  26 + @click="handleUpdate(row.id)"
  27 + />
  28 + <!-- 操作：详情 -->
  29 + <XTextButton
  30 + preIcon="ep:view"
  31 + :title="t('action.detail')"
  32 + v-hasPermi="['bpm:user-group:query']"
  33 + @click="handleDetail(row.id)"
  34 + />
  35 + <!-- 操作：删除 -->
  36 + <XTextButton
  37 + preIcon="ep:delete"
  38 + :title="t('action.del')"
  39 + v-hasPermi="['bpm:user-group:delete']"
  40 + @click="deleteData(row.id)"
  41 + />
  42 + </template>
  43 + </XTable>
  44 + </ContentWrap>
  45 +
  46 + <XModal v-model="dialogVisible" :title="dialogTitle">
  47 + <!-- 对话框(添加 / 修改) -->
  48 + <Form
  49 + v-if="['create', 'update'].includes(actionType)"
  50 + :schema="allSchemas.formSchema"
  51 + :rules="rules"
  52 + ref="formRef"
  53 + />
  54 + <template #memberUserIds="form">
  55 + <el-select v-model="form['memberUserIds']">
  56 + <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
  57 + </el-select>
  58 + </template>
  59 + <!-- 对话框(详情) -->
  60 + <Descriptions
  61 + v-if="actionType === 'detail'"
  62 + :schema="allSchemas.detailSchema"
  63 + :data="detailData"
  64 + />
  65 + <!-- 操作按钮 -->
  66 + <template #footer>
  67 + <!-- 按钮：保存 -->
  68 + <XButton
  69 + v-if="['create', 'update'].includes(actionType)"
  70 + type="primary"
  71 + :title="t('action.save')"
  72 + :loading="actionLoading"
  73 + @click="submitForm()"
  74 + />
  75 + <!-- 按钮：关闭 -->
  76 + <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
  77 + </template>
  78 + </XModal>
  79 +</template>
  80 +
  81 +<script setup lang="ts">
  82 +import { onMounted, ref } from 'vue'
  83 +// 业务相关的 import
8 84 import * as UserGroupApi from '@/api/bpm/userGroup'
9   -import { getListSimpleUsersApi } from '@/api/system/user'
10   -import { UserVO } from '@/api/system/user'
  85 +import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
  86 +import { allSchemas } from './group.data'
  87 +import { FormExpose } from '@/components/Form'
11 88  
12 89 const { t } = useI18n() // 国际化
13   -const message = useMessage()
14   -
15   -// ========== 列表相关 ==========
16   -const { register, tableObject, methods } = useTable<UserGroupVO>({
  90 +const message = useMessage() // 消息弹窗
  91 +// 列表相关的变量
  92 +const [registerTable, { reload, deleteData }] = useXTable({
  93 + allSchemas: allSchemas,
17 94 getListApi: UserGroupApi.getUserGroupPageApi,
18   - delListApi: UserGroupApi.deleteUserGroupApi
  95 + deleteApi: UserGroupApi.deleteUserGroupApi
19 96 })
20   -const { getList, setSearchParams, delList } = methods
  97 +// 用户列表
  98 +const users = ref<UserVO[]>([])
  99 +
  100 +const getUserNickname = (userId) => {
  101 + for (const user of users.value) {
  102 + if (user.id === userId) {
  103 + return user.nickname
  104 + }
  105 + }
  106 + return '未知(' + userId + ')'
  107 +}
21 108  
22 109 // ========== CRUD 相关 ==========
23 110 const actionLoading = ref(false) // 遮罩层
... ... @@ -25,13 +112,7 @@ const actionType = ref(&#39;&#39;) // 操作按钮的类型
25 112 const dialogVisible = ref(false) // 是否显示弹出层
26 113 const dialogTitle = ref('edit') // 弹出层标题
27 114 const formRef = ref<FormExpose>() // 表单 Ref
28   -
29   -// ========== 用户选择 ==========
30   -const userOptions = ref<UserVO[]>([])
31   -const getUserOptions = async () => {
32   - const res = await getListSimpleUsersApi()
33   - userOptions.value.push(...res)
34   -}
  115 +const detailData = ref() // 详情 Ref
35 116  
36 117 // 设置标题
37 118 const setDialogTile = (type: string) => {
... ... @@ -46,13 +127,19 @@ const handleCreate = () =&gt; {
46 127 }
47 128  
48 129 // 修改操作
49   -const handleUpdate = async (row: UserGroupVO) => {
  130 +const handleUpdate = async (rowId: number) => {
50 131 setDialogTile('update')
51 132 // 设置数据
52   - const res = await UserGroupApi.getUserGroupApi(row.id)
  133 + const res = await UserGroupApi.getUserGroupApi(rowId)
53 134 unref(formRef)?.setValues(res)
54 135 }
55 136  
  137 +// 详情操作
  138 +const handleDetail = async (rowId: number) => {
  139 + setDialogTile('detail')
  140 + detailData.value = await UserGroupApi.getUserGroupApi(rowId)
  141 +}
  142 +
56 143 // 提交按钮
57 144 const submitForm = async () => {
58 145 const elForm = unref(formRef)?.getElFormRef()
... ... @@ -62,7 +149,7 @@ const submitForm = async () =&gt; {
62 149 actionLoading.value = true
63 150 // 提交请求
64 151 try {
65   - const data = unref(formRef)?.formModel as UserGroupVO
  152 + const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
66 153 if (actionType.value === 'create') {
67 154 await UserGroupApi.createUserGroupApi(data)
68 155 message.success(t('common.createSuccess'))
... ... @@ -70,147 +157,20 @@ const submitForm = async () =&gt; {
70 157 await UserGroupApi.updateUserGroupApi(data)
71 158 message.success(t('common.updateSuccess'))
72 159 }
73   - // 操作成功，重新加载列表
74 160 dialogVisible.value = false
75   - await getList()
76 161 } finally {
77 162 actionLoading.value = false
  163 + // 刷新列表
  164 + await reload()
78 165 }
79 166 }
80 167 })
81 168 }
82 169  
83   -// 根据用户名获取用户真实名
84   -const getUserNickName = (userId: number) => {
85   - for (const user of userOptions.value) {
86   - if (user.id === userId) return user.nickname
87   - }
88   - return '未知(' + userId + ')'
89   -}
90   -// ========== 详情相关 ==========
91   -const detailData = ref() // 详情 Ref
92   -
93   -// 详情操作
94   -const handleDetail = async (row: UserGroupVO) => {
95   - // 设置数据
96   - detailData.value = row
97   - setDialogTile('detail')
98   -}
99   -
100 170 // ========== 初始化 ==========
101   -onMounted(async () => {
102   - await getList()
103   - await getUserOptions()
  171 +onMounted(() => {
  172 + getListSimpleUsersApi().then((data) => {
  173 + users.value = data
  174 + })
104 175 })
105 176 </script>
106   -
107   -<template>
108   - <!-- 搜索工作区 -->
109   - <ContentWrap>
110   - <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
111   - </ContentWrap>
112   - <ContentWrap>
113   - <!-- 操作工具栏 -->
114   - <div class="mb-10px">
115   - <el-button type="primary" v-hasPermi="['bpm:user-group:create']" @click="handleCreate()">
116   - <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
117   - </el-button>
118   - </div>
119   - <!-- 列表 -->
120   - <Table
121   - :columns="allSchemas.tableColumns"
122   - :selection="false"
123   - :data="tableObject.tableList"
124   - :loading="tableObject.loading"
125   - :pagination="{
126   - total: tableObject.total
127   - }"
128   - v-model:pageSize="tableObject.pageSize"
129   - v-model:currentPage="tableObject.currentPage"
130   - @register="register"
131   - >
132   - <template #status="{ row }">
133   - <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
134   - </template>
135   - <template #memberUserIds="{ row }">
136   - <span v-for="userId in row.memberUserIds" :key="userId">
137   - {{ getUserNickName(userId) + ' ' }}
138   - </span>
139   - </template>
140   - <template #createTime="{ row }">
141   - <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
142   - </template>
143   - <template #action="{ row }">
144   - <el-button
145   - link
146   - type="primary"
147   - v-hasPermi="['bpm:user-group:update']"
148   - @click="handleUpdate(row)"
149   - >
150   - <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
151   - </el-button>
152   - <el-button
153   - link
154   - type="primary"
155   - v-hasPermi="['bpm:user-group:update']"
156   - @click="handleDetail(row)"
157   - >
158   - <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
159   - </el-button>
160   - <el-button
161   - link
162   - type="primary"
163   - v-hasPermi="['bpm:user-group:delete']"
164   - @click="delList(row.id, false)"
165   - >
166   - <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
167   - </el-button>
168   - </template>
169   - </Table>
170   - </ContentWrap>
171   -
172   - <XModal v-model="dialogVisible" :title="dialogTitle">
173   - <!-- 对话框(添加 / 修改) -->
174   - <Form
175   - v-if="['create', 'update'].includes(actionType)"
176   - :schema="allSchemas.formSchema"
177   - :rules="rules"
178   - ref="formRef"
179   - >
180   - <template #memberUserIds="form">
181   - <el-select v-model="form['memberUserIds']" multiple>
182   - <el-option
183   - v-for="item in userOptions"
184   - :key="item.id"
185   - :label="item.nickname"
186   - :value="item.id"
187   - />
188   - </el-select>
189   - </template>
190   - </Form>
191   - <!-- 对话框(详情) -->
192   - <Descriptions
193   - v-if="actionType === 'detail'"
194   - :schema="allSchemas.detailSchema"
195   - :data="detailData"
196   - >
197   - <template #memberUserIds="{ row }">
198   - <span v-for="userId in row.memberUserIds" :key="userId">
199   - {{ getUserNickName(userId) + ' ' }}
200   - </span>
201   - </template>
202   - </Descriptions>
203   - <template #footer>
204   - <!-- 按钮：保存 -->
205   - <XButton
206   - v-if="['create', 'update'].includes(actionType)"
207   - type="primary"
208   - :title="t('action.save')"
209   - :loading="actionLoading"
210   - @click="submitForm()"
211   - />
212   - <!-- 按钮：关闭 -->
213   - <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
214   - </template>
215   - </XModal>
216   -</template>
... ...