chore: 流程定义(未完成)
This commit is contained in:
dap
parent
97b91aaf7c
commit
8f9215ffad
@ -1 +1,2 @@
|
||||
export { default as OptionsTag } from './src/options-tag.vue';
|
||||
export { default as TableSwitch } from './src/table-switch.vue';
|
||||
|
||||
21
apps/web-antd/src/components/table/src/options-tag.vue
Normal file
21
apps/web-antd/src/components/table/src/options-tag.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'OptionsTag' });
|
||||
|
||||
const props = defineProps<{
|
||||
options: { color?: string; label: string; value: number | string }[];
|
||||
value: number | string;
|
||||
}>();
|
||||
|
||||
const found = computed(() =>
|
||||
props.options.find((item) => item.value === props.value),
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tag v-if="found" :color="found.color">{{ found.label }}</Tag>
|
||||
<span v-else>未知</span>
|
||||
</template>
|
||||
@ -0,0 +1,35 @@
|
||||
import { optionsToEnum } from '@vben/utils';
|
||||
|
||||
export const activityStatusOptions = [
|
||||
{
|
||||
label: '激活',
|
||||
value: 1,
|
||||
color: 'success',
|
||||
enumName: 'Active',
|
||||
},
|
||||
{
|
||||
label: '挂起',
|
||||
value: 0,
|
||||
color: 'error',
|
||||
enumName: 'Suspended',
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const ActivityStatusEnum = optionsToEnum(activityStatusOptions);
|
||||
|
||||
export const publishStatusOptions = [
|
||||
{
|
||||
label: '已发布',
|
||||
value: 1,
|
||||
color: 'success',
|
||||
enumName: 'Published',
|
||||
},
|
||||
{
|
||||
label: '未发布',
|
||||
value: 0,
|
||||
color: 'error',
|
||||
enumName: 'Unpublished',
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const PublishStatusEnum = optionsToEnum(publishStatusOptions);
|
||||
@ -1,10 +1,9 @@
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { DictEnum } from '@vben/constants';
|
||||
import { getPopupContainer } from '@vben/utils';
|
||||
import { type FormSchemaGetter } from '#/adapter/form';
|
||||
import { OptionsTag } from '#/components/table';
|
||||
|
||||
import { type FormSchemaGetter, z } from '#/adapter/form';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { activityStatusOptions, publishStatusOptions } from './constant';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
@ -41,11 +40,30 @@ export const columns: VxeGridProps['columns'] = [
|
||||
field: 'activityStatus',
|
||||
title: '状态',
|
||||
minWidth: 100,
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
const cellValue = row.activityStatus;
|
||||
return (
|
||||
<OptionsTag
|
||||
options={activityStatusOptions as any}
|
||||
value={cellValue}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isPublish',
|
||||
title: '发布状态',
|
||||
minWidth: 100,
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
const cellValue = row.isPublish;
|
||||
return (
|
||||
<OptionsTag options={publishStatusOptions as any} value={cellValue} />
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@ -53,121 +71,6 @@ export const columns: VxeGridProps['columns'] = [
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
resizable: false,
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
export const drawerSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
fieldName: 'userId',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'userName',
|
||||
label: '用户账号',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'InputPassword',
|
||||
fieldName: 'password',
|
||||
label: '用户密码',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'nickName',
|
||||
label: '用户昵称',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'TreeSelect',
|
||||
// 在drawer里更新 这里不需要默认的componentProps
|
||||
defaultValue: undefined,
|
||||
fieldName: 'deptId',
|
||||
label: '所属部门',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'phonenumber',
|
||||
label: '手机号码',
|
||||
defaultValue: undefined,
|
||||
rules: z
|
||||
.string()
|
||||
.regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
|
||||
.optional()
|
||||
.or(z.literal('')),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'email',
|
||||
defaultValue: undefined,
|
||||
label: '邮箱',
|
||||
/**
|
||||
* z.literal 是 Zod 中的一种类型，用于定义一个特定的字面量值。
|
||||
* 它可以用于确保输入的值与指定的字面量完全匹配。
|
||||
* 例如，你可以使用 z.literal 来确保某个字段的值只能是特定的字符串、数字、布尔值等。
|
||||
* 即空字符串也可通过校验
|
||||
*/
|
||||
rules: z.string().email('请输入正确的邮箱').optional().or(z.literal('')),
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: getDictOptions(DictEnum.SYS_USER_SEX),
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: '0',
|
||||
fieldName: 'sex',
|
||||
formItemClass: 'col-span-2 lg:col-span-1',
|
||||
label: '性别',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: '0',
|
||||
fieldName: 'status',
|
||||
formItemClass: 'col-span-2 lg:col-span-1',
|
||||
label: '状态',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
getPopupContainer,
|
||||
mode: 'multiple',
|
||||
optionFilterProp: 'label',
|
||||
optionLabelProp: 'label',
|
||||
placeholder: '请先选择部门',
|
||||
},
|
||||
fieldName: 'postIds',
|
||||
help: '选择部门后, 将自动加载该部门下所有的岗位',
|
||||
label: '岗位',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
getPopupContainer,
|
||||
mode: 'multiple',
|
||||
optionFilterProp: 'title',
|
||||
optionLabelProp: 'title',
|
||||
},
|
||||
fieldName: 'roleIds',
|
||||
label: '角色',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'remark',
|
||||
formItemClass: 'items-baseline',
|
||||
label: '备注',
|
||||
width: 360,
|
||||
},
|
||||
];
|
||||
|
||||
@ -4,21 +4,22 @@ import type { Recordable } from '@vben/types';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { Page, type VbenFormProps } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Avatar, Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { vxeCheckboxChecked } from '#/adapter/vxe-table';
|
||||
import { userRemove, userStatusChange } from '#/api/system/user';
|
||||
import { workflowDefinitionList } from '#/api/workflow/definition';
|
||||
import { TableSwitch } from '#/components/table';
|
||||
import {
|
||||
workflowDefinitionActive,
|
||||
workflowDefinitionDelete,
|
||||
workflowDefinitionList,
|
||||
} from '#/api/workflow/definition';
|
||||
|
||||
import CategoryTree from './category-tree.vue';
|
||||
import { ActivityStatusEnum } from './constant';
|
||||
import { columns, querySchema } from './data';
|
||||
|
||||
// 左边部门用
|
||||
@ -42,14 +43,6 @@ const formOptions: VbenFormProps = {
|
||||
formApi.setLatestSubmissionValues(formValues);
|
||||
await reload(formValues);
|
||||
},
|
||||
// 日期选择格式化
|
||||
fieldMappingTime: [
|
||||
[
|
||||
'createTime',
|
||||
['params[beginTime]', 'params[endTime]'],
|
||||
['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
],
|
||||
],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
@ -86,7 +79,7 @@ const gridOptions: VxeGridProps = {
|
||||
rowConfig: {
|
||||
isHover: true,
|
||||
keyField: 'id',
|
||||
height: 48,
|
||||
height: 66,
|
||||
},
|
||||
id: 'workflow-definition-index',
|
||||
};
|
||||
@ -97,7 +90,7 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
});
|
||||
|
||||
async function handleDelete(row: Recordable<any>) {
|
||||
await userRemove(row.id);
|
||||
await workflowDefinitionDelete(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
@ -109,22 +102,29 @@ function handleMultiDelete() {
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗？`,
|
||||
onOk: async () => {
|
||||
await userRemove(ids);
|
||||
await workflowDefinitionDelete(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
const router = useRouter();
|
||||
function handlePreview(row: any) {
|
||||
function handleDesign(row: any) {
|
||||
console.log(row);
|
||||
router.push({
|
||||
path: '/workflow/designer',
|
||||
query: { definitionId: row.id, disabled: 'true' },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 激活/挂起流程
|
||||
* @param row row
|
||||
*/
|
||||
async function handleActive(row: any) {
|
||||
await workflowDefinitionActive(row.id, row.activityStatus);
|
||||
await tableApi.query();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -153,43 +153,46 @@ function handlePreview(row: any) {
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #avatar="{ row }">
|
||||
<!-- 可能要判断空字符串情况 所以没有使用?? -->
|
||||
<Avatar :src="row.avatar || preferences.app.defaultAvatar" />
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<TableSwitch
|
||||
v-model="row.status"
|
||||
:api="() => userStatusChange(row)"
|
||||
:disabled="
|
||||
row.userId === 1 || !hasAccessByCodes(['system:user:edit'])
|
||||
"
|
||||
:reload="() => tableApi.query()"
|
||||
/>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button v-access:code="['system:user:edit']">
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<a-button size="small" type="link" @click="handlePreview(row)">
|
||||
查看流程
|
||||
</a-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['system:user:remove']"
|
||||
@click.stop=""
|
||||
<div class="flex flex-col items-baseline gap-1">
|
||||
<div>
|
||||
<a-button
|
||||
v-if="row.activityStatus === ActivityStatusEnum.Active"
|
||||
size="small"
|
||||
type="link"
|
||||
@click="() => handleActive(row)"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
挂起流程
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="row.activityStatus === ActivityStatusEnum.Suspended"
|
||||
size="small"
|
||||
type="link"
|
||||
@click="() => handleActive(row)"
|
||||
>
|
||||
激活流程
|
||||
</a-button>
|
||||
<a-button size="small" type="link"> 历史版本 </a-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<a-button danger size="small" type="link" @click.stop="">
|
||||
删除流程
|
||||
</a-button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div>
|
||||
<a-button size="small" type="link"> 绑定业务 </a-button>
|
||||
<a-button size="small" type="link" @click="handleDesign(row)">
|
||||
查看流程
|
||||
</a-button>
|
||||
<a-button size="small" type="link"> 发布流程 </a-button>
|
||||
<a-button size="small" type="link"> 复制流程 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user