用户管理-添加修改编辑权限问题修改

src/components/permissions/user/index.vue

@@ -119,16 +119,38 @@
     >
       <el-table-column type="selection" width="55" />
       <el-table-column type="index" width="50" label="序号" />
-      <el-table-column label="用户名" align="center" prop="userName" width="150"/>
-      <el-table-column label="账号" align="center" prop="loginName" width="150"/>
+      <el-table-column
+        label="用户名"
+        align="center"
+        prop="userName"
+        width="150"
+      />
+      <el-table-column
+        label="账号"
+        align="center"
+        prop="loginName"
+        width="150"
+      />
       <el-table-column label="手机号" align="center" prop="phone" />
-      <el-table-column label="邮箱" align="center" prop="email" :show-overflow-tooltip="true"/>
-      <el-table-column label="省份" align="center" prop="provinceName" width="80"/>
+      <el-table-column
+        label="邮箱"
+        align="center"
+        prop="email"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="省份"
+        align="center"
+        prop="provinceName"
+        width="80"
+      />
       <el-table-column label="地市" align="center" prop="cityName" />
-      <el-table-column label="区县" align="center" prop="areaName" >
+      <el-table-column label="区县" align="center" prop="areaName">
         <template slot-scope="scope">
-          <span v-if="scope.row.cityName=='河北省'">省公司</span>
-          <span v-if="(scope.row.cityName !='河北省')&& (!scope.row.areaName)">市公司</span>
+          <span v-if="scope.row.cityName == '河北省'">省公司</span>
+          <span v-if="scope.row.cityName != '河北省' && !scope.row.areaName"
+            >市公司</span
+          >
           <span v-else>{{ scope.row.areaName }}</span>
         </template>
       </el-table-column>
@@ -226,7 +248,19 @@
             <span>{{ form.cityName }}</span>
           </el-form-item>
           <el-form-item label="区县" prop="areaName">
-            <span>{{ form.areaName }}</span>
+            <!-- <span>{{ form.areaName }}</span> -->
+            <el-select
+              v-model="form.areaName"
+              placeholder="请选择区县"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="dict in form.areas"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
           </el-form-item>
           <el-form-item label="组织" prop="orgName">
             <span>{{ form.orgName }}</span>
@@ -246,22 +280,27 @@
             >
           </el-form-item>
         </div>
-
-        <!-- <div class="formTitle">流程与黑点库</div> -->
-        <el-form-item label="需配置的权限模块" prop="modelList">
-          <el-checkbox-group
-            v-model="modelList"
-            @change="handleCheckedCitiesChange"
-          >
-            <el-checkbox
-              v-for="(item, index) in checkBoxList"
-              :label="item.roleName"
-              :key="index"
-              :disabled="isDisabled2"
-              >{{ item.roleName }}</el-checkbox
-            >
-          </el-checkbox-group>
-        </el-form-item>
+        <div v-for="(item, index) in checkBoxList" :key="index">
+          <div class="formTitle marginTop-20">{{ item.systemName }}</div>
+          <div v-for="(it, ind) in item.list" :key="ind">
+            <div class="formTitleSecond fontBlur">{{ it.functionName }}</div>
+            <el-form-item label="" prop="modelList" label-width="50px">
+              <el-checkbox-group
+                v-model="modelList"
+                @change="handleCheckedCitiesChange"
+              >
+                <el-checkbox
+                  v-for="(it2, ind2) in it.list"
+                  :key="ind2"
+                  :label="it2.roleName"
+                  :disabled="isDisabled2"
+                  @change="aa(it2)"
+                  >{{ it2.roleName }}</el-checkbox
+                >
+              </el-checkbox-group>
+            </el-form-item>
+          </div>
+        </div>
         <el-form-item
           v-for="(item, index) in form.roles"
           :label="item.roleName"
@@ -280,7 +319,7 @@
             :options="formCityList"
             @change="formareaIdChange(item.cityId, index)"
             clearable
-            :disabled="isDisabled2"
+            :disabled="(dialogTitle != '用户详情'&& item.roleName=='工单查询')?false:true"
             :props="{ checkStrictly: true }"
             style="width: 100%"
           >
@@ -289,7 +328,12 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitForm" v-if="this.dialogTitle != '用户详情'">确 定</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm"
+          v-if="this.dialogTitle != '用户详情'"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -389,13 +433,13 @@ export default {
     },
     // 查询条件地区选择
     areaIdChange(val) {
-      console.log('val: ', val);
+      console.log("val: ", val);
       this.queryParams.areaId = val[val.length - 1];
     },
     // 重置
     resetQuery() {
       this.resetForm("queryForm");
-      this.queryParams.areaId = '';
+      this.queryParams.areaId = "";
       this.queryParams.current = 1;
       this.getList();
     },
