From 9d9590212fa4d994356cd30f608bcbcd78c4c662 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Jan 2023 15:12:12 +0800
Subject: [PATCH] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E5=96=84=E7=94=A8?=
=?UTF-8?q?=E6=88=B7=E7=BB=84=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/api/bpm/userGroup/index.ts | 11 +-
.../src/api/bpm/userGroup/types.ts | 9 -
.../src/views/bpm/form/form.data.ts | 5 +-
.../src/views/bpm/group/group.data.ts | 112 +++----
.../src/views/bpm/group/index.vue | 316 ++++++++----------
5 files changed, 205 insertions(+), 248 deletions(-)
delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
diff --git a/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts b/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
index e61ebf36d..88ee96197 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
+++ b/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) => {
diff --git a/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts b/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
deleted file mode 100644
index d0d67ad43..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type UserGroupVO = {
- id: number
- name: string
- description: string
- memberUserIds: number[]
- status: number
- remark: string
- createTime: string
-}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts b/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
index a07a56596..b228ac95f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
+++ b/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
+ }
}
]
})
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts b/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
index 1964b1f8b..07f9b6aaf 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
+++ b/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'
+ }
+ }
},
- detail: {
- show: false
+ {
+ title: '描述',
+ field: 'description'
+ },
+ {
+ 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)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
index ee3355f93..c6d9d484c 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
@@ -1,172 +1,46 @@
-<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'
-import * as UserGroupApi from '@/api/bpm/userGroup'
-import { getListSimpleUsersApi } from '@/api/system/user'
-import { UserVO } from '@/api/system/user'
-
-const { t } = useI18n() // 国际化
-const message = useMessage()
-
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<UserGroupVO>({
- getListApi: UserGroupApi.getUserGroupPageApi,
- delListApi: UserGroupApi.deleteUserGroupApi
-})
-const { getList, setSearchParams, delList } = methods
-
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-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 setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (row: UserGroupVO) => {
- setDialogTile('update')
- // 设置数据
- const res = await UserGroupApi.getUserGroupApi(row.id)
- unref(formRef)?.setValues(res)
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as UserGroupVO
- if (actionType.value === 'create') {
- await UserGroupApi.createUserGroupApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await UserGroupApi.updateUserGroupApi(data)
- message.success(t('common.updateSuccess'))
- }
- // 操作成功，重新加载列表
- dialogVisible.value = false
- await getList()
- } finally {
- actionLoading.value = false
- }
- }
- })
-}
-
-// 根据用户名获取用户真实名
-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()
-})
-</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" />
+ <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="{ row }">
+ <template #memberUserIds_default="{ row }">
<span v-for="userId in row.memberUserIds" :key="userId">
- {{ getUserNickName(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"
+ <template #actionbtns_default="{ row }">
+ <!-- 操作：修改 -->
+ <XTextButton
+ preIcon="ep:edit"
+ :title="t('action.edit')"
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"
+ @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="delList(row.id, false)"
- >
- <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
- </el-button>
+ @click="deleteData(row.id)"
+ />
</template>
- </Table>
+ </XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
@@ -176,30 +50,19 @@ onMounted(async () => {
: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>
+ />
+ <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 #memberUserIds="{ row }">
- <span v-for="userId in row.memberUserIds" :key="userId">
- {{ getUserNickName(userId) + ' ' }}
- </span>
- </template>
- </Descriptions>
+ />
+ <!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
@@ -214,3 +77,100 @@ onMounted(async () => {
</template>
</XModal>
</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+// 业务相关的 import
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
+import { allSchemas } from './group.data'
+import { FormExpose } from '@/components/Form'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+// 列表相关的变量
+const [registerTable, { reload, deleteData }] = useXTable({
+ allSchemas: allSchemas,
+ getListApi: UserGroupApi.getUserGroupPageApi,
+ deleteApi: UserGroupApi.deleteUserGroupApi
+})
+// 用户列表
+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) // 遮罩层
+const actionType = ref('') // 操作按钮的类型
+const dialogVisible = ref(false) // 是否显示弹出层
+const dialogTitle = ref('edit') // 弹出层标题
+const formRef = ref<FormExpose>() // 表单 Ref
+const detailData = ref() // 详情 Ref
+
+// 设置标题
+const setDialogTile = (type: string) => {
+ dialogTitle.value = t('action.' + type)
+ actionType.value = type
+ dialogVisible.value = true
+}
+
+// 新增操作
+const handleCreate = () => {
+ setDialogTile('create')
+}
+
+// 修改操作
+const handleUpdate = async (rowId: number) => {
+ setDialogTile('update')
+ // 设置数据
+ 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()
+ if (!elForm) return
+ elForm.validate(async (valid) => {
+ if (valid) {
+ actionLoading.value = true
+ // 提交请求
+ try {
+ const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
+ if (actionType.value === 'create') {
+ await UserGroupApi.createUserGroupApi(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await UserGroupApi.updateUserGroupApi(data)
+ message.success(t('common.updateSuccess'))
+ }
+ dialogVisible.value = false
+ } finally {
+ actionLoading.value = false
+ // 刷新列表
+ await reload()
+ }
+ }
+ })
+}
+
+// ========== 初始化 ==========
+onMounted(() => {
+ getListSimpleUsersApi().then((data) => {
+ users.value = data
+ })
+})
+</script>