fix bug

src/views/user/manage.vue

@@ -1,66 +1,62 @@
 <template>
   <basic-container class="mt-10">
     <avue-crud
-        :option="option"
-        :data="data"
-        ref="crud"
-        v-model="form"
-        :before-open="beforeOpen"
-        @current-change="currentChange"
-        @size-change="sizeChange"
-        @row-save="rowSave"
-        @row-update="rowUpdate"
-        @on-load="onLoad"
+      :option="option"
+      :data="data"
+      ref="crud"
+      v-model="form"
+      v-model:page="page"
+      :before-open="beforeOpen"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @on-load="onLoad"
     >
       <template #menu="{ row }">
-        <el-button
-            icon="Open"
-            type="primary"
-            text
-            @click="Enable(row)"
-        >
+        <el-button icon="Open" type="primary" text @click="Enable(row)">
           {{ row.clientId.indexOf('project_web') === -1 ? '启用' : '停用' }}
         </el-button>
       </template>
-      <template #status="{row}">
-        <el-tag :type="row.clientId.indexOf('project_web') === -1 ? 'danger':''">
+      <template #status="{ row }">
+        <el-tag
+          :type="row.clientId.indexOf('project_web') === -1 ? 'danger' : ''"
+        >
           {{ row.clientId.indexOf('project_web') === -1 ? '停用' : '启用' }}
         </el-tag>
       </template>
     </avue-crud>
     <el-dialog
-        v-model="showEdit"
-        append-to-body
-        center
-        title="用户信息设置"
-        width="50%"
+      v-model="showEdit"
+      append-to-body
+      center
+      title="用户信息设置"
+      width="50%"
     >
       <div>
         <el-form
-            ref="form"
-            :model="userInfoForm"
-            :rules="rules"
-            class="mt-20"
-            label-width="100px"
+          ref="form"
+          :model="userInfoForm"
+          :rules="rules"
+          class="mt-20"
+          label-width="100px"
         >
           <div class="flex flex-center">
             <el-form-item class="full-width" label="用户名称" prop="name">
               <el-input
-                  v-model="userInfoForm.name"
-                  clearable
-                  placeholder="输入用户名称"
+                v-model="userInfoForm.name"
+                clearable
+                placeholder="输入用户名称"
               />
             </el-form-item>
             <el-form-item
-                class="full-width mr-20"
-                label="真实姓名"
-                :rules="rules"
-                prop="realName"
+              class="full-width mr-20"
+              label="真实姓名"
+              :rules="rules"
+              prop="realName"
             >
               <el-input
-                  v-model="userInfoForm.realName"
-                  clearable
-                  placeholder="输入真实姓名"
+                v-model="userInfoForm.realName"
+                clearable
+                placeholder="输入真实姓名"
               >
               </el-input>
             </el-form-item>
@@ -68,17 +64,21 @@
           <div class="flex flex-center">
             <el-form-item class="full-width" label="手机号码" prop="phone">
               <el-input
-                  v-model="userInfoForm.phone"
-                  clearable
-                  placeholder="输入手机号码"
+                v-model="userInfoForm.phone"
+                clearable
+                placeholder="输入手机号码"
               >
               </el-input>
             </el-form-item>
-            <el-form-item class="full-width mr-20" label="登陆密码" prop="password">
+            <el-form-item
+              class="full-width mr-20"
+              label="登陆密码"
+              prop="password"
+            >
               <el-input
-                  v-model="userInfoForm.password"
-                  clearable
-                  placeholder="输入登陆密码"
+                v-model="userInfoForm.password"
+                clearable
+                placeholder="输入登陆密码"
               >
               </el-input>
             </el-form-item>
@@ -87,16 +87,16 @@
             <span class="ml-20 bold">部门选择</span>
             <el-form-item class="flex">
               <el-select
-                  class="mt-20"
-                  v-model="userInfoForm.deptId"
-                  style="width: 250px;margin-left: -75px"
-                  placeholder="选择用户所属部门"
+                class="mt-20"
+                v-model="userInfoForm.deptId"
+                style="width: 250px; margin-left: -75px"
+                placeholder="选择用户所属部门"
               >
                 <el-option
