优化

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -164,22 +164,46 @@
     </div>
 
     <div slot="footer">
-      <el-form :model="form" label-width="100px">
-        <el-form-item label="通知人">
-          <ele-tree-select
-            @change="handleTreeChange"
-            filterable
-            style="width: 100%"
-            ref="treeSelect"
-            multiple
-            clearable
-            :data="treeData"
-            v-model="treeList"
-            placeholder="请选择"
-            valueKey="id"
-            labelKey="name"
-            :checkStrictly="true"
-          />
+      <el-form :model="form">
+        <el-form-item label="通知人：">
+          <el-button
+            style="float: left; margin-top: 5px"
+            icon="el-icon-circle-plus-outline"
+            round
+            @click="handleEditDataScope"
+          ></el-button>
+          <div style="display: flex; flex-direction: row; flex-wrap: wrap">
+            <el-tag
+              style="float: left; margin: 5px 5px 0 5px"
+              v-for="(item, index) in form.noticeScope"
+              :key="item.name"
+              effect="plain"
+              closable
+              :title="item.name"
+              @close="handleCloseTag(index)"
+            >
+              {{
+                item.name.length > 3
+                  ? item.name[0] + item.name[1] + item.name[2] + '...'
+                  : item.name
+              }}
+            </el-tag>
+          </div>
+
+          <!--          <ele-tree-select-->
+          <!--            @change="handleTreeChange"-->
+          <!--            filterable-->
+          <!--            style="width: 100%"-->
+          <!--            ref="treeSelect"-->
+          <!--            multiple-->
+          <!--            clearable-->
+          <!--            :data="treeData"-->
+          <!--            v-model="treeList"-->
+          <!--            placeholder="请选择"-->
+          <!--            valueKey="id"-->
+          <!--            labelKey="name"-->
+          <!--            :checkStrictly="true"-->
+          <!--          />-->
         </el-form-item>
       </el-form>
       <!--      <el-button-->
@@ -198,6 +222,12 @@
       <!--      </el-button>-->
       <el-button type="primary" size="small" @click="submit">提交</el-button>
       <el-button size="small" @click="cancel">关闭</el-button>
+      <visibility-range-dialog
+        :visibilityRangeDialogFlag.sync="visibilityRangeDialogFlag"
+        v-if="visibilityRangeDialogFlag"
+        @getTreeList="getTreeList"
+        ref="visibilityRangeDialogRef"
+      ></visibility-range-dialog>
     </div>
   </ele-modal>
 </template>
@@ -217,15 +247,15 @@
   import dictMixins from '@/mixins/dictMixins';
   import { getByCode } from '@/api/system/dictionary-data';
   import { getGroupUserTree, getProduceTreeByCode } from '@/api/main';
-
+  import visibilityRangeDialog from './visibilityRangeDialog.vue';
   import { getModel } from '@/api/bpm/model';
   import { getProcessDefinitionList } from '@/api/bpm/definition';
   import { getToken } from '@/utils/token-util';
