abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

!168 优化流程分类

Browse Source 
Merge pull request !168 from AprilWind/warm-flw-future
This commit is contained in:
疯狂的狮子Li 2024-12-17 08:43:13 +00:00 committed by Gitee
commit 1e1f42b055
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
3 changed files with 117 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/workflow/category/index.ts
View File

@ -18,11 +18,11 @@ export const listCategory = (query?: CategoryQuery): AxiosPromise<CategoryVO[]>
/**
* 查询流程分类详细
* @param id
* @param categoryId
*/
export const getCategory = (id: string | number): AxiosPromise<CategoryVO> => {
export const getCategory = (categoryId: string | number): AxiosPromise<CategoryVO> => {
return request({
url: '/workflow/category/' + id,
url: '/workflow/category/' + categoryId,
method: 'get'
});
};
@ -53,11 +53,11 @@ export const updateCategory = (data: CategoryForm) => {
/**
* 删除流程分类
* @param id
* @param categoryId
*/
export const delCategory = (id: string | number | Array<string | number>) => {
export const delCategory = (categoryId: string | number | Array<string | number>) => {
return request({
url: '/workflow/category/' + id,
url: '/workflow/category/' + categoryId,
method: 'delete'
});
};

52
src/api/workflow/category/types.ts
View File

@ -5,10 +5,10 @@ export interface CategoryTreeVO {
weight: number;
children: CategoryTreeVO[];
}
export interface CategoryVO {
/**
* 主键
* 流程分类ID
*/
categoryId: string | number;
@ -18,17 +18,7 @@ export interface CategoryVO {
parentId: string | number;
/**
* 父类别名称
*/
parentName: string;
/**
* 祖级列表
*/
ancestors: string;
/**
* 分类名称
* 流程分类名称
*/
categoryName: string;
@ -38,45 +28,45 @@ export interface CategoryVO {
orderNum: number;
/**
* 流程分类状态（0正常 1停用）
* 创建时间
*/
status: number;
createTime: string;
/**
* 子对象
*/
children: CategoryVO[];
}
export interface CategoryForm extends BaseEntity {
/**
* 主键
* 流程分类ID
*/
categoryId?: string | number;
/**
* 父级id
*/
parentId: string | number;
/**
* 分类名称
* 流程分类名称
*/
categoryName?: string;
/**
* 排序
* 父流程分类id
*/
parentId?: string | number;
/**
* 显示顺序
*/
orderNum?: number;
/**
* 流程分类状态（0正常 1停用）
*/
status: number;
}
export interface CategoryQuery extends PageQuery {
export interface CategoryQuery {
/**
* 分类名称
* 流程分类名称
*/
categoryName?: string;
}

179
src/views/workflow/category/index.vue
View File

@ -18,12 +18,12 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button v-hasPermi="['workflow:category:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['workflow:category:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
</el-col>
<right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table
@ -34,44 +34,50 @@
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="分类名称" prop="categoryName" />
<el-table-column label="排序" align="center" prop="sortNum" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="分类名称" prop="categoryName" width="260"/>
<el-table-column label="显示顺序" align="center" prop="orderNum" width="200" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180" />
<el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button v-hasPermi="['workflow:category:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['workflow:category:edit']" />
</el-tooltip>
<el-tooltip content="新增" placement="top">
<el-button v-hasPermi="['workflow:category:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['workflow:category:add']" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button v-hasPermi="['workflow:category:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workflow:category:remove']" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 添加或修改流程分类对话框 -->
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
<el-form ref="categoryFormRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
<el-form-item label="父级分类" prop="parentId">
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级分类" prop="parentId">
<el-tree-select
v-model="form.parentId"
:data="categoryOptions"
:props="{ value: 'categoryId', label: 'categoryName', children: 'children' }"
value-key="categoryId"
placeholder="请选择父级id"
placeholder="请选择上级分类"
check-strictly
/>
</el-form-item>
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入分类名称" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input-number v-model="form.orderNum" placeholder="请输入排序" controls-position="right" :min="0" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入分类名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@ -82,17 +88,17 @@
</template>
<script setup name="Category" lang="ts">
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category';
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/workflow/category";
import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types';
type CategoryOption = {
categoryId: string | number;
categoryId: number;
categoryName: string;
parentId: string | number;
children?: CategoryOption[];
};
}
const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const categoryList = ref<CategoryVO[]>([]);
const categoryOptions = ref<CategoryOption[]>([]);
@ -103,32 +109,32 @@ const loading = ref(false);
const queryFormRef = ref<ElFormInstance>();
const categoryFormRef = ref<ElFormInstance>();
const categoryTableRef = ref<ElTableInstance>();
const categoryTableRef = ref<ElTableInstance>()
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: CategoryForm = {
categoryId: undefined,
categoryName: undefined,
categoryName: "",
parentId: undefined,
orderNum: 0,
status: 0
};
}
const data = reactive<PageData<CategoryForm, CategoryQuery>>({
form: { ...initFormData },
form: {...initFormData},
queryParams: {
pageNum: 1,
pageSize: 10,
categoryName: undefined
categoryName: undefined,
},
rules: {
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
parentId: [{ required: true, message: '父级id不能为空', trigger: 'blur' }]
categoryId: [
{ required: true, message: "流程分类ID不能为空", trigger: "blur" }
],
parentId: [{ required: true, message: "请选择上级分类", trigger: "change" }],
categoryName: [{ required: true, message: "请输入分类名称", trigger: "blur" }]
}
});
@ -138,117 +144,112 @@ const { queryParams, form, rules } = toRefs(data);
const getList = async () => {
loading.value = true;
const res = await listCategory(queryParams.value);
const data = proxy?.handleTree<CategoryVO>(res.data, 'categoryId', 'parentId');
const data = proxy?.handleTree<CategoryVO>(res.data, "categoryId", "parentId");
if (data) {
categoryList.value = data;
loading.value = false;
}
};
}
/** 查询流程分类下拉树结构 */
const getTreeSelect = async () => {
const getTreeselect = async () => {
const res = await listCategory();
categoryOptions.value = [];
const data: CategoryOption = { categoryId: 0, categoryName: '顶级节点', parentId: 0, children: [] };
data.children = proxy?.handleTree<CategoryOption>(res.data, 'categoryId', 'parentId');
categoryOptions.value.push(data);
console.log(categoryOptions.value)
// 处理树形数据
const data = proxy?.handleTree<CategoryOption>(res.data, "categoryId", "parentId");
if (data) {
categoryOptions.value = data; // 将处理后的树形数据赋值
}
};
// 取消按钮
const cancel = () => {
reset();
dialog.visible = false;
};
}
// 表单重置
const reset = () => {
form.value = { ...initFormData };
form.value = {...initFormData}
categoryFormRef.value?.resetFields();
};
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList();
};
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
}
/** 新增按钮操作 */
const handleAdd = (row?: CategoryVO) => {
reset();
getTreeselect();
if (row?.categoryId) {
form.value.parentId = row.categoryId;
} else {
form.value.parentId = undefined;
}
dialog.visible = true;
dialog.title = '添加流程分类';
nextTick(() => {
reset();
getTreeSelect();
if (row != null && row.categoryId) {
form.value.parentId = row.categoryId;
} else {
form.value.parentId = 0;
}
});
};
dialog.title = "添加流程分类";
}
/** 展开/折叠操作 */
const handleToggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
toggleExpandAll(categoryList.value, isExpandAll.value);
};
toggleExpandAll(categoryList.value, isExpandAll.value)
}
/** 展开/折叠操作 */
const toggleExpandAll = (data: CategoryVO[], status: boolean) => {
data.forEach((item) => {
categoryTableRef.value?.toggleRowExpansion(item, status);
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
});
};
categoryTableRef.value?.toggleRowExpansion(item, status)
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
})
}
/** 修改按钮操作 */
const handleUpdate = (row: CategoryVO) => {
loading.value = true;
const handleUpdate = async (row: CategoryVO) => {
reset();
await getTreeselect();
if (row != null) {
form.value.parentId = row.parentId;
}
const res = await getCategory(row.categoryId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改流程分类';
nextTick(async () => {
reset();
await getTreeSelect();
if (row != null) {
form.value.parentId = row.categoryId;
}
const res = await getCategory(row.categoryId);
loading.value = false;
Object.assign(form.value, res.data);
});
};
dialog.title = "修改流程分类";
}
/** 提交按钮 */
const submitForm = () => {
categoryFormRef.value.validate(async (valid: boolean) => {
categoryFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.categoryId) {
await updateCategory(form.value).finally(() => (buttonLoading.value = false));
await updateCategory(form.value).finally(() => buttonLoading.value = false);
} else {
await addCategory(form.value).finally(() => (buttonLoading.value = false));
await addCategory(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess('操作成功');
proxy?.$modal.msgSuccess("操作成功");
dialog.visible = false;
await getList();
getList();
}
});
};
}
/** 删除按钮操作 */
const handleDelete = async (row: CategoryVO) => {
await proxy?.$modal.confirm('是否确认删除流程分类编号为"' + row.categoryId + '"的数据项？');
await proxy?.$modal.confirm('是否确认删除"' + row.categoryName + '"的分类？');
loading.value = true;
await delCategory(row.categoryId).finally(() => (loading.value = false));
await delCategory(row.categoryId).finally(() => loading.value = false);
await getList();
proxy?.$modal.msgSuccess('删除成功');
};
proxy?.$modal.msgSuccess("删除成功");
}
onMounted(() => {
getList();