-                    v-for="item in deptList"
-                    :key="item.id"
-                    :label="item.deptName"
-                    :value="item.id"
+                  v-for="item in deptList"
+                  :key="item.id"
+                  :label="item.deptName"
+                  :value="item.id"
                 />
               </el-select>
             </el-form-item>
@@ -104,12 +104,10 @@
           <div class="flex flex-col mt-10">
             <span class="ml-20 bold">职务选择</span>
             <el-form-item class="flex flex-wrap">
-              <div
-                  class="flex flex-center padding pointer"
-              >
+              <div class="flex flex-center padding pointer">
                 <el-radio-group size="large" v-model="userInfoForm.roleIds">
-                  <el-radio v-for="item in jobs"
-                            :key="item.id" :label="item.id">{{ item.roleName }}
+                  <el-radio v-for="item in jobs" :key="item.id" :label="item.id"
+                    >{{ item.roleName }}
                   </el-radio>
                 </el-radio-group>
               </div>
@@ -118,23 +116,42 @@
           <div class="flex flex-col" style="margin-top: -10px">
             <div class="flex flex-align-center">
               <span class="bold ml-20">权限选择</span>
-              <el-checkbox size="large" style="margin-left: 33px" v-model="checkAll" @change="choseAll">全选
+              <el-checkbox
+                size="large"
+                style="margin-left: 33px"
+                v-model="checkAll"
+                @change="choseAll"
+                >全选
               </el-checkbox>
             </div>
             <el-form-item class="flex flex-wrap">
-              <div
-                  class="flex flex-center padding pointer"
-              >
-                <el-checkbox v-model="item.checked" :label="item.id" size="large" v-for="item in deptList"
-                             :key="item.id" @change="deptChose($event,item)">
+              <div class="flex flex-center padding pointer">
+                <el-checkbox
+                  v-model="item.checked"
+                  :label="item.id"
+                  size="large"
+                  v-for="item in deptList"
+                  :key="item.id"
+                  @change="deptChose($event, item)"
+                >
                   {{ item.deptName }}
                 </el-checkbox>
               </div>
             </el-form-item>
           </div>
           <div class="flex flex-center">
-            <base-button title="取消" type="0" icon="Close" @click="showEdit = false"/>
-            <base-button class="ml-10" title="保存" icon="Check" @click="roleSave"/>
+            <base-button
+              title="取消"
+              type="0"
+              icon="Close"
+              @click="showEdit = false"
+            />
+            <base-button
+              class="ml-10"
+              title="保存"
+              icon="Check"
+              @click="roleSave"
+            />
           </div>
         </el-form>
       </div>
@@ -151,23 +168,28 @@ meta: { keepAlive: true }
 
 <script>
 import BasicContainer from '@/components/basic-container/main.vue'
-import {useStore} from '@/store/user.js'
-import baseButton from "@/components/base-button.vue";
+import { useStore } from '@/store/user.js'
+import baseButton from '@/components/base-button.vue'
 
 export default {
-  name: "manage",
+  name: 'manage',
   components: {
-    BasicContainer, baseButton
+    BasicContainer,
+    baseButton
   },
   setup() {
     const user = useStore()
-    return {user}
+    return { user }
   },
   data() {
     return {
       showAdd: false,
       showEdit: false,
       form: {},
+      page: {
+        curren: 1,
+        size: 10
+      },
       data: [],
       option: {
         align: 'center',
@@ -191,20 +213,20 @@ export default {
           },
           {
             label: '真实姓名',
-            prop: 'realName',
+            prop: 'realName'
           },
           {
             label: '手机号码',
-            prop: 'phone',
+            prop: 'phone'
           },
           {
             label: '职务',
-            prop: 'roleName',
+            prop: 'roleName'
           },
           {
             label: '状态',
-            prop: 'status',
-          },
+            prop: 'status'
+          }
         ]
       },
       jobs: [],
@@ -221,20 +243,32 @@ export default {
       },
       rules: {
         name: {
-          required: true, message: '用户名称不能为空！', trigger: 'blur',
+          required: true,
+          message: '用户名称不能为空！',
+          trigger: 'blur'
         },
         realName: {
-          required: true, message: '真实姓名不能为空！', trigger: 'blur',
-        },
-        phone: [{
-          required: true, message: '手机号码不能为空！', trigger: 'blur',
+          required: true,
+          message: '真实姓名不能为空！',
+          trigger: 'blur'
         },
-          {min: 11, max: 11, message: '请填写正确的手机号码！', trigger: 'blur'},
+        phone: [
+          {
+            required: true,
+            message: '手机号码不能为空！',
+            trigger: 'blur'
+          },
+          {
+            min: 11,
+            max: 11,
+            message: '请填写正确的手机号码！',
+            trigger: 'blur'
+          }
         ],
         password: [
-          {required: true, message: '请输入密码', trigger: 'blur'},
-          {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
-        ],
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
+        ]
       }
     }
   },