@@ -520,7 +564,7 @@ export default {
     formareaIdChange(val, index) {
       // console.log("index111: ", index);
       // console.log("val111: ", val);
-      if(val){
+      if (val) {
         this.form.roles[index].cityId = val[val.length - 1];
         this.form.roles[index].cityName =
           this.$refs["refCity"][index].getCheckedNodes()[0].label;
@@ -530,31 +574,59 @@ export default {
     },
     // 选择需配置的权限
     handleCheckedCitiesChange(val) {
-      // console.log("val000: ", val);
+      console.log("val000: ", val);
       // this.form.roles = val;
-      val.map((item) => {
-        this.checkBoxList.map((item2) => {
-          if (item2.roleName == item) {
-            this.form.roles.push(item2);
-            this.form.roles = [...new Set(this.form.roles)];
-            let obj = {};
-            this.form.roles = this.form.roles.reduce((cur, next) => {
-              obj[next.roleName]
-                ? ""
-                : (obj[next.roleName] = true && cur.push(next));
-              return cur;
-            }, []); //设置cur默认类型为数组，并且初始值为空的数组
-            // console.log("this.form.roles: ", this.form.roles);
-          }
-        });
+      // val.map((item) => {
+      //   this.checkBoxList.map((item2) => {
+      //     if (item2.roleName == item) {
+      //       this.form.roles.push(item2);
+      //       this.form.roles = [...new Set(this.form.roles)];
+      //       let obj = {};
+      //       this.form.roles = this.form.roles.reduce((cur, next) => {
+      //         obj[next.roleName]
+      //           ? ""
+      //           : (obj[next.roleName] = true && cur.push(next));
+      //         return cur;
+      //       }, []); //设置cur默认类型为数组，并且初始值为空的数组
+      //       // console.log("this.form.roles: ", this.form.roles);
+      //     }
+      //   });
         this.form.roles.map((item3, index3) => {
-          if (val.indexOf(item3.roleName) < 0) {
-            // console.log("item3: ", item3.roleName);
-            this.form.roles.splice(index3, 1);
-            // console.log("this.form.roles----: ", this.form.roles);
+          if(val.length != 0){
+            if (val.indexOf(item3.roleName) == -1) {
+              // console.log('val.indexOf(item3.roleName): ', val.indexOf(item3.roleName));
+              // console.log('index3: ', index3);
+              // console.log('item3----: ', item3);
+              // console.log("item3: ", item3.roleName);
+              this.form.roles.splice(index3, 1);
+              this.form.roles = [...new Set(this.form.roles)];
+              // console.log('this.form.roles-----: ', this.form.roles);
+            }
+          }else{
+            this.form.roles = []
           }
         });
-      });
+    },
+    aa(val) {
+      console.log("val++++: ", val);
+      // console.log('this.form.cityId: ', this.form.cityId);
+      if(this.form.cityId){
+        if(this.modelList.indexOf(val.roleName) != -1){
+          // console.log('this.modelList.indexOf(val.roleName): ', this.modelList.indexOf(val.roleName));
+          this.form.roles.push({
+            ...val,
+            cityId: this.form.cityId,
+            cityName: this.form.cityName,
+          });
+          this.form.roles = [...new Set(this.form.roles)];
+        }
+      }else{
+        this.modelList=[]
+        this.$message({
+                type: "error",
+                message: "清先输入账号并查询用户信息！",
+              });
+      }
     },
     //删除
     handleDelete(val) {
@@ -642,7 +714,7 @@ export default {
               this.form.userIds.push(item.userId);
             });
             // console.log('this.form: ', this.form);
-            getRoleCopy(this.form).then(response=>{
+            getRoleCopy(this.form).then((response) => {
               if (response.code == "1") {
                 this.$message({
                   type: "success",
@@ -656,7 +728,7 @@ export default {
                   message: res.message,
                 });
               }
-            })
+            });
           }
         }
       });
@@ -670,5 +742,18 @@ export default {
   height: 40px;
   line-height: 40px;
   font-weight: bold;
+  font-size: 16px;
+}
+.formTitleSecond {
+  font-size: 14px;
+  width: 100%;
+  height: 14px;
+  line-height: 14px;
+  padding-left: 10px;
+  border-left: 3px solid #409eff;
+  margin-top: 10px;
+}
+.marginTop-20 {
+  margin-top: -20px;
 }
 </style>