From 6350384ee189b076372b6570331a50abbc2a053c Mon Sep 17 00:00:00 2001
From: du <13220750630.163.com>
Date: 星期四, 26 六月 2025 16:32:43 +0800
Subject: [PATCH] 流程定义
---
ruoyi-ui/apps/web-antd/src/views/workflow/category/index.vue | 335 +++++++++++++++++++++++++++++++------------------------
1 files changed, 191 insertions(+), 144 deletions(-)
diff --git a/ruoyi-ui/apps/web-antd/src/views/workflow/category/index.vue b/ruoyi-ui/apps/web-antd/src/views/workflow/category/index.vue
index 31b29f4..ac75df5 100644
--- a/ruoyi-ui/apps/web-antd/src/views/workflow/category/index.vue
+++ b/ruoyi-ui/apps/web-antd/src/views/workflow/category/index.vue
@@ -1,156 +1,203 @@
-<script setup lang="ts">
-import type { VbenFormProps } from '@vben/common-ui';
-import type { Recordable } from '@vben/types';
+<template>
+ <div class="app-container">
+ <div class="search" v-show="showSearch">
+ <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+ <el-form-item label="鍒嗙被鍚嶇О" prop="categoryName">
+ <el-input v-model="queryParams.categoryName" placeholder="璇疯緭鍏ュ垎绫诲悕绉�" clearable @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鍒嗙被缂栫爜" prop="code">
+ <el-input v-model="queryParams.code" placeholder="璇疯緭鍏ュ垎绫荤紪鐮�" clearable @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <el-card shadow="never">
+ <template #header>
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="1.5">
+ <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="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['workflow:category:edit']">
+ 淇敼
+ </el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['workflow:category:remove']">
+ 鍒犻櫎
+ </el-button>
+ </el-col>
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+ </el-row>
+ </template>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+ <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55" align="center" />
+ <el-table-column label="鍒嗙被缂栧彿" align="center" prop="categoryId" v-if="true" />
+ <el-table-column label="鍒嗙被鍚嶇О" align="center" prop="categoryName" />
+ <el-table-column label="鍒嗙被缂栫爜" align="center" prop="code" />
+ <el-table-column label="澶囨敞" align="center" prop="remark" />
+ <el-table-column label="鎿嶄綔" align="center" width="150" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-tooltip content="淇敼" placement="top">
+ <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['workflow:category:edit']"></el-button>
+ </el-tooltip>
+ <el-tooltip content="鍒犻櫎" placement="top">
+ <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workflow:category:remove']"></el-button>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ </el-table>
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+ </el-card>
-import { nextTick } from 'vue';
+ <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 -->
+ <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="categoryName">
+ <el-input v-model="form.categoryName" placeholder="璇疯緭鍏ュ垎绫诲悕绉�" />
+ </el-form-item>
+ <el-form-item label="鍒嗙被缂栫爜" prop="code">
+ <el-input v-model="form.code" placeholder="璇疯緭鍏ュ垎绫荤紪鐮�" />
+ </el-form-item>
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ <el-button @click="cancel">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
-import { Page, useVbenModal } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
+<script setup name="Category" >
+import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "#/api/workflow/category";
-import { Popconfirm, Space } from 'ant-design-vue';
+const { proxy } = getCurrentInstance();
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { categoryList, categoryRemove } from '#/api/workflow/category';
+const categoryList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
-import categoryModal from './category-modal.vue';
-import { columns, querySchema } from './data';
-
-const formOptions: VbenFormProps = {
- commonConfig: {
- labelWidth: 80,
- componentProps: {
- allowClear: true,
- },
+const queryFormRef = ref();
+const categoryFormRef = ref();
+const dialog = reactive({
+ visible: false,
+ title: ''
+});
+const initFormData = {
+ categoryId: undefined,
+ categoryName: '',
+ code: '',
+ remark: ''
+}
+const data = reactive({
+ form: {...initFormData},
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ categoryName: '',
+ code: ''
},
- schema: querySchema(),
- wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-};
-
-const gridOptions: VxeGridProps = {
- columns,
- height: 'auto',
- keepSource: true,
- pagerConfig: {
- enabled: false,
- },
- proxyConfig: {
- ajax: {
- query: async (_, formValues = {}) => {
- const resp = await categoryList({
- ...formValues,
- });
- return { rows: resp };
- },
- // 榛樿璇锋眰鎺ュ彛鍚庡睍寮�鍏ㄩ儴 涓嶉渶瑕佸彲浠ュ垹闄よ繖娈�
- querySuccess: () => {
- nextTick(() => {
- expandAll();
- });
- },
- },
- },
- /**
- * 铏氭嫙婊氬姩 榛樿鍏抽棴
- */
- scrollY: {
- enabled: false,
- gt: 0,
- },
- rowConfig: {
- keyField: 'categoryId',
- },
- treeConfig: {
- parentField: 'parentId',
- rowField: 'categoryId',
- transform: true,
- },
- // 琛ㄦ牸鍏ㄥ眬鍞竴琛ㄧず 淇濆瓨鍒楅厤缃渶瑕佺敤鍒�
- id: 'workflow-category-index',
-};
-
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
-const [CategoryModal, modalApi] = useVbenModal({
- connectedComponent: categoryModal,
+ rules: {
+ categoryName: [{ required: true, message: "鍒嗙被鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
+ code: [{ required: true, message: "鍒嗙被缂栫爜涓嶈兘涓虹┖", trigger: "blur" }]
+ }
});
-function handleAdd(row?: Recordable<any>) {
- modalApi.setData({ parentId: row?.categoryId });
- modalApi.open();
+const { queryParams, form, rules } = toRefs(data);
+
+/** 鏌ヨ鍙傛暟鍒楄〃 */
+const getList = async () => {
+ loading.value = true;
+ const res = await listCategory(queryParams.value);
+ categoryList.value = res.rows;
+ total.value = res.total;
+ loading.value = false;
+}
+/** 鍙栨秷鎸夐挳 */
+const cancel = () => {
+ reset();
+ dialog.visible = false;
+}
+/** 琛ㄥ崟閲嶇疆 */
+const reset = () => {
+ form.value = {...initFormData};
+ categoryFormRef.value.resetFields();
+}
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+ queryParams.value.pageNum = 1;
+ getList();
+}
+/** 閲嶇疆鎸夐挳鎿嶄綔 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields();
+ handleQuery();
+}
+/** 澶氶�夋閫変腑鏁版嵁 */
+const handleSelectionChange = (selection) => {
+ ids.value = selection.map(item => item.categoryId);
+ single.value = selection.length != 1;
+ multiple.value = !selection.length;
+}
+/** 鏂板鎸夐挳鎿嶄綔 */
+const handleAdd = () => {
+ dialog.visible = true;
+ dialog.title = "娣诲姞鍙傛暟";
+ nextTick(() => {
+ reset();
+ })
+}
+/** 淇敼鎸夐挳鎿嶄綔 */
+const handleUpdate = (row) => {
+ dialog.visible = true;
+ dialog.title = "淇敼鍙傛暟";
+ const categoryId = row?.categoryId || ids.value[0];
+ nextTick(async () => {
+ reset();
+ const res = await getCategory(categoryId);
+ form.value = res.data;
+ })
+}
+/** 鎻愪氦鎸夐挳 */
+const submitForm = () => {
+ categoryFormRef.value.validate(async (valid) => {
+ if (valid) {
+ form.value.categoryId ? await updateCategory(form.value) : await addCategory(form.value);
+ proxy?.$modal.msgSuccess("鎿嶄綔鎴愬姛");
+ dialog.visible = false;
+ getList();
+ }
+ });
+}
+/** 鍒犻櫎鎸夐挳鎿嶄綔 */
+const handleDelete = async (row) => {
+ const categoryIds = row?.categoryId || ids.value;
+ await proxy?.$modal.confirm('鏄惁纭鍒犻櫎鍙傛暟缂栧彿涓�"' + categoryIds + '"鐨勬暟鎹」锛�');
+ await delCategory(categoryIds);
+ getList();
+ proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+}
+/** 瀵煎嚭鎸夐挳鎿嶄綔 */
+const handleExport = () => {
+ proxy?.download("workflow/category/export", {
+ ...queryParams.value
+ }, `category_${new Date().getTime()}.xlsx`);
}
-async function handleEdit(row: Recordable<any>) {
- modalApi.setData({ id: row.categoryId });
- modalApi.open();
-}
-
-async function handleDelete(row: Recordable<any>) {
- await categoryRemove(row.categoryId);
- await tableApi.query();
-}
-
-function expandAll() {
- tableApi.grid?.setAllTreeExpand(true);
-}
-
-function collapseAll() {
- tableApi.grid?.setAllTreeExpand(false);
-}
+onMounted(() => {
+ getList();
+})
</script>
-
-<template>
- <Page :auto-content-height="true">
- <BasicTable table-title="娴佺▼鍒嗙被鍒楄〃">
- <template #toolbar-tools>
- <Space>
- <a-button @click="collapseAll">
- {{ $t('pages.common.collapse') }}
- </a-button>
- <a-button @click="expandAll">
- {{ $t('pages.common.expand') }}
- </a-button>
- <a-button
- type="primary"
- v-access:code="['workflow:category:add']"
- @click="handleAdd"
- >
- {{ $t('pages.common.add') }}
- </a-button>
- </Space>
- </template>
- <template #action="{ row }">
- <Space>
- <ghost-button
- v-access:code="['workflow:category:edit']"
- @click.stop="handleEdit(row)"
- >
- {{ $t('pages.common.edit') }}
- </ghost-button>
- <ghost-button
- class="btn-success"
- v-access:code="['workflow:category:edit']"
- @click.stop="handleAdd(row)"
- >
- {{ $t('pages.common.add') }}
- </ghost-button>
- <Popconfirm
- :get-popup-container="getVxePopupContainer"
- placement="left"
- title="纭鍒犻櫎锛�"
- @confirm="handleDelete(row)"
- >
- <ghost-button
- danger
- v-access:code="['workflow:category:remove']"
- @click.stop=""
- >
- {{ $t('pages.common.delete') }}
- </ghost-button>
- </Popconfirm>
- </Space>
- </template>
- </BasicTable>
- <CategoryModal @reload="tableApi.query()" />
- </Page>
-</template>
--
Gitblit v1.9.3