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 import request from '@/config/axios' 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 export const createUserGroupApi = async (data: UserGroupVO) => { 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,7 +33,10 @@ const crudSchemas = reactive<VxeCrudSchema>({
33 title: t('common.createTime'), 33 title: t('common.createTime'),
34 field: 'createTime', 34 field: 'createTime',
35 formatter: 'formatDate', 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 const { t } = useI18n() // 国际化 3 const { t } = useI18n() // 国际化
3 4
4 // 表单校验 5 // 表单校验
5 export const rules = reactive({ 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 // CrudSchema 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 import * as UserGroupApi from '@/api/bpm/userGroup' 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 const { t } = useI18n() // 国际化 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 getListApi: UserGroupApi.getUserGroupPageApi, 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 // ========== CRUD 相关 ========== 109 // ========== CRUD 相关 ==========
23 const actionLoading = ref(false) // 遮罩层 110 const actionLoading = ref(false) // 遮罩层
@@ -25,13 +112,7 @@ const actionType = ref(&#39;&#39;) // 操作按钮的类型 @@ -25,13 +112,7 @@ const actionType = ref(&#39;&#39;) // 操作按钮的类型
25 const dialogVisible = ref(false) // 是否显示弹出层 112 const dialogVisible = ref(false) // 是否显示弹出层
26 const dialogTitle = ref('edit') // 弹出层标题 113 const dialogTitle = ref('edit') // 弹出层标题
27 const formRef = ref<FormExpose>() // 表单 Ref 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 const setDialogTile = (type: string) => { 118 const setDialogTile = (type: string) => {
@@ -46,13 +127,19 @@ const handleCreate = () =&gt; { @@ -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 setDialogTile('update') 131 setDialogTile('update')
51 // 设置数据 132 // 设置数据
52 - const res = await UserGroupApi.getUserGroupApi(row.id) 133 + const res = await UserGroupApi.getUserGroupApi(rowId)
53 unref(formRef)?.setValues(res) 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 const submitForm = async () => { 144 const submitForm = async () => {
58 const elForm = unref(formRef)?.getElFormRef() 145 const elForm = unref(formRef)?.getElFormRef()
@@ -62,7 +149,7 @@ const submitForm = async () =&gt; { @@ -62,7 +149,7 @@ const submitForm = async () =&gt; {
62 actionLoading.value = true 149 actionLoading.value = true
63 // 提交请求 150 // 提交请求
64 try { 151 try {
65 - const data = unref(formRef)?.formModel as UserGroupVO 152 + const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
66 if (actionType.value === 'create') { 153 if (actionType.value === 'create') {
67 await UserGroupApi.createUserGroupApi(data) 154 await UserGroupApi.createUserGroupApi(data)
68 message.success(t('common.createSuccess')) 155 message.success(t('common.createSuccess'))
@@ -70,147 +157,20 @@ const submitForm = async () =&gt; { @@ -70,147 +157,20 @@ const submitForm = async () =&gt; {
70 await UserGroupApi.updateUserGroupApi(data) 157 await UserGroupApi.updateUserGroupApi(data)
71 message.success(t('common.updateSuccess')) 158 message.success(t('common.updateSuccess'))
72 } 159 }
73 - // 操作成功，重新加载列表  
74 dialogVisible.value = false 160 dialogVisible.value = false
75 - await getList()  
76 } finally { 161 } finally {
77 actionLoading.value = false 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 </script> 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>