通知规则页面优化修改

src/api/notice/notice.js

@@ -9,14 +9,6 @@ export function list(query) {
   })
 }
 
-export function selectUserList(query) {
-  return request({
-    url: '/core/noticeRule/getSelectUser',
-    method: 'get',
-    params: query
-  })
-}
-
 export function selectUserListByOrgId(orgId) {
   return request({
     url: '/core/noticeRule/getSelectUser/'+orgId,
@@ -44,3 +36,17 @@ export function deleteNoticeRule(id) {
     method: 'delete'
   })
 }
+
+export function getDetail(id) {
+  return request({
+    url: '/core/noticeRule/detail/'+id,
+    method: 'get'
+  })
+}
+
+export function getOrgRoles(orgId) {
+  return request({
+    url: '/core/noticeRule/getOrgRules/'+orgId,
+    method: 'get',
+  })
+}

src/views/notice/index.vue

@@ -54,34 +54,40 @@
           </template>
         </el-table-column>
         <el-table-column align="center" label="规则名称" prop="name"/>
-        <el-table-column label="启用状态" align="center" key="enable" prop="enable">
-          <template slot-scope="scope">
-            <span>{{ scope.row.enable === 1 ? '启用' : '停用' }}</span>
+        <el-table-column align="center" label="适用机构" prop="orgName" />
+        <el-table-column align="center" label="通知机构" prop="orgNames">
+          <template slot-scope="item">
+            <span style="white-space: pre-line">{{handleNameShow(item.row.orgNames)}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="发送短信" align="center" key="sendSms" prop="sendSms">
-          <template slot-scope="scope">
-            <span>{{ scope.row.sendSms === 1 ? '是' : '否' }}</span>
+        <el-table-column align="center" label="通知角色" prop="roleNames">
+          <template slot-scope="item">
+            <span style="white-space: pre-line">{{handleNameShow(item.row.roleNames)}}</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="描述" prop="remark"/>
-        <el-table-column align="center" label="适用机构" prop="orgNames">
+        <el-table-column align="center" label="通知人员" prop="userNames">
           <template slot-scope="item">
-            <span style="white-space: pre-line">{{handleOrgNameShow(item.row)}}</span>
+            <span style="white-space: pre-line">{{handleNameShow(item.row.userNames)}}</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="传感器类型" prop="productTypes">
+        <el-table-column align="center" label="传感器类型" prop="productTypeNames">
           <template slot-scope="item">
-            <span style="white-space: pre-line">{{handleProductTypeShow(item.row)}}</span>
+            <span style="white-space: pre-line">{{handleNameShow(item.row.productTypeNames)}}</span>
           </template>
         </el-table-column>
+        <el-table-column label="启用状态" align="center" key="enable" prop="enable">
+          <template slot-scope="scope">
+            <span>{{ scope.row.enable === 1 ? '启用' : '停用' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="描述" prop="remark"/>
         <el-table-column label="操作" fixed="right" style="width: 100px" align="center"
                          class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button size="mini" type="text" icon="el-icon-edit" @click="editHandler(scope.row)"
-                       v-hasPermi="['core:task:query']">编辑</el-button>
+                       >编辑</el-button>
             <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandler(scope.row)"
-                       v-hasPermi="['core:task:query']">删除</el-button>
+                       >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -110,23 +116,21 @@
             :noChildrenText="''"
             noOptionsText="没有数据"
             noResultsText="没有搜索结果"
-            @select="onOrgSelectChange"
           />
         </el-form-item>
 
         <el-form-item label="通知人员">
           <div>
             <el-button style="margin-right: 5px" type="primary" @click="showAddPeople">添加人员</el-button>
-            <el-button type="danger" @click="removeSelections">删除人员</el-button>
+<!--            <el-button type="danger" @click="removeSelections">删除人员</el-button>-->
           </div>
           <div style="margin-top: 5px">
-            <el-table :data="form.people" border style="width: 100%" class="dialogTable" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" style="width: 5%">
-              </el-table-column>
-              <el-table-column align="center" label="组织机构id" prop="orgId">
-              </el-table-column>
-<!--              <el-table-column align="center" label="组织机构" prop="orgName">-->
+<!--            <el-table :data="form.items" border style="width: 100%" class="dialogTable" @selection-change="handleSelectionChange">-->
+            <el-table :data="form.items" border style="width: 100%" class="dialogTable">
+<!--              <el-table-column type="selection" style="width: 5%">-->
 <!--              </el-table-column>-->
+              <el-table-column align="center" label="组织机构" prop="orgName">
+              </el-table-column>
               <el-table-column align="center" label="角色" prop="roleName">
               </el-table-column>
               <el-table-column align="center" label="用户" prop="userNames">
@@ -138,6 +142,14 @@
                   <span>{{ scope.row.sendSms === 1 ? '是' : '否' }}</span>
                 </template>
               </el-table-column>
+              <el-table-column align="center" label="操作">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="editPeopleItem(scope)"
+                  >编辑</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="removePeople(scope.$index)"
+                  >删除</el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </div>
         </el-form-item>
@@ -160,7 +172,7 @@
       </div>
 
       <DialogCom :title="peopleTitle" :visible.sync="peopleOpen" append-to-body width="700px">
-        <el-form ref="peopleForm" :model="peopleForm" :rules="peopleRules" label-width="100px" :style="{height:'500px',margin:'35px'}">
+        <el-form ref="peopleForm" :model="this.peopleForm" :rules="peopleRules" label-width="100px" :style="{height:'500px',margin:'35px'}">
 
           <el-form-item label="组织机构" prop="orgId">
             <tree-select
@@ -174,16 +186,34 @@
               :noChildrenText="''"
               noOptionsText="没有数据"
               noResultsText="没有搜索结果"
+              @select="onOrgSelectChange"
             />
           </el-form-item>
 
-          <el-form-item label="通知角色" prop="roleIds">
+          <el-form-item label="通知角色" prop="roleIds" v-if="this.showMultiple">
             <el-select
               :multiple="true"
               style="width: 100%"
               v-model="peopleForm.roleIds"
               placeholder="请选择通知角色"
               filterable
+              @change="handleRoleChange"
+            >
+              <el-option
+                v-for="item in roleList"
+                :key="item.id"
+                :label="item.roleName"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="通知角色" prop="roleIds" v-else>
+            <el-select
+              style="width: 100%"
+              v-model="peopleForm.roleId"
+              placeholder="请选择通知角色"
+              filterable
+              @change="handleRoleChange"
             >
               <el-option
                 v-for="item in roleList"
@@ -205,7 +235,7 @@
               <el-option
                 v-for="item in userList"
                 :key="item.id"
-                :label="item.name + ' (' + item.roleNames + ')'"
+                :label="dealUserName(item)"
                 :value="item.id"
               ></el-option>
             </el-select>
@@ -248,7 +278,7 @@
 
 <script>
 import {
-  list, selectUserList, selectProductTypeList, saveOrUpdate, deleteNoticeRule, selectUserListByOrgId
+  list, selectProductTypeList, saveOrUpdate, deleteNoticeRule, selectUserListByOrgId, getDetail,getOrgRoles
 } from "@/api/notice/notice";
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import {allRole} from "@/api/system/role";
@@ -328,56 +358,30 @@ export default {
         pageSize: 10,
         name: null,
       },
+      //修改的item的index
+      editItemIndex: null,
+      editItemUniqueId: null,
+      showMultiple: true,
+      editItemRoleIds: [],
     };
   },
-  watch: {
-    'peopleForm.orgId': {
-      handler(newVal) {
-        this.peopleForm.roleIds = [];
-        this.peopleForm.userIds = [];
-        this.userList = [];
-        if (newVal) {
-          this.$refs["peopleForm"].clearValidate('orgId');//清空校验
-          this.selectOpenUser(newVal);
-        }else {
-          this.$refs["peopleForm"].validateField('orgId');//校验
-        }
-      },
-      immediate: true
-    },
-    'peopleForm.roleIds': {
-      handler(newVal) {
-        if (newVal && newVal.length > 0) {
-          //选择人员下拉框改变
-          this.userList = this.initUserList.filter(item => {
-            return item.roleIds.some(roleId => this.peopleForm.roleIds.includes(roleId));
-          });
-          //已选择人员也跟着下拉框的值改变而改变
-          this.peopleForm.userIds = this.peopleForm.userIds.filter(userId => {
-            return this.userList.some(item => item.id === userId);
-          });
-        }else {
-          this.peopleForm.userIds = [];
-          this.userList = this.initUserList;
-        }
-      },
-      immediate: true
-    },
-  },
   created() {
     this.getList();
     this.initProductTypeList();
-    this.initRoleList();
+    //this.initRoleList();
+    this.getDeptTree();
   },
   methods: {
-    removePeople(index){
-      this.form.people.splice(index,1);
-    },
     initRoleList() {
       allRole().then((response) => {
         this.roleList = response.data;
       });
     },
+    getRoleList(orgId){
+      getOrgRoles(orgId).then((response) => {
+        this.roleList = response.data;
+      });
+    },
     getDefaultOrg(node) {
       this.queryParams.orgId = node.id;
       this.getList();
@@ -402,7 +406,6 @@ export default {
     /** 查询升级包列表 */
     getList() {
       this.loading = true;
-      console.log("123456")
       list(this.queryParams).then(response => {
           this.logInfoList = response.rows;
           this.total = response.total;
@@ -429,27 +432,15 @@ export default {
         children: node.children,
       };
     },
-    editHandler(obj){
-      this.getDeptTree();
-      this.form = {
-        id:obj.id,
-        name: obj.name,
-        remark: obj.remark,
-        people: [],
-        enable: obj.enable === 1,
-      };
-      this.selectOpenUser();
+    editHandler(row){
       this.open = true;
       this.title = "修改通知规则";
-      // selectUserList({orgIds:this.form.orgIds}).then(response => {
-      //     this.userList = response.data;
-      //     let resIds = this.userList ? this.userList.map(item => item.id) : [];
-      //     if (this.form.userIds && this.form.userIds.length > 0){
-      //       this.form.userIds = this.form.userIds.filter(item => resIds.includes(item));
-      //     }
-      //   }
-      // ).catch((err) => {
-      // });
+
+      getDetail(row.id).then(response => {
+          this.form = response.data;
+        }
+      ).catch((err) => {
+      });
     },
     deleteHandler(obj){
       this.$modal
@@ -463,20 +454,10 @@ export default {
         })
         .catch(() => {});
     },
-    handleOrgNameShow(row){
+    handleNameShow(value){
       let text = "";
-      if (row.orgNames){
-        let res = row.orgNames.split(",");
-        res.forEach((item, index) => {
-          text += item + "\n";
-        });
-      }
-      return text;
-    },
-    handleProductTypeShow(row){
-      let text = "";
-      if (row.productTypeNames){
-        let res = row.productTypeNames.split(",");
+      if (value){
+        let res = value.split(",");
         res.forEach((item, index) => {
           text += item + "\n";
         });
@@ -494,7 +475,6 @@ export default {
       this.handleQuery();
     },
     showAddModel() {
-      this.getDeptTree();
       this.reset();
       this.open = true;
       this.title = "新增通知规则";
@@ -514,12 +494,10 @@ export default {
             this.$modal.msgWarning("请选择适用机构");
             return;
           }
-          if (!(this.form.people && this.form.people.length > 0)){
+          if (!(this.form.items && this.form.items.length > 0)){
             this.$modal.msgWarning("请添加通知人员");
             return;
           }
-          console.log("form:"+JSON.stringify(this.form));
-          return;
           saveOrUpdate(this.form).then(response => {
             this.getList();
             this.open = false;
@@ -542,13 +520,12 @@ export default {
         id:null,
         name: null,
         remark: null,
-        people: [],
+        items: [],
         enable: true,
       };
       this.resetForm("form");
     },
     selectOpenUser(orgId){
-      console.log("12345")
       selectUserListByOrgId(orgId).then(response => {
           this.userList = response.data;
           if (this.userList && this.userList.length >0){
@@ -557,11 +534,9 @@ export default {
             });
           }
           this.initUserList = this.userList;
-          // if (this.peopleForm.roleIds && this.peopleForm.roleIds.length > 0){
-          //   this.userList = this.userList.filter(item => {
-          //     return item.roleIds.some(roleId => this.peopleForm.roleIds.includes(roleId));
-          //   });
-          // }
+          if (this.editItemRoleIds && this.editItemRoleIds.length > 0){
+            this.handleRoleChange(this.editItemRoleIds);
+          }
         }
       ).catch((err) => {
       });
@@ -574,22 +549,29 @@ export default {
       this.resetPeople();
     },
     submitPeopleForm(){
-      console.log("peopleForm:"+JSON.stringify(this.peopleForm));
       this.$refs["peopleForm"].validate((valid) => {
         if (valid){
-          if (!((this.peopleForm.roleIds && this.peopleForm.roleIds.length > 0) || (this.peopleForm.userIds && this.peopleForm.userIds.length > 0))){
-            this.$modal.msgWarning("通知角色和通知人员至少选择一项");
-            return;
+          if (!this.showMultiple){
+            if (!(this.peopleForm.roleId || (this.peopleForm.userIds && this.peopleForm.userIds.length > 0))){
+              this.$modal.msgWarning("通知角色和通知人员至少选择一项");
+              return;
+            }
+          }else {
+            if (!((this.peopleForm.roleIds && this.peopleForm.roleIds.length > 0) || (this.peopleForm.userIds && this.peopleForm.userIds.length > 0))){
+              this.$modal.msgWarning("通知角色和通知人员至少选择一项");
+              return;
+            }
           }
+
           //组装table数组
           //选择人员后，角色就不生效
           if (this.peopleForm.userIds && this.peopleForm.userIds.length > 0) {
-            let userNameList = this.initUserList.filter(item => this.peopleForm.userIds.includes(item.id)).map(item => item.username);
+            let userNameList = this.initUserList.filter(item => this.peopleForm.userIds.includes(item.id)).map(item => item.name);
             let userNames = userNameList.join(",");
             let productTypeNameList = this.productTypeList.filter(item => this.peopleForm.productTypes.includes(item.productType)).map(item => item.productName);
             let productTypeNames = productTypeNameList.join(",");
             let uniqueId = this.generateGuid();
-            let people = {
+            let pushItem = {
               orgId: this.peopleForm.orgId,
               orgName: this.peopleOrgName,
               roleId: null,
@@ -601,19 +583,48 @@ export default {
               userNames: userNames,
               uniqueId:uniqueId
             };
-            this.form.people.push(people);
+            let pushFlag = true;
+            this.form.items.forEach((item) => {
+              //判断 机构、人员、产品类型是否一致，如果一致，则覆盖是否发送短信
+              if (item.userIds && item.userIds.length > 0){
+                let sameProductTypes = this.arraysIsEqual(item.productTypes, pushItem.productTypes); //产品类型是否一致
+                let sameUserIds = this.arraysIsEqual(item.userIds, pushItem.userIds); //人员是否一致
+                if (item.orgId === pushItem.orgId && sameUserIds && sameProductTypes && item.uniqueId !== this.editItemUniqueId){
+                  pushFlag = false;
+                  //item.sendSms = pushItem.sendSms;
+                }
+              }
+            });
+            if (pushFlag){
+              if (!(this.editItemIndex === null || this.editItemIndex === undefined)){
+                this.form.items.splice(this.editItemIndex, 1, pushItem);
+                this.editItemIndex = undefined;
+              }else {
+                this.form.items.push(pushItem);
+              }
+            }else {
+              this.$modal.msgWarning("已存在相同通知机构、通知人员、报警类型的数据，请重新选择！");
+              return;
+            }
           }else {
+            if (!this.showMultiple){
+              //单选是重新组装数据
+              let arr = [];
+              arr.push(this.peopleForm.roleId);
+              this.peopleForm.roleIds = arr;
+            }
+            let pushItemList = [];
             //根据所选角色创建多条数据
             this.peopleForm.roleIds.forEach(roleId => {
-              let roleName = this.roleList.filter(item => item.id === roleId).map(item => item.roleName);
+              let roleItem = this.roleList.find(item => item.id === roleId);
               let productTypeNameList = this.productTypeList.filter(item => this.peopleForm.productTypes.includes(item.productType)).map(item => item.productName);
               let productTypeNames = productTypeNameList.join(",");
               let uniqueId = this.generateGuid();
-              let people = {
+              let pushItem = {
                 orgId: this.peopleForm.orgId,
                 orgName: this.peopleOrgName,
                 roleId: roleId,
-                roleName: roleName,
+                roleName: roleItem.roleName,
                 userIds: [],
                 productTypes: this.peopleForm.productTypes,
                 productTypeNames: productTypeNames,
@@ -621,8 +632,33 @@ export default {
                 userNames: null,
                 uniqueId:uniqueId
               };
-              this.form.people.push(people);
+              let pushFlag = true;
+              this.form.items.forEach((item) => {
+                if (item.roleId){
+                  //判断 机构、角色、产品类型是否一致，如果一致，则覆盖是否发送短信
+                  let sameProductTypes = this.arraysIsEqual(item.productTypes, pushItem.productTypes);//产品类型是否一致
+                  if (item.orgId === pushItem.orgId && item.roleId === pushItem.roleId && sameProductTypes && item.uniqueId !== this.editItemUniqueId){
+                    pushFlag = false;
+                    //item.sendSms = pushItem.sendSms;
+                  }
+                }
+              });
+              if (pushFlag){
+                pushItemList.push(pushItem);
+              }
             });
+            if (pushItemList.length !== this.peopleForm.roleIds.length){
+              this.$modal.msgWarning("已存在相同通知机构、通知角色、报警类型的数据，请重新选择！");
+              return;
+            }else {
+              if (!(this.editItemIndex === null || this.editItemIndex === undefined)){
+                this.form.items.splice(this.editItemIndex, 1, pushItemList[0]);
+                this.editItemIndex = undefined;
+              }else {
+
+                this.form.items.push(...pushItemList);
+              }
+            }
           }
           this.cancelPeople();
         }
@@ -631,6 +667,10 @@ export default {
     cancelPeople(){
       this.peopleOpen = false;
       this.resetPeople();
+      this.editItemIndex = undefined;
+      this.editItemUniqueId = null;
+      this.editItemRoleIds = [];
+      this.$refs["peopleForm"].resetFields();
     },
     // 表单重置
     resetPeople() {
@@ -641,25 +681,33 @@ export default {
         productTypes: [],
         sendSms: false
       };
-      this.resetForm("peopleForm");
+      //this.resetForm("peopleForm");
     },
     onOrgSelectChange(value){
-      if(value){
-        this.peopleOrgName = value.label;
+      this.peopleForm.roleIds = [];
+      this.peopleForm.userIds = [];
+      this.userList = [];
+      if(!(value === null || value === undefined)){
+        this.peopleOrgName = value.shortName;
+        this.getRoleList(value.id)
+        this.$refs["peopleForm"].clearValidate('orgId');//清空校验
+        this.selectOpenUser(value.id);
       }else {
         this.peopleOrgName = "";
+        this.roleList = [];
+        //this.$refs["peopleForm"].validateField('orgId');//校验
       }
     },
     handleSelectionChange(selection){
-      console.log("selection:"+selection);
       this.tableSelections = selection;
     },
     removeSelections(){
       if (this.tableSelections && this.tableSelections.length > 0) {
         let selectionIds = this.tableSelections.map(item => item.uniqueId);
-        this.form.people = this.form.people.filter(item => !selectionIds.includes(item.uniqueId));
+        this.form.items = this.form.items.filter(item => !selectionIds.includes(item.uniqueId));
       }
       this.tableSelections = []; //清空选择
+      this.editItemIndex = undefined; //清空编辑的 index
     },
     generateGuid() {
       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -668,6 +716,70 @@ export default {
         return v.toString(16);
       });
     },
+    arraysIsEqual(array1,array2){
+      if (array1.length !== array2.length){
+        return false;
+      }
+      return array1.sort().every((item,index) => item === array2.sort()[index]);
+    },
+    dealUserName(item){
+      if (item.roleNames){
+        return item.name + " (" + item.roleNames + ")";
+      }else {
+        return item.name;
+      }
+    },
+    removePeople(index){
+      this.form.items.splice(index,1);
+    },
+    async editPeopleItem(scope) {
+
+      //获取角色和机构下拉框
+      await this.getRoleList(scope.row.orgId);
+      await this.selectOpenUser(scope.row.orgId);
+
+      let row = scope.row;
+      let roleIds = [];
+      if (row.roleId !== null) {
+        this.showMultiple = false;
+        roleIds.push(row.roleId);
+        this.editItemRoleIds = roleIds;
+      } else {
+        this.showMultiple = true;
+      }
+      this.editItemIndex = scope.$index;
+      this.editItemUniqueId = row.uniqueId;
+
+      this.peopleForm = {
+        orgId: row.orgId,
+        roleId: row.roleId,
+        roleIds: roleIds,
+        userIds: row.userIds,
+        productTypes: row.productTypes,
+        sendSms: row.sendSms,
+        uniqueId: row.uniqueId
+      };
+
+      this.peopleOrgName = row.orgName;
+      this.peopleOpen = true;
+    },
+    handleRoleChange(newVal){
+      if (newVal && newVal.length > 0) {
+        //选择人员下拉框改变
+        this.userList = this.initUserList.filter(item => {
+          return item.roleIds.some(roleId => this.peopleForm.roleIds.includes(roleId));
+        });
+        if (this.peopleForm.userIds && this.peopleForm.userIds.length > 0){
+          //已选择人员也跟着下拉框的值改变而改变
+          this.peopleForm.userIds = this.peopleForm.userIds.filter(userId => {
+            return this.userList.some(item => item.id === userId);
+          });
+        }
+      }else {
+        this.peopleForm.userIds = [];
+        this.userList = this.initUserList;
+      }
+    }
   }
 };
 </script>