节点属性新功能点初稿-新增选择下一步执行人和节点操作里添加消息配置

hookehuyr
Commit ab88b6c80a249b6b6cb29fe9066c6e974eec60b2 ab88b6c8 1 parent 71fef078
Showing 1 changed file with 132 additions and 3 deletions
doc/App.vue
--- a/doc/App.vue
View file @ab88b6c
+++ b/doc/App.vue
View file @ab88b6c
@@ -112,6 +112,32 @@
                       </el-tag>
                       <div v-else class="text-empty">请选择成员</div>
                     </div>
+                    <div>
+                      <el-checkbox v-model="state.has_next_step_user">选择下一步的执行人</el-checkbox>
+                      <!-- TODO: 需要给每个子分支选择下一步执行人，删除分支的时候需要删除保存的值 -->
+                      <el-select v-model="state.next_step_node" placeholder="请选择节点" style="margin-bottom: 0.5rem;">
+                        <el-option
+                          v-for="node in state.next_step_node_opt"
+                          :key="node.value"
+                          :label="node.label"
+                          :value="node.value">
+                        </el-option>
+                      </el-select>
+                      <div class="flow-tag__wrapper" @click="openNextStepUserForm">
+                        <el-tag
+                          v-if="state.nextStepUserTags.length"
+                          v-for="tag in state.nextStepUserTags"
+                          :key="tag.name"
+                          style="margin: 0 0.25rem 0.5rem 0.25rem;"
+                        >
+                          <el-icon v-if="tag.type === 'dept'" style="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
+                          <el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
+                          <el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
+                          <span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
+                        </el-tag>
+                        <div v-else class="text-empty">请选择成员</div>
+                      </div>
+                    </div>
                   </div>
                   <!-- <el-form-item v-if="state.select_attr_set" prop="attr" style="width: 100%;"> -->
                     <!-- <el-radio-group
@@ -229,7 +255,7 @@
                   </div>
                 </div>
                 <div v-else class="more-attr-set">
-                  <el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" color="#009688" style="width: 100%;">完成</el-button>
+                  <el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" color="#009688" style="width: 100%;">返回</el-button>
                   <div class="more-attr-switch">
                     <div class="more-attr-title">{{ state.more_attr_data.label }}</div>
                     <div><el-switch v-model="state.more_attr_data.show" /></div>
@@ -239,6 +265,38 @@
                     <p style="font-size: 14px; font-weight: bold;">按钮文字</p>
                     <el-input v-model="state.more_attr_data.btnText" />
                   </div>
+                  <div v-if="state.more_attr_data.is_node">
+                    {{ state.more_attr_data }}
+                    <p style="font-size: 14px; font-weight: bold;">消息配置</p>
+                    <div style="display: flex; justify-content: space-between; align-items: center;">
+                      <div style="font-size: 0.9rem;">开关</div>
+                      <div><el-switch v-model="state.more_attr_data.msg_opt.is_open" /></div>
+                    </div>
+                    <div>
+                      <div style="font-size: 0.9rem; margin: 0.5rem 0;">接收对象（整个组织用户范围）</div>
+                      <div class="flow-tag__wrapper" @click="openNextStepUserForm">
+                        <el-tag
+                          v-if="state.nextStepUserTags.length"
+                          v-for="tag in state.nextStepUserTags"
+                          :key="tag.name"
+                          style="margin: 0 0.25rem 0.5rem 0.25rem;"
+                        >
+                          <el-icon v-if="tag.type === 'dept'" style="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
+                          <el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
+                          <el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
+                          <span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
+                        </el-tag>
+                        <div v-else class="text-empty">请选择成员</div>
+                      </div>
+                    </div>
+                    <div>
+                      <div style="font-size: 0.9rem; margin: 0.5rem 0;">消息类型（站内信、微信）</div>
+                      <el-checkbox-group v-model="state.more_attr_data.msg_opt.msg_type">
+                        <el-checkbox label="站内信"></el-checkbox>
+                        <el-checkbox label="微信"></el-checkbox>
+                      </el-checkbox-group>
+                    </div>
+                  </div>
                 </div>
               </el-tab-pane>
               <!-- <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem">
@@ -684,10 +742,17 @@ export default {
         showBtn: true,
         desc: '',
         btnText: '',
+        is_node: false,
+        msg_opt: {
+          is_open: false, // 开关
+          user: [], // 接收对象
+          msg_type: [] // 消息类型
+        }
       },
       node_name: '', // 节点名称
       node_idx: null, // 节点index
       userTags: [], // 节点负责人,
+      nextStepUserTags: [], // 下一步节点负责人,
       auth_all_checked: false,
       auth_all_edit: false,
       field_auths: [],
