From 48e4027525abc85e8e2ced241114971c59f03de2 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 19 Dec 2024 11:07:47 +0800
Subject: [PATCH] perf: update draw

---
 src/components/Form/DataForm/index.vue        |  16 +-
 .../Table/DrawerListTable/PageDrawer.vue      |  96 +++++++++
 .../Table/DrawerListTable/index.vue           | 188 ++++++++++++++++++
 .../GenericListDrawerPage/index.vue           | 169 +---------------
 4 files changed, 308 insertions(+), 161 deletions(-)
 create mode 100644 src/components/Table/DrawerListTable/PageDrawer.vue
 create mode 100644 src/components/Table/DrawerListTable/index.vue

diff --git a/src/components/Form/DataForm/index.vue b/src/components/Form/DataForm/index.vue
index 7b71c4e29..73d2d2b73 100644
--- a/src/components/Form/DataForm/index.vue
+++ b/src/components/Form/DataForm/index.vue
@@ -5,7 +5,7 @@
     :class="mobile ? 'mobile' : 'desktop'"
     :content="fields"
     :form="basicForm"
-    :label-position="labelPosition"
+    :label-position="iLabelPosition"
     label-width="25%"
     v-bind="$attrs"
     v-on="$listeners"
@@ -121,6 +121,10 @@ export default {
     isSubmitting: {
       type: Boolean,
       default: false
+    },
+    labelPosition: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -137,8 +141,14 @@ export default {
     mobile() {
       return this.$store.state.app.device === 'mobile'
     },
-    labelPosition() {
-      return this.mobile ? 'top' : 'right'
+    drawer() {
+      return this.$store.state.common.inDrawer
+    },
+    iLabelPosition() {
+      if (this.labelPosition) {
+        return this.labelPosition
+      }
+      return this.drawer || this.mobile ? 'top' : 'right'
     }
   },
   mounted() {
diff --git a/src/components/Table/DrawerListTable/PageDrawer.vue b/src/components/Table/DrawerListTable/PageDrawer.vue
new file mode 100644
index 000000000..25afe94b7
--- /dev/null
+++ b/src/components/Table/DrawerListTable/PageDrawer.vue
@@ -0,0 +1,96 @@
+<template>
+  <Drawer
+    :component="component"
+    :component-listeners="listener"
+    :size="drawerSize"
+    :title="title"
+    :visible.sync="iVisible"
+    append-to-body
+    class="form-drawer"
+    destroy-on-close
+    v-bind="props"
+    @close="closeDrawer"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import Drawer from '@/components/Drawer/index.vue'
+
+export default {
+  components: { Drawer },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    component: {
+      type: [String, Function],
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => ({})
+    },
+    action: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      listener: {
+        'close-drawer': () => {
+          this.iVisible = false
+        },
+        ...this.$listeners
+      }
+    }
+  },
+  computed: {
+    drawerSize() {
+      const width = window.innerWidth
+      if (width >= 768) return '800px'
+      return '90%'
+    },
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  methods: {
+    closeDrawer() {
+      this.iVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-drawer {
+  /* 可自定义样式 */
+
+  ::v-deep {
+    .el-card.ibox {
+      //border: none;
+    }
+
+    .el-drawer__header {
+      //border-bottom: 1px solid #EBEEF5;
+      margin-bottom: 10px;
+      padding-top: 10px;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--color-text-primary);
+    }
+  }
+}
+</style>
diff --git a/src/components/Table/DrawerListTable/index.vue b/src/components/Table/DrawerListTable/index.vue
new file mode 100644
index 000000000..1ab52f809
--- /dev/null
+++ b/src/components/Table/DrawerListTable/index.vue
@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <ListTable
+      ref="ListTable"
+      :header-actions="iHeaderActions"
+      :table-config="iTableConfig"
+      v-bind="$attrs"
+    />
+    <PageDrawer
+      v-if="drawerVisible"
+      :action="action"
+      :component="drawerComponent"
+      :props="drawerProps"
+      :title="drawerTitle"
+      :visible.sync="drawerVisible"
+      class="page-drawer"
+      @reload-table="reloadTable"
+    />
+  </div>
+</template>
+
+<script>
+import ListTable from '../ListTable'
+import PageDrawer from './PageDrawer.vue'
+import { toSentenceCase } from '@/utils/common'
+
+const drawerType = [String, Function]
+
+export default {
+  name: 'GenericListPage',
+  components: {
+    ListTable, PageDrawer
+  },
+  props: {
+    detailDrawer: {
+      type: drawerType,
+      default: ''
+    },
+    createDrawer: {
+      type: drawerType,
+      default: ''
+    },
+    updateDrawer: {
+      type: drawerType,
+      default: ''
+    },
+    tableConfig: {
+      type: Object,
+      required: true
+    },
+    headerActions: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      drawerVisible: false,
+      drawerComponent: '',
+      drawerProps: {},
+      iHeaderActions: {},
+      iTableConfig: {},
+      action: '',
+      iCreateDrawer: this.createDrawer,
+      iUpdateDrawer: this.updateDrawer,
+      iDetailDrawer: this.detailDrawer
+    }
+  },
+  computed: {
+    drawerTitle() {
+      let title = this.title || this.$route.meta.title
+      if (!title) {
+        title = this.$t('NoTitle')
+      }
+      title = toSentenceCase(this.action) + ' ' + title.toLowerCase()
+      return title
+    }
+  },
+  watch: {
+    drawerVisible(val) {
+      if (!val) {
+        this.$store.dispatch('common/cleanDrawerActionMeta')
+      }
+    }
+  },
+  mounted() {
+    if (!this.createDrawer) {
+      this.iCreateDrawer = this.getDefaultDrawer('create')
+    }
+    if (!this.updateDrawer) {
+      this.iUpdateDrawer = this.getDefaultDrawer('update')
+    }
+    if (!this.detailDrawer) {
+      this.iDetailDrawer = this.getDefaultDrawer('detail')
+    }
+  },
+  created() {
+    this.iHeaderActions = {
+      ...this.headerActions,
+      onCreate: this.onCreate
+    }
+    this.iTableConfig = {
+      ...this.tableConfig
+    }
+    _.set(this.iTableConfig, 'columnsMeta.actions.formatterArgs.onUpdate', this.onUpdate)
+    _.set(this.iTableConfig, 'columnsMeta.actions.formatterArgs.onClone', this.onClone)
+    _.set(this.iTableConfig, 'columnsMeta.name.formatterArgs.onClick', this.onDetail)
+  },
+  methods: {
+    getDefaultDrawer(action) {
+      const route = this.$route.name
+      const actionRouteName = route.replace('List', toSentenceCase(action))
+      return this.getRouteNameComponent(actionRouteName)
+    },
+    getRouteNameComponent(name) {
+      const routes = this.$router.resolve({ name: name })
+      if (!routes) {
+        return
+      }
+      const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
+      if (matched.length === 0) {
+        return
+      }
+
+      if (matched[0] && matched[0].components?.default) {
+        return matched[0].components.default
+      }
+    },
+    onCreate() {
+      this.action = 'create'
+      this.drawerComponent = this.iCreateDrawer
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'create'
+      }).then(() => {
+        this.drawerVisible = true
+      })
+    },
+    reloadTable() {
+      this.$refs.ListTable.reloadTable()
+    },
+    onClone({ row, col }) {
+      this.drawerComponent = this.iCreateDrawer
+      this.action = 'clone'
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'clone',
+        row: row,
+        col: col
+      }).then(() => {
+        this.drawerVisible = true
+      })
+    },
+    onUpdate({ row, col }) {
+      this.action = 'update'
+      let updateDrawer = this.iUpdateDrawer
+      if (!updateDrawer) {
+        updateDrawer = this.iCreateDrawer
+      }
+      this.drawerComponent = updateDrawer
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'update',
+        row: row,
+        col: col
+      }).then(() => {
+        this.drawerVisible = true
+      })
+    },
+    onDetail({ row, cellValue }) {
+      this.action = 'detail'
+      this.drawerComponent = this.iDetailDrawer
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'detail',
+        row: row,
+        cellValue: cellValue
+      }).then(() => {
+        this.drawerVisible = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.page-drawer ::v-deep .form-group-header {
+  margin-left: 1px;
+}
+
+</style>
diff --git a/src/layout/components/GenericListDrawerPage/index.vue b/src/layout/components/GenericListDrawerPage/index.vue
index c3104fbab..5f7a41d24 100644
--- a/src/layout/components/GenericListDrawerPage/index.vue
+++ b/src/layout/components/GenericListDrawerPage/index.vue
@@ -1,51 +1,25 @@
 <template>
-  <div>
-    <Page v-bind="$attrs">
-      <GenericListTable
-        ref="ListTable"
-        :header-actions="iHeaderActions"
-        :table-config="iTableConfig"
-        v-bind="$attrs"
-      />
-    </Page>
-    <PageDrawer
-      v-if="drawerVisible"
-      :action="action"
-      :component="drawerComponent"
-      :props="drawerProps"
-      :title="drawerTitle"
-      :visible.sync="drawerVisible"
-      @reload-table="reloadTable"
+  <Page v-bind="$attrs">
+    <DrawerListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      v-bind="$attrs"
+      v-on="$listeners"
     />
-  </div>
+  </Page>
 </template>
 
 <script>
 import Page from '@/layout/components/Page'
-import GenericListTable from '@/layout/components/GenericListTable'
-import PageDrawer from './PageDrawer.vue'
-import { toSentenceCase } from '@/utils/common'
-
-const drawerType = [String, Function]
+import DrawerListTable from '@/components/Table/DrawerListTable/index'
 
 export default {
   name: 'GenericListPage',
   components: {
-    Page, GenericListTable, PageDrawer
+    Page, DrawerListTable
   },
   props: {
-    detailDrawer: {
-      type: drawerType,
-      default: ''
-    },
-    createDrawer: {
-      type: drawerType,
-      default: ''
-    },
-    updateDrawer: {
-      type: drawerType,
-      default: ''
-    },
     tableConfig: {
       type: Object,
       required: true
@@ -56,128 +30,7 @@ export default {
     }
   },
   data() {
-    return {
-      visible: false,
-      drawerVisible: false,
-      drawerComponent: '',
-      drawerProps: {},
-      iHeaderActions: {},
-      iTableConfig: {},
-      action: '',
-      iCreateDrawer: this.createDrawer,
-      iUpdateDrawer: this.updateDrawer,
-      iDetailDrawer: this.detailDrawer
-    }
-  },
-  computed: {
-    drawerTitle() {
-      let title = this.title || this.$route.meta.title
-      if (!title) {
-        title = this.$t('NoTitle')
-      }
-      title = toSentenceCase(this.action) + ' ' + title.toLowerCase()
-      return title
-    }
-  },
-  watch: {
-    drawerVisible(val) {
-      if (!val) {
-        this.$store.dispatch('common/cleanDrawerActionMeta')
-      }
-    }
-  },
-  mounted() {
-    if (!this.createDrawer) {
-      this.iCreateDrawer = this.getDefaultDrawer('create')
-    }
-    if (!this.updateDrawer) {
-      this.iUpdateDrawer = this.getDefaultDrawer('update')
-    }
-    if (!this.detailDrawer) {
-      this.iDetailDrawer = this.getDefaultDrawer('detail')
-    }
-  },
-  created() {
-    this.iHeaderActions = {
-      ...this.headerActions,
-      onCreate: this.onCreate
-    }
-    this.iTableConfig = {
-      ...this.tableConfig
-    }
-    _.set(this.iTableConfig, 'columnsMeta.actions.formatterArgs.onUpdate', this.onUpdate)
-    _.set(this.iTableConfig, 'columnsMeta.actions.formatterArgs.onClone', this.onClone)
-    _.set(this.iTableConfig, 'columnsMeta.name.formatterArgs.onClick', this.onDetail)
-  },
-  methods: {
-    getDefaultDrawer(action) {
-      const route = this.$route.name
-      const actionRouteName = route.replace('List', toSentenceCase(action))
-      return this.getRouteNameComponent(actionRouteName)
-    },
-    getRouteNameComponent(name) {
-      const routes = this.$router.resolve({ name: name })
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
-      if (matched.length === 0) {
-        return
-      }
-
-      if (matched[0] && matched[0].components?.default) {
-        return matched[0].components.default
-      }
-    },
-    onCreate() {
-      this.action = 'create'
-      this.drawerComponent = this.iCreateDrawer
-      this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'create'
-      }).then(() => {
-        this.drawerVisible = true
-      })
-    },
-    reloadTable() {
-      this.$refs.ListTable.reloadTable()
-    },
-    onClone({ row, col }) {
-      this.drawerComponent = this.iCreateDrawer
-      this.action = 'clone'
-      this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'clone',
-        row: row,
-        col: col
-      }).then(() => {
-        this.drawerVisible = true
-      })
-    },
-    onUpdate({ row, col }) {
-      this.action = 'update'
-      let updateDrawer = this.iUpdateDrawer
-      if (!updateDrawer) {
-        updateDrawer = this.iCreateDrawer
-      }
-      this.drawerComponent = updateDrawer
-      this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'update',
-        row: row,
-        col: col
-      }).then(() => {
-        this.drawerVisible = true
-      })
-    },
-    onDetail({ row, cellValue }) {
-      this.action = 'detail'
-      this.drawerComponent = this.iDetailDrawer
-      this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'detail',
-        row: row,
-        cellValue: cellValue
-      }).then(() => {
-        this.drawerVisible = true
-      })
-    }
+    return {}
   }
 }
 </script>