用户模块状态设置、重置密码、角色模块增删改查功能结束

src/views/system/role/components/RoleModal.vue

         :on-positive-click="handleConfirm"
         :on-negative-click="handleClose"
       >
-        <n-form-item
-          label="头像:"
-          path="avatar"
-        >
-          <uploadImage
-            :options="{
-              max:1,
-              action: '/upload/uploadImage/demo',
-            }"
-            size="2"
-          />
-        </n-form-item>
-        <n-form-item label="用户编号:" path="code">
+        <n-form-item label="角色编号:" path="code">
           <n-input
             v-model:value="form.code"
             clearable
             :maxlength="20"
-            placeholder="请输入用户编号"
+            placeholder="请输入角色编号"
           />
         </n-form-item>
-        <n-form-item label="用户账号:" path="username">
+        <n-form-item label="角色名称:" path="name">
           <n-input
-            v-model:value="form.username"
+            v-model:value="form.name"
             clearable
             :maxlength="20"
-            placeholder="请输入用户账号"
-          />
-        </n-form-item>
-        <n-form-item
-          label="登录密码:"
-          path="password"
-        >
-          <n-input
-            v-model:value="form.password"
-            type="password"
-            :maxlength="20"
-            placeholder="请输入登录密码"
-          />
-        </n-form-item>
-        <n-form-item label="用户姓名:" path="realname">
-          <n-input
-            v-model:value="form.realname"
-            clearable
-            :maxlength="20"
-            placeholder="请输入用户姓名"
-          />
-        </n-form-item>
-        <n-form-item label="所属部门:" path="deptId">
-          <n-select
-            v-model:value="form.deptId"
-            :options="deptOptions"
-            placeholder="请选择所属部门"
-          />
-        </n-form-item>
-        <n-form-item label="角色:" path="roleIds">
-          <n-select
-            v-model:value="form.roleIds"
-            clearable
-            :multiple="true"
-            :options="rolesOptions"
-            placeholder="请选择角色"
+            placeholder="请输入角色名称"
           />
         </n-form-item>
         <n-form-item label="状态" path="status">
 </template>
 
 <script>
-import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
+import { defineComponent, computed, reactive, toRefs } from 'vue'
 import Modal from '@/components/Modal/index.vue'