-  import {mapGetters} from "vuex";
+  import { mapGetters } from 'vuex';
 
   export default {
     name: 'processSubmitDialog',
-    components: {},
+    components: { visibilityRangeDialog },
     mixins: [dictMixins],
     props: {
       processSubmitDialogFlag: {
@@ -240,6 +270,7 @@
     },
     data() {
       return {
+        visibilityRangeDialogFlag: false,
         isRight: false,
         jsonData: {},
         form: {
@@ -276,14 +307,14 @@
         rules: {}
       };
     },
-    computed:{
-    ...mapGetters(['user']),
+    computed: {
+      ...mapGetters(['user'])
     },
     async created() {
       let typeObj = await getProduceTreeByCode(
         treeClassifyCodeEnum['PROCESSTYPE']
       );
-      await this.getTreeData();
+      //  await this.getTreeData();
       this.LCFLList = typeObj[0].children;
 
       // 获得角色列表
@@ -346,13 +377,12 @@ this.postOptions.push(...response.data);
         this.jsonData.list.forEach((item) => {
           console.log(item.type);
           if (item.type == 'deptAndUserCascader') {
-
           }
           if (item.type == 'deptCascader') {
-            this.form.valueJson[item.model] = this.user.info.groupId
+            this.form.valueJson[item.model] = this.user.info.groupId;
           }
           if (item.type == 'userSelect') {
-            this.form.valueJson[item.model] = this.user.info.userId
+            this.form.valueJson[item.model] = this.user.info.userId;
           }
           if (item.type == 'imgupload') {
             // this.form.valueJson[item.model].length &&
@@ -402,6 +432,18 @@ this.postOptions.push(...response.data);
           processDefinitionId: find.processDefinitionId
         });
       },
+      handleEditDataScope() {
+        this.visibilityRangeDialogFlag = true;
+        this.$nextTick(() => {
+          this.$refs.visibilityRangeDialogRef.init(this.form);
+        });
+      },
+      getTreeList(list) {
+        this.form.noticeScope = list;
+      },
+      handleCloseTag(index) {
+        this.form.noticeScope.splice(index, 1);
+      },
       getAssignRuleOptionName(row, option) {
         if (row.type == 10) {
           for (const roleOption of this.roleOptions) {

src/BIZComponents/processSubmitDialog/visibilityRangeDialog.vue

@@ -0,0 +1,172 @@
+<template>
+  <ele-modal
+    :visible="visibilityRangeDialogFlag"
+    title="通知人"
+    width="30%"
+    :centered="true"
+    :close-on-click-modal="false"
+    append-to-body
+    :before-close="cancel"
+  >
+    <div class="box">
+      <div class="left-box">
+        <el-input
+          style="margin-bottom: 5px"
+          placeholder="搜索成员、部门"
+          v-model="filterText"
+        >
+        </el-input>
+        <el-tree
+          @check-change="handleTreeChange"
+          show-checkbox
+          node-key="id"
+          class="filter-tree"
+          check-strictly
+          :data="treeData"
+          :props="defaultProps"
+          :filter-node-method="filterNode"
+          ref="tree"
+        >
+        </el-tree>
+      </div>
+      <div class="right-box">
+        <span style="font-size: 12px; color: #cfd0d3">已选择的部门或成员</span>
+        <div v-for="(item, index) in treeList" class="right-box-item">
+          <span>
+            <span
+              :class="item.type == 1 ? 'el-icon-user-solid' : 'el-icon-folder'"
+              style="margin-right: 5px"
+            ></span>
+            <span>{{ item.name }}</span>
+          </span>
+          <span
+            class="el-icon-close"
+            @click="handleDel(item, index)"
+            style="cursor: pointer"
+          ></span>
+        </div>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </div>
+  </ele-modal>
+</template>
+<script>
+  import { bpmCustomFormUpdate } from '@/api/bpm/task';
+  import { getGroupUserTree } from '@/api/main';
+
+  export default {
+    name: 'visibilityRangeDialog',
+
+    props: {
+      visibilityRangeDialogFlag: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        filterText: '',
+        treeList: [],
+        form: {},
+        treeData: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        }
+      };
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
+    async created() {
+      await this.getTreeData();
+    },
+    methods: {
+      init(row = {}) {
+        this.treeList = row.noticeScope;
+        // if (this.treeList.length) {
+        //   setTimeout(() => {
+        //     console.log(this.treeList);
+        //     this.$refs.tree.setCheckedNodes([...this.treeList]);
+        //   }, 500);
+        // }
+      },
+      async getTreeData() {
+        this.treeData = await getGroupUserTree();
+
+        this.$nextTick(() => {
+          if(this.treeList.length){
+            this.$refs.tree.setCheckedNodes([...this.treeList]);
+          }
+        });
+        // setTimeout(() => {
+        //
+        // }, 1000);
+      },
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.name.indexOf(value) !== -1;
+      },
+      handleTreeChange(val) {
+        this.$nextTick(() => {
+          this.treeList = this.$refs.tree.getCheckedNodes();
+          console.log(this.treeList);
+        });
+      },
+      async handleSave() {
+        // this.form.dataScope = this.treeList;
+        // await bpmCustomFormUpdate(this.form);
+        if (!this.treeList.length)
+          return this.$message.warning('请选择通知人或者通知部门');
+        //this.$message.success('操作成功');
+        // this.cancel();
+        this.$emit('getTreeList', this.treeList);
+        this.cancel();
+      },
+      handleDel(item, index) {
+        this.treeList.splice(index, 1);
+        this.$refs.tree.setCheckedNodes([...this.treeList]);
+      },
+      cancel() {
+        this.$emit('update:visibilityRangeDialogFlag', false);
+      }
+    }
+  };
+</script>
+<style scoped lang="scss">
+  .box {
+    display: flex;
+    height: 300px;
+
+    .left-box {
+      width: 55%;
+      border-right: 1px solid #e2e4e7;
+      padding-right: 15px;
+      height: 100%;
+
+      .el-tree {
+        height: 85%;
+        overflow-y: auto;
+      }
+    }
+
+    .right-box {
+      flex: 1;
+      padding-left: 20px;
+      height: 100%;
+
+      .right-box-item {
+        margin-top: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+  }
+</style>

src/views/bpm/collaborative/index.vue

@@ -753,7 +753,7 @@ export default {
 
     },
     async getTemplateList() {
-      this.defaultTemplateList = await getBpmCustomFormList()
+      this.defaultTemplateList = await getBpmCustomFormList({status:1})
       this.templateList = _.groupBy(this.defaultTemplateList, 'dictType');
       this.params.formId = this.defaultTemplateList[0]?.id
       let makingJson = JSON.parse(this.defaultTemplateList[0].formJson.makingJson) || {}

src/views/bpm/formConfig/index.vue

@@ -34,19 +34,23 @@
               </span>
             </span>
             <span>
-              <el-button size="mini" style="color: #0C4C7F" type="text" @click="handleAddOrEdit(v,'edit')">编辑</el-button>
+              <el-button size="mini" style="color: #0C4C7F" v-if="!v.status" type="text" @click="handleAddOrEdit(v,'edit')">编辑</el-button>
                <el-button size="mini" type="text" @click="handleAddOrEdit(v,'copy')">复制</el-button>
-                <el-button size="mini" type="text" style="color: red"  @click="handleDel(v)">删除</el-button>
+                <el-button size="mini" type="text" v-if="!v.status" style="color: red"  @click="handleDel(v)">删除</el-button>
+                <el-button size="mini" type="text" v-if="v.status" style="color: red"  @click="handleStatus(v,0)">停用</el-button>
+                <el-button size="mini" type="text" v-if="!v.status" style="color: #58e805"  @click="handleStatus(v,1)">启用</el-button>
+
+
 <!--              <el-dropdown size="mini" trigger="click" style="cursor: pointer"-->
 <!--                           @command="(command)=>handleCommand(command,v)">-->
 <!--                <span style="color: #0C4C7F;font-size: 12px" class="el-dropdown-link">-->
 <!--                  更多-->
 <!--                </span>-->
 <!--                <el-dropdown-menu slot="dropdown">-->
-<!--&lt;!&ndash;                  <el-dropdown-item command="stop">停用</el-dropdown-item>&ndash;&gt;-->
-<!--                  &lt;!&ndash;                  <el-dropdown-item command="start">启用</el-dropdown-item>&ndash;&gt;-->
-<!--                  <el-dropdown-item command="copy" style="color: #0e85fa">复制</el-dropdown-item>-->
-<!--                  <el-dropdown-item command="del" style="color: red">删除</el-dropdown-item>-->
+<!--                  <el-dropdown-item v-if="v.status" style="color: red"  command="stop">停用</el-dropdown-item>-->
+<!--                  <el-dropdown-item v-if="!v.status" style="color: #58e805" command="start">启用</el-dropdown-item>-->
+<!--&lt;!&ndash;                  <el-dropdown-item command="copy" style="color: #0e85fa">复制</el-dropdown-item>&ndash;&gt;-->
+<!--&lt;!&ndash;                  <el-dropdown-item command="del" style="color: red">删除</el-dropdown-item>&ndash;&gt;-->
 <!--                </el-dropdown-menu>-->
 <!--              </el-dropdown>-->
 
@@ -67,7 +71,7 @@
 </template>
 <script>
 import addOrEditDialog from "./addOrEditDialog.vue";
-import {bpmCustomFormDelete, getBpmCustomFormPage} from "@/api/bpm/task";
+import {bpmCustomFormDelete, bpmCustomFormUpdate, getBpmCustomFormPage} from "@/api/bpm/task";
 import formGenerator from "@/components/FormGenerator/index.vue";
 import visibilityRangeDialog from "@/views/bpm/formConfig/visibilityRangeDialog.vue";
 import {getByCode} from "@/api/system/dictionary-data";
@@ -171,7 +175,15 @@ export default {
         this.$refs.visibilityRangeDialogRef.init(v)
       })
     },
-    handleStatus(status) {
+    handleStatus(v,status) {
+      let msg = status?'启用':'停用'
+     this.$confirm(`是否${msg}此模板？`, '提示', {
+       type: 'warning'
+     }).then(async ()=>{
+       v.status = status
+       await bpmCustomFormUpdate(v)
+       this.$message(`${msg}成功`)
+     })
 
     }
   }

src/views/bpm/formConfig/visibilityRangeDialog.vue

@@ -88,14 +88,19 @@ export default {
     init(row = {}, type) {
       this.form = _.cloneDeep(row)
       this.treeList = row.dataScope
-      if (this.treeList.length) {
-        setTimeout(() => {
-          this.$refs.tree.setCheckedNodes([...this.treeList]);
-        }, 400)
-      }
+      // if (this.treeList.length) {
+      //   setTimeout(() => {
+      //     this.$refs.tree.setCheckedNodes([...this.treeList]);
+      //   }, 400)
+      // }
     },
     async getTreeData() {
       this.treeData = await getGroupUserTree()
+      this.$nextTick(() => {
+        if(this.treeList.length){
+          this.$refs.tree.setCheckedNodes([...this.treeList]);
+        }
+      });
     },
     filterNode(value, data) {
       if (!value) return true;