From f729114cf90819fe2bb312aa6677318c92f5789c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BC=BA?= <1206709430@qq.com>
Date: Mon, 29 Mar 2021 02:33:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?!8=20=E9=85=8D=E7=BD=AEdocker-compose.yml?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F=20*=20!7=20=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AEdocker-compose.yml=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-compose.yml                            |   6 +
 .../apps/vadmin/utils/request_util.py         |   6 +-
 .../components/CommonStaticTable/index.vue    | 465 ------------------
 3 files changed, 10 insertions(+), 467 deletions(-)
 delete mode 100644 dvadmin-ui/src/components/CommonStaticTable/index.vue

diff --git a/docker-compose.yml b/docker-compose.yml
index 2df19eb..fb3d0fd 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -85,6 +85,8 @@ services:
     volumes:
       - ./dvadmin-backend:/dvadmin-backend
       - ./logs/log:/var/log
+    env_file:
+      - ./.env
     ports:
       - "8000:8000"
     expose:
@@ -115,3 +117,7 @@ services:
     restart: always
     networks:
       - dvadmin_net
+
+networks:
+  dvadmin_net:
+    driver: bridge
diff --git a/dvadmin-backend/apps/vadmin/utils/request_util.py b/dvadmin-backend/apps/vadmin/utils/request_util.py
index 6952cf0..24965ed 100644
--- a/dvadmin-backend/apps/vadmin/utils/request_util.py
+++ b/dvadmin-backend/apps/vadmin/utils/request_util.py
@@ -26,8 +26,10 @@ def get_request_user(request, authenticate=True):
     user: AbstractBaseUser = getattr(request, 'user', None)
     if user and user.is_authenticated:
         return user
-    user, tokrn = OpAuthJwtAuthentication().authenticate(request)
-    print(22, user)
+    try:
+        user, tokrn = OpAuthJwtAuthentication().authenticate(request)
+    except Exception as e:
+        pass
     return user or AnonymousUser()
 
 
