完善protable

src/components.d.ts

@@ -26,10 +26,12 @@ declare module '@vue/runtime-core' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Exception: typeof import('./components/Exception.vue')['default']

src/components/GlobalMenu.vue

@@ -40,7 +40,7 @@ const route = useRoute()
       </template>
       <el-menu-item :index="item.path + '/' + subItem.path" v-for="subItem in item.children">
         <template #title>
-          <!-- <el-icon><component :is="subItem.meta?.icon"></component></el-icon> -->
+          <el-icon v-if="subItem.meta?.icon"><component :is="subItem.meta?.icon"></component></el-icon>
           <span>{{ subItem.meta.title }}</span>
         </template>
       </el-menu-item>

src/components/ProTable.vue

@@ -7,9 +7,12 @@ interface column {
   value: string
   prop: string
   formType: string
+  placeholder: string
   options: Array<any>
   rules: any
   search: boolean
+  width: string | number
+  type: string
 }
 interface CRUD {
   create: Function
@@ -27,6 +30,10 @@ const props = defineProps({
   columns: {
     type: Array as PropType<column[]>,
     default: () => []
+  },
+  selection: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -46,6 +53,7 @@ const handleReset = () => {
 const tableData = ref([])
 const total = ref(0)
 const curPage = ref(1)
+const tableColumns = props.columns.filter(item => item.list)
 
 const getTableData = () => {
   props.crud
@@ -64,11 +72,16 @@ getTableData()
 const pageChange = () => {
   getTableData()
 }
+
+const multipleSelection = ref<any[]>([])
+const handleSelectionChange = (columns: any[]) => {
+  multipleSelection.value = columns
+}
 // ============== 表格部分结束 ===============
 
 // ============== crud部分开始 ===============
 const handleCreate = () => {
-  dialogTitle.value = '新建'
+  dialogTitle.value = '新增'
   dialogVisible.value = true
 }
 const handleUpdate = (row: any) => {
@@ -98,7 +111,8 @@ const handleDelete = (id: string | number) => {
 const handlePatchDelete = () => {}
 // ============== crud部分结束 ===============
 
-const dialogTitle = ref('新建')
+// ============== 表单部分开始 ===============
+const dialogTitle = ref('新增')
 const dialogVisible = ref(false)
 
 const closeDialog = () => {
@@ -108,14 +122,26 @@ const closeDialog = () => {
 
 const formData = ref<any>({})
 const formRef = ref()
+const formList = computed(() => props.columns.filter(item => item.formType))
+const placeholder = (item: column) => {
+  if (['select'].includes(item.formType)) {
+    return '请选择' + item.label
+  } else {
+    return '请输入' + item.label
+  }
+}
+
+props.columns.forEach(item => {
+  formData.value[item.prop] = item.value
+})
 
 const submit = () => {
   let res, message
   formRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      if (formData.id) {
+      if (formData.value.id) {
         res = props.crud?.update(formData.value)
-        message = '新建成功'
+        message = '新增成功'
       } else {
         res = props.crud?.create(formData.value)
         message = '修改成功'
@@ -131,6 +157,7 @@ const submit = () => {
     }
   })
 }
+// ============== 表单部分结束 ===============
 </script>
 
 <template>
@@ -138,7 +165,11 @@ const submit = () => {
     <el-card class="mb-4" shadow="never">
       <el-form :inline="true">
         <el-form-item :label="item.label" v-for="item in searchList">
-          <component :is="'el-' + item.formType" v-model="query[item.prop]">
+          <component
+            :is="'el-' + item.formType"
+            v-model="query[item.prop]"
+            :placeholder="item.placeholder || placeholder(item)"
+          >
             <template v-if="item.formType === 'radio-group'">
               <el-radio :label="option.label" v-for="option in item.options">{{ option.value }}</el-radio>
             </template>
@@ -155,12 +186,15 @@ const submit = () => {
       <div class="flex flex-col h-full">
         <div class="flex justify-between mb-20px">
           <div>
-            <el-button type="primary" @click="handleCreate">新建</el-button>
-            <el-button type="danger" @click="handlePatchDelete">删除</el-button>
+            <el-button type="primary" @click="handleCreate">新增</el-button>
+            <el-button type="danger" @click="handlePatchDelete" :disabled="!multipleSelection.length" v-if="selection">
+              删除
+            </el-button>
           </div>
         </div>
-        <el-table class="flex-grow-1 h-full" :data="tableData">
-          <slot name="table"></slot>
+        <el-table class="flex-grow-1 h-full" :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" v-if="selection"></el-table-column>
+          <slot></slot>
           <el-table-column fixed="right" label="操作" width="120">
             <template #default="{ row }">
               <el-button link type="primary" size="small" @click="handleUpdate(row)">编辑</el-button>
@@ -181,15 +215,29 @@ const submit = () => {
       </div>
     </el-card>
 
-    <el-dialog draggable :title="dialogTitle" v-model="dialogVisible" width="1000px" @close="closeDialog">
-      <el-form :model="formData" ref="formRef" label-width="100px">
+    <el-dialog
+      draggable
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="1000px"
+      @close="closeDialog"
+      :close-on-click-modal="false"
+    >
+      <el-form :model="formData" ref="formRef" label-width="100px" size="large" class="form">
         <el-row :gutter="20">
-          <el-col :span="12" v-for="item in columns">
+          <el-col :span="12" v-for="item in formList">
             <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop">
-              <component :is="'el-' + item.formType" v-model="formData[item.prop]">
+              <component
+                :is="'el-' + item.formType"
+                v-model="formData[item.prop]"
+                :placeholder="item.placeholder || placeholder(item)"
+              >
                 <template v-if="item.formType === 'radio-group'">
                   <el-radio :label="option.label" v-for="option in item.options">{{ option.value }}</el-radio>
                 </template>
+                <template v-if="item.formType === 'select'">
+                  <el-option :label="option.label" :value="option.value" v-for="option in item.options"></el-option>
+                </template>
               </component>
             </el-form-item>
           </el-col>
@@ -209,4 +257,7 @@ const submit = () => {
   background-color: #f5f7fa;
   color: rgb(31, 34, 37);
 }
+.form .el-select {
+  width: 100%;
+}
 </style>

src/router/asyncRouter.ts

@@ -42,7 +42,7 @@ const asyncRouter: RouteRecordRaw[] = [
         component: () => import('@/views/system/Menu.vue'),
         meta: {
           title: '菜单管理',
-          icon: 'icon-menu'
+          icon: 'icon-application-menu'
         }
       }
     ]

src/views/system/user.vue

@@ -4,9 +4,9 @@ const testRequest = () => {
     return resolve({
       data: [
         {
-          date: '2022-09-15',
+          phone: '187',
           name: 'test',
-          address: 'address'
+          state: true
         }
       ],
       total: 1
@@ -14,7 +14,19 @@ const testRequest = () => {
   })
 }
 
-const columns = [
+const testGetRole = () => {
+  Promise.resolve().then(() => {
+    columns.value[4].options = [
+      {
+        label: '测试角色',
+        value: '1'
+      }
+    ]
+  })
+}
+testGetRole()
+
+const columns = ref([
   {
     label: '用户名',
     value: '',
@@ -32,7 +44,7 @@ const columns = [
   },
   {
     label: '性别',
-    value: '',
+    value: '1',
     prop: 'gender',
     formType: 'radio-group',
     options: [
@@ -45,17 +57,28 @@ const columns = [
         value: '女'
       }
     ]
+  },
+  {
+    label: '角色',
+    value: '',
+    prop: 'role',
+    formType: 'select',
+    options: []
+  },
+  {
+    label: '状态',
+    value: true,
+    prop: 'state',
+    formType: 'switch'
   }
-]
+])
 </script>
 
 <template>
   <pro-table :crud="{ getList: testRequest }" :columns="columns">
-    <template #table>
-      <el-table-column prop="date" label="Date" />
-      <el-table-column prop="name" label="Name" />
-      <el-table-column prop="address" label="Address" />
-    </template>
+    <el-table-column prop="name" label="用户名"></el-table-column>
+    <el-table-column prop="phone" label="手机号"></el-table-column>
+    <el-table-column prop="gender" label="性别"></el-table-column>
   </pro-table>
 </template>
 

tsconfig.json

@@ -6,7 +6,8 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["element-plus/global"]
+    "types": ["element-plus/global"],
+    "jsx": "preserve",
   },
 
   "references": [