-import uploadImage from '@/components/ImgUpload/index.vue'
-import { getDeptAll } from '@/api/system/dept/index'
-import { getRoleAll } from '@/api/system/role/index'
-import { addUser, editUser } from '@/api/system/user/index'
-import { dataToSelect } from '@/utils/handleData.js'
+import { addRole, editRole } from '@/api/system/role/index'
 export default defineComponent({
-  name: 'UserModal',
-  components: { Modal, uploadImage },
+  name: 'RoleModal',
+  components: { Modal },
   props: {
     visible: {
       type: Boolean,
   setup(props, { emit }) {
     const data = reactive({
       form: {
-        avatar: '/images/user/20211011/20211011151447698.jpg',
         code: '',
-        deptId: null,
-        username: '',
-        realname: '',
-        password: '',
-        roleIds: [],
+        name: '',
         status: 1,
         note: ''
-
       },
-      deptOptions: [],
-      rolesOptions: []
+      rules: {
+        code: [
+          { required: true, message: '请输入角色编号', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入角色名称', type: 'string', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ]
+      }
     })
     const getModalOptions = computed(() => {
       return {
-        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
+        title: Object.keys(props.row).length === 0 ? '添加角色' : '编辑角色',
         show: props.visible,
         form: Object.assign(data.form, props.row),
         negativeText: '取消',
       emit('update:visible', false)
     }
 
-    // 获取部门列表
-    async function getDeptOptions() {
-      const res = await getDeptAll()
-      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-    }
-
-    // 获取角色列表
-    async function getRoleOptions() {
-      const res = await getRoleAll()
-      data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-    }
-
-    onMounted(() => {
-      getDeptOptions()
-      getRoleOptions()
-    })
-
-    // 上传文件
-    const handleUpload = ({ file }) => {
-      console.log(file)
-      // data.form.avatar = file.url
-    }
-
     return {
       getModalOptions,
       handleClose,
       ...toRefs(data),
       rules: reactive({
-        avatar: [
-          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
-        ],
         code: [
-          { required: true, message: '请输入编号', trigger: 'blur' }
-        ],
-        realname: [
-          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+          { required: true, message: '请输入角色编号', trigger: 'blur' }
         ],
-        deptId: [
-          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        name: [
+          { required: true, message: '请输入角色名称', type: 'string', trigger: 'blur' }
         ],
         status: [
           { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
-        ],
-        roleIds: [
-          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
-        ],
-        username: [
-          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
         ]
-      }),
-      handleUpload
+      })
     }
   },
   methods: {
       this.$refs.formRef.validate((errors) => {
         if (!errors) {
           if (type === 'add') {
-            addUser(this.form).then(res => {
+            addRole(this.form).then(res => {
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')

src/views/system/role/index.vue

 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getRoleList, deleteRole } from '@/api/system/role/index'
+import TableSwitch from '@/components/DataTable/tools/Switch.vue'
+import { getRoleList, deleteRole, addRole, editRole, setRoleStatus } from '@/api/system/role/index'
 import { h, ref, unref, toRefs, reactive } from 'vue'
-import { NSwitch } from 'naive-ui'
 import table from './table.js'
 import info from './info.js'
 import RoleModal from './components/RoleModal.vue'
           align: 'center',
           width: 100,
           render(row) {
-            return h(NSwitch, {
-              data: row.status,
-              value: row.status === 1,
+            return h(TableSwitch, {
+              data: { id: row.id, status: row.status },
+              rowKey: 'status',
+              checkedValue: 1,
+              uncheckedValue: 2,
               onChange: setStatus.bind(row)
             })
           }
                   },
                   auth: 'basic_list'
                 },
+                {
+                  label: '分配权限',
+                  type: 'button',
+                  props: {
+                    type: 'primary',
+                    ghost: true,
+                    onClick: configure.bind(null, row)
+                  },
+                  auth: 'basic_list'
+                },
                 {
                   label: '删除',
                   type: 'popconfirm',
       ],
       info: ref(info),
       modalShow: false,
+      configModalShow: false,
       rowData: {}
     })
 
+    // 编辑
     function play(row) {
       data.rowData = row
       data.modalShow = true
     }
 
-    const params = ref({})
+    // 配置权限
+    function configure(row) {
+      data.rowData = row
+      data.configModalShow = true
+    }
 
+    const params = ref({})
     const tableRef = ref()
-
     function handleSearch(data) {
       params.value = {
         ...data
     }
 
     // 设置状态
-    function setStatus(e, row) {
-      console.log(e, row, '状态+++++++++++++=')
+    function setStatus(row) {
+      console.log(row)
+      setRoleStatus({ id: row.data.id, status: row.value }).then(res => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.msg)
+        } else {
+          $message.error(res.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
     }
 
     return {

src/views/system/role/table.js

-import TableImage from '@/components/DataTable/tools/Image.vue'
-import { h } from 'vue'
 
 const data = {
   columns: [
     { type: 'selection' },
     {
-      title: '用户编号',
+      title: '角色编号',
       key: 'code',
       align: 'center'
     },
     {
-      title: '头像',
-      key: 'avatar',
-      align: 'center',
-      render(row) {
-        return h(TableImage, {
-          images: {
-            width: 36,
-            height: 36,
-            src: row.avatar
-          }
-        })
-      }
-    },
-    {
-      title: '用户账号',
-      key: 'username',
-      align: 'center'
-    },
-    {
-      title: '用户姓名',
-      key: 'realname',
-      align: 'center'
-    },
-    {
-      title: '用户类型',
-      key: 'type',
-      align: 'center',
-      width: 100
-    },
-    {
-      title: '角色',
-      key: 'roles',
-      align: 'center'
-
-    },
-    {
-      title: '部门',
-      key: 'deptName',
+      title: '角色名称',
+      key: 'name',
       align: 'center'
     },
     {
       title: '创建时间',
       key: 'createTime',
       align: 'center',
-      width: 160
+      Minwidth: 160
     },
     {
       title: '更新时间',
       key: 'updateTime',
       align: 'center',
-      width: 160
+      Minwidth: 160
     }
   ]
 }

src/views/system/user/components/UserModal.vue

               max:1,
               action: '/upload/uploadImage/demo',
             }"
-            size="2"
           />
         </n-form-item>
         <n-form-item label="用户编号:" path="code">
 
       },
       deptOptions: [],
-      rolesOptions: []
+      rolesOptions: [],
+      rules: {
+        avatar: [
+          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入编号', trigger: 'blur' }
+        ],
+        realname: [
+          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        ]
+      }
     })
     const getModalOptions = computed(() => {
       return {
       getModalOptions,
       handleClose,
       ...toRefs(data),
-      rules: reactive({
-        avatar: [
-          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
-        ],
-        code: [
-          { required: true, message: '请输入编号', trigger: 'blur' }
-        ],
-        realname: [
-          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
-        ],
-        deptId: [
-          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
-        ],
-        status: [
-          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
-        ],
-        roleIds: [
-          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
-        ],
-        username: [
-          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
-        ]
-      }),
       handleUpload
     }
   },

src/views/system/user/index.vue

 import TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
 import TableSwitch from '@/components/DataTable/tools/Switch.vue'
-import { getUserList } from '@/api/system/user/index.js'
+import { getUserList, resetPassword, deleteUser, setUserStatus } from '@/api/system/user/index.js'
 import { h, unref, ref, toRefs, reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
 import info from './info.js'
-import { NSwitch } from 'naive-ui'
 export default {
   name: 'MenuPage',
   components: { dataTable, UserModal, headSearch },
           width: 100,
           render(row) {
             return h(TableSwitch, {
-              data: row,
+              data: { id: row.id, status: row.status },
               rowKey: 'status',
               checkedValue: 1,
               uncheckedValue: 2,
-              onGetRow: setStatus.bind(row)
+              onChange: setStatus.bind(row)
             })
           }
         },
     }
 
     // 设置状态
-    function setStatus(e, row) {
-      console.log(e, row, '状态+++++++++++++=')
+    function setStatus(row) {
+      setUserStatus({ id: row.data.id, status: row.value }).then(res => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.msg)
+        } else {
+          $message.error(res.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
     }
 
     return {
       deleteComplex,
       handleCheck,
       deleteData,
+      resetPsw,
       setStatus
     }
   },