diff --git a/dvadmin-ui/src/components/CommonStaticTable/index.vue b/dvadmin-ui/src/components/CommonStaticTable/index.vue
deleted file mode 100644
index fe92660..0000000
--- a/dvadmin-ui/src/components/CommonStaticTable/index.vue
+++ /dev/null
@@ -1,465 +0,0 @@
-<!--
-@description: 封装组件
--->
-<template>
-  <div style="padding-left: 10px;">
-    <el-row v-if="topLayout" style="margin-bottom: 20px">
-      <el-col v-if="topLayoutLeft" :span="18">
-        <div class="grid-content bg-purple">
-          <el-input
-            v-model="searchForm.search"
-            :disabled="tableLoading"
-            :size="$ELEMENT.size"
-            :placeholder="filterPlaceholder"
-            clearable
-            style="width: 200px;"
-            @keyup.enter.native="handleSearchFormSubmit"/>
-          <el-button
-            :size="$ELEMENT.size"
-            type="primary"
-            title="过滤"
-            @click="handleSearchFormSubmit">
-            <common-icon value="svg:icon-filter"/>
-          </el-button>
-          <el-button
-            v-show="isFilter"
-            :size="$ELEMENT.size"
-            type="info"
-            title="取消过滤"
-            style="margin-left: 0;"
-            @click="handleCancelFilter">
-            <common-icon value="svg:icon-unfilter"/>
-          </el-button>
-          <slot name="button"/>
-        </div>
-      </el-col>
-      <el-col v-if="topLayoutRight" :span="6">
-        <div class="grid-content bg-purple-light" style="text-align: right">
-          <slot name="tools"/>
-          <el-button
-            :size="$ELEMENT.size"
-            name="refresh"
-            type="info"
-            title="导出数据"
-            @click="handleExportTableData">
-            <svg-icon icon-class="icon-excel" style="font-size: 1em"/>
-          </el-button>
-          <el-popover
-            placement="bottom"
-            width="200"
-            trigger="click">
-            <div style="width: 50px;">
-              <el-checkbox-group v-model="showFields">
-                <el-checkbox
-                  v-for="(field, index) in fields"
-                  :key="index"
-                  :label="field"
-                  :checked="field.show"
-                  style="width: 100%"
-                  @change="handleSelectField($event, field)">{{ field.label }}</el-checkbox>
-              </el-checkbox-group>
-            </div>
-            <el-button
-              slot="reference"
-              :size="$ELEMENT.size"
-              name="refresh"
-              type="info"
-              icon="el-icon-s-fold"
-              title="设置显示的字段"/>
-          </el-popover>
-        </div>
-      </el-col>
-    </el-row>
-    <el-table
-      v-loading="tableLoading"
-      ref="table"
-      :data="filterData"
-      :span-method="spanMethod"
-      :max-height="maxHeight"
-      :row-key="getRowKeys"
-      :stripe="stripe"
-      :fit="fit"
-      :border="border"
-      :empty-text="emptyText"
-      :highlight-current-row="highlightCurrentRow"
-      :show-overflow-tooltip="showOverflowTooltip"
-      @cell-click="handleCellClick"
-      @cell-dblclick="handleCellDbClick"
-      @header-click="handleHeaderClick"
-      @row-click="handleRowClick"
-      @row-dblclick="handleRowDblClick"
-      @selection-change="handleSelectionChange">
-      <el-table-column
-        v-if="selection"
-        :reserve-selection="true"
-        type="selection"
-        width="50"/>
-      <template v-for="field in fields">
-        <el-table-column
-          v-if="field.show"
-          :key="field.prop"
-          :prop="field.prop"
-          :label="field.label"
-          :sortable="field.sortable"
-          :width="field.width || ''"
-          show-overflow-tooltip>
-          <template slot-scope="scope">
-            <slot :name="field.prop" :values="scope.row" :prop="field.prop" :field="field">
-              <span v-html="formatColumnData(scope.row, field)"/>
-            </slot>
-          </template>
-        </el-table-column>
-      </template>
-      <slot name="column"/>
-    </el-table>
-    <el-row>
-      <el-col :span="6" style="margin-top: 20px">
-        <span>已选择:<span style="color: #ff00ff;font-weight: bold;">{{ multipleSelection.length }}</span>条</span>
-        <el-button
-          v-show="multipleSelection.length"
-          type="info"
-          size="mini"
-          title="清空多选"
-          @click="clearMultipleSelection">清空</el-button>
-      </el-col>
-      <el-col :span="18" style="margin-top: 20px; text-align: right">
-        <span>总计:<span style="color: #ff00ff;font-weight: bold;">{{ filterData.length }}</span>条</span>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script>
-  import moment from 'moment';
-  import * as Utils from '@/utils';
-  export default {
-    name: 'CommonStaticTable',
-    props: {
-      value: {
-        type: Array,
-        default: () => []
-      },
-      spanMethod: {
-        type: Function,
-        default: null
-      },
-      data: {
-        type: Array,
-        default: () => []
-      },
-      initSelected: {
-        type: Array,
-        default: () => []
-      },
-      // eslint-disable-next-line vue/require-prop-types
-      maxHeight: {
-        default: 700
-      },
-      stripe: {
-        type: Boolean,
-        default: true
-      },
-      fit: {
-        type: Boolean,
-        default: true
-      },
-      highlightCurrentRow: {
-        type: Boolean,
-        default: true
-      },
-      showOverflowTooltip: {
-        type: Boolean,
-        default: true
-      },
-      border: {
-        type: Boolean,
-        default: false
-      },
-      emptyText: {
-        type: String,
-        default: '暂无数据'
-      },
-      topLayout: {
-        type: Array,
-        default: () => {
-          return ['left', 'right'];
-        }
-      },
-      bottomLayout: {
-        type: Array,
-        default: () => {
-          return ['left', 'right'];
-        }
-      },
-      fields: {
-        // 后端返回的字段
-        type: Array,
-        default: () => {
-          return [];
-        }
-      },
-      selection: {
-        // 开始开启多选(默认不开启, false)
-        type: Boolean,
-        default: false
-      },
-      // api 对象
-      api: {
-        type: Function,
-        default: null
-      },
-      params: {
-        type: Object,
-        default: () => {
-          return {};
-        }
-      }
-    },
-    data() {
-      return {
-        tableEditable: true,
-        showFields: [], // 显示的字段
-        filterFields: [], // 过滤的字段
-        filterPlaceholder: '过滤', // 过滤提示文字
-        buttonTagList: [], // 所有按钮标签
-        excelDialogVisible: false,
-        tableLoading: false,
-        advancedSearchForm: {},
-        advancedSearchFields: [],
-        rowKey: null,
-        multipleSelection: [],
-        excelHeader: [],
-        excelData: [],
-        searchForm: {
-          search: ''
-        },
-        getRowKeys: row => {
-          if (this.rowKey) {
-            return row[this.rowKey];
-          }
-          return row.id || row.uuid;
-        },
-        exportFields: [],
-        tableData: [],
-        filterData: [],
-        isFilter: false
-      };
-    },
-    computed: {
-      topLayoutLeft() {
-        return this.topLayout.indexOf('left') >= 0;
-      },
-      topLayoutRight() {
-        return this.topLayout.indexOf('right') >= 0;
-      }
-    },
-    watch: {
-      data: {
-        handler: function(newData, oldData) {
-          this.handleChangeTableData(newData);
-        },
-        immediate: true
-      }
-    },
-    mounted() {
-    },
-    created() {
-      this.initComponentData();
-      this.initData();
-      this.initSelect();
-    },
-    methods: {
-      initData() {
-        if (Utils.isFunction(this.api)) {
-          this.listInterfaceData();
-        }
-      },
-      initSelect() {
-        for (const row of this.initSelected) {
-          this.$refs['table'].toggleRowSelection(row, true);
-        }
-      },
-      initComponentData() {
-        this.fields.forEach(field => {
-          field.show = (!!field.show);
-          field.type = (field.type || 'string').toLocaleLowerCase();
-          field.label = field.label || field.prop;
-          field.search = (!!field.search);
-          field.sortable = (!!field.sortable);
-          field.unique = (!!field.unique);
-          field.width = field.width || '';
-          if (field.type === 'choices') {
-            if (Utils.isArray(field.choices) && field.choices.length > 0) {
-              if (!Utils.isObj(field.choices[0])) {
-                field.choices = field.choices.map(value => {
-                  return {
-                    label: value,
-                    value: value
-                  };
-                });
-              }
-            }
-          }
-          field.unique = (!!field.unique);
-          if (field.unique) {
-            this.rowKey = field.prop;
-          }
-        });
-        this.filterFields = this.fields.filter(field => field.search).map(field => field.prop);
-        if (this.filterFields.length) {
-          const text = this.fields.filter(field => field.search).map(field => field.label).join('、');
-          this.filterPlaceholder = `${text} 过滤`;
-        }
-      },
-      listInterfaceData() {
-        this.tableLoading = true;
-        this.api(this.params).then(response => {
-          this.tableLoading = false;
-          this.handleChangeTableData(response.data);
-        }).catch(() => {
-          this.tableLoading = false;
-        });
-      },
-      formatColumnData(row, field) {
-        const type = field.type || 'string';
-        const prop = field.prop;
-        if (field.formatter && typeof field.formatter === 'function') {
-          return field.formatter(row, prop, type);
-        }
-        if (type === 'string') {
-          return row[prop];
-        } else if (type === 'datetime') {
-          return this.formatDatetime(row[prop]);
-        } else if (type === 'date') {
-          return this.formatDate(row[prop]);
-        } else if (type === 'time') {
-          return this.formatTime(row[prop]);
-        } else if (type.startsWith('bool')) {
-          return row[prop] ? '是' : '否';
-        } else if (type === 'choices') {
-          const choices = field.choices;
-          return this.formatChoices(choices, row[prop]);
-        } else {
-          return row[prop];
-        }
-      },
-      formatChoices(choices, value) {
-        for (const choice of choices) {
-          if (choice.value === value) {
-            return choice.label;
-          }
-        }
-        return value;
-      },
-      formatDatetime(datetime) {
-        return moment(datetime).format('YYYY-MM-DD HH:mm:ss');
-      },
-      formatDate(date) {
-        return moment(date).format('YYYY-MM-DD');
-      },
-      formatTime(time) {
-        return moment(time).format('HH:mm:ss');
-      },
-      getMultipleSelection() {
-        return this.multipleSelection || [];
-      },
-      clearMultipleSelection() {
-        this.$refs.table.clearSelection();
-      },
-      clearSelection() {
-        this.$refs.table.clearSelection();
-      },
-      clearFilter() {
-        // 重置过滤
-        this.searchForm.search = '';
-        this.filterData = Array.from(this.tableData);
-      },
-      handleSelectField(e, field) {
-        field.show = e;
-      },
-      handleChangeTableData(data) {
-        this.tableData = Array.from(data);
-        this.filterData = Array.from(this.filterHandler(this.tableData));
-      },
-      // 导出表格的数据, 当前数据、当前列
-      handleExportTableData() {
-        this.excelDialogVisible = true;
-        this.exportFields = this.fields.map(field => {
-          return { prop: field.prop, label: field.label, show: field.show };
-        });
-        this.excelHeader = this.showFields.map(field => field['prop']);
-      },
-      // 处理修改多选的值
-      handleSelectionChange(val) {
-        this.$emit('selection-change', val);
-        this.multipleSelection = val;
-      },
-      handleSortChange(val) {
-        this.sort.prop = val.prop;
-        this.sort.order = val.order;
-        this.getTableData();
-      },
-      filterHandler(data) {
-        if (!data) {
-          data = this.tableData || [];
-        }
-        const search = this.searchForm.search.trim();
-        if (!search.length || !this.filterFields.length) {
-          this.isFilter = false;
-          return data;
-        }
-        const filterData = data.filter(row => {
-          for (const field of this.filterFields) {
-            if (row[field] && row[field].indexOf(search) >= 0) {
-              return true;
-            }
-          }
-          return false;
-        });
-        this.isFilter = true;
-        return filterData;
-      },
-      handleCellClick(row, column, cell, event) {
-        this.$emit('cell-click', row, column, cell, event);
-      },
-      handleCellDbClick(row, column, cell, event) {
-        this.$emit('cell-dblclick', row, column, cell, event);
-      },
-      handleRowClick(row, column, event) {
-        this.$emit('row-click', row, column, event);
-      },
-      handleRowDblClick(row, column, event) {
-        this.$emit('row-dblclick', row, column, event);
-      },
-      handleHeaderClick(column, event) {
-        this.$emit('header-click', column, event);
-      },
-      toggleRowSelection(row, selected = true) {
-        this.$refs.table.toggleRowSelection(row, selected);
-      },
-      toggleFilter() {
-        // 触发过滤
-        this.filterData = Array.from(this.filterHandler());
-      },
-      handleSearchFormSubmit() {
-        this.toggleFilter();
-      },
-      handleCancelFilter() {
-        this.isFilter = false;
-        this.clearFilter();
-      }
-    }
-  };
-</script>
-
-<style scoped>
-  .picker {
-    width: 240px;
-  }
-  .el-pagination {
-    padding: 5px;
-  }
-  .right_pagination {
-    text-align: right;
-    padding-top: 20px;
-  }
-</style>

