角色管理模块删除接口对接

src/api/system/dept/index.js

  */
 export function deleteDept(id) {
   return request({
-    url: `/dept/delete${[id]}`,
+    url: `/dept/delete/${id}`,
     method: 'DELETE'
   })
 }

src/api/system/menu/index.js

  */
 export function deleteMenu(id) {
   return request({
-    url: `/menu/delete${[id]}`,
+    url: `/menu/delete/${id}`,
     method: 'DELETE'
   })
 }

src/api/system/role/index.js

  * 删除角色
  * params
  */
-export function deleteRole(id) {
+export function deleteRole(data) {
   return request({
-    url: `/role/delete${[id]}`,
+    url: `/role/delete/${data}`,
     method: 'DELETE'
   })
 }

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

+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <n-form
+        ref="formRef"
+        :model="form"
+        label-placement="left"
+        :rules="rules"
+        :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-input
+            v-model:value="form.code"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户编号"
+          />
+        </n-form-item>
+        <n-form-item label="用户账号:" path="username">
+          <n-input
+            v-model:value="form.username"
+            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="请选择角色"
+          />
+        </n-form-item>
+        <n-form-item label="状态" path="status">
+          <n-radio-group
+            v-model:value="form.status"
+          >
+            <n-radio :value="1">正常</n-radio>
+            <n-radio :value="2">禁用</n-radio>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item
+          label="备注:"
+        >
+          <n-input
+            v-model:value="form.note"
+            type="textarea"
+            :rows="3"
+            :maxlength="200"
+            placeholder="请输入备注"
+          />
+        </n-form-item>
+      </n-form>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import { defineComponent, computed, onMounted, 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'
+export default defineComponent({
+  name: 'UserModal',
+  components: { Modal, uploadImage },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    row: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null,
+    'done': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      form: {
+        avatar: '/images/user/20211011/20211011151447698.jpg',
+        code: '',
+        deptId: null,
+        username: '',
+        realname: '',
+        password: '',
+        roleIds: [],
+        status: 1,
+        note: ''
+
+      },
+      deptOptions: [],
+      rolesOptions: []
+    })
+    const getModalOptions = computed(() => {
+      return {
+        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
+        show: props.visible,
+        form: Object.assign(data.form, props.row),
+        negativeText: '取消',
+        positiveText: '确认'
+      }
+    })
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      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' }
+        ],
+        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
+    }
+  },
+  methods: {
+    // 表单提交
+    handleConfirm() {
+      const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
+      this.$refs.formRef.validate((errors) => {
+        if (!errors) {
+          if (type === 'add') {
+            addUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            }).catch(e => {
+              console.log(e)
+            })
+          } else if (type === 'edit') {
+            editUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+})
+</script>
+<style scoped lang='scss'>
+</style>

src/views/system/role/index.vue

 <template>
   <div>
     <n-card>
-      <headSearch :info="data.info" @search="handleSearch" />
-
+      <headSearch :info="info" @search="handleSearch" />
       <data-table
         ref="tableRef"
-        :columns="data.columns"
+        :columns="columns"
         :row-key="(row) => row.id"
         :request="loadDataTable"
         size="large"
         scroll-x="1200"
+        @update:checked-row-keys="handleCheck"
       >
         <template #tableTitle>
-          <n-button type="primary">
-            新建
-          </n-button>
-          <n-button type="primary">
-            删除
-          </n-button>
+          <n-button type="primary" @click="handleModal"> 新建 </n-button>
+          <n-popconfirm
+            negative-text="取消"
+            positive-text="确认"
+            @positive-click="deleteComplex"
+          >
+            <template #trigger>
+              <n-button type="primary">删除</n-button>
+            </template>
+            确定删除选中的数据吗?
+          </n-popconfirm>
         </template>
       </data-table>
     </n-card>
   </div>
+  <!-- 新增、编辑弹窗 -->
+  <role-modal
+    v-if="modalShow"
+    v-model:visible="modalShow"
+    :row="rowData"
+    @done="handleSearch"
+  />
 </template>
 
 <script>
 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getRoleList } from '@/api/system/role/index'
-import { h, ref, unref } from 'vue'
-import { reactive } from 'vue'
+import { getRoleList, deleteRole } 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'
+
 export default {
   name: 'MenuPage',
-  components: { headSearch, dataTable },
+  components: { headSearch, dataTable, RoleModal },
   setup() {
     const data = reactive({
       columns: [
         ...table.columns,
+        {
+          title: '状态',
+          key: 'status',
+          align: 'center',
+          width: 100,
+          render(row) {
+            return h(NSwitch, {
+              data: row.status,
+              value: row.status === 1,
+              onChange: setStatus.bind(row)
+            })
+          }
+        },
         {
           title: '操作',
           align: 'center',
                   label: '删除',
                   type: 'popconfirm',
                   auth: 'basic_list',
+                  tip: '确定删除这条数据吗?',
                   props: {
                     negativeText: '取消',
-                    positiveText: '确认'
+                    positiveText: '确认',
+                    onPositiveClick: deleteSingle.bind(null, row.id)
                   }
                 }
               ],
       return await getRoleList(_params)
     }
 
-    return { data, tableRef, loadDataTable, handleSearch }
+    // 新增用户
+    function handleModal() {
+      data.rowData = {}
+      data.modalShow = true
+    }
+
+    // 选择表格数据
+    const selectedIds = ref([])
+    function handleCheck(rowKeys) {
+      selectedIds.value = rowKeys
+    }
+    // 批量删除
+    function deleteComplex() {
+      if (selectedIds.value.length) {
+        deleteData(selectedIds.value)
+      } else {
+        $message.warning('请至少选中一条数据')
+      }
+    }
+    // 单个删除数据
+    function deleteSingle(id) {
+      deleteData([id])
+    }
+
+    // 删除接口
+    function deleteData(data) {
+      deleteRole(data)
+        .then((res) => {
+          if (res.code === 0) {
+            handleSearch()
+            $message.success(res.msg)
+          } else {
+            $message.error(res.msg)
+          }
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    }
+
+    // 设置状态
+    function setStatus(e, row) {
+      console.log(e, row, '状态+++++++++++++=')
+    }
+
+    return {
+      ...toRefs(data),
+      tableRef,
+      loadDataTable,
+      handleSearch,
+      handleModal,
+      handleCheck,
+      selectedIds,
+      deleteSingle,
+      deleteComplex,
+      deleteData,
+      setStatus
+    }
   }
 }
-
 </script>
 <style scoped lang='scss'>
-.n-button+.n-button{
-    margin-left: 10px;
+.n-button + .n-button {
+  margin-left: 10px;
 }
 </style>

src/views/system/role/table.js

       align: 'center'
 
     },
-    {
-      title: '状态',
-      key: 'status',
-      align: 'center',
-      width: 100
-    },
     {
       title: '部门',
       key: 'deptName',

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

             }"
             size="2"
           />
-          <!-- <n-upload
-            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-            list-type="image-card"
-          />
-          <n-modal
-            preset="card"
-            style="width: 600px"
-            title="头像"
-          >
-            <img :src="form.avatar" style="width: 100%">
-          </n-modal> -->
         </n-form-item>
         <n-form-item label="用户编号:" path="code">
           <n-input
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
-                $message.success(res.data.msg)
+                $message.success(res.msg)
               } else {
-                $message.error(res.data.msg)
+                $message.error(res.msg)
               }
             }).catch(e => {
               console.log(e)
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
-                $message.success(res.data.msg)
+                $message.success(res.msg)
               } else {
-                $message.error(res.data.msg)
+                $message.error(res.msg)
               }
             })
           }

