封装搜索、表格、新增表单

2022-01-19 17:53:19 +08:00
parent fa0e712ccf
commit e634323ff3
9 changed files with 744 additions and 2 deletions
@@ -0,0 +1,83 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <search :searchList="searchList"/>
+    </div>
+    <div class="table-operator">
+      <a-button @click="handleCompare()" type="primary" icon="plus">{{$t('DataComparison')}}</a-button>
+    </div>
+    <div>
+      <tableData edit del :url="{}"/>
+    </div>
+    <addForm ref="addFormClick"/>
+  </a-card>
+</template>
+
+<script>
+  import search from '@/components/search/index'
+  import tableData from '@/components/tableDate/index'
+  import { JeroListMixin } from '@/mixins/JeroListMixin'
+  import addForm from './modules/addForm'
+
+  export default {
+    name: 'index',
+    // mixins: [JeroListMixin],
+    components: {
+      search,
+      addForm,
+      tableData
+    },
+    data() {
+      return {
+        searchList: [
+          { name: '名称', placeholder: '请输入姓名', attrModel: 'name', enName: 'title' },
+          { name: '标题', placeholder: '请输入标题', attrModel: 'title', enName: 'title' }
+        ],
+        selectedRowKeys: [],
+        dataSource: [],
+        loading: false,
+        columns: [
+          {
+            title: this.$t('tableName'),
+            align: 'center',
+            dataIndex: 'dataTable',
+            width: '120'
+          }, {
+            title: this.$t('DataID'),
+            align: 'center',
+            dataIndex: 'dataId',
+            width: '120'
+          }, {
+            title: this.$t('VersionNumber'),
+            align: 'center',
+            dataIndex: 'dataVersion',
+            width: '50'
+          }, {
+            title: this.$t('DataContent'),
+            align: 'center',
+            dataIndex: 'dataContent',
+            width: '150',
+            scopedSlots: { customRender: 'dataContent' }
+          }, {
+            title: this.$t('creator'),
+            align: 'center',
+            dataIndex: 'createBy',
+            width: '100'
+          }
+        ]
+      }
+    },
+    methods: {
+      onSelectChange() {
+
+      },
+      handleCompare() {
+        this.$refs.addFormClick.add()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,72 @@
+<template>
+  <a-drawer
+    :title="title"
+    :maskClosable="true"
+    :width="drawerWidth"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    style="height: 100%;overflow: auto;padding-bottom: 53px;">
+    <addFormData
+      ref="addFormDataRef"
+      v-if="visible"
+      :url="url"
+    />
+    <div class="drawer-bootom-button">
+      <a-popconfirm :title="$t('AreYouWantDiscardEditing')" @confirm="handleCancel" :okText="$t('determine')"
+                    :cancelText="$t('cancel')">
+        <a-button style="margin-right: .8rem">{{$t('cancel')}}</a-button>
+      </a-popconfirm>
+      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+  import addFormData from '@/components/addForm/index'
+
+  export default {
+    name: 'addForm',
+    components: {
+      addFormData
+    },
+    data() {
+      return {
+        title: '添加',
+        drawerWidth: 1000,
+        visible: false,
+        confirmLoading: false,
+        url: {}
+      }
+    },
+    methods: {
+      handleCancel() {
+        this.visible = false
+      },
+      add() {
+        this.visible = true
+      },
+      edit() {
+        this.visible = true
+      },
+      handleSubmit() {
+           this.$refs.addFormDataRef.sumber()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+</style>