From 987c147fd86d32e933a43064184eb541461322a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BC=BA?= <1206709430@qq.com>
Date: Mon, 29 Mar 2021 02:38:39 +0800
Subject: [PATCH 2/2] CommonStaticTable

---
 .../components/CommonStaticTable/index.vue    | 465 ++++++++++++++++++
 1 file changed, 465 insertions(+)
 create mode 100644 dvadmin-ui/src/components/CommonStaticTable/index.vue

diff --git a/dvadmin-ui/src/components/CommonStaticTable/index.vue b/dvadmin-ui/src/components/CommonStaticTable/index.vue
new file mode 100644
index 0000000..fe92660
--- /dev/null
+++ b/dvadmin-ui/src/components/CommonStaticTable/index.vue
@@ -0,0 +1,465 @@
+<!--
+@description: 封装组件
+-->
+<template>
+  <div style="padding-left: 10px;">
+    <el-row v-if="topLayout" style="margin-bottom: 20px">
+      <el-col v-if="topLayoutLeft" :span="18">
+        <div class="grid-content bg-purple">
+          <el-input
+            v-model="searchForm.search"
+            :disabled="tableLoading"
+            :size="$ELEMENT.size"
+            :placeholder="filterPlaceholder"
+            clearable
+            style="width: 200px;"
+            @keyup.enter.native="handleSearchFormSubmit"/>
+          <el-button
+            :size="$ELEMENT.size"
+            type="primary"
+            title="过滤"
+            @click="handleSearchFormSubmit">
+            <common-icon value="svg:icon-filter"/>
+          </el-button>
+          <el-button
+            v-show="isFilter"
+            :size="$ELEMENT.size"
+            type="info"
+            title="取消过滤"
+            style="margin-left: 0;"
+            @click="handleCancelFilter">
+            <common-icon value="svg:icon-unfilter"/>
+          </el-button>
+          <slot name="button"/>
+        </div>
+      </el-col>
+      <el-col v-if="topLayoutRight" :span="6">
+        <div class="grid-content bg-purple-light" style="text-align: right">
+          <slot name="tools"/>
+          <el-button
+            :size="$ELEMENT.size"
+            name="refresh"
+            type="info"
+            title="导出数据"
+            @click="handleExportTableData">
+            <svg-icon icon-class="icon-excel" style="font-size: 1em"/>
+          </el-button>
+          <el-popover
+            placement="bottom"
+            width="200"
+            trigger="click">
+            <div style="width: 50px;">
+              <el-checkbox-group v-model="showFields">
+                <el-checkbox
+                  v-for="(field, index) in fields"
+                  :key="index"
+                  :label="field"
+                  :checked="field.show"
+                  style="width: 100%"
+                  @change="handleSelectField($event, field)">{{ field.label }}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+            <el-button
+              slot="reference"
+              :size="$ELEMENT.size"
+              name="refresh"
+              type="info"
+              icon="el-icon-s-fold"
+              title="设置显示的字段"/>
+          </el-popover>
+        </div>
+      </el-col>
+    </el-row>
+    <el-table
+      v-loading="tableLoading"
+      ref="table"
+      :data="filterData"
+      :span-method="spanMethod"
+      :max-height="maxHeight"
+      :row-key="getRowKeys"
+      :stripe="stripe"
+      :fit="fit"
+      :border="border"
+      :empty-text="emptyText"
+      :highlight-current-row="highlightCurrentRow"
+      :show-overflow-tooltip="showOverflowTooltip"
+      @cell-click="handleCellClick"
+      @cell-dblclick="handleCellDbClick"
+      @header-click="handleHeaderClick"
+      @row-click="handleRowClick"
+      @row-dblclick="handleRowDblClick"
+      @selection-change="handleSelectionChange">
+      <el-table-column
+        v-if="selection"
+        :reserve-selection="true"
+        type="selection"
+        width="50"/>
+      <template v-for="field in fields">
+        <el-table-column
+          v-if="field.show"
+          :key="field.prop"
+          :prop="field.prop"
+          :label="field.label"
+          :sortable="field.sortable"
+          :width="field.width || ''"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            <slot :name="field.prop" :values="scope.row" :prop="field.prop" :field="field">
+              <span v-html="formatColumnData(scope.row, field)"/>
+            </slot>
+          </template>
+        </el-table-column>
+      </template>
+      <slot name="column"/>
+    </el-table>
+    <el-row>
+      <el-col :span="6" style="margin-top: 20px">
+        <span>已选择:<span style="color: #ff00ff;font-weight: bold;">{{ multipleSelection.length }}</span>条</span>
+        <el-button
+          v-show="multipleSelection.length"
+          type="info"
+          size="mini"
+          title="清空多选"
+          @click="clearMultipleSelection">清空</el-button>
+      </el-col>
+      <el-col :span="18" style="margin-top: 20px; text-align: right">
+        <span>总计:<span style="color: #ff00ff;font-weight: bold;">{{ filterData.length }}</span>条</span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+  import moment from 'moment';
+  import * as Utils from '@/utils';
+  export default {
+    name: 'CommonStaticTable',
+    props: {
+      value: {
+        type: Array,
+        default: () => []
+      },
+      spanMethod: {
+        type: Function,
+        default: null
+      },
+      data: {
+        type: Array,
+        default: () => []
+      },
+      initSelected: {
+        type: Array,
+        default: () => []
+      },
+      // eslint-disable-next-line vue/require-prop-types
+      maxHeight: {
+        default: 700
+      },
+      stripe: {
+        type: Boolean,
+        default: true
+      },
+      fit: {
+        type: Boolean,
+        default: true
+      },
+      highlightCurrentRow: {
+        type: Boolean,
+        default: true
+      },
+      showOverflowTooltip: {
+        type: Boolean,
+        default: true
+      },
+      border: {
+        type: Boolean,
+        default: false
+      },
+      emptyText: {
+        type: String,
+        default: '暂无数据'
+      },
+      topLayout: {
+        type: Array,
+        default: () => {
+          return ['left', 'right'];
+        }
+      },
+      bottomLayout: {
+        type: Array,
+        default: () => {
+          return ['left', 'right'];
+        }
+      },
+      fields: {
+        // 后端返回的字段
+        type: Array,
+        default: () => {
+          return [];
+        }
+      },
+      selection: {
+        // 开始开启多选(默认不开启, false)
+        type: Boolean,
+        default: false
+      },
+      // api 对象
+      api: {
+        type: Function,
+        default: null
+      },
+      params: {
+        type: Object,
+        default: () => {
+          return {};
+        }
+      }
+    },
+    data() {
+      return {
+        tableEditable: true,
+        showFields: [], // 显示的字段
+        filterFields: [], // 过滤的字段
+        filterPlaceholder: '过滤', // 过滤提示文字
+        buttonTagList: [], // 所有按钮标签
+        excelDialogVisible: false,
+        tableLoading: false,
+        advancedSearchForm: {},
+        advancedSearchFields: [],
+        rowKey: null,
+        multipleSelection: [],
+        excelHeader: [],
+        excelData: [],
+        searchForm: {
+          search: ''
+        },
+        getRowKeys: row => {
+          if (this.rowKey) {
+            return row[this.rowKey];
+          }
+          return row.id || row.uuid;
+        },
+        exportFields: [],
+        tableData: [],
+        filterData: [],
+        isFilter: false
+      };
+    },
+    computed: {
+      topLayoutLeft() {
+        return this.topLayout.indexOf('left') >= 0;
+      },
+      topLayoutRight() {
+        return this.topLayout.indexOf('right') >= 0;
+      }
+    },
+    watch: {
+      data: {
+        handler: function(newData, oldData) {
+          this.handleChangeTableData(newData);
+        },
+        immediate: true
+      }
+    },
+    mounted() {
+    },
+    created() {
+      this.initComponentData();
+      this.initData();
+      this.initSelect();
+    },
+    methods: {
+      initData() {
+        if (Utils.isFunction(this.api)) {
+          this.listInterfaceData();
+        }
+      },
+      initSelect() {
+        for (const row of this.initSelected) {
+          this.$refs['table'].toggleRowSelection(row, true);
+        }
+      },
+      initComponentData() {
+        this.fields.forEach(field => {
+          field.show = (!!field.show);
+          field.type = (field.type || 'string').toLocaleLowerCase();
+          field.label = field.label || field.prop;
+          field.search = (!!field.search);
+          field.sortable = (!!field.sortable);
+          field.unique = (!!field.unique);
+          field.width = field.width || '';
+          if (field.type === 'choices') {
+            if (Utils.isArray(field.choices) && field.choices.length > 0) {
+              if (!Utils.isObj(field.choices[0])) {
+                field.choices = field.choices.map(value => {
+                  return {
+                    label: value,
+                    value: value
+                  };
+                });
+              }
+            }
+          }
+          field.unique = (!!field.unique);
+          if (field.unique) {
+            this.rowKey = field.prop;
+          }
+        });
+        this.filterFields = this.fields.filter(field => field.search).map(field => field.prop);
+        if (this.filterFields.length) {
+          const text = this.fields.filter(field => field.search).map(field => field.label).join('、');
+          this.filterPlaceholder = `${text} 过滤`;
+        }
+      },
+      listInterfaceData() {
+        this.tableLoading = true;
+        this.api(this.params).then(response => {
+          this.tableLoading = false;
+          this.handleChangeTableData(response.data);
+        }).catch(() => {
+          this.tableLoading = false;
+        });
+      },
+      formatColumnData(row, field) {
+        const type = field.type || 'string';
+        const prop = field.prop;
+        if (field.formatter && typeof field.formatter === 'function') {
+          return field.formatter(row, prop, type);
+        }
+        if (type === 'string') {
+          return row[prop];
+        } else if (type === 'datetime') {
+          return this.formatDatetime(row[prop]);
+        } else if (type === 'date') {
+          return this.formatDate(row[prop]);
+        } else if (type === 'time') {
+          return this.formatTime(row[prop]);
+        } else if (type.startsWith('bool')) {
+          return row[prop] ? '是' : '否';
+        } else if (type === 'choices') {
+          const choices = field.choices;
+          return this.formatChoices(choices, row[prop]);
+        } else {
+          return row[prop];
+        }
+      },
+      formatChoices(choices, value) {
+        for (const choice of choices) {
+          if (choice.value === value) {
+            return choice.label;
+          }
+        }
+        return value;
+      },
+      formatDatetime(datetime) {
+        return moment(datetime).format('YYYY-MM-DD HH:mm:ss');
+      },
+      formatDate(date) {
+        return moment(date).format('YYYY-MM-DD');
+      },
+      formatTime(time) {
+        return moment(time).format('HH:mm:ss');
+      },
+      getMultipleSelection() {
+        return this.multipleSelection || [];
+      },
+      clearMultipleSelection() {
+        this.$refs.table.clearSelection();
+      },
+      clearSelection() {
+        this.$refs.table.clearSelection();
+      },
+      clearFilter() {
+        // 重置过滤
+        this.searchForm.search = '';
+        this.filterData = Array.from(this.tableData);
+      },
+      handleSelectField(e, field) {
+        field.show = e;
+      },
+      handleChangeTableData(data) {
+        this.tableData = Array.from(data);
+        this.filterData = Array.from(this.filterHandler(this.tableData));
+      },
+      // 导出表格的数据, 当前数据、当前列
+      handleExportTableData() {
+        this.excelDialogVisible = true;
+        this.exportFields = this.fields.map(field => {
+          return { prop: field.prop, label: field.label, show: field.show };
+        });
+        this.excelHeader = this.showFields.map(field => field['prop']);
+      },
+      // 处理修改多选的值
+      handleSelectionChange(val) {
+        this.$emit('selection-change', val);
+        this.multipleSelection = val;
+      },
+      handleSortChange(val) {
+        this.sort.prop = val.prop;
+        this.sort.order = val.order;
+        this.getTableData();
+      },
+      filterHandler(data) {
+        if (!data) {
+          data = this.tableData || [];
+        }
+        const search = this.searchForm.search.trim();
+        if (!search.length || !this.filterFields.length) {
+          this.isFilter = false;
+          return data;
+        }
+        const filterData = data.filter(row => {
+          for (const field of this.filterFields) {
+            if (row[field] && row[field].indexOf(search) >= 0) {
+              return true;
+            }
+          }
+          return false;
+        });
+        this.isFilter = true;
+        return filterData;
+      },
+      handleCellClick(row, column, cell, event) {
+        this.$emit('cell-click', row, column, cell, event);
+      },
+      handleCellDbClick(row, column, cell, event) {
+        this.$emit('cell-dblclick', row, column, cell, event);
+      },
+      handleRowClick(row, column, event) {
+        this.$emit('row-click', row, column, event);
+      },
+      handleRowDblClick(row, column, event) {
+        this.$emit('row-dblclick', row, column, event);
+      },
+      handleHeaderClick(column, event) {
+        this.$emit('header-click', column, event);
+      },
+      toggleRowSelection(row, selected = true) {
+        this.$refs.table.toggleRowSelection(row, selected);
+      },
+      toggleFilter() {
+        // 触发过滤
+        this.filterData = Array.from(this.filterHandler());
+      },
+      handleSearchFormSubmit() {
+        this.toggleFilter();
+      },
+      handleCancelFilter() {
+        this.isFilter = false;
+        this.clearFilter();
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .picker {
+    width: 240px;
+  }
+  .el-pagination {
+    padding: 5px;
+  }
+  .right_pagination {
+    text-align: right;
+    padding-top: 20px;
+  }
+</style>