通知规则页面修改

src/api/notice/notice.js

@@ -17,6 +17,13 @@ export function selectUserList(query) {
   })
 }
 
+export function selectUserListByOrgId(orgId) {
+  return request({
+    url: '/core/noticeRule/getSelectUser/'+orgId,
+    method: 'get',
+  })
+}
+
 export function selectProductTypeList() {
   return request({
     url: '/core/noticeRule/getSelectProductType',

src/views/notice/index.vue

@@ -90,74 +90,56 @@
                   @pagination="getList"/>
     </div>
 
-    <DialogCom :title="title" :visible.sync="open" append-to-body width="780px">
+    <DialogCom :title="title" :visible.sync="open" append-to-body width="1200px">
 
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :style="{height:'500px',margin:'35px'}">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :style="{height:'650px',margin:'35px'}">
 
         <el-form-item label="规则名称" prop="name">
           <el-input type="text" v-model="form.name" placeholder="请输入名称" maxlength="50" show-word-limit/>
         </el-form-item>
 
-        <el-form-item label="通知机构" prop="orgIds" class="is-required">
-          <org-tree-select
-            v-model="form.orgIds"
-            :queryData="4"
-            ref="orgTreeSelect"
-            :checkShow="true"
-            @handBeforeHide="selectOpenUser"
-          >
-          </org-tree-select>
+        <el-form-item label="适用机构" prop="orgId">
+          <tree-select
+            v-model="form.orgId"
+            :options="deptOptions"
+            :show-count="true"
+            :normalizer="tenantIdnormalizer"
+            :props="{ checkStrictly: true, label: 'name' }"
+            placeholder="请选择适用机构"
+            clearValueText="清除"
+            :noChildrenText="''"
+            noOptionsText="没有数据"
+            noResultsText="没有搜索结果"
+            @select="onOrgSelectChange"
+          />
         </el-form-item>
 
-        <el-form-item label="通知角色" prop="roleIds">
-          <el-select
-            :multiple="true"
-            style="width: 100%"
-            v-model="form.roleIds"
-            placeholder="请选择通知角色"
-            filterable
-          >
-            <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="userIds">
-          <el-select
-            :multiple="true"
-            style="width: 100%"
-            v-model="form.userIds"
-            placeholder="请选择通知人员"
-            filterable
-          >
-            <el-option
-              v-for="item in userList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="设备类型" prop="productTypes" class="is-required">
-          <el-select
-            :multiple="true"
-            style="width: 100%"
-            v-model="form.productTypes"
-            placeholder="请选择设备类型"
-            filterable
-          >
-            <el-option
-              v-for="item in productTypeList"
-              :key="item.productType"
-              :label="item.productName"
-              :value="item.productType"
-            ></el-option>
-          </el-select>
+        <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>
+          </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-column>-->
+              <el-table-column align="center" label="角色" prop="roleName">
+              </el-table-column>
+              <el-table-column align="center" label="用户" prop="userNames">
+              </el-table-column>
+              <el-table-column align="center" label="报警类型" prop="productTypeNames">
+              </el-table-column>
+              <el-table-column align="center" label="发送短信" prop="sendSms">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.sendSms === 1 ? '是' : '否' }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </el-form-item>
 
         <el-form-item label="规则描述" prop="remark">
@@ -171,30 +153,108 @@
             inactive-color="#ff4949">
           </el-switch>
         </el-form-item>
-        <el-form-item label="发送短信" prop="sendSms">
-          <el-switch
-            v-model="form.sendSms"
-            active-color="#13ce66"
-            inactive-color="#ff4949">
-          </el-switch>
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </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-item label="组织机构" prop="orgId">
+            <tree-select
+              v-model="peopleForm.orgId"
+              :options="deptOptions"
+              :show-count="true"
+              :normalizer="tenantIdnormalizer"
+              :props="{ checkStrictly: true, label: 'name' }"
+              placeholder="请选择组织机构"
+              clearValueText="清除"
+              :noChildrenText="''"
+              noOptionsText="没有数据"
+              noResultsText="没有搜索结果"
+            />
+          </el-form-item>
+
+          <el-form-item label="通知角色" prop="roleIds">
+            <el-select
+              :multiple="true"
+              style="width: 100%"
+              v-model="peopleForm.roleIds"
+              placeholder="请选择通知角色"
+              filterable
+            >
+              <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="userIds">
+            <el-select
+              :multiple="true"
+              style="width: 100%"
+              v-model="peopleForm.userIds"
+              placeholder="请选择通知人员"
+              filterable
+            >
+              <el-option
+                v-for="item in userList"
+                :key="item.id"
+                :label="item.name + ' (' + item.roleNames + ')'"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="设备类型" prop="productTypes">
+            <el-select
+              :multiple="true"
+              style="width: 100%"
+              v-model="peopleForm.productTypes"
+              placeholder="请选择设备类型"
+              filterable
+            >
+              <el-option
+                v-for="item in productTypeList"
+                :key="item.productType"
+                :label="item.productName"
+                :value="item.productType"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="发送短信" prop="sendSms">
+            <el-switch
+              v-model="peopleForm.sendSms"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+            </el-switch>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitPeopleForm">确 定</el-button>
+          <el-button @click="cancelPeople">取 消</el-button>
+        </div>
+      </DialogCom>
+
     </DialogCom>
   </div>
 </template>
 
 <script>
 import {
-  list,selectUserList,selectProductTypeList,saveOrUpdate,deleteNoticeRule
+  list, selectUserList, selectProductTypeList, saveOrUpdate, deleteNoticeRule, selectUserListByOrgId
 } from "@/api/notice/notice";
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import {allRole} from "@/api/system/role";
 import OrgTreeSelect from "@/components/orgTreeSelect/index.vue";
 import {delDrillDictionary} from "@/api/core/drill/drillDictionary";
+import {deptTreeSelect} from "@/api/system/public";
 
 export default {
   name: "noticeRule",
@@ -222,20 +282,46 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+
+      // 人员选择title
+      peopleTitle: "新增通知人员",
+      peopleOpen: false,
+
       // 表单参数
-      form: {},
+      form: {
+
+      },
+      // 人员表单参数
+      peopleForm: {
+        orgId:null,
+      },
+      //机构树
+      deptOptions: [],
       // 表单校验
       rules: {
         name: [
           {required: true, message: "请输入规则名称", trigger: "blur"}
         ],
       },
+      // 表单校验
+      peopleRules: {
+        orgId: [
+          {required: true, message: "请选择组织机构", trigger: "change"}
+        ],
+        productTypes: [
+          {required: true,type:'array', message: "请选择设备类型", trigger: "change"}
+        ],
+      },
       //角色列表
       roleList: [],
+      //机构查询返回未处理过的userList,选择角色会处理userList,所以创建一个原始数据
+      initUserList: [],
       //人员列表
       userList: [],
       //产品类型列表
       productTypeList: [],
+      peopleOrgName:"",
+      tableSelections:[],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -245,7 +331,38 @@ export default {
     };
   },
   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();
@@ -253,6 +370,9 @@ export default {
     this.initRoleList();
   },
   methods: {
+    removePeople(index){
+      this.form.people.splice(index,1);
+    },
     initRoleList() {
       allRole().then((response) => {
         this.roleList = response.data;
@@ -292,18 +412,31 @@ export default {
         this.loading = false;
       });
     },
-
+    /** 查询机构树数据 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    /** treeSelect组件自定义数据*/
+    tenantIdnormalizer(node, instanceId) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.shortName,
+        children: node.children,
+      };
+    },
     editHandler(obj){
+      this.getDeptTree();
       this.form = {
         id:obj.id,
         name: obj.name,
         remark: obj.remark,
-        roleIds: obj.roleIds ? obj.roleIds.split(",") : [],
-        orgIds: obj.orgIds ? obj.orgIds.split(",") : [],
-        userIds: obj.userIds ? obj.userIds.split(",") : [],
-        productTypes: obj.productTypes ? obj.productTypes.split(",") : [],
+        people: [],
         enable: obj.enable === 1,
-        sendSms: obj.sendSms === 1,
       };
       this.selectOpenUser();
       this.open = true;
@@ -361,6 +494,7 @@ export default {
       this.handleQuery();
     },
     showAddModel() {
+      this.getDeptTree();
       this.reset();
       this.open = true;
       this.title = "新增通知规则";
@@ -376,18 +510,16 @@ export default {
     submitForm(){
       this.$refs["form"].validate((valid) => {
         if (valid) {
-          if (!(this.form.orgIds && this.form.orgIds.length > 0)){
-            this.$modal.msgWarning("请选择通知机构");
+          if (!(this.form.orgId && this.form.orgId.length > 0)){
+            this.$modal.msgWarning("请选择适用机构");
             return;
           }
-          if (!((this.form.roleIds && this.form.roleIds.length > 0) || (this.form.userIds && this.form.userIds.length > 0))){
-            this.$modal.msgWarning("通知角色和通知人员至少选择一项");
-            return;
-          }
-          if (!(this.form.productTypes && this.form.productTypes.length > 0)){
-            this.$modal.msgWarning("请选择设备类型");
+          if (!(this.form.people && this.form.people.length > 0)){
+            this.$modal.msgWarning("请添加通知人员");
             return;
           }
+          console.log("form:"+JSON.stringify(this.form));
+          return;
           saveOrUpdate(this.form).then(response => {
             this.getList();
             this.open = false;
@@ -410,29 +542,144 @@ export default {
         id:null,
         name: null,
         remark: null,
-        roleIds: [],
-        orgIds: [],
-        userIds: [],
-        productTypes: [],
+        people: [],
         enable: true,
-        sendSms: false,
       };
       this.resetForm("form");
     },
-    selectOpenUser(){
-      selectUserList({orgIds:this.form.orgIds}).then(response => {
+    selectOpenUser(orgId){
+      console.log("12345")
+      selectUserListByOrgId(orgId).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));
+          if (this.userList && this.userList.length >0){
+            this.userList.forEach(item => {
+              item.roleIds = item.roleIds ? item.roleIds.split(",") : [];
+            });
           }
+          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));
+          //   });
+          // }
         }
       ).catch((err) => {
       });
     },
+
+
+    //内层弹窗方法
+    showAddPeople(){
+      this.peopleOpen = true;
+      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;
+          }
+          //组装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 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 = {
+              orgId: this.peopleForm.orgId,
+              orgName: this.peopleOrgName,
+              roleId: null,
+              roleName: null,
+              userIds: this.peopleForm.userIds,
+              productTypes: this.peopleForm.productTypes,
+              productTypeNames: productTypeNames,
+              sendSms: this.peopleForm.sendSms ? 1 : 0,
+              userNames: userNames,
+              uniqueId:uniqueId
+            };
+            this.form.people.push(people);
+          }else {
+            //根据所选角色创建多条数据
+            this.peopleForm.roleIds.forEach(roleId => {
+              let roleName = this.roleList.filter(item => item.id === roleId).map(item => item.roleName);
+              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 = {
+                orgId: this.peopleForm.orgId,
+                orgName: this.peopleOrgName,
+                roleId: roleId,
+                roleName: roleName,
+                userIds: [],
+                productTypes: this.peopleForm.productTypes,
+                productTypeNames: productTypeNames,
+                sendSms: this.peopleForm.sendSms ? 1 : 0,
+                userNames: null,
+                uniqueId:uniqueId
+              };
+              this.form.people.push(people);
+            });
+          }
+          this.cancelPeople();
+        }
+      });
+    },
+    cancelPeople(){
+      this.peopleOpen = false;
+      this.resetPeople();
+    },
+    // 表单重置
+    resetPeople() {
+      this.peopleForm = {
+        orgId:null,
+        roleIds: null,
+        userIds: [],
+        productTypes: [],
+        sendSms: false
+      };
+      this.resetForm("peopleForm");
+    },
+    onOrgSelectChange(value){
+      if(value){
+        this.peopleOrgName = value.label;
+      }else {
+        this.peopleOrgName = "";
+      }
+    },
+    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.tableSelections = []; //清空选择
+    },
+    generateGuid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0,
+          v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+    },
   }
 };
 </script>
 <style lang="scss" scoped>
+.dialogTable {
+  max-height: 350px;
+  overflow-y: auto;
+}
+.dialogTable .el-table__body-wrapper tbody tr,
+.dialogTable .el-table__body-wrapper tbody td {
+  height: 40px;
+  font-size: 14px;
+}
 </style>