@@ -245,38 +279,42 @@ export default {
   methods: {
     onLoad() {
       this.loading = true
-      const id = this.user.info.deptId
-      this.$api.role.roleList({deptId: id}).then(res => {
-        this.loading = false
-        if (res.code === 200) {
-          this.data = res.data.records
-        } else {
-          this.$message.error(msg)
-        }
-      })
-          .finally(() => {
-            this.loading = false
-          })
+      const data = { deptId: this.user.info.deptId }
+      this.$api.role
+        .roleList(Object.assign(this.page, data))
+        .then(res => {
+          this.loading = false
+          if (res.code === 200) {
+            this.data = res.data.records
+            this.page.total = res.data.total
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
     Enable(row) {
-      this.$confirm("确定启用/停用该用户?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-          .then(() => {
-            this.$api.role.roleStart({
-              userId: row.id,
-              status: row.clientId.indexOf('project_web') > -1 ? 0 : 1
-            }).then(res => {
-              if (res.code === 200) {
-                this.$message.success(res.msg)
-                this.onLoad()
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
+      this.$confirm('确定启用/停用该用户?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$api.role
+          .roleStart({
+            userId: row.id,
+            status: row.clientId.indexOf('project_web') > -1 ? 0 : 1
+          })
+          .then(res => {
+            if (res.code === 200) {
+              this.$message.success(res.msg)
+              this.onLoad()
+            } else {
+              this.$message.error(res.msg)
+            }
           })
+      })
     },
     beforeOpen(done, type) {
       if (this.form.clientId.indexOf('project_web') === -1) {
@@ -300,14 +338,14 @@ export default {
             this.userInfoForm.deptId = dp
           }
         })
-        // this.form.deptId.split(',').forEach(ele => {
-        //   const tmp = this.deptList.findIndex(sub => sub.id === ele)
-        //   console.log(tmp)
-        //   if (tmp > -1) {
-        //     this.deptList[tmp].checked = true
-        //   }
-        //   console.log(this.deptList)
-        // })
+        this.form.deptId.split(',').forEach(ele => {
+          const tmp = this.deptList.findIndex(sub => sub.id === ele)
+          console.log(tmp)
+          if (tmp > -1) {
+            this.deptList[tmp].checked = true
+          }
+          console.log(this.deptList)
+        })
         this.showEdit = true
       } else {
         done()
@@ -320,7 +358,7 @@ export default {
       this.page.size = pageSize
     },
     getJobList() {
-      this.$api.role.jobList({roleAlias: 'post'}).then(res => {
+      this.$api.role.jobList({ roleAlias: 'post' }).then(res => {
         if (res.code === 200) {
           this.jobs = res.data
         }
@@ -357,21 +395,25 @@ export default {
         if (tmp.checked) {
           this.userInfoForm.deptIds.push(tmp.id)
         } else {
-          this.userInfoForm.deptIds = this.userInfoForm.deptIds.filter(ele => ele !== tmp.id)
+          this.userInfoForm.deptIds = this.userInfoForm.deptIds.filter(
+            ele => ele !== tmp.id
+          )
         }
       }
       const count = this.deptList.filter(e => e.checked).length
-      this.checkAll = count === this.deptList.length;
+      this.checkAll = count === this.deptList.length
     },
     roleSave() {
-      let data = this.userInfoForm
+      const data = this.userInfoForm
       if (data.deptIds.length > 0) {
         data.deptIds = data.deptIds.join(',')
+      } else {
+        data.deptIds = this.form.deptId
       }
       this.$api.role.roleSave(data).then(res => {
         if (res.code === 200) {
           this.showEdit = false
-          this.$message.success(msg)
+          this.$message.success(res.msg)
           this.onLoad()
         }
       })
@@ -380,6 +422,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>