@@ -710,6 +775,17 @@ export default {
       window_height: '500px',
       preview_form_url: '',
       drawer: false,
+      has_next_step_user: true,
+      is_user_tags_visible: false,
+      is_next_step_user_visible: false,
+      next_step_node: '',
+      next_step_node_opt: [{
+        value: '1',
+        label: '节点1'
+      }, {
+        value: '2',
+        label: '节点2'
+      },]
     });
     const setNodeTree = (id: string, data: object) => {
@@ -1028,6 +1104,7 @@ export default {
       },
       // { immediate: true }
     );
+    // TODO：需要监听state.nextStepUserTags的变化赋值
     watch(
       () => state.field_auths,
       (newValue, oldValue) => {
@@ -1393,15 +1470,41 @@ export default {
      */
     const openUserForm = () => {
       state.dialogUserFormVisible = true;
+      state.is_user_tags_visible = true;
       state.dialogUserTags = state.node_tree[state.detailModel.id].user;
     }
+    const openNextStepUserForm = () => { // 打开下一步用户弹框
+      state.dialogUserFormVisible = true;
+      state.is_next_step_user_visible = true;
+      // TODO: 重新打开的时候需要把选中的数据还原显示
+      // TODO： 监听变化会把下面的值改变之后更新到显示上面
+      state.nextStepUserTags = state.node_tree[state.detailModel.id].user;
+      state.dialogUserTags = [
+        {
+            "id": 137919,
+            "type": "user",
+            "name": "11组寝室长"
+        },
+        {
+            "id": 137923,
+            "type": "user",
+            "name": "13组寝室长"
+        }
+      ];
+    }
+
     const onCloseUserView = (status: boolean) => {
       state.dialogUserFormVisible = status
     }
     const onConfirmUserView = async (data: any) => { // 负责人弹框确认回调
-      state.userTags = data;
+      if (state.is_user_tags_visible) { // 赋值给负责人框
+        state.userTags = data;
+      }
+      if (state.is_next_step_user_visible) { // 赋值给下一步负责人框
+        state.nextStepUserTags = data;
+      }
       // // 自动保存流程
       // let { nodes, edges } = editor.editorState.graph.save();
       // // 检查路径有效性
@@ -1534,6 +1637,8 @@ export default {
           state.statusLoading = false;
           state.node_name = state.node_tree[state.detailModel.id].name;
           state.userTags = state.node_tree[state.detailModel.id].user;
+          // TODO：获取下一步操作人列表
+          state.nextStepUserTags = state.node_tree[state.detailModel.id].user;
           state.dialogUserTags = state.node_tree[state.detailModel.id].user;
           state.field_auths = state.node_tree[state.detailModel.id].field_auths;
           state.more_attr = state.node_tree[state.detailModel.id].property;
@@ -1564,6 +1669,8 @@ export default {
           state.statusLoading = false;
           state.node_name = data.name ? data.name : model.text; // 节点名称
           state.userTags = data.user; // 节点负责人
+          // TODO：获取下一步操作人列表
+          state.nextStepUserTags = data.user;
           state.dialogUserTags = state.userTags; // 同步给弹框数据
           state.field_extend = data.field; // 字段权限临时储存，实际传给后端数据结构
           state.field_auths = []; // 清空字段权限列表，本地使用数据结构
@@ -1602,6 +1709,21 @@ export default {
               return ele.id !== 'reject'
             });
           }
+          // TODO：模拟节点操作-消息配置数据结构
+          let msg_opt = {
+            is_open: false, // 开关
+            user: [], // 接收对象
+            msg_type: [] // 消息类型
+          }
+          state.more_attr.forEach(attr => {
+            if (attr.id === 'no-2') {
+              attr.data.forEach(ele => {
+                console.warn(ele);
+                ele.msg_opt = msg_opt;
+              })
+            }
+          });
+
           // 抄送节点不显示
           if (state.detailModel.control === 'cc') {
@@ -1698,8 +1820,10 @@ export default {
       state.more_attr_data = attr['data'][index]; // 同步数据
       if (attr.id === 'no-1') { // 如果是审批意见，按钮文字不可以修改
         state.more_attr_data.showBtn = false;
-      } else {
+        state.more_attr_data.is_node = false; // 节点属性标识
+      } else { // 节点操作
         state.more_attr_data.showBtn = true;
+        state.more_attr_data.is_node = true; // 节点属性标识
       }
     }
@@ -2413,6 +2537,7 @@ export default {
       handleNodeNameChange,
       openUserForm,
+      openNextStepUserForm,
       onCloseUserView,
       onConfirmUserView,
@@ -2701,6 +2826,10 @@ body {
   color: #009688 !important;
 }
+.el-switch__label.is-active {
+  color: #009688 !important;
+}
+
 .sort-item {
   padding: 1rem; border: 1px solid #ebeef5; cursor: move;
   background-color: #fff;