src/views/system/user/index.vue

 <template>
   <div>
     <n-card>
-      <headSearch :info="data.info" @search="handleSearch" />
+      <headSearch :info="info" @search="handleSearch" />
       <data-table
         ref="tableRef"
-        :columns="data.columns"
+        :columns="columns"
         :row-key="(row) => row.id"
         :request="loadDataTable"
         size="large"
         @update:checked-row-keys="handleCheck"
       >
         <template #tableTitle>
-          <n-button type="primary" @click="handleUser"> 新建 </n-button>
+          <n-button type="primary" @click="handleModal"> 新建 </n-button>
           <n-popconfirm
             negative-text="取消"
             positive-text="确认"
-            @positive-click="deleteUsers('plural')"
+            @positive-click="deleteComplex"
           >
             <template #trigger>
               <n-button type="primary"> 删除 </n-button>
             </template>
-            确认要删除选中数据吗？
+            确认要删除选中数据吗?
           </n-popconfirm>
         </template>
       </data-table>
   </div>
   <!-- 新增、编辑弹窗 -->
   <user-modal
-    v-if="data.modalShow"
-    v-model:visible="data.modalShow"
+    v-if="modalShow"
+    v-model:visible="modalShow"
     :row="rowData"
     @done="handleSearch"
   />
 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 { getUserList, deleteUser } from '@/api/system/user/index.js'
