流程版本控制启用，删除，修改note功能完善

hookehuyr
Commit 95c69cc939c3f1c0a34f6097a04211128585b7f5 95c69cc9 1 parent 6290cc47
Showing 1 changed file with 153 additions and 10 deletions
doc/App.vue
--- a/doc/App.vue
View file @95c69cc
+++ b/doc/App.vue
View file @95c69cc
@@ -323,10 +323,58 @@
             </div>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item @click.native="onSelectFlowVersion(item.id)" v-for="(item, index) in state.flow_version_list" :key="index">流程版本 (V{{ item.code }})</el-dropdown-item>
+                <el-dropdown-item @click.native="onSelectFlowVersion(item.id, item.code, item.note)" v-for="(item, index) in state.flow_version_list" :key="index">流程版本 (V{{ item.code }})</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
+          <el-tooltip content="编辑版本" placement="bottom">
+            <i class="el-icon-chat-line-square" @click="editFlowVersion" style="font-size: 18px; margin-left: 8px;"></i>
+          </el-tooltip>
+          <el-dialog v-model="state.dialogVersionFormVisible" title="版本描述">
+            <el-form :model="state.versionForm" label-width="80px">
+              <el-form-item label="版本号">
+                流程版本(V{{ state.versionForm.code }})
+              </el-form-item>
+              <el-form-item label="版本描述">
+                <el-input
+                  v-model="state.versionForm.note"
+                  :autosize="{ minRows: 2, maxRows: 4 }"
+                  type="textarea"
+                  placeholder="请输入版本描述"
+                />
+              </el-form-item>
+            </el-form>
+            <template #footer>
+              <span class="dialog-footer">
+                <el-popconfirm
+                  v-if="state.flow_version !== state.versionForm.code"
+                  placement="top"
+                  icon="el-icon-warning"
+                  title="是否确认启用该版本流程？"
+                  width="220px"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  @confirm="setFLowVersionEnable">
+                  <template #reference>
+                    <el-button type="success">启用流程</el-button>
+                  </template>
+                </el-popconfirm>
+                <el-popconfirm
+                  v-if="state.flow_version !== state.versionForm.code"
+                  title="是否确认删除该版本流程？"
+                  width="220px"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  @confirm="deleteFlowVersion">
+                  <template #reference>
+                    <el-button type="danger">删除流程</el-button>
+                  </template>
+                </el-popconfirm>
+                <el-button type="primary" color="#009688" @click="saveFlowVersionNote">保存描述</el-button>
+                <el-button @click="state.dialogVersionFormVisible = false">关闭</el-button>
+              </span>
+            </template>
+          </el-dialog>
         </div>
       </template>
       <!-- 表单底部按钮 -->
@@ -367,6 +415,7 @@ import { extend } from '@vue/shared'
 import { v4 as uuidv4 } from 'uuid';
 import type { FormInstance, FormRules } from 'element-plus'
 import qs from 'qs'
+import { after } from 'lodash-es';
 // import { VueSpinner } from 'vue3-spinners';
 const G6 = (window as any).G6.default as any
@@ -513,9 +562,17 @@ export default {
       auth_all_edit: false,
       field_auths: [],
       field_extend: [],
-      flow_version: '',
+      flow_version: 0,
       flow_version_list: [],
-    })
+      version_list: [],
+      dialogVersionFormVisible: false,
+      versionForm: {
+        code: 0,
+        id: 0,
+        note: '',
+        type: null, // 操作方式 0:仅保存流程说明 1:删除,2:启用
+      }
+    });
     /**
      * 更新URL
@@ -627,8 +684,8 @@ export default {
     getFlowData(flow_id);
     // 显示提示框的标志位
-    var showConfirmation = true;
     onMounted(async () => {
+      var showConfirmation = true;
       document.title = '可视化流程设计器'
       // 监听 beforeunload 事件
       window.addEventListener('beforeunload', function (event) {
@@ -650,8 +707,12 @@ export default {
       getVersionList();
     });
+    /***************** 版本操作 ***************/
+
+    /**
+     *  获取版本信息列表
+     */
     const getVersionList = () => {
-      // 获取版本信息列表
       axios.get('/admin/?a=flow_version&form_id=' + form_id)
       .then(res => {
         if (res.data.code) {
@@ -659,9 +720,17 @@ export default {
           res.data.data.forEach((ele) => {
             if (ele.status === '1') {
               state.flow_version = ele.code;
+              state.versionForm = { // 当前版本信息
+                code: ele.code,
+                id: ele.id,
+                note: ele.note,
+                type: null,
+              }
             }
           });
           // 版本列表
+          state.version_list = res.data.data;
+          // 版本列表不含有启用的版本
           state.flow_version_list = res.data.data.filter((ele) => {
             return ele.status !== '1';
           });
@@ -677,15 +746,61 @@ export default {
       });
     }
-    const onSelectFlowVersion = (id: string) => {
+    const onSelectFlowVersion = (id: number, code: number, note: string) => {
       // 切换版本信息
-      axios.post('/admin/?a=enable_flow_version', qs.stringify({ id: +id }))
+      state.dialogVersionFormVisible = true;
+      state.versionForm = { // 当前版本信息
+        code,
+        id,
+        note,
+        type: null,
+      }
+    }
+
+    const setFLowVersionEnable = () => { // 启用版本
+      state.versionForm.type = 2;
+      axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
+      .then(res => {
+        if (res.data.code) {
+          state.dialogVersionFormVisible = false;
+          ElMessage({
+            type: 'success',
+            message: '启用成功',
+          });
+          getVersionList(); // 刷新版本列表
+          updateUrl(res.data.data); // 更新URL
+          state.reloadLoading = true; // 打开loading
+          getFlowData(res.data.data); // 更新流程图数据
+        }
+      })
+    .catch(err => {
+        console.error(err);
+      });
+    }
+
+    const editFlowVersion = () => { // 编辑版本
+      console.warn('编辑版本');
+      state.dialogVersionFormVisible = true;
+      state.version_list.forEach((ele) => {
+        if (ele.status === '1') {
+          state.versionForm.id = ele.id;
+          state.versionForm.code = ele.code;
+          state.versionForm.note = ele.note;
+        }
+      });
+    }
+
+    const deleteFlowVersion = () => { // 删除版本
+      state.versionForm.type = 1;
+      axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
       .then(res => {
         if (res.data.code) {
+          state.dialogVersionFormVisible = false;
+          ElMessage({
+            type: 'success',
+            message: '删除成功',
+          });
           getVersionList();
-          updateUrl(res.data.data);
-          state.reloadLoading = true;
-          getFlowData(res.data.data);
         } else {
           ElMessage({
             type: 'error',
@@ -698,6 +813,30 @@ export default {
       });
     }
+    const saveFlowVersionNote = () => { // 保存版本描述
+      state.versionForm.type = 0;
+      axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
+      .then(res => {
+        if (res.data.code) {
+          state.dialogVersionFormVisible = false;
+          ElMessage({
+            type: 'success',
+            message: '保存成功',
+          });
+        } else {
+          ElMessage({
+            type: 'error',
+            message: res.data.msg,
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+    }
+
+    /***************** END *******************/
+
     function handleActiveChange(name: any) {
       console.warn(name)
     }
@@ -1516,6 +1655,10 @@ export default {
       handleAfterAdd,
       onSelectFlowVersion,
+      setFLowVersionEnable,
+      editFlowVersion,
+      deleteFlowVersion,
+      saveFlowVersionNote,
       handleActiveChange,
       onAuthVisibleChange,
       onAuthEditableChange,