From 6b988bd582bfcd17fee48c476a5a6e5cc172b0d5 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 12 三月 2025 10:08:33 +0800
Subject: [PATCH] dev-2
---
src/views/workflow/model/index.vue | 383 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 383 insertions(+), 0 deletions(-)
diff --git a/src/views/workflow/model/index.vue b/src/views/workflow/model/index.vue
new file mode 100644
index 0000000..e83cd94
--- /dev/null
+++ b/src/views/workflow/model/index.vue
@@ -0,0 +1,383 @@
+<template>
+ <div class="p-2">
+ <el-row :gutter="20">
+ <!-- 娴佺▼鍒嗙被鏍� -->
+ <el-col :lg="4" :xs="24" style="">
+ <el-card shadow="hover">
+ <el-input v-model="categoryName" placeholder="璇疯緭鍏ユ祦绋嬪垎绫诲悕" prefix-icon="Search" clearable />
+ <el-tree
+ ref="categoryTreeRef"
+ class="mt-2"
+ node-key="id"
+ :data="categoryOptions"
+ :props="{ label: 'categoryName', children: 'children' }"
+ :expand-on-click-node="false"
+ :filter-node-method="filterNode"
+ highlight-current
+ default-expand-all
+ @node-click="handleNodeClick"
+ ></el-tree>
+ </el-card>
+ </el-col>
+ <el-col :lg="20" :xs="24">
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+ <div v-show="showSearch" class="mb-[10px]">
+ <el-card shadow="hover">
+ <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+ <el-form-item label="妯″瀷鍚嶇О" prop="name">
+ <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ユā鍨嬪悕绉�" clearable @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="妯″瀷KEY" prop="key">
+ <el-input v-model="queryParams.key" placeholder="璇疯緭鍏ユā鍨婯EY" 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>
+ </el-card>
+ </div>
+ </transition>
+ <el-card shadow="hover">
+ <template #header>
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="1.5">
+ <el-button type="primary" plain icon="Plus" @click="handleAdd">鏂板</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">淇敼</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">鍒犻櫎</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="primary" plain :disabled="multiple" icon="Download" @click="clickExportZip()">瀵煎嚭</el-button>
+ </el-col>
+ <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+ </el-row>
+ </template>
+
+ <el-table v-loading="loading" border :data="modelList" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55" align="center" />
+ <el-table-column fixed align="center" type="index" label="搴忓彿" width="80"></el-table-column>
+ <el-table-column align="center" :show-overflow-tooltip="true" prop="name" label="妯″瀷鍚嶇О" width="200"></el-table-column>
+ <el-table-column align="center" prop="key" label="妯″瀷KEY"></el-table-column>
+ <el-table-column align="center" prop="version" label="鐗堟湰鍙�" width="90">
+ <template #default="scope"> v{{ scope.row.version }}.0</template>
+ </el-table-column>
+ <el-table-column align="center" prop="metaInfo" label="澶囨敞璇存槑" min-width="130"></el-table-column>
+ <el-table-column align="center" :show-overflow-tooltip="true" prop="createTime" label="鍒涘缓鏃堕棿" width="160"></el-table-column>
+ <el-table-column align="center" :show-overflow-tooltip="true" prop="lastUpdateTime" label="鏇存柊鏃堕棿" width="160"></el-table-column>
+ <el-table-column fixed="right" label="鎿嶄綔" align="center" width="170" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="1.5">
+ <el-button link type="primary" size="small" icon="Pointer" @click="clickDesign(scope.row.id)">璁捐娴佺▼</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
+ </el-col>
+ </el-row>
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="1.5">
+ <el-button link type="primary" size="small" icon="ScaleToOriginal" @click="clickDeploy(scope.row.id, scope.row.key)">
+ 娴佺▼閮ㄧ讲
+ </el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button link type="primary" size="small" icon="CopyDocument" @click="handleCopy(scope.row)"> 澶嶅埗妯″瀷 </el-button>
+ </el-col>
+ </el-row>
+ </template>
+ </el-table-column>
+ </el-table>
+ <pagination
+ v-show="total > 0"
+ v-model:page="queryParams.pageNum"
+ v-model:limit="queryParams.pageSize"
+ :total="total"
+ @pagination="getList"
+ />
+ </el-card>
+ </el-col>
+ </el-row>
+ <!-- 璁捐娴佺▼寮�濮� -->
+ <Design ref="designRef" @close-call-back="handleQuery"></Design>
+ <!-- 璁捐娴佺▼缁撴潫 -->
+ <!-- 娣诲姞妯″瀷瀵硅瘽妗� -->
+ <el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body :close-on-click-modal="false">
+ <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+ <el-form-item label="妯″瀷鍚嶇О锛�" prop="name">
+ <el-input v-model="form.name" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
+ </el-form-item>
+ <el-form-item label="妯″瀷KEY锛�" prop="key">
+ <el-input v-model="form.key" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
+ </el-form-item>
+ <el-form-item label="娴佺▼鍒嗙被" prop="categoryCode">
+ <el-tree-select
+ v-model="form.categoryCode"
+ :data="categoryOptions"
+ :props="{ value: 'categoryCode', label: 'categoryName', children: 'children' }"
+ value-key="categoryCode"
+ placeholder="璇烽�夋嫨娴佺▼鍒嗙被"
+ check-strictly
+ />
+ </el-form-item>
+ <el-form-item label="澶囨敞锛�" prop="description">
+ <el-input v-model="form.description" type="textarea" maxlength="200" show-word-limit></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ <el-button @click="cancel">鍙� 娑�</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts" setup name="Model">
+import Design from '../../../components/BpmnDesign/index.vue';
+import { listModel, addModel, delModel, modelDeploy, getInfo, update } from '@/api/workflow/model';
+import { ModelQuery, ModelForm, ModelVO } from '@/api/workflow/model/types';
+import { listCategory } from '@/api/workflow/category';
+import { copyModel } from '@/api/workflow/model';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const formRef = ref<ElFormInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+const designRef = ref<InstanceType<typeof Design>>();
+
+type CategoryOption = {
+ categoryCode: string;
+ categoryName: string;
+ children?: CategoryOption[];
+};
+
+const buttonLoading = ref(false);
+const loading = ref(true);
+const ids = ref<string[]>([]);
+const single = ref(true);
+const multiple = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const modelList = ref<ModelVO[]>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+const billType = ref<string>('');
+
+const dialog = reactive<DialogOption>({
+ visible: false,
+ title: ''
+});
+
+const initFormData: ModelForm = {
+ id: '',
+ name: '',
+ key: '',
+ categoryCode: '',
+ xml: '',
+ svg: '',
+ description: ''
+};
+const data = reactive<PageData<ModelForm, ModelQuery>>({
+ form: { ...initFormData },
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ name: '',
+ key: '',
+ categoryCode: ''
+ },
+ rules: {
+ name: [{ required: true, message: '妯″瀷涓嶈兘涓虹┖', trigger: 'blur' }],
+ key: [{ required: true, message: '妯″瀷KEY涓嶈兘涓虹┖', trigger: 'blur' }],
+ categoryCode: [{ required: true, message: '娴佺▼鍒嗙被涓嶈兘涓虹┖', trigger: 'blur' }]
+ }
+});
+const { queryParams, form, rules } = toRefs(data);
+
+onMounted(() => {
+ getList();
+ getTreeselect();
+});
+
+/** 鑺傜偣鍗曞嚮浜嬩欢 */
+const handleNodeClick = (data: ModelForm) => {
+ queryParams.value.categoryCode = data.categoryCode;
+ if (data.categoryCode === 'ALL') {
+ queryParams.value.categoryCode = '';
+ }
+ handleQuery();
+};
+/** 閫氳繃鏉′欢杩囨护鑺傜偣 */
+const filterNode = (value: string, data: any) => {
+ if (!value) return true;
+ return data.categoryName.indexOf(value) !== -1;
+};
+/** 鏍规嵁鍚嶇О绛涢�夐儴闂ㄦ爲 */
+watchEffect(
+ () => {
+ categoryTreeRef.value?.filter(categoryName.value);
+ },
+ {
+ flush: 'post' // watchEffect浼氬湪DOM鎸傝浇鎴栬�呮洿鏂颁箣鍓嶅氨浼氳Е鍙戯紝姝ゅ睘鎬ф帶鍒跺湪DOM鍏冪礌鏇存柊鍚庤繍琛�
+ }
+);
+
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+ queryParams.value.pageNum = 1;
+ getList();
+};
+/** 閲嶇疆鎸夐挳鎿嶄綔 */
+const resetQuery = () => {
+ queryFormRef.value?.resetFields();
+ queryParams.value.categoryCode = '';
+ queryParams.value.pageNum = 1;
+ queryParams.value.pageSize = 10;
+ handleQuery();
+};
+// 澶氶�夋閫変腑鏁版嵁
+const handleSelectionChange = (selection: ModelVO[]) => {
+ ids.value = selection.map((item: ModelVO) => item.id);
+ single.value = selection.length !== 1;
+ multiple.value = !selection.length;
+};
+//鍒嗛〉
+const getList = async () => {
+ loading.value = true;
+ const resp = await listModel(queryParams.value);
+ modelList.value = resp.rows;
+ total.value = resp.total;
+ loading.value = false;
+};
+/** 鍒犻櫎鎸夐挳鎿嶄綔 */
+const handleDelete = async (row?: ModelVO) => {
+ const id = row?.id || ids.value;
+ await proxy?.$modal.confirm('鏄惁纭鍒犻櫎妯″瀷id涓恒��' + id + '銆戠殑鏁版嵁椤癸紵');
+ loading.value = true;
+ await delModel(id).finally(() => (loading.value = false));
+ await getList();
+ proxy?.$modal.msgSuccess('鍒犻櫎鎴愬姛');
+};
+// 娴佺▼閮ㄧ讲
+const clickDeploy = async (id: string, key: string) => {
+ await proxy?.$modal.confirm('鏄惁閮ㄧ讲妯″瀷key涓恒��' + key + '銆戞祦绋嬶紵');
+ loading.value = true;
+ await modelDeploy(id).finally(() => (loading.value = false));
+ await getList();
+ proxy?.$modal.msgSuccess('閮ㄧ讲鎴愬姛');
+};
+//鏂板鎵撳紑
+const handleAdd = () => {
+ billType.value = 'add';
+ ids.value = [];
+ getTreeselect();
+ form.value = { ...initFormData };
+ dialog.visible = true;
+ dialog.title = '鏂板妯″瀷';
+};
+//淇敼鎵撳紑
+const handleUpdate = () => {
+ billType.value = 'update';
+ dialog.title = '淇敼妯″瀷';
+ nextTick(async () => {
+ await getTreeselect();
+ const _id = ids.value[0];
+ const res = await getInfo(_id);
+ Object.assign(form.value, res.data);
+ dialog.visible = true;
+ });
+};
+
+//澶嶅埗鎵撳紑
+const handleCopy = (row?: ModelVO) => {
+ billType.value = 'copy';
+ dialog.title = '澶嶅埗妯″瀷';
+ nextTick(async () => {
+ await getTreeselect();
+ form.value = { ...initFormData };
+ form.value.id = row.id;
+ dialog.visible = true;
+ });
+};
+
+/** 鎻愪氦鎸夐挳 */
+const submitForm = () => {
+ formRef.value.validate(async (valid: boolean) => {
+ if (valid) {
+ buttonLoading.value = true;
+ if ('copy' === billType.value) {
+ await copyModel(form.value);
+ proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛');
+ } else if (ids.value && ids.value.length > 0 && 'update' === billType.value) {
+ form.value.id = ids.value[0];
+ await update(form.value);
+ proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛');
+ } else {
+ initXml(form.value.key, form.value.name);
+ form.value.xml = xml.value;
+ await addModel(form.value);
+ proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛');
+ }
+ dialog.visible = false;
+ await getList();
+ }
+ });
+};
+
+/** 鍙栨秷鎸夐挳 */
+const cancel = () => {
+ reset();
+ dialog.visible = false;
+};
+
+/** 琛ㄥ崟閲嶇疆 */
+const reset = () => {
+ form.value = { ...initFormData };
+ formRef.value.resetFields();
+};
+
+// 鎵撳紑璁捐娴佺▼
+const clickDesign = async (id: string) => {
+ await designRef.value.open(id);
+};
+// 瀵煎嚭娴佺▼妯″瀷
+const clickExportZip = () => {
+ proxy?.$download.zip('/workflow/model/export/zip/' + ids.value, '妯″瀷');
+};
+/** 鏌ヨ娴佺▼鍒嗙被涓嬫媺鏍戠粨鏋� */
+const getTreeselect = async () => {
+ const res = await listCategory();
+ categoryOptions.value = [];
+ const data: CategoryOption = { categoryCode: 'ALL', categoryName: '椤剁骇鑺傜偣', children: [] };
+ data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
+ categoryOptions.value.push(data);
+};
+
+const xml = ref<string>('');
+
+const initXml = async (key: string, name: string) => {
+ xml.value = `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
+ <process id="${key}" name="${name}">
+ <startEvent id="startNode1" name="寮�濮�" />
+ </process>
+ <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
+ <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
+ <bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
+ <omgdc:Bounds x="240" y="200" width="30" height="30" />
+ <bpmndi:BPMNLabel>
+ <omgdc:Bounds x="242" y="237" width="23" height="14" />
+ </bpmndi:BPMNLabel>
+ </bpmndi:BPMNShape>
+ </bpmndi:BPMNPlane>
+ </bpmndi:BPMNDiagram>
+</definitions>`;
+ return xml;
+};
+</script>
--
Gitblit v1.9.3