权限控制

src/App.vue

@@ -100,4 +100,13 @@ body {
   background-color: #f0f0f0;
   border-radius: 32px;
 }
+.el-dialog__headerbtn {
+  top: 18px;
+  .el-dialog__close {
+    font-size: 26px;
+    &:hover {
+      background: #e2e2e2;
+    }
+  }
+}
 </style>

src/views/userList/components/setPermission.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-dialog
+    class="setPermissionDialog"
+    title="权限管理"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleclose"
+  >
+    <div class="setContain">
+      <p class="labeltitle">用户名：{{ userinfo.name }}</p>
+      <el-checkbox v-model="ywchecked"
+        >是否可进行运维操作(<span v-if="ywchecked">是</span
+        ><span v-else>否</span>)</el-checkbox
+      >
+      <el-divider></el-divider>
+      <p class="labeltitle">活动列表权限分配</p>
+      <div class="activityBox">
+        <el-checkbox
+          :indeterminate="isIndeterminate"
+          v-model="checkAll"
+          @change="handleCheckAllChange"
+          >全选</el-checkbox
+        >
+        <el-checkbox-group
+          v-model="checkedCities"
+          @change="handleCheckedCitiesChange"
+        >
+          <el-checkbox
+            v-for="(item, index) in activityData"
+            :label="item.title"
+            :key="item.id"
+            >{{ item.title }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+// import { addUserApi, updateUserApi } from "@/utils/api/index";
+import { getqueryActivityApi } from "@/utils/api/index";
+
+export default {
+  props: {},
+  data() {
+    return {
+      roleUser: "",
+      userinfo: "",
+      ywchecked: true,
+      isShow: false,
+      checkAll: false,
+      checkedCities: [],
+      isIndeterminate: false,
+      activityData: [],
+    };
+  },
+  methods: {
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? activityData : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.activityData.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.activityData.length;
+    },
+    //获取活动列表
+    getactivityList() {
+      getqueryActivityApi({
+        act: "list",
+      })
+        .then((res) => {
+          console.log(res);
+          this.activityData = res.data;
+        })
+        .catch((err) => {});
+    },
+    // 保存确定操作
+    submitForm() {
+      this.isShow = false;
+    },
+    display(val) {
+      this.isShow = true;
+      this.userinfo = val;
+      console.log(val);
+      this.getactivityList();
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {},
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.setPermissionDialog {
+  .el-dialog__body {
+    padding: 12px 20px;
+  }
+  .setContain {
+    .el-checkbox {
+      line-height: 32px;
+    }
+    .labeltitle {
+      line-height: 32px;
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+    .el-divider--horizontal {
+      margin: 12px 0px;
+    }
+
+    .activityBox {
+      max-height: 200px;
+      overflow: auto;
+
+      .el-checkbox-group {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

src/views/userList/index.vue

@@ -25,6 +25,13 @@
 
         <el-table-column label="操作" class-name="editClass">
           <template slot-scope="scope">
+            <el-link
+              type="primary"
+              @click="handleSetClick(scope.row)"
+              size="small"
+              icon="el-icon-setting"
+              >设置权限</el-link
+            >
             <el-link
               type="primary"
               @click="handleEditClick(scope.row)"
@@ -44,15 +51,18 @@
       </el-table>
     </div>
     <addEditDialog :title="title" ref="adduserref"></addEditDialog>
+    <setPermission ref="setpermissionRef"></setPermission>
   </div>
 </template>
 <script>
 // import { getqueryUploadsApi } from "@/utils/api/index";
 import addEditDialog from "./components/addEditDialog.vue";
+import setPermission from "./components/setPermission.vue";
 export default {
   name: "userlist",
   components: {
     addEditDialog,
+    setPermission,
   },
   data() {
     return {
@@ -79,6 +89,10 @@ export default {
       this.$refs.adduserref.display();
       this.$refs.adduserref.getdataform(data);
     },
+    //设置权限
+    handleSetClick(data) {
+      this.$refs.setpermissionRef.display(data);
+    },
     //修改用户
     handleEditClick() {
       this.title = "修改";