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

2022-05-26 15:46:48 +08:00 · 2022-05-26 15:46:48 +08:00 · 3108937e32
parent 0df3fff611
commit 3108937e32
6 changed files with 108 additions and 194 deletions
--- a/src/views/system/role/components/ConfigModal.vue
+++ b/src/views/system/role/components/ConfigModal.vue
--- a/src/views/system/role/components/RoleModal.vue
+++ b/src/views/system/role/components/RoleModal.vue
@ -14,67 +14,20 @@
        :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">
@ -102,16 +55,12 @@
 </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,
@ -129,23 +78,26 @@ export default defineComponent({
  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: '取消',
@ -158,57 +110,21 @@ export default defineComponent({
      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' }
+          { required: true, message: '请输入角色编号', trigger: 'blur' }
        ],
-        realname: [
-          { required: true, message: '请输入用户姓名', type: 'string', 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: {
@ -218,7 +134,7 @@ export default defineComponent({
      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')
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -40,9 +40,9 @@
 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'
@ -60,9 +60,11 @@ export default {
          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)
            })
          }
@ -84,6 +86,16 @@ export default {
                  },
                  auth: 'basic_list'
                },
+                {
+                  label: '分配权限',
+                  type: 'button',
+                  props: {
+                    type: 'primary',
+                    ghost: true,
+                    onClick: configure.bind(null, row)
+                  },
+                  auth: 'basic_list'
+                },
                {
                  label: '删除',
                  type: 'popconfirm',
@ -103,18 +115,24 @@ export default {
      ],
      info: ref(info),
      modalShow: false,
+      configModalShow: false,
      rowData: {}
    })

+    // 编辑
    function play(row) {
      data.rowData = row
      data.modalShow = true
    }

+    // 配置权限
+    function configure(row) {
+      data.rowData = row
+      data.configModalShow = true
+    }
+
    const params = ref({})
-
    const tableRef = ref()
-
    function handleSearch(data) {
      params.value = {
        ...data
@ -171,8 +189,18 @@ export default {
    }

    // 设置状态
-    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 {
--- a/src/views/system/role/table.js
+++ b/src/views/system/role/table.js
@ -1,66 +1,28 @@
-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
    }
  ]
 }
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@ -23,7 +23,6 @@
              max:1,
              action: '/upload/uploadImage/demo',
            }"
-            size="2"
          />
        </n-form-item>
        <n-form-item label="用户编号:" path="code">
@ -141,7 +140,30 @@ export default defineComponent({

      },
      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 {
@ -185,29 +207,6 @@ export default defineComponent({
      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
    }
  },
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -42,11 +42,10 @@ import TableAction from '@/components/DataTable/tools/Action.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 },
@ -103,11 +102,11 @@ export default {
          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)
            })
          }
        },
@ -255,8 +254,17 @@ export default {
    }

    // 设置状态
-    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 {
@ -270,6 +278,7 @@ export default {
      deleteComplex,
      handleCheck,
      deleteData,
+      resetPsw,
      setStatus
    }
  },