proTable增加查看功能

src/components/core/ProTable.vue

@@ -14,6 +14,7 @@ import { buildFormSlots } from '@/utils/utils'
 interface CustomTable {
   showOperate?: boolean
   showEdit?: boolean
+  showView?: boolean
   showDelete?: boolean
   operateWidth?: number
 }
@@ -36,7 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
   showToolbar: true
 })
 
-const emits = defineEmits(['click-create', 'click-edit', 'checkbox-change'])
+const emits = defineEmits(['click-create', 'click-edit', 'click-view', 'checkbox-change'])
 
 const slots = useSlots()
 
@@ -78,6 +79,7 @@ const curPage = ref(1)
 const loading = ref(false)
 const tableConfig = computed<CustomTable>(() => ({
   showOperate: true,
+  showView: false,
   showEdit: true,
   showDelete: true,
   operateWidth: 140,
@@ -156,6 +158,23 @@ const handleUpdate = (row: any) => {
     } else {
       formData.value = { ...row }
     }
+    props.formConfig.disabled = false
+    dialogVisible.value = true
+  }
+}
+const handleView = (row: any) => {
+  emits('click-view', row)
+  if (formRoute.value) {
+    router.push(formRoute.value)
+  } else {
+    if (props.crud?.getRecord) {
+      props.crud.getRecord({ id: row.id }).then((res: any) => {
+        formData.value = res.data
+      })
+    } else {
+      formData.value = { ...row }
+    }
+    props.formConfig.disabled = true
     dialogVisible.value = true
   }
 }
@@ -163,12 +182,16 @@ const handleDelete = (id: string | number) => {
   ElMessageBox.confirm('您确定要删除该项吗', '提示', {
     type: 'warning'
   }).then(async () => {
-    await props.crud?.delete({ id })
-    getTableData()
-    ElMessage({
-      type: 'success',
-      message: '删除成功'
-    })
+    const data = await props.crud?.delete({ id })
+    if (data.success || data.code === 200) {
+      getTableData()
+      ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+    } else {
+      ElMessage.error(data.msg)
+    }
   })
 }
 const handleBatchDelete = () => {
@@ -176,14 +199,18 @@ const handleBatchDelete = () => {
     type: 'warning'
   }).then(async () => {
     if (props.crud.deleteBatch) {
-      await props.crud?.deleteBatch({
+      const data = await props.crud?.deleteBatch({
         ids: multipleSelection.value.map(item => item.id).join(',')
       })
-      getTableData()
-      ElMessage({
-        type: 'success',
-        message: '删除成功'
-      })
+      if (data.success || data.code === 200) {
+        getTableData()
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        })
+      } else {
+        ElMessage.error(data.msg)
+      }
     } else {
       ElMessage({
         type: 'error',
@@ -210,6 +237,7 @@ defineExpose({
   handleCreate,
   handleDelete,
   handleUpdate,
+  handleView,
   refresh,
   formData
 })
@@ -270,6 +298,9 @@ defineExpose({
             <vxe-column fixed="right" title="操作" :width="tableConfig.operateWidth" v-if="tableConfig.showOperate">
               <template #default="{ row }">
                 <slot name="operateBefore" :row="row"></slot>
+                <el-button type="success" size="small" @click="handleView(row)" v-if="tableConfig.showView">
+                  查看
+                </el-button>
                 <el-button type="primary" size="small" @click="handleUpdate(row)" v-if="tableConfig.showEdit">
                   编辑
                 </el-button>
@@ -303,7 +334,7 @@ defineExpose({
       :create="crud.create"
       :update="crud.update"
       @success="handleFormSuccess"
-      v-if="dialogVisible"
+      destroy-on-close
     >
       <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
         <slot :name="slot.alias" v-bind="slotProps"></slot>

src/components/core/form/DialogForm.vue

@@ -29,7 +29,13 @@ if (!props.formSlots) {
   buildFormSlots(props.formConfig.formItems, formSlots.value)
 }
 
-const dialogTitle = computed(() => (props.formData.id ? '编辑' : '新增'))
+const dialogTitle = computed(() => {
+  if (props.formConfig.disabled) {
+    return '查看'
+  } else {
+    return props.formData.id ? '编辑' : '新增'
+  }
+})
 const dialogVisible = computed({
   get: () => props.modelValue,
   set: value => emits('update:modelValue', value)
@@ -72,7 +78,7 @@ const submit = async () => {
       </template>
     </pro-form>
 
-    <template #footer>
+    <template #footer v-if="!formConfig.disabled">
       <el-button icon="Close" @click="closeDialog">取消</el-button>
       <el-button icon="Check" type="primary" @click="submit">保存</el-button>
     </template>

src/components/core/form/ProForm.vue

@@ -65,7 +65,15 @@ defineExpose({
 </script>
 
 <template>
-  <el-form :model="formInitData" ref="formRef" status-icon scrollToError v-bind="formProps" class="form">
+  <el-form
+    :model="formInitData"
+    :disabled="formConfig.disabled"
+    ref="formRef"
+    status-icon
+    scrollToError
+    v-bind="formProps"
+    class="form"
+  >
     <basic-form :formConfig="formConfig" :formData="formInitData">
       <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
         <slot :name="slot.alias" v-bind="slotProps"></slot>

src/types/form.ts

@@ -36,6 +36,7 @@ type Form = {
   props?: Partial<FormProps>
   route?: any
   span?: number
+  disabled?: boolean
 }
 
 export type BasicForm = Form & {