添加select选中项

src/views/system/role/index.vue

@@ -49,7 +49,7 @@ export default {
             return h(TableAction, {
               actions: [
                 {
-                  label: '添加',
+                  label: '修改',
                   type: 'button',
                   props: {
                     type: 'primary',
@@ -57,14 +57,14 @@ export default {
                   },
                   auth: 'basic_list'
                 },
-                {
-                  label: '修改',
-                  auth: 'basic_list'
-                },
                 {
                   label: '删除',
                   type: 'popconfirm',
-                  auth: 'basic_list'
+                  auth: 'basic_list',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认'
+                  }
                 }
               ],
               align: 'center'
@@ -72,11 +72,14 @@ export default {
           }
         }
       ],
-      info: ref(info)
+      info: ref(info),
+      modalShow: false,
+      rowData: {}
     })
 
     function play(row) {
-      console.log(row)
+      data.rowData = row
+      data.modalShow = true
     }
 
     const params = ref({})
@@ -87,7 +90,6 @@ export default {
       params.value = {
         ...data
       }
-      console.log(params.value)
       tableRef.value.reFetch({ ...unref(params) })
     }
 

src/views/system/role/table.js

@@ -3,6 +3,7 @@ import { h } from 'vue'
 
 const data = {
   columns: [
+    { type: 'selection' },
     {
       title: '用户编号',
       key: 'code',

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

@@ -225,8 +225,9 @@ export default defineComponent({
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
+                $message.success(res.data.msg)
               } else {
-                console.log(res.data.msg)
+                $message.error(res.data.msg)
               }
             }).catch(e => {
               console.log(e)
@@ -236,8 +237,9 @@ export default defineComponent({
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
+                $message.success(res.data.msg)
               } else {
-                console.log(res.data.msg)
+                $message.error(res.data.msg)
               }
             })
           }

src/views/system/user/index.vue

@@ -1,43 +1,59 @@
 <template>
   <div>
     <n-card>
+      <headSearch :info="data.info" @search="handleSearch" />
       <data-table
         :columns="data.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-popconfirm
-            @positive-click="handlePositiveClick"
+            negative-text="取消"
-            @negative-click="handleNegativeClick"
+            positive-text="确认"
+            @positive-click="deleteUsers('plural')"
           >
+            <template #trigger>
               <n-button type="primary" @click="deleteUsers"> 删除 </n-button>
+            </template>
+            确认要批量删除吗？
           </n-popconfirm>
         </template>
       </data-table>
     </n-card>
   </div>
   <!-- 新增、编辑弹窗 -->
-  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" @done="loadDataTable" />
+  <user-modal
+    v-if="data.modalShow"
+    v-model:visible="data.modalShow"
+    :row="rowData"
+    @done="loadDataTable"
+  />
 </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 TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
-import { getUserList } from '@/api/system/user/index.js'
+import { getUserList, deleteUser } from '@/api/system/user/index.js'
-import { h, unref, toRefs } from 'vue'
+import { h, unref, toRefs, ref } from 'vue'
 import { reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
+import info from './info.js'
 export default {
   name: 'MenuPage',
-  components: { dataTable, UserModal },
+  components: { dataTable, UserModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
+        {
+          type: 'selection'
+        },
         {
           title: '用户编号',
           key: 'code',
@@ -69,21 +85,12 @@ export default {
         },
         {
           title: '角色',
-          key: 'roles',
+          key: 'roleList',
           align: 'center',
           render(row) {
             return h(TableTags, {
-              data: row.roles,
+              data: row.roleList,
               rowKey: 'name'
-              // filters: [
-              //   {
-              //     key: '管理员',
-              //     label: '123',
-              //     color: {
-              //       textColor: 'red'
-              //     }
-              //   }
-              // ]
             })
           }
         },
@@ -91,7 +98,22 @@ export default {
           title: '状态',
           key: 'status',
           align: 'center',
-          width: 100
+          width: 100,
+          render(row) {
+            return h(TableTags, {
+              data: row.status,
+              filters: [
+                {
+                  key: 1,
+                  label: '启用'
+                },
+                {
+                  key: 2,
+                  label: '禁用'
+                }
+              ]
+            })
+          }
         },
         {
           title: '部门',
@@ -130,7 +152,12 @@ export default {
                 {
                   label: '删除',
                   type: 'popconfirm',
-                  auth: 'basic_list'
+                  auth: 'basic_list',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认',
+                    onPositiveClick: deleteSingle.bind(row)
+                  }
                 }
               ],
               align: 'center'
@@ -138,21 +165,28 @@ export default {
           }
         }
       ],
-      modalShow: false
+      info: ref(info),
-    })
+      modalShow: false,
-    const modalData = reactive({
       rowData: {}
     })
     // 打开编辑弹窗
     function play(row) {
-      modalData.rowData = row
+      data.rowData = row
       data.modalShow = true
     }
 
-    const params = reactive({
+    const params = ref({
       page: 1,
       limit: 10
     })
+    const tableRef = ref()
+
+    function handleSearch(data) {
+      params.value = {
+        ...data
+      }
+      tableRef.value.reFetch({ ...unref(params) })
+    }
 
     const loadDataTable = async(res) => {
       const _params = {
@@ -162,17 +196,42 @@ export default {
       return await getUserList(_params)
     }
     function handleUser() {
-      modalData.rowData = {}
+      data.rowData = {}
       data.modalShow = true
     }
 
-    return { data, loadDataTable, handleUser, ...toRefs(modalData) }
+    function deleteUsers(type) {
+      console.log(type)
+      // deleteUser({ data: [] }).then((res) => {
+      //   if (res.code === 0) {
+      //     $message.success(res.data.msg)
+      //     this.reload()
+      //   } else {
+      //     $message.error(res.data.msg)
+      //   }
+      // })
+    }
+    function deleteSingle(type, row) {
+      console.log(type, row, '++000+++')
+    }
+
+    const checkedRows = ref([])
+    function handleCheck(rowKeys) {
+      checkedRows.value = rowKeys
+      console.log(rowKeys)
+    }
+
+    return {
+      data,
+      loadDataTable,
+      handleUser,
+      ...toRefs(data),
+      handleSearch,
+      deleteUsers,
+      handleCheck
+    }
   },
   methods: {
-    // 批量删除用户
-    deleteUsers() {
-
-    }
 
   }
 }

src/views/system/user/info.js

@@ -0,0 +1,39 @@
+import { getRoleAll } from '@/api/system/role/index'
+import { dataToSelect } from '@/utils/handleData.js'
+const res = await getRoleAll()
+const rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+const data = [
+  {
+    label: '用户姓名',
+    key: 'realname',
+    props: {
+      placeholder: '请输入角色名称'
+    }
+  },
+  {
+    label: '用户姓名',
+    key: 'realname',
+    props: {
+      placeholder: '请输入角色名称'
+    }
+  },
+  {
+    label: '用户角色',
+    type: 'select',
+    key: 'roleId',
+    props: {
+      options: rolesOptions
+    }
+  }
+//   {
+//     label: '角色类型',
+//     type: 'date',
+//     key: 'date',
+//     props: {
+//       type: 'date'
+//     }
+//   }
+]
+
+export default data
+