-import { h, unref, toRefs, ref } from 'vue'
-import { reactive } from 'vue'
+import { getUserList, deleteUser, resetPassword } from '@/api/system/user/index.js'
+import { h, unref, toRefs, ref, 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 },
           align: 'center',
           width: 100,
           render(row) {
-            return h(TableTags, {
+            return h(NSwitch, {
               data: row.status,
-              filters: [
-                {
-                  key: 1,
-                  label: '启用'
-                },
-                {
-                  key: 2,
-                  label: '禁用'
-                }
-              ]
+              value: row.status === 1,
+              onChange: setStatus.bind(row)
             })
           }
         },
                   },
                   auth: 'basic_list'
                 },
+                {
+                  label: '重置密码',
+                  type: 'popconfirm',
+                  auth: 'basic_list',
+                  tip: '确定要重置为123456吗?',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认',
+                    onPositiveClick: resetPsw.bind(null, row.id)
+                  }
+                },
                 {
                   label: '删除',
                   type: 'popconfirm',
                   auth: 'basic_list',
+                  tip: '确定删除这条数据吗?',
                   props: {
                     negativeText: '取消',
                     positiveText: '确认',
     }
 
     // 新增用户
-    function handleUser() {
+    function handleModal() {
       data.rowData = {}
       data.modalShow = true
     }
     function handleCheck(rowKeys) {
       selectedIds.value = rowKeys
     }
-    // 批量删除用户
-    function deleteUsers() {
+    // 批量删除
+    function deleteComplex() {
       if (selectedIds.value.length) {
         deleteData(selectedIds.value)
       } else {
       deleteUser(data).then((res) => {
         if (res.code === 0) {
           handleSearch()
-          $message.success(res.data.msg)
+          $message.success(res.msg)
         } else {
-          $message.error(res.data.msg)
+          $message.error(res.msg)
         }
       }).catch(e => {
         console.log(e)
       })
     }
 
+    // 重置密码
+    function resetPsw(id) {
+      resetPassword({ id }).then(res => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.msg)
+        } else {
+          $message.error(res.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
+    }
+
+    // 设置状态
+    function setStatus(e, row) {
+      console.log(e, row, '状态+++++++++++++=')
+    }
+
     return {
       data,
       loadDataTable,
-      handleUser,
+      handleModal,
       ...toRefs(data),
       tableRef,
       handleSearch,
-      deleteUsers,
-      handleCheck,
       selectedIds,
-      deleteData
+      deleteComplex,
+      handleCheck,
+      deleteData,
+      setStatus
     }
   },
   methods: {