调整loading加载控件，联调保存节点属性的更多属性字段

hookehuyr
Commit 5ee230d1acd5fec74e6a704b767d8326a2335ca5 5ee230d1 1 parent 9e96d497
Showing 3 changed files with 138 additions and 133 deletions
doc/App.vue
package.json
yarn.lock
--- a/doc/App.vue
View file @5ee230d
+++ b/doc/App.vue
View file @5ee230d
@@ -318,6 +318,13 @@
     @close="onCloseUserView"
     @confirm="onConfirmUserView"
   />
+
+  <div v-if="state.statusLoading" class="el-loading-mask is-fullscreen" style="background-color: rgba(f, f, f, 0.7); z-index: 2006;">
+    <div class="el-loading-spinner">
+      <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
+      <p class="el-loading-text">加载中</p>
+    </div>
+  </div>
 </template>
 <script lang="ts">
@@ -334,6 +341,7 @@ import { extend } from '@vue/shared'
 import { v4 as uuidv4 } from 'uuid';
 import type { FormInstance, FormRules } from 'element-plus'
 import qs from 'qs'
+// import { VueSpinner } from 'vue3-spinners';
 const G6 = (window as any).G6.default as any
@@ -372,6 +380,7 @@ export default {
     Calendar,
     Search,
     SelectUserView,
+    // VueSpinner,
   },
   setup(props, context) {
@@ -388,6 +397,7 @@ export default {
       data: AppData, // 渲染的数据，数据格式参考G6文档
       detailModel: null,
       editorLoading: false, // 开始编辑器的loading状态
+      statusLoading: false, // loading状态
       // menuData: [
       //   {
       //     label: '流程节点',
@@ -454,7 +464,7 @@ export default {
       },
       search_auth_value: '',
       dialogUserFormVisible: false,
-      dialogUserTags: [],
+      dialogUserTags: [], // 同步到用户列表的数据
       activeName: 'node',
       attr_radio: '基础属性',
       main_attr_set: true,
@@ -727,7 +737,6 @@ export default {
     }
     const onConfirmUserView = (data: any) => {
       state.userTags = data;
-      console.log(data)
     }
     /******************* END *******************/
@@ -765,7 +774,6 @@ export default {
       //   state.detailModel = model
       //   editor.openModel()
       // }
-
     }
     /**
@@ -783,7 +791,7 @@ export default {
       state.detailModel = model
       // 判断是否是流程节点
-      let model_id = model.id
+      let model_id = model.id;
       if (model_id !== 'end-node') {
         // 判断是否是开始节点, 不设置负责人
         if (model_id ==='start-node') {
@@ -797,22 +805,19 @@ export default {
         } else {
           state.select_attr_set = true;
         }
-        // TODO: 接口查询节点的属性
+        state.statusLoading = true;
-        const loading = ElLoading.service({
+        //
-          target: document.getElementById('app'),
-          lock: true,
-          text: '加载中',
-          // background: 'rgba(f, f, f, 0.7)',
-        });
         axios.get('/admin/?a=flow_node_property&node_code=' + model.id + '&flow_id=' + flow_id)
         .then((res: any) => {
           if (res.data.code) {
-            state.node_name = res.data.data.name ? res.data.data.name : model.text;
+            state.statusLoading = false;
-            state.userTags = res.data.data.user;
+            //
-            state.dialogUserTags = state.userTags;
+            state.node_name = res.data.data.name ? res.data.data.name : model.text; // 节点名称
-            // TODO: 需要处理更多属性数据，节点类型是抄送时不显示节点操作
+            state.userTags = res.data.data.user; // 节点负责人
-            state.field_extend = res.data.data.field;
+            state.dialogUserTags = state.userTags; // 同步给弹框数据
-            state.field_auths = [];
+            state.field_extend = res.data.data.field; // 字段权限临时储存，实际传给后端数据结构
+            state.field_auths = []; // 清空字段权限列表，本地使用数据结构
+            // 转换数据结构使用
             state.field_extend.forEach(ele => {
               if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
                 state.field_auths.push({
@@ -830,137 +835,94 @@ export default {
                 })
               }
             });
-            // state.field_auths = [ // 字段权限
+            // 检查字段权限选中情况
-            //   {
+            checkAuthAll('visible');
-            //     name: '字段1',
+            checkAuthAll('editable');
-            //     visible: {
+            //
-            //       checked: false,
+            state.more_attr = res.data.data.property; // 更多属性
-            //       disabled: true,
+            // state.more_attr = [ // 更多属性
-            //     },
-            //     editable: {
-            //       checked: false,
-            //       disabled: true,
-            //     },
-            //     show: true,
-            //   },
             //   {
-            //     name: '字段2',
+            //     id: 'no-1',
-            //     visible: {
+            //     label: '审批意见',
-            //       checked: true,
+            //     desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
-            //       disabled: false,
+            //     data: [
-            //     },
+            //       {
-            //     editable: {
+            //         id: 'text-1',
-            //       checked: false,
+            //         label: '文本意见',
-            //       disabled: false,
+            //         show: true,
-            //     },
+            //         desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
-            //     show: true,
+            //         btnText: '',
+            //       },
+            //       {
+            //         id: 'signature-1',
+            //         label: '手写签名',
+            //         show: false,
+            //         desc: '用户在处理流程时，需要签名确认。',
+            //         btnText: ''
+            //       },
+            //     ]
             //   },
             //   {
-            //     name: '字段3',
+            //     id: 'no-2',
-            //     visible: {
+            //     label: '节点操作',
-            //       checked: true,
+            //     desc: '定义流程负责人在处理流程时可以进行的操作',
-            //       disabled: false,
+            //     data: [
-            //     },
+            //       {
-            //     editable: {
+            //         id: 'node-1',
-            //       checked: false,
+            //         label: '提交',
-            //       disabled: false,
+            //         show: true,
-            //     },
+            //         desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
-            //     show: true,
+            //         btnText: '提交'
-            //   },
+            //       },
-            // ]
+            //       {
-            console.log(res.data.data.field);
+            //         id: 'node-2',
-
+            //         label: '暂存',
-            state.more_attr = [ // 更多属性
+            //         show: false,
-              {
+            //         desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
-                id: 'no-1',
+            //         btnText: '暂存'
-                label: '审批意见',
+            //       },
-                desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
+            //       {
-                data: [
+            //         id: 'node-3',
-                  {
+            //         label: '撤回',
-                    id: 'text-1',
+            //         show: false,
-                    label: '文本意见',
+            //         desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
-                    show: true,
+            //         btnText: '撤回'
-                    desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
+            //       },
-                    btnText: '',
+            //       {
-                  },
+            //         id: 'node-4',
-                  {
+            //         label: '回退',
-                    id: 'signature-1',
+            //         show: false,
-                    label: '手写签名',
+            //         desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
-                    show: false,
+            //         btnText: '回退'
-                    desc: '用户在处理流程时，需要签名确认。',
+            //       },
-                    btnText: ''
+            //     ],
-                  },
+            //   }
-                ]
+            // ];
-              },
-              {
-                id: 'no-2',
-                label: '节点操作',
-                desc: '定义流程负责人在处理流程时可以进行的操作',
-                data: [
-                  {
-                    id: 'node-1',
-                    label: '提交',
-                    show: true,
-                    desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
-                    btnText: '提交'
-                  },
-                  {
-                    id: 'node-2',
-                    label: '暂存',
-                    show: false,
-                    desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
-                    btnText: '暂存'
-                  },
-                  {
-                    id: 'node-3',
-                    label: '撤回',
-                    show: false,
-                    desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
-                    btnText: '撤回'
-                  },
-                  {
-                    id: 'node-4',
-                    label: '回退',
-                    show: false,
-                    desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
-                    btnText: '回退'
-                  },
-                ],
-              }
-            ];
-
-            console.warn('基础属性', state.field_auths);
-            console.warn('更多属性', state.more_attr);
             // 开始节点不显示审批意见
             if (model_id ==='start-node') {
+              // TODO：等待后台结构
               state.more_attr = state.more_attr.filter((ele: any) => {
                 return ele.label !== '审批意见'
               });
             }
-            // 检查字段权限选中情况
+            // 抄送节点不显示
-            checkAuthAll('visible');
-            checkAuthAll('editable');
-            // 抄送节点不显示节点操作
             if (state.detailModel.control === 'cc') {
-              state.more_attr = state.more_attr.filter((ele: any) => {
+              state.more_attr = [];
-                return ele.label !== '节点操作'
-              });
             }
             // 打开属性表单
             state.attr_radio = '基础属性'; // 还原tab默认值
             editor.openModel();
-            loading.close();
           } else {
-            loading.close();
             ElMessage({
               type: 'error',
               message: res.data.msg,
             });
+            state.statusLoading = false;
           }
         })
         .catch((err: any) => {
-          loading.close();
           console.log(err);
+          state.statusLoading = false;
         });
       } else {
         editor.closeModel()
@@ -1064,21 +1026,14 @@ export default {
       axios.post('/admin/?a=save_node_property', qs.stringify({
         flow_id: +flow_id,
         node_code: state.detailModel.id,
-        // data: JSON.stringify({ name: state.node_name, user: state.userTags, field_auths: state.field_auths, more_attr: state.more_attr })
+        data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr })
-        data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend })
       }))
       .then(res => {
         if (res.data.code) {
-          // console.log(state.detailModel.id)
           state.detailModel.text = state.node_name;
-          // // state.detailModel.label = state.node_name
           // 更新流程图信息
           editor.updateModel(state.detailModel);
           editor.closeModel();
-          // console.log('节点名称', state.node_name);
-          // console.log('节点负责人', state.userTags);
-          // console.log('字段权限', state.field_auths);
-          // console.log('更多属性', state.more_attr);
           ElMessage({
             type:'success',
             message: '保存成功',
@@ -1590,4 +1545,11 @@ body {
   background-color: white !important;
   outline: 0;
 }
+
+.el-loading-spinner .path {
+  stroke: #009688!important;
+}
+.el-loading-spinner .el-loading-text {
+  color: #009688 !important;
+}
 </style>
--- a/package.json
View file @5ee230d
+++ b/package.json
View file @5ee230d
@@ -37,6 +37,7 @@
     "vue-loader-v16": "^16.0.0-beta.5.4",
     "vue-router": "^4.0.0-0",
     "vue-template-compiler": "^2.6.14",
+    "vue3-spinners": "^1.2.2",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
--- a/yarn.lock
View file @5ee230d
+++ b/yarn.lock
View file @5ee230d
@@ -2949,6 +2949,11 @@ colorette@^1.2.1, colorette@^1.2.2:
   resolved "https://registry.nlark.com/colorette/download/colorette-1.3.0.tgz"
   integrity sha1-/0XS8O2yRAadO3cq3rBP7TjQoK8=
+colornames@^1.1.1:
+  version "1.1.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
+  integrity sha1-+IiQMGhcfE/54qVZ9Qd+t2qBb5Y=
+
 combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.nlark.com/combined-stream/download/combined-stream-1.0.8.tgz"
@@ -5537,6 +5542,16 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
+just-range@^4.0.1:
+  version "4.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/just-range/-/just-range-4.2.0.tgz#34d901f76b2d0ce3a0d2c98cb691b06303945122"
+  integrity sha512-z2Ip8H2j7a9Vr8rKFi0IZf4IXn2Yuq2lGZFS41GjfPwksoHWTaTx1xIjU6C0HyQ1jBXEoz/FzjS5eyVXeW19tg==
+
+just-zip-it@^3.0.2:
+  version "3.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/just-zip-it/-/just-zip-it-3.2.0.tgz#76185e513aeab5519fb06d68460a54cefcb37b6a"
+  integrity sha512-ZJxc8mLz8XkaoOegJ237Xuo3ZQB5zUN/8BTXqalBJbh/uj+ahfJbOJKadJPmXDBbxHzh+MQYH43VxV5TlQvlfw==
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.nlark.com/killable/download/killable-1.0.1.tgz"
@@ -6394,6 +6409,11 @@ os-browserify@^0.3.0:
   resolved "https://registry.npm.taobao.org/os-browserify/download/os-browserify-0.3.0.tgz"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
+outdent@^0.8.0:
+  version "0.8.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0"
+  integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/p-finally/download/p-finally-1.0.0.tgz"
@@ -6506,6 +6526,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
+parse-unit@^1.0.1:
+  version "1.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/parse-unit/-/parse-unit-1.0.1.tgz#7e1bb6d5bef3874c28e392526a2541170291eecf"
+  integrity sha1-fhu21b7zh0wo45JSaiVBFwKR7s8=
+
 parse5-htmlparser2-tree-adapter@^6.0.0:
   version "6.0.1"
   resolved "https://registry.nlark.com/parse5-htmlparser2-tree-adapter/download/parse5-htmlparser2-tree-adapter-6.0.1.tgz"
@@ -8144,6 +8169,11 @@ strip-indent@^2.0.0:
   resolved "https://registry.nlark.com/strip-indent/download/strip-indent-2.0.0.tgz"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
+style-inject@^0.3.0:
+  version "0.3.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
+  integrity sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.nlark.com/stylehacks/download/stylehacks-4.0.3.tgz"
@@ -8789,6 +8819,18 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.nlark.com/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
+vue3-spinners@^1.2.2:
+  version "1.2.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/vue3-spinners/-/vue3-spinners-1.2.2.tgz#30026c44e82f56544e9766f99f3360fbc662e715"
+  integrity sha512-rWYvbwgLKQOWk92pzadYCSssYeMJdyCfdT3ZAPHwT9lOU2+jPtGvp1tr2wQHQejlLTjaF4sHIBWVq4QGuCWGDg==
+  dependencies:
+    colornames "^1.1.1"
+    just-range "^4.0.1"
+    just-zip-it "^3.0.2"
+    outdent "^0.8.0"
+    parse-unit "^1.0.1"
+    style-inject "^0.3.0"
+
 vue@^3.0.0:
   version "3.2.2"
   resolved "https://registry.nlark.com/vue/download/vue-3.2.2.tgz"