ylwl-cpscoms 1.0.0 → 1.1.0

package/src/DtTable/index.vue

@@ -0,0 +1,779 @@
+<!-- eslint-disable vue/no-use-v-if-with-v-for -->
+<template>
+  <div class="dt_table">
+    <!-- 表格 -->
+    <el-form ref="formRef" :model="formModel" :rules="formRules" :validate-on-rule-change="false" size="small">
+      <el-table
+        ref="tableRef"
+        :data="formModel.tableData"
+        :style="{
+          width: gridOptions.scroll && gridOptions.scroll.x ? `${gridOptions.scroll.x}` : '100%',
+          minWidth: '100%'
+        }"
+        size="small"
+        border
+        :max-height="(gridOptions.scroll && gridOptions.scroll.y) || 400"
+        :min-height="(gridOptions.scroll && gridOptions.scroll.y) || 400"
+        v-bind="$attrs"
+        @selection-change="handleSelectionChange"
+      >
+        <!-- 空状态 -->
+        <template slot="empty">
+          <el-empty description="暂无数据" />
+        </template>
+
+        <!-- 多选列 -->
+        <el-table-column
+          v-if="hasSelectionColumn"
+          type="selection"
+          width="55"
+          align="center"
+        />
+
+        <!-- 数据列 -->
+        <el-table-column v-for="column in gridOptions.columns" v-if="!column.hidden && column.field !== 'selection'" :key="column.field" :label="column.title" :prop="column.field" v-bind="column.attrs || {}">
+          <!-- 自定义表头 -->
+          <template slot="header">
+            <span class="dt_table_header">
+              <span v-if="column.rules" class="dt_required_dot">*</span>
+              {{ column.title }}
+            </span>
+          </template>
+
+          <!-- 单元格内容 -->
+          <template slot-scope="scope">
+            <!-- 自定义渲染 -->
+            <template v-if="column.editor === 'custom' && column.render">
+              <template v-if="isVNode(callRender(column, scope))">
+                <vnode-component :vnode="callRender(column, scope)" />
+              </template>
+              <template v-else>
+                {{ callRender(column, scope) }}
+              </template>
+            </template>
+
+            <!-- 表单编辑器 -->
+            <template v-else>
+              <el-form-item :prop="`tableData.${scope.$index}.${column.field}`" :rules="column.rules">
+                <!-- 选择器 -->
+                <el-select v-if="column.editor === 'select'" v-model="scope.row[column.field]" :placeholder="column.placeholder || '请选择'" :disabled="getFieldDisabled(column, scope.row, scope.$index)" :remote="column.remote" :loading="scope.row[`${column.field}Loading`]" :filterable="true" v-bind="column.attrs || {}" @change="(value) => handleSelectChange(column, value, scope.row, scope.$index)" @focus="(event) => handleFocus(column, event, scope.row)" @blur="(event) => handleBlur(column, event, scope.row, scope.$index)" @clear="handleClear(column, scope.row, scope.$index)">
+                  <el-option v-for="option in getOptions(column, scope.row)" :key="option.value" :label="column.labelKey ? option[column.labelKey] : option.label" :value="column.valueKey ? option[column.valueKey] : option.value" />
+                </el-select>
+
+                <!-- 输入框 -->
+                <el-input v-else-if="column.editor === 'input'" v-model="scope.row[column.field]" :placeholder="column.placeholder || '请输入'" :disabled="getFieldDisabled(column, scope.row, scope.$index)" v-bind="column.attrs || {}" @change="(value) => handleInputChange(column, value, scope.row, scope.$index)" @focus="(event) => handleFocus(column, event, scope.row)" @blur="(event) => handleBlur(column, event, scope.row, scope.$index)" />
+
+                <!-- 数字输入框 -->
+                <div v-else-if="column.editor === 'input-number'" style="display: flex; justify-content: space-between; align-items: center">
+                  <el-input-number v-model="scope.row[column.field]" :placeholder="column.placeholder || '请输入数字'" :disabled="getFieldDisabled(column, scope.row, scope.$index)" :min="getMinValue(column, scope.row, scope.$index)" :max="getMaxValue(column, scope.row, scope.$index)" :step="column.step || 1" :precision="column.precision" :controls-position="column.controlsPosition || ''" style="width: 100%" v-bind="column.attrs || {}" @change="(value) => handleInputNumberChange(column, value, scope.row, scope.$index)" @focus="(event) => handleFocus(column, event, scope.row)" @blur="(event) => handleBlur(column, event, scope.row, scope.$index)" />
+                  <component :is="getAppendComponent(column, scope)" />
+                </div>
+
+                <!-- 开关 -->
+                <el-switch v-else-if="column.editor === 'switch'" v-model="scope.row[column.field]" :disabled="getFieldDisabled(column, scope.row, scope.$index)" @change="(value) => handleSwitchChange(column, value, scope.row, scope.$index)" />
+
+                <!-- 时间选择器 -->
+                <el-time-picker v-else-if="column.editor === 'time'" v-model="scope.row[column.field]" :placeholder="column.placeholder || '选择时间'" :disabled="getFieldDisabled(column, scope.row, scope.$index)" v-bind="column.attrs || {}" @change="(value) => handleTimeChange(column, value, scope.row, scope.$index)" @focus="(event) => handleFocus(column, event, scope.row)" @blur="(event) => handleBlur(column, event, scope.row, scope.$index)" @clear="handleClear(column, scope.row, scope.$index)" />
+
+                <!-- 日期选择器 -->
+                <el-date-picker v-else-if="column.editor === 'date'" v-model="scope.row[column.field]" :placeholder="column.placeholder || '选择日期'" :disabled="getFieldDisabled(column, scope.row, scope.$index)" v-bind="column.attrs || {}" @change="(value) => handleDateChange(column, value, scope.row, scope.$index)" @focus="(event) => handleFocus(column, event, scope.row)" @blur="(event) => handleBlur(column, event, scope.row, scope.$index)" @clear="handleClear(column, scope.row, scope.$index)" />
+
+                <!-- 日期时间选择器 -->
+                <el-date-picker v-else-if="column.editor === 'datetime'" v-model="scope.row[column.field]" type="datetime" :placeholder="column.placeholder || '选择日期时间'" :disabled="getFieldDisabled(column, scope.row, scope.$index)" v-bind="column.attrs || {}" @change="(value) => handleDateTimeChange(column, value, scope.row, scope.$index)" @focus="(event) => handleFocus(column, event, scope.row)" @blur="(event) => handleBlur(column, event, scope.row, scope.$index)" @clear="handleClear(column, scope.row, scope.$index)" />
+
+                <!-- 日期范围选择器 -->
+                <el-date-picker v-else-if="column.editor === 'daterange'" v-model="scope.row[column.field]" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :placeholder="column.placeholder || '选择日期范围'" :disabled="getFieldDisabled(column, scope.row, scope.$index)" value-format="yyyy-MM-dd" v-bind="column.attrs || {}" @change="(value) => handleDateRangeChange(column, value, scope.row, scope.$index)" @focus="(event) => handleFocus(column, event, scope.row)" @blur="(event) => handleBlur(column, event, scope.row, scope.$index)" @clear="handleClear(column, scope.row, scope.$index)" />
+
+                <!-- 默认显示 -->
+                <span v-else>
+                  {{ scope.row[column.field] ? scope.row[column.field] : '-' }}
+                </span>
+              </el-form-item>
+            </template>
+          </template>
+        </el-table-column>
+
+        <!-- 操作列 -->
+        <el-table-column v-if="gridOptions.actions && gridOptions.actions.length > 0" label="操作" :width="gridOptions.actionWidth || '100px'" :align="gridOptions.actionAlign || 'left'" :fixed="gridOptions.actionFixed">
+          <template slot-scope="scope">
+            <div class="action-buttons">
+              <el-button v-for="button in gridOptions.actions" v-if="getButtonShow(button, scope.row, scope.$index)" :key="button.text" :type="button.type || 'primary'" size="small" :disabled="getButtonDisabled(button, scope.row)" :icon="button.icon" style="margin: 0 5px" :style="button.style" @click="(e) => handleActionClick(button, scope.row, scope.$index, e)">
+                {{ button.text }}
+              </el-button>
+              <span v-else>-</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+
+    <!-- 分页 -->
+    <el-pagination v-if="apiFunction" :current-page="localPagination.currentPage" :page-size="localPagination.pageSize" :total="localPagination.total" :page-sizes="localPagination.pageSizes" :layout="localPagination.layout" :background="localPagination.background" :small="localPagination.small" :disabled="localPagination.disabled" :hide-on-single-page="localPagination.hideOnSinglePage" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+  </div>
+</template>
+
+<script>
+import { Message, Loading } from 'element-ui'
+
+// VNode 渲染组件
+const VnodeComponent = {
+  functional: true,
+  props: {
+    vnode: {
+      type: Object,
+      default: null
+    }
+  },
+  render(h, context) {
+    return context.props.vnode || h('span')
+  }
+}
+
+export default {
+  name: 'DtTable',
+  components: {
+    VnodeComponent
+  },
+  props: {
+    gridOptions: {
+      type: Object,
+      required: true
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    pagination: {
+      type: Object,
+      default: () => ({
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50, 100],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        background: true,
+        small: false,
+        disabled: false,
+        hideOnSinglePage: false
+      })
+    },
+    apiFunction: {
+      type: Function
+    },
+    apiParams: {
+      type: Object
+    },
+    immediate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['page-change', 'size-change', 'update:pagination', 'action-click', 'validate-error', 'remote-search', 'search', 'linkage-change', 'async-load', 'selection-change'],
+  data() {
+    return {
+      formRef: null,
+      tableRef: null,
+      loading: false,
+      localPagination: { ...this.pagination },
+      tableData: this.gridOptions.data || [],
+      searchParams: {},
+      loadingInstance: null,
+      loadingFields: new Set(),
+      formModel: {
+        tableData: this.gridOptions.data || []
+      }
+    }
+  },
+  computed: {
+    hasSelectionColumn() {
+      return this.gridOptions.columns.some(col => col.field === 'selection')
+    },
+    formRules() {
+      const rules = {}
+      this.gridOptions.columns.forEach((column) => {
+        if (column.field && column.rules) {
+          rules[column.field] = column.rules
+        }
+      })
+      return rules
+    }
+  },
+  watch: {
+    'gridOptions.data': {
+      handler(newVal) {
+        this.tableData = newVal || []
+        this.formModel.tableData = newVal || []
+      },
+      immediate: true,
+      deep: true
+    },
+    pagination: {
+      handler(newVal) {
+        this.localPagination = { ...newVal }
+      },
+      deep: true
+    },
+    localPagination: {
+      handler(newVal) {
+        this.$emit('update:pagination', newVal)
+      },
+      deep: true
+    },
+    tableData: {
+      handler(newData, oldData) {
+        if (newData.length > 0 && newData !== oldData) {
+          this.$nextTick(() => {
+            this.initAsyncData()
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.initRefs()
+    if (this.immediate) {
+      this.getTableDatas()
+    }
+    this.initAsyncData()
+  },
+  methods: {
+    // 判断是否为 VNode
+    isVNode(vnode) {
+      return vnode && typeof vnode === 'object' && vnode.tag && vnode.children !== undefined
+    },
+    // 调用 render 函数并传入 h
+    callRender(column, scope) {
+      return column.render({ ...scope, h: this.$createElement })
+    },
+    // 初始化引用
+    initRefs() {
+      this.formRef = this.$refs.formRef
+      this.tableRef = this.$refs.tableRef
+    },
+    // 滚动到底部
+    async scrollToBottom() {
+      await this.$nextTick()
+
+      if (!this.tableRef) return
+
+      try {
+        const tableWrapper = this.tableRef.$el.querySelector('.el-table__body-wrapper')
+        if (tableWrapper) {
+          tableWrapper.scrollTo({
+            top: tableWrapper.scrollHeight,
+            behavior: 'smooth'
+          })
+        }
+      } catch (error) {
+        console.warn('滚动到底部失败:', error)
+      }
+    },
+
+    // 异步加载选项数据
+    async loadAsyncOptions(column, row, index) {
+      if (column.asyncOptions && !column.asyncOptions.loadData) return
+
+      const fieldKey = row ? `${column.field}_${row.id || index}` : column.field
+
+      try {
+        this.loadingFields.add(fieldKey)
+
+        if (row) {
+          this.$set(row, `${column.field}Loading`, true)
+        } else {
+          this.$set(this.searchParams, `${column.field}Loading`, true)
+        }
+
+        const options = await column.asyncOptions.loadData(row)
+
+        if (row) {
+          if (!row._asyncOptions) {
+            this.$set(row, '_asyncOptions', {})
+          }
+          this.$set(row._asyncOptions, column.field, options)
+        } else {
+          if (!this.searchParams._asyncOptions) {
+            this.$set(this.searchParams, '_asyncOptions', {})
+          }
+          this.$set(this.searchParams._asyncOptions, column.field, options)
+        }
+
+        this.$emit('async-load', {
+          field: column.field,
+          row,
+          index,
+          options
+        })
+      } catch (error) {
+        console.error(`异步加载选项失败 [${column.field}]:`, error)
+      } finally {
+        if (row) {
+          this.$set(row, `${column.field}Loading`, false)
+        }
+      }
+    },
+
+    // 初始化异步数据
+    initAsyncData() {
+      // 初始化表格中的异步 Select
+      this.gridOptions.columns.forEach((column) => {
+        if (column.asyncOptions && column.asyncOptions.immediate) {
+          this.tableData.forEach((row, index) => {
+            if (row._asyncOptions && !row._asyncOptions[column.field]) {
+              this.loadAsyncOptions(column, row, index)
+            }
+          })
+        }
+      })
+    },
+
+    // 获取表格数据
+    async getTableDatas(params) {
+      if (!this.apiFunction) {
+        console.warn('apiFunction is not provided')
+        return
+      }
+
+      this.startLoading()
+      this.loading = true
+
+      try {
+        const requestParams = {
+          ...this.apiParams,
+          ...this.searchParams,
+          ...params,
+          currentPage: this.localPagination.currentPage,
+          pageSize: this.localPagination.pageSize
+        }
+
+        const { data } = await this.apiFunction(requestParams)
+        this.tableData = data.list || []
+        this.localPagination.total = data.count
+      } catch (err) {
+        console.error('Error fetching table data:', err)
+      } finally {
+        this.loading = false
+        this.endLoading()
+      }
+    },
+
+    // 开始加载
+    startLoading() {
+      this.loading = true
+      if (this.loadingInstance) {
+        this.loadingInstance.close()
+      }
+      this.loadingInstance = Loading.service({
+        target: '.dt_table',
+        lock: true,
+        text: '加载中...',
+        background: 'rgba(255, 255, 255, 0.5)'
+      })
+    },
+
+    // 结束加载
+    endLoading() {
+      this.loading = false
+      if (this.loadingInstance) {
+        this.loadingInstance.close()
+        this.loadingInstance = null
+      }
+    },
+
+    // 处理分页变化
+    handleCurrentChange(page) {
+      this.localPagination.currentPage = page
+      this.$emit('page-change', page)
+      this.getTableDatas()
+    },
+
+    // 处理每页条数变化
+    handleSizeChange(size) {
+      this.localPagination.pageSize = size
+      this.localPagination.currentPage = 1
+      this.$emit('size-change', size)
+      this.getTableDatas()
+    },
+    // 处理选择变化
+    handleSelectionChange(selection) {
+      this.$emit('selection-change', selection)
+    },
+
+    // 获取选中数据
+    getSelection() {
+      return this.$refs.tableRef ? this.$refs.tableRef.selection : []
+    },
+
+    // 清空选择
+    clearSelection() {
+      this.$refs.tableRef && this.$refs.tableRef.clearSelection()
+    },
+
+    // 切换行选中状态
+    toggleRowSelection(row, selected) {
+      this.$refs.tableRef && this.$refs.tableRef.toggleRowSelection(row, selected)
+    },
+
+    // 处理操作按钮点击
+    handleActionClick(button, row, index, event) {
+      event.stopPropagation()
+      if (button.click) {
+        button.click(row, index)
+      }
+      this.$emit('action-click', button, row, index)
+    },
+    // 确保表单就绪
+    async ensureFormReady() {
+      if (this.formRef) return true
+
+      await this.$nextTick()
+      this.initRefs()
+
+      if (!this.formRef) {
+        console.warn('表单引用初始化失败，尝试重新渲染')
+        await this.$nextTick()
+        this.initRefs()
+      }
+
+      return !!this.formRef
+    },
+    // 验证表单
+    async validate() {
+      await this.ensureFormReady()
+
+      if (!this.formRef) {
+        return Promise.reject(new Error('表单未初始化，请检查组件状态'))
+      }
+
+      const rowErrors = new Map()
+
+      try {
+        const promises = []
+
+        // 修复：使用正确的 prop 路径 tableData.${rowIndex}.${column.field}
+        this.formModel.tableData.forEach((_, rowIndex) => {
+          this.gridOptions.columns.forEach((column) => {
+            if (column.field && column.rules) {
+              promises.push(
+                new Promise((resolve, reject) => {
+                  // 修复：添加 tableData 前缀
+                  const propPath = `tableData.${rowIndex}.${column.field}`
+                  this.formRef.validateField(propPath, (error) => {
+                    if (error) {
+                      if (!rowErrors.has(rowIndex)) {
+                        rowErrors.set(rowIndex, [])
+                      }
+                      const fieldName = column.title || column.field
+                      rowErrors.get(rowIndex).push(fieldName)
+                      reject(error)
+                    } else {
+                      resolve(true)
+                    }
+                  })
+                }).catch(() => false)
+              )
+            }
+          })
+        })
+
+        const results = await Promise.all(promises)
+        const isValid = results.every((result) => result !== false)
+
+        if (!isValid) {
+          const errorParts = []
+          rowErrors.forEach((fields, rowIndex) => {
+            if (fields.length > 0) {
+              const uniqueFields = Array.from(new Set(fields))
+              errorParts.push(`第${rowIndex + 1}行：${uniqueFields.join('，')}`)
+            }
+          })
+
+          if (errorParts.length > 0) {
+            const errorMessage = errorParts.join('；')
+            Message({
+              message: `请完善以下信息：\n${errorMessage}`,
+              type: 'error',
+              duration: 10000,
+              showClose: true,
+              dangerouslyUseHTMLString: true
+            })
+          }
+
+          this.$emit('validate-error', '表单验证失败')
+          return Promise.reject(new Error('表单验证失败'))
+        }
+
+        return Promise.resolve(true)
+      } catch (error) {
+        console.error('表单验证异常:', error)
+        Message.error('表单验证过程中发生异常')
+        this.$emit('validate-error', error)
+        return Promise.reject(error)
+      }
+    },
+
+    // 重置表单
+    resetFields() {
+      if (!this.formRef) return
+      this.formModel.tableData.forEach((_, index) => {
+        this.gridOptions.columns.forEach((column) => {
+          if (column.field) {
+            const propPath = `tableData.${index}.${column.field}`
+            this.formRef.resetFields(propPath)
+          }
+        })
+      })
+    },
+
+    // 清除验证
+    clearValidate() {
+      if (!this.formRef) return
+      this.formModel.tableData.forEach((_, index) => {
+        this.gridOptions.columns.forEach((column) => {
+          if (column.field) {
+            const propPath = `tableData.${index}.${column.field}`
+            this.formRef.clearValidate(propPath)
+          }
+        })
+      })
+    },
+    // 处理联动变化
+    async handleLinkageChange(column, value, row, index, type) {
+      if (!column.linkage) return
+
+      const { targetField, method, clearTarget = true } = column.linkage
+
+      if (!row._linkageOptions) {
+        this.$set(row, '_linkageOptions', {})
+      }
+      this.$set(row._linkageOptions, targetField, [])
+
+      if (!value && value !== 0) {
+        this.tableData = [...this.tableData]
+        return
+      }
+
+      try {
+        this.$set(row, `${targetField}Loading`, true)
+        const options = await method(value, row, type)
+        this.$set(row._linkageOptions, targetField, options)
+        this.tableData = [...this.tableData]
+
+        this.$emit('linkage-change', {
+          sourceField: column.field,
+          targetField,
+          value,
+          row,
+          index,
+          options
+        })
+      } catch (error) {
+        console.error('联动数据获取失败:', error)
+      } finally {
+        this.$set(row, `${targetField}Loading`, false)
+      }
+    },
+
+    // 获取选项数据
+    getOptions(column, row) {
+      if (row._asyncOptions && row._asyncOptions[column.field]) {
+        return row._asyncOptions[column.field]
+      }
+      if (row._linkageOptions && row._linkageOptions[column.field]) {
+        return row._linkageOptions[column.field]
+      }
+      return column.options || []
+    },
+
+    // 计算字段是否禁用
+    getFieldDisabled(column, row, index) {
+      if (this.isDisabled) return true
+
+      if (typeof column.disabled === 'function') {
+        return column.disabled(row, index)
+      }
+
+      return column.disabled || false
+    },
+
+    // 计算按钮是否显示
+    getButtonShow(button, row, index) {
+      if (typeof button.show === 'function') {
+        return button.show(row, index)
+      }
+      return button.show !== undefined ? button.show : true
+    },
+
+    // 计算按钮是否禁用
+    getButtonDisabled(button, row) {
+      if (typeof button.disabled === 'function') {
+        return button.disabled(row)
+      }
+      return button.disabled || false
+    },
+
+    // 计算最小值
+    getMinValue(column, row, index) {
+      if (typeof column.min === 'function') {
+        return column.min(row, index)
+      }
+      return column.min
+    },
+
+    // 计算最大值
+    getMaxValue(column, row, index) {
+      if (typeof column.max === 'function') {
+        return column.max(row, index)
+      }
+      return column.max
+    },
+
+    // 手动触发联动
+    triggerLinkage(field, type) {
+      const column = this.gridOptions.columns.find((col) => col.field === field)
+      if (!column || !column.linkage) {
+        console.warn(`字段 ${field} 没有配置联动或不存在`)
+        return
+      }
+
+      this.tableData.forEach((row, index) => {
+        const sourceValue = row[field]
+        if (sourceValue !== undefined && sourceValue !== null && sourceValue !== '') {
+          this.handleLinkageChange(column, sourceValue, row, index, type)
+        }
+      })
+    },
+
+    // 各种事件处理函数
+    handleSelectChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      if (column.linkage) {
+        this.handleLinkageChange(column, value, row, index)
+      }
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleInputChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleInputNumberChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+    handleSwitchChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleTimeChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleDateChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleDateTimeChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleDateRangeChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleFocus(column, event, row) {
+      column.events && column.events.focus && column.events.focus(event, row)
+      if (column.asyncOptions && !(row._asyncOptions && row._asyncOptions[column.field])) {
+        this.loadAsyncOptions(column, row)
+      }
+    },
+
+    handleBlur(column, event, row, index) {
+      column.events && column.events.blur && column.events.blur(event, row)
+      const propPath = `tableData.${index}.${column.field}`
+      this.formRef && this.formRef.validateField(propPath)
+    },
+
+    handleClear(column, row, index) {
+      column.events && column.events.clear && column.events.clear()
+      if (column.linkage) {
+        const { targetField } = column.linkage
+        if (targetField) {
+          this.$set(row, targetField, undefined)
+          if (row._linkageOptions) {
+            this.$set(row._linkageOptions, targetField, [])
+          }
+        }
+      }
+    },
+
+    // 刷新方法
+    refresh(params) {
+      return this.getTableDatas(params)
+    },
+
+    getAppendComponent(column, scope) {
+      if (typeof column.unit === 'function') {
+        return {
+          functional: true,
+          render: (h) => column.unit(h, scope)
+        }
+      } else {
+        return {
+          render: (h) => h('span', { style: { paddingLeft: '5px' } }, column.unit)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dt_table_header {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dt_required_dot {
+  color: #f56c6c;
+  margin-right: 4px;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.dt_table .el-form-item {
+  margin-bottom: 0px !important;
+}
+
+.dt_table {
+  ::v-deep {
+    .el-form-item__content {
+      margin-bottom: 0px !important;
+    }
+    .el-input__inner {
+      text-align: center !important;
+    }
+    .el-table__cell {
+      padding: 5px 0;
+    }
+  }
+}
+</style>