完善proTable

src/assets/base.css

@@ -71,7 +71,7 @@ body {
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
   font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

src/assets/main.css

@@ -4,9 +4,6 @@
   height: 100vh;
 }
 
-.el-menu-item [class^=el-icon]{
-  font-size: 20px;
-}
 .el-card{
   border: none !important;
 }

src/components.d.ts

@@ -58,4 +58,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/components/ProTable.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ElMessage, ElMessageBox, type FormProps } from 'element-plus'
-import type { PropType } from 'vue'
-import type { AdvancedForm, BasicForm, BasicFormItem } from '@/types/form'
 import router from '@/router'
+import { ElMessage, ElMessageBox, type DialogProps } from 'element-plus'
+import type { PropType } from 'vue'
+import type { AdvancedForm, BasicForm } from '@/types/form'
+import type { TableProps } from 'element-plus/es/components/table/src/table/defaults'
 
 interface CRUD {
   create: Function
@@ -11,6 +12,11 @@ interface CRUD {
   getList: Function
   getRecord: Function
 }
+interface CustomTable {
+  showOperate: boolean
+}
+type Table = Partial<Omit<TableProps<any>, 'data'> & CustomTable>
+
 const props = defineProps({
   crud: {
     required: true,
@@ -24,17 +30,21 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
-  form: {
+  formConfig: {
     type: Object as PropType<BasicForm | AdvancedForm>,
     required: true
-  }
+  },
+  dialogConfig: {
+    type: Object as PropType<DialogProps>
+  },
+  tableConfig: Object as PropType<Table>
 })
 
 // ============== 查询部分开始 ===============
 const query = ref<any>({})
 const searchList = ref<any>([])
 watch(
-  () => props.form.formItems,
+  () => props.formConfig.formItems,
   val => {
     val.forEach((item: any) => {
       if (item.group) {
@@ -43,7 +53,6 @@ watch(
         item.search && searchList.value.push(item)
       }
     })
-    console.log(searchList.value)
   },
   { immediate: true }
 )
@@ -55,21 +64,20 @@ const handleQuery = () => {
 const handleReset = () => {
   query.value = {}
 }
-const placeholder = (item: BasicFormItem) => {
-  if (['select'].includes(item.type)) {
-    return '请选择' + item.label
-  } else {
-    return '请输入' + item.label
-  }
-}
 // ============== 查询部分结束 ===============
 
 // ============== 表格部分开始 ===============
 const tableData = ref([])
 const total = ref(0)
 const curPage = ref(1)
+const loading = ref(false)
+const tableConfig = ref<Table>({
+  showOperate: true,
+  ...props.tableConfig
+})
 
 const getTableData = () => {
+  loading.value = true
   props.crud
     ?.getList({
       ...query.value,
@@ -80,6 +88,9 @@ const getTableData = () => {
       tableData.value = res.data
       total.value = res.total
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 getTableData()
 
@@ -94,7 +105,7 @@ const handleSelectionChange = (columns: any[]) => {
 // ============== 表格部分结束 ===============
 
 // ============== crud部分开始 ===============
-const formRoute = props.form.route
+const formRoute = props.formConfig.route
 const handleCreate = () => {
   if (formRoute) {
     router.push(formRoute)
@@ -121,23 +132,37 @@ const handleDelete = (id: string | number) => {
   ElMessageBox.confirm('您确定要删除该项吗', '提示', {
     type: 'warning'
   }).then(async () => {
-    const res = await props.crud?.delete(id)
-    if (res.code === 0) {
-      ElMessage({
-        type: 'success',
-        message: '删除成功'
-      })
-    }
+    await props.crud?.delete({ id })
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
+  })
+}
+const handlePatchDelete = () => {
+  ElMessageBox.confirm('您确定要删除吗', '提示', {
+    type: 'warning'
+  }).then(async () => {
+    await props.crud?.delete({
+      ids: multipleSelection.value.map(item => item.id).join(',')
+    })
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
   })
 }
-const handlePatchDelete = () => {}
 // ============== crud部分结束 ===============
 
 // ============== 表单部分开始 ===============
 const formData = ref<any>({})
 const dialogVisible = ref(false)
-
 // ============== 表单部分结束 ===============
+
+defineExpose({
+  handleDelete,
+  handleUpdate
+})
 </script>
 
 <template>
@@ -164,10 +189,16 @@ const dialogVisible = ref(false)
             </el-button>
           </div>
         </div>
-        <el-table class="flex-grow-1 h-full" :data="tableData" @selection-change="handleSelectionChange">
+        <el-table
+          class="flex-grow-1 h-full"
+          :data="tableData"
+          @selection-change="handleSelectionChange"
+          v-loading="loading"
+          v-bind="tableConfig"
+        >
           <el-table-column type="selection" width="50" v-if="selection"></el-table-column>
           <slot></slot>
-          <el-table-column fixed="right" label="操作" width="120">
+          <el-table-column fixed="right" label="操作" width="120" v-if="tableConfig?.showOperate">
             <template #default="{ row }">
               <el-button link type="primary" size="small" @click="handleUpdate(row)">编辑</el-button>
               <el-button link type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
@@ -189,7 +220,8 @@ const dialogVisible = ref(false)
 
     <dialog-form
       v-model="dialogVisible"
-      :form="form"
+      :dialogConfig="dialogConfig"
+      :formConfig="formConfig"
       :formData="formData"
       :create="crud.create"
       :update="crud.update"

src/components/form/AdvancedForm.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
 
 const props = defineProps({
-  form: {
+  formConfig: {
     required: true,
     type: Object as PropType<AdvancedForm>
   },
@@ -14,7 +14,7 @@ const props = defineProps({
 })
 
 !props.formData.id &&
-  props.form?.formItems.forEach(item => {
+  props.formConfig?.formItems.forEach(item => {
     item.group.forEach(element => {
       props.formData[element.name] = element.value
     })
@@ -22,9 +22,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <el-card v-for="item in form.formItems" :title="item.label">
+  <el-card v-for="item in formConfig.formItems" :title="item.label">
     <el-row :gutter="20">
-      <el-col :span="sub.span || form.span || 12" v-for="sub in item.group">
+      <el-col :span="sub.span || formConfig.span || 12" v-for="sub in item.group">
         <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name">
           <form-comp :item="sub" :formData="formData"></form-comp>
         </el-form-item>

src/components/form/BasicForm.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
 
 const props = defineProps({
-  form: {
+  formConfig: {
     required: true,
     type: Object as PropType<BasicForm>
   },
@@ -14,14 +14,14 @@ const props = defineProps({
 })
 
 !props.formData.id &&
-  props.form?.formItems.forEach(item => {
+  props.formConfig?.formItems.forEach(item => {
     props.formData[item.name] = item.value
   })
 </script>
 
 <template>
   <el-row :gutter="20">
-    <el-col :span="item.span || form.span || 12" v-for="item in form.formItems">
+    <el-col :span="item.span || formConfig.span || 12" v-for="item in formConfig.formItems">
       <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">
         <form-comp :item="item" :formData="formData"></form-comp>
       </el-form-item>

src/components/form/DialogForm.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
+import type { DialogProps } from 'element-plus'
 const props = defineProps({
   modelValue: Boolean,
-  form: {
+  dialogConfig: Object as PropType<DialogProps>,
+  formConfig: {
     required: true,
     type: Object as PropType<BasicForm | AdvancedForm>
   },
@@ -53,14 +55,14 @@ const submit = async () => {
   <el-dialog
     draggable
     :title="dialogTitle"
+    v-bind="dialogConfig"
     v-model="dialogVisible"
-    width="1200px"
     @close="closeDialog"
     :close-on-click-modal="false"
   >
     <pro-form
       ref="formRef"
-      :form="form"
+      :formConfig="formConfig"
       :formData="formInitData"
       :create="create"
       :update="update"

src/components/form/FormComp.vue

@@ -50,8 +50,4 @@ const placeholder = (item: BasicFormItem) => {
   </component>
 </template>
 
-<style lang="scss" scoped>
-:deep(.el-select) {
-  width: 100%;
-}
-</style>
+<style lang="scss" scoped></style>

src/components/form/ProForm.vue

@@ -8,7 +8,7 @@ const props = defineProps({
     required: true,
     type: Object
   },
-  form: {
+  formConfig: {
     required: true,
     type: Object as PropType<BasicForm | AdvancedForm>
   },
@@ -27,7 +27,7 @@ const formProps: any = ref({
   labelWidth: '100px',
   labelPosition: 'top',
   size: 'large',
-  ...props.form?.props
+  ...props.formConfig?.props
 })
 
 const formInitData = computed(() => {
@@ -65,9 +65,13 @@ defineExpose({
 
 <template>
   <el-form :model="formInitData" ref="formRef" v-bind="formProps" class="form">
-    <advanced-form :form="form" :formData="formInitData" v-if="advanced" />
-    <basic-form :form="form" :formData="formInitData" v-else />
+    <advanced-form :formConfig="formConfig" :formData="formInitData" v-if="advanced" />
+    <basic-form :formConfig="formConfig" :formData="formInitData" v-else />
   </el-form>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-select) {
+  width: 100%;
+}
+</style>

src/utils/request.ts

@@ -16,7 +16,7 @@ const errorHandler = (error: any) => {
   if (status === 400) {
     ElMessage.error(data.msg)
   } else if (status === 401) {
-    ElMessageBox.confirm('当前用户无权限访问当前资源，请尝试重新登录后再操作。', '无权限访问', {
+    ElMessageBox.confirm('无权限访问当前资源，请尝试重新登录后再操作。', '无权限访问', {
       type: 'error',
       closeOnClickModal: false,
       center: true,

src/views/system/user.vue

@@ -35,7 +35,7 @@ const testGetRole = () => {
 testGetRole()
 
 const form = reactive<BasicForm>({
-  span: 8,
+  span: 12,
   formItems: [
     {
       label: '用户名',
@@ -46,28 +46,23 @@ const form = reactive<BasicForm>({
       search: true
     },
     {
-      label: '手机号',
+      label: '密码',
       value: '',
-      name: 'phone',
+      name: 'password',
       type: 'input',
-      search: true
+      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
     },
     {
-      label: '性别',
-      value: '1',
-      name: 'gender',
-      type: 'radio-group',
-      options: [
-        {
-          label: '1',
-          value: '男'
-        },
-        {
-          label: '2',
-          value: '女'
-        }
-      ]
+      label: '手机号',
+      value: '',
+      name: 'phone',
+      type: 'input',
+      search: true,
+      props: {
+        maxlength: 11
+      }
     },
+
     {
       label: '角色',
       value: '',
@@ -75,8 +70,24 @@ const form = reactive<BasicForm>({
       type: 'select',
       options: []
     },
+    // {
+    //   label: '性别',
+    //   value: '1',
+    //   name: 'gender',
+    //   type: 'radio-group',
+    //   options: [
+    //     {
+    //       label: '1',
+    //       value: '男'
+    //     },
+    //     {
+    //       label: '2',
+    //       value: '女'
+    //     }
+    //   ]
+    // },
     {
-      label: '状态',
+      label: '启用',
       value: true,
       name: 'state',
       type: 'switch'
@@ -86,7 +97,7 @@ const form = reactive<BasicForm>({
 </script>
 
 <template>
-  <pro-table :crud="CRUD" :form="form">
+  <pro-table :crud="CRUD" :formConfig="form">
     <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>