ylwl-cpscoms 1.1.0 → 1.2.0

package/src/DtTable/index.vue

@@ -1,779 +0,0 @@
-<!-- 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>