Ant-design

基础组件

base-form

基础表单组件，可以扩展成搜索表单，也可以用作添加和编辑，只要配置好传入值

示例

<base-form v-bind="initForm" v-model="formData" ref="baseFormRef">
    <!-- 搜索重置按钮插槽 -->
    <template #footer>
      <a-row :gutter="16" type="flex" justify="space-between">
        <slot name="add">添加</slot>
        <a-col v-bind="initForm.footerLayout">
          <div class="footer">
            <a-button @click="reset('formData')">重置</a-button>
            <a-button class="mar_right" type="primary" @click="search">搜索</a-button>
          </div>
        </a-col>
      </a-row>
    </template>
</base-form>
<script>
export default {
  data () {
    return {
      formData: {}
    }
  }
}
</script>

插槽

• 上方标题插槽
• 左边标题插槽
• 底部插槽，可以插入按钮

props

  props: {
    step: { // 在弹窗添加时可以会有几个步骤，一个步骤可能会配置一个表单，step用来标识这是第几步的表单
      type: Number,
      default: 1
    },
    value: { // 双向绑定触发的value
      type: Object,
      required: true
    },
    formMain: { // 表单项的配置[{value, type, label, options}]
      // value:字段名
      // type:表单项类型(input,inputNum,password,select,cascader )
      // label:显示label, itemOptions:其他的表单项配置(style,)
      // options:选择框选项
      type: Array,
      required: true
    },
    disabledList: { // 禁止输入的表单项
      type: Array,
      default: () => []
    },
    labelProps: { // 表单项里面布局
      type: Object,
      default: () => ({
        labelCol: { span: 3, offset: 12 }, // 表单项左边标题所占空间,总数24
        wrapperCol: { span: 4 },// 表单项右边输入框所占空间
        labelAlign: 'right'// 表单项左边标题对齐方向
      })
    },
    layout: { // 表单项之间的布局
      type: Object,
      default: () => ({
        // 以下4个属性都使用v-bind,可以额外添加其他属性，例如style或者组件文档中的其他属性
        // a-row: 可以设置表单项是否启用flex布局,或者整一个实例所占的空间为多少
        layoutRow: { type: 'flex', justify="center", span: 24 } // start;end;space-between;space-around
		// a-row: 表单标题如果在上面的布局，占据一行的多少宽度
        topTitle: { xl: 4 },
        // a-col: 表单标题如果在左边的布局，占据一行的多少宽度
        leftTitle:{ xl: 4 },
        // a-col: 每一个表单项外面布局,也就是每一个表单项占据表单一行的多少，总数24，span为8,也就是一行有3个表单项
        content: { xl: 7, lg: 6, md: 12, sm: 24, xs: 24 }
        // 在这里设置style固定每一个表单项的高度,不然校验的时候会偏移(一般不在这里设置)
      })
    },
    itemStyle: {
      type: Object,
      default: () => ({ padding: '5px 0', height: '55px' })
    },
    rules: {
      // 每一个表单项的校验规则
      type: Object,
      default: () => ({
          Id: [required: true,message: 'Please input the Id',trigger: 'change']
      })
    }
  },

emit

emits: ['value', 'cascaderUpdate', 'selectUpdate', 'inputFocus']
// value 双向绑定
// cascaderUpdate级联选择器发生变化
// selectUpdate 选择器发生变化
// inputFocus 输入框聚焦

computed

  computed: {
    antFormRef () {
      // 返回表单ref组件实例
      return this.$refs.antFormRef || {}
    },
    handleValueChange () { // 表单项发生改变时触发绑定
      return (value, key) => {
        return this.$emit('value', { ...this.props.value, [key]: value })
      }
    },
    handleSelectChange () {// 可以运用于选择器发生改变时触发某些事件
	  // 利用闭包的特性，computed返回一个函数就可以往computed中传递参数
      return (value, key) => {
        return this.$emit('selectUpdate', { value, key, step: this.step })
      }
    },
    handleCascaderChange () {// 可以运用于级联选择器发生改变时触发某些事件
      return (value, key) => {
        return this.$emit('cascaderUpdate', { value, key, step: this.step })
      }
    }
  }

配置文件示例

export const comLayout01 = {
  layout: {
    // 表单外部布局
    content: { span: 8 } // 高度设置好，不然会出现校验的时候错位
    // , style: { height: '75px' }
  },
  labelProps: {
    // 输入框以及label布局
    labelCol: { xl: 10 }, // 总数为24
    wrapperCol: { span: 14 },
    labelAlign: 'left'
  }
}
// 产品弹窗添加编辑配置
const proActionForm = (vue) => {
  return {
    ...comLayout01,
    formMain: [
      {
        value: 'productName',
        type: 'input',
        label: 'setProduct.productName',
        itemOptions: {}
      },
      {
        value: 'appId',
        type: 'select',
        label: 'setProduct.appId'
      },
      {
        value: 'productType',
        type: 'select',
        label: 'setProduct.productType',
        options: [
          {
            label: 'setProduct.defaultProduct', // 默认产品
            value: 1
          },
          {
            label: 'setProduct.arraignmentProduct', // 提审产品
            value: 2
          },
          {
            label: 'setProduct.ordinaryProduct', // 其他产品
            value: 3
          }
        ]
      },
      {
        value: 'availableAmount',
        type: 'inputNum',
        label: 'setProduct.availableAmount'
      },
      {
        value: 'repayOrder',
        type: 'cascader',
        label: 'setProduct.repayOrder',
        options: [
          {
            value: 'interestRate',
            label: vue.$t('setProduct.interest'),
            children: [
              {
                value: 'penaltyInterest',
                label: vue.$t('setProduct.penaltyInterest'),
                children: [
                  {
                    value: 'principal',
                    label: vue.$t('setProduct.principal')
                  }
                ]
              }
            ]
          },
          {
            value: 'penaltyInterest',
            label: vue.$t('setProduct.penaltyInterest'),
            children: [
              {
                value: 'interestRate',
                label: vue.$t('setProduct.interest'),
                children: [
                  {
                    value: 'principal',
                    label: vue.$t('setProduct.principal')
                  }
                ]
              }
            ]
          }
        ]
      }
    ],
    rules: {
      productName: [
        {
          required: true,
          message: 'Please input the productName',
          trigger: 'change'
        }
      ],
      appId: [
        { required: true, message: 'Please input the appId', trigger: 'change' }
      ],
      productType: [
        {
          required: true,
          message: 'Please input the productType',
          trigger: 'change'
        }
      ],
      availableAmount: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              return callback(new Error('Please input the availableAmount'))
            } else if (noInt(value)) {
              return callback(new Error('availableAmount is illegal!'))
            }
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ],
      minApplyAmount: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              return callback(new Error('Please input the minApplyAmount'))
            } else if (noInt(value)) {
              return callback(new Error('minApplyAmount is illegal!'))
            }
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ],
      interestRate: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              return callback(new Error('Please input the interestRate'))
            } else if (noInt(value) || value * 1 > 0.05 || value * 1 < 0) {
              // console.log(value > 0.05)
              return callback(new Error('interestRate is illegal!'))
            }
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ],
      penaltyInterestRate: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              return callback(new Error('Please input the penaltyInterestRate'))
            } else if (noInt(value) || value * 1 > 0.05 || value * 1 < 0) {
              // console.log(value > 0.05)
              return callback(new Error('penaltyInterestRate is illegal!'))
            }
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ],
      limitDays: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              return callback(new Error('Please input the limitDays'))
            } else if (!/^([7-9]|[1-2]\d|3[0-1])$/.test(value)) {
              return callback(new Error('limitDays is illegal!'))
            }
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ],
      repayOrder: [
        {
          required: true,
          message: 'Please input the repayOrder',
          trigger: 'change'
        }
      ],
      homeAmount: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              return callback(new Error('Please input the homeAmount'))
            } else if (noInt(value)) {
              return callback(new Error('homeAmount is illegal!'))
            }
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ],
      applyCoolDownHours: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              return callback(new Error('Please input the applyCoolDownHours'))
            } else if (!/^([0-9]|[1-3]\d|4[0-8])$/.test(value)) {
              return callback(new Error('applyCoolDownHours is illegal!'))
            }
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ]
    }
  }
}

base-table

基础表格组件,可以用作封装二次组件，也可以只做展示表格，没有任何操作，也没有分页器(可以加)

props

  props: {
    rowKey: { // 表格项的唯一标识，也就是数据的唯一标识'Id'
      type: String,
      required: true
    },
    locale: { // ant-design的容器
      type: Object,
      default: () => zhCN
    },
    listData: { // 表格数据,也就是后端返回的表格数据
      type: Array,
      default: () => []
    },
    columns: { // 表格列的配置
      type: Array,
      default: () => []
    },
    total: { // 表格总共有多少条数据
      type: Number,
      default: () => 0
    },
    current_size: { // 初始化的分页器选项，要传入data中做绑定
      type: Object,
      default: () => ({
        pageIndex: 1, // 默认在第几页
        pageSize: 10, // 默认一页有多少条数据
        pageSizes: ['10', '20', '30', '40', '50'] // 默认可以选择几条数据一页
      })
    },
    tableShowList: {// 需要的表格选项
      type: Object,
      default: () => ({
        select: {
            'row-selection':"rowSelection"
        },
        paginationOptions: { // 分页器
          'show-size-changer': true,
          'show-quick-jumper': true
        }
      })
    },
    tableOptions: { // 设置表格其他属性,例如style或者文档中的其他属性
      type: Object,
      default: () => ({})
    },
    layout: { // 表单项之间的布局
      type: Object,
      default: () => ({
        // 以下4个属性都使用v-bind,可以额外添加其他属性，例如style或者组件文档中的其他属性
        // a-row: 可以设置表单项是否启用flex布局
        layoutRow: { type: 'flex', justify="center", span: 24 } // start;end;space-between;space-around
		// a-row: 表单标题如果在上面的布局，占据一行的多少宽度
        topTitle: { xl: 4 },
        // a-col: 表单标题如果在左边的布局，占据一行的多少宽度
        leftTitle:{ xl: 4 },
        // a-col: 每一个表单项外面布局,也就是每一个表单项占据表单一行的多少，总数24，span为8,也就是一行有3个表单项
        content: { xl: 7, lg: 6, md: 12, sm: 24, xs: 24 }
        // 在这里设置style固定每一个表单项的高度,不然校验的时候会偏移(一般不在这里设置)
      })
    }  
  }

data

  data () { // 要将分页器双向绑定，保留之前的状态
    return {
      pageArg: { ...this.current_size }
    }
  }

methods

  emits: ['updatePage', 'updateSelect'],  
  methods: {
    antTableRef () { // 返回表格ref示例
      return this.$refs.antTableRef || {}
    },
    indexMethod (index) { // 表格显示序号
      const { pageIndex, pageSize } = this.pageArg
      return pageIndex !== 1
        ? (pageIndex - 1) * pageSize + index + 1
        : index + 1
    },
    currentUpdate (pageIndex, b) { // 当前页发生变化
      this.$set(this.pageArg, 'pageIndex', pageIndex)
      this.$emit('updatePage', { ...this.pageArg,pageIndex,typeof: 'updateCurrent' })
    },
    sizeUpdate (pageIndex, pageSize) { // 页码发生变化
      this.$set(this.pageArg, 'pageSize', pageSize)
      this.$emit('updatePage', { ...this.pageArg,pageSize,typeof: 'updateSize' })
    },
    selectionUpdate (select) { // 表格选择发生变化
      this.$emit('updateSelect', select)
    }
  }

配置文件示例

export const proTableConfig = {
  layout: {
    content: { xl: 24 }
  }, // 表格宽度
  tableOptions: {
    style: { width: '100%' }
  },
  rowKey: 'productId', // 列表唯一id
  columns: [
    {
      dataIndex: 'productId',
      title: 'setProduct.productId'
    },
    {
      dataIndex: 'appId',
      title: 'setProduct.appId'
    },
    {
      dataIndex: 'productType',
      title: 'setProduct.productType'
    },
    {
      dataIndex: 'limitDays',
      title: 'setProduct.limitDays'
    },
    {
      dataIndex: 'afterLoanFeeName',
      title: 'setProduct.afterLoanFeeName'
    },
    {
      dataIndex: 'rate',
      title: 'setProduct.interestRate'
    },
    {
      dataIndex: 'fixedCharge',
      title: 'setProduct.fixedCharge'
    },
    {
      dataIndex: 'penaltyInterestRate',
      title: 'setProduct.penaltyInterestRate'
    },

    { dataIndex: 'handle', title: '操作', minWidth: '80' }
  ],
  current_size: comLayout02.currentSize,
  tableShowList: comLayout02.tableShowList
}

edit-table

props

props: {
    rowKey: {// 列的唯一标识
      type: String,
      required: true
    },
    locale: {
      type: Object,
      default: () => zhCN
    },
    tableForm: { // 表格里面的表单组件
      type: Object,
      default: () => ({
        rules: {}
      })
    },
    listData: { // 表格数据
      type: Array,
      default: () => []
    },
    queryName: { // 是哪一个界面在使用这个组件的标识
      type: String,
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    total: { // 表格总条数
      type: Number,
      default: () => 0
    },
    current_size: { // 当前页和一页条数
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        pageSizeOptions: [5, 10, 20, 30, 40]
      })
    },
    tableShowList: { // 是否显示的选项
      type: Object,
      default: () => ({})
    },
    tableOptions: { // 设置表格其他属性
      type: Object,
      default: () => ({})
    },
    layout: { // 表格布局
      type: Object,
      default: () => ({})
    },
}

data

data () { 
    return {
      ruleForm: {},
      dataSource: [...this.listData], // 表格数据
      pageArg: { ...this.current_size }// 要将分页器双向绑定，保留之前的状态
    }
}

methods

antTableRef () { // 传出去表格a-table示例
  return this.$refs.antTableRef || {}
}

外部改变表格里的值

changeData (result) { // ref调用
  this.dataSource = result
}

编辑表格中的输入框改变dataSource

handleChange (value, name, scope) { // 输入框发生变化
  const dataSource = this.dataSource
  const uniqueId = scope[this.rowKey] // 唯一标识
  dataSource.forEach((item) => {
    if (item[this.rowKey] === scope[this.rowKey]) { // 改变对应的数值
      return (item[name] = value)
    }
  })
  this.$set(this.ruleForm, name, value) // 设置校验表单对象,好进行校验
  this.$emit('updateData', { data: dataSource, name, value, uniqueId }) // 传出去： 数据/属性名/值/唯一标识
}

分页器和选择器

currentUpdate (pageIndex) { // 编辑表格还没有做分页功能
  this.pageArg.pageIndex = pageIndex
  this.$emit('updatePage', {
    ...this.pageArg,
    pageIndex,
    typeof: 'updateCurrent'
  })
},
sizeUpdate (pageIndex, pageSize) {
  this.pageArg.pageSize = pageSize
  this.$emit('updatePage', {
    ...this.pageArg,
    pageSize,
    typeof: 'updateSize'
  })
},
selectionUpdate (select) {
  this.$emit('updateSelect', select)
}

增加删除单元格

// 增加删除单元格
handleAddDelete (action = 'add', _) { // _:如果是添加add，则为数据，如果是删除delete，则为key
  const { count, dataSource } = this
  if (action === 'add') {
    this.count = count + 1
    this.dataSource = [...dataSource, _]
  } else if (action === 'delete') {
    this.count = count - 1
    this.dataSource = dataSource.filter((item) => item[this.rowKey] !== _)
    console.log(this.dataSource)
  }
}

base-card

展示卡片项,可以显示多组卡片信息项

props

props: {
    cardList: { // 多组卡片信息项
      type: Array,
      default: () => []
    },
    layout: { // 
      type: Object,
      default: () => ({
        // a-row: 可以设置表单项是否启用flex布局
        layoutRow: { type: 'flex', justify="center", span: 24 } // start;end;space-between;space-around
        content: { span: 24 }
      })
    }
}

配置项

// 等级详情弹窗配置
export const levelDetailDialogConfig = (vue) => {
  return {
    width: '90%',
    title: vue.$t('setProduct.productDetail')
  }
}

base-dialog

• 弹窗组件，用作添加编辑，而且不止一个表单，也不止一步

使用

<base-dialog
    v-bind="productDialogConfig"
    ref="baseDialogRef"
    @actionNextSubmit="actionNextSubmit"
    @selectUpdate="hasSetLevel"
    @switchVisible="resetFeeActionTable"
>
    <template #step1>
      <computed-table
        class="computed_beforeFee"
        ref="computedBeforeFeeRef"
        queryName="computedBefore"
        :initTable="beforeFeeList"
        :initData="beforeFeeData"
        :isNeedStorage="false"
      >
        <template #leftTitle>
          <div>
            <p>{{ $t('setProduct.beforeLoanFee') }}</p>
            <a-button type="primary" @click="handleBeforeFee('add')">
              <a-icon type="plus" />
            </a-button>
          </div>
        </template>
        <template #handle="scope">
          <a-button type="danger" @click="handleBeforeFee('delete', scope.row)"
            ><a-icon type="delete"
          /></a-button>
        </template>
      </computed-table>
      <!-- 贷前费用和贷后费用的分割线 -->
      <computed-table
        class="computed_table"
        ref="computedAfterFeeRef"
        queryName="computedAfter"
        :initTable="afterFeeList"
        :initData="afterFeeData"
        :isNeedStorage="false"
      >
        <!-- @updateData="feeUpdateData" -->
        <template #leftTitle>
          <div>
            <p>{{ $t('setProduct.afterLoanFee') }}</p>
            <a-button type="primary" @click="handleAfterFee('add')">
              <a-icon type="plus" />
            </a-button>
          </div>
        </template>
        <template #handle="scope">
          <a-button type="danger" @click="handleAfterFee('delete', scope.row)"
            ><a-icon type="delete"
          /></a-button>
        </template>
      </computed-table>
    </template>
</base-dialog>

插槽

• 第几步的插槽
• 确认取消插槽

props

props: {
    dialogOptions: { // 弹窗配置
      type: Object,
      default: () => {}
    },
    formList: { // // 弹窗表单配置，第几步的表单
      type: Array,
      require: true
    },
    echoFormList: { // 回显表单数据,为数组
      type: Array,
      default: () => []
    }
}

配置项

export const proActionConfig = (vue) => {// 多级嵌套使用函数引入vue的实例
  return {
    dialogOptions: { // 弹窗配置
      width: '90%'
    },
    formList: [ // 弹窗表单配置，第几步的表单
      {
        addTitle: vue.$t('setProduct.addProduct'),
        editTitle: vue.$t('setProduct.editProduct'),
        confirmText: 'setProduct.confirm', // 确认按钮文案
        cancelText: 'setProduct.cancel', // 取消按钮文案
        prevText: 'setProduct.prev', // 上一步按钮文案
        nextText: 'setProduct.next', // 下一步按钮文案
        step: 1, // 这是第几步才会出现的表单
        name: 'step1', // 表单的数据绑定名
        initForm: proActionForm(vue) // 填入base-form的基础配置
      }
    ],
    echoFormList: [ // 设置默认值或者回显数据
      { // 第一步表单的默认项
        name: 'step1',
        initForm: {
          repayOrder: ['penaltyInterest', 'interestRate', 'principal'],
          interestRate: 0,
          penaltyInterestRate: 0.02,
          applyCoolDownHours: 24,
          productType: 3
        }
      },
      {
        name: 'step2', // 第二步表单的默认值
        initForm: {
          creditLevel: 'Z'
        }
      }
    ]
  }
}

script

<script>
import BaseForm from '../ant-form/base-form.vue'
import { initListData, initData } from '@/utils/ant-fun'
export default {
  components: {
    BaseForm
  },
  data () {
    return {
      action: 'add',
      step: 1,
      visible: false,
      formData: {},
      disabledList: {} // 禁止输入列表,一般在编辑中使用，新增可以在配置文件中配置
    }
  },
  watch: {
    formList (_) { // 在外部添加步骤以后，需要监听，并重新赋值formData，保留之前的formData
      const unLiveData = _.filter((item) => { // 返回新的表单
        return !this.formData[item.name]
      })
      unLiveData.forEach((item) => { // 只对新的表单步骤赋予新的值，之前的不做改变
        this.echoFormList.forEach((_) => { // 新的表单初始化
          if (item.name === _.name) { 
            this.$set(this.formData, item.name, initData(item.initForm.formMain, _.initForm))
          } else if (!_[item.name]) {
            this.$set(this.formData, item.name, nitData(item.initForm.formMain, {}))
          }
        })
      })
    }
  },
  computed: {
    title () { // 根据action的不同改变title
      let title
      if (this.action === 'add') {
        title = this.$t(this.stepItem().addTitle)
      } else if (this.action === 'edit') {
        title = this.$t(this.stepItem().editTitle)
      }
      return title
    },
    stepItem () { // 根据步数获取对应步骤的表单配置
      return (stepKey = this.step) => {
        const item = this.formList.find((item) => {
          return item.step === stepKey
        })
        return item
      }
    },
    submitFormData () {
      return (stepKey, name) => { // 返回第几步的表单数据 @params: 第几步， 什么属性
        return name ? this.formData[stepKey][name] : this.formData[stepKey]
      }
    }
  },
  created () {
    this.formData = initListData(this.formList, this.echoFormList) // 数据回显，从props中引入
  }
}
</script>

emits

emits: ['actionNextSubmit', 'cascaderUpdate', 'selectUpdate', 'switchVisible']
// actionNextSubmit 确认按钮
// selectUpdate 表单中的选择框发生变化
// cascaderUpdate 级联选择器发生变化

修改哪个步骤的表单数据

有的时候初始化数据echoFormList不可行，因为echoFormList绝对不可以改变！但是也要动态的改变某一个步骤的数据，就可以使用setFormData函数

setFormData ({ stepName, key = '', value }) {
  // 改变步骤中的某一个值，在哪里改变很重要!
  if (key && this.formData[stepName]) {
    this.$set(this.formData[stepName], key, value)
  } else if (this.formData[stepName]) {
    this.$set(this.formData, stepName, value)
  }
}

表单选择器发生变化

selectUpdate (data) {
  this.$emit('selectUpdate', data)
}

级联选择器改变数据

optionUpdate (data) { // 级联选择器无法实时改变base-form的value，只能通过这里实时改变formData
  const form = this.formData
  const { value, key, step } = data
  form[`step${step}`][key] = value
  this.formData = form
  this.$emit('optionUpdate', data)
}

数据初始化

handleAction ({ action = 'add', data = {}, disabledList = {} }) { // action/编辑回显的数据/禁止输入的表单项属性
  this.switchVisible() // 先初始化，不然会覆盖后面的回显数据
  this.action = action
  if (this.action === 'edit') {// 如果是编辑需要回显数据
    this.formData = { ...data }
  }
  this.disabledList = { ...disabledList }
}

cancel退出弹窗

cancel () { // 有一些数据不在这里面，emit告诉外面退出来，初始化其他组件的数据
  this.switchVisible()
  this.$emit('switchVisible')
}

切换弹窗显隐

switchVisible () {// 并且初始化数据
  this.step = 1
  this.formData = initListData(this.formList, this.echoFormList)
  this.visible = !this.visible
}

步数控制函数

stepControl (type = 'next', step) {
  // 步数控制函数
  if (step && this.step < this.formList.length) {
    this.step = step
  } else {
    type === 'next' && this.step < this.formList.length && (this.step += 1)
    type === 'prev' && this.step > 1 ? (this.step -= 1) : this.cancel()
  }
}

确认传出去数据

handleConfirmClick () { // 可以选择将ref也传出去,也可以选择在这里校验
  const stepItem = this.stepItem()
  const { antFormRef = {} } = this.$refs[`${stepItem.name}Ref`][0]
  antFormRef &&
    antFormRef.validate((valid) => {
      if (valid) {
        const data = {
          formList: { ...this.formData }, // 所有步骤的表单数据
          formData: { ...this.formData[stepItem.name] }, // 当前步骤的表单数据
          step: this.step, // 是第几步的表单
          stepName: stepItem.name // 步骤名称
        }
        this.$emit('actionNextSubmit', {
          ...data,
          action: this.action
        })
      }
    })
}

二次组件

search-from搜索

搜索表单组件

props

props: {
    queryName: { // 将数据存储vuex的名称，十分重要
      type: String,
      require: true
    },
    initForm: { // 搜索表单的配置信息,包括base-form的formMain
      type: Object,
      require: true
    },
    // 回显表单数据
    echoForm: {
      type: Object,
      default: () => {}
    }
}

script

<script>
import BaseForm from '@/components/AntDesign/ant-form/base-form.vue'
import { initData } from '@/utils/ant-fun'
export default {
  components: {
    BaseForm
  },
  emits: ['reset', 'submit'],
  created () {
    this.formData = initData(this.initForm.formMain, this.echoForm) // 数据回显，从props中引入
  }
}
</script>

外部组件改变formData

// this.refs.#.setFormData(id, 3)
setFormData (name, value) {
  this.$set(this.formData, name, value)
}

重置reset

reset (name) { // name: formData
  const resetForm = {}
  for (const item in this[name]) {
    resetForm[item] = ''
  }
  this[name] = resetForm
  this.$emit('reset', this.formData)
},

搜索方法

search () {
  const { antFormRef = {} } = this.$refs.baseFormRef // 获取base的示例，为了校验表单数据是否合法
  antFormRef.validate((valid) => {
    if (valid) {
      // 将表单的搜索条件存入vuex作缓存，如果需要缓存的话
      // this.saveQueryParams({ formData: this.formData, queryName: this.queryName })
      this.$store.commit('common/saveQueryParams', {
        formData: this.formData,
        queryName: this.queryName
      })
      this.$emit('submit', this.formData) // 不需要可以直接返回formData数据
    } else {
      console.log('this.formData: noValid', this.formData)
    }
  })
}

使用

<!-- 搜索表单 -->
<search-form
  ref="searchFromRef"
  queryName="setProduct" // 二次表单只需要这个来存储基础表单的value
  :initForm="proSearchFormConfig" // 都是传入base-form的配置项
  @reset="search"
  @submit="search"
>
  <template #add>
    <a-col>
      <a-button
        type="primary"
        @click="$refs.productActionRef.handleAddProduct()"
      >
        {{ $t('setProduct.addProduct') }}
      </a-button>
    </a-col>
  </template>
</search-form>

配置文件

export const comLayout02 = {
  layout: {
    // 每一个表单项所占得宽度
    content: { xl: 6, lg: 8, md: 6, sm: 24, xs: 24 }
  },
  labelProps: {
    labelCol: { span: 8 }, // 表单项中标题所占的宽度
    wrapperCol: { span: 14 }, // 输入框所占的宽度
    labelAlign: 'left'
  },
  itemStyle: { padding: '5px 0' },
  currentSize: {
    pageIndex: 1,
    pageSize: 10,
    pageSizes: ['5', '10', '20', '30', '40']
  },
  tableShowList: {
    paginationOptions: { 'show-size-changer': true, 'show-quick-jumper': true } // 是否显示footer分页器
  }
}
export const proSearchFormConfig = { // 传入base-form的配置项，具体可以参考base-form
  ...comLayout02,
  formMain: [ 
    {
      value: 'productId',
      type: 'input',
      label: 'setProduct.productId',
      ruleVariate: {
        // 输入规则的变量
        // maxLength: 10
      }
    },
    {
      value: 'productType',
      type: 'select',
      label: 'setProduct.productType',
      options: [
        {
          label: 'table.all', // 默认产品
          value: ''
        },
        {
          label: 'setProduct.defaultProduct', // 默认产品
          value: 1
        }
      ]
    }
  ]
}

content-table展示表格

显示表格组件，有分页选择功能

props

props: {
    handleData: { // 数据处理，后端返回的数据需要在外面处理完在传进来
      type: Function,
      default: (_) => _
    },
    apiQuery: { // 搜索表格需要的链接和参数,可以结合vuex去做，根据业务需求变通
      type: Object,
      required: true，
      // { url: 'api/...', data: {...}, ...更多属性 }
    },
    queryName: { // 如果需要vuex中的formData缓存,那么就可以写入和search-form一样的queryName
      type: String,
      default: () => ''
    },
    initTable: { // 初始化表格组件，也就是base-table的配置
      type: Object,
      require: true
    },
    isNeedStorage: { // 是否需要使用vuex中的搜索参数初始化表格
      type: Boolean,
      default: false
    }
}

script

<script>
import { createNamespacedHelpers } from 'vuex'
import BaseTable from '@/components/AntDesign/ant-table/base-table.vue'
const { mapGetters } = createNamespacedHelpers('common')
export default {
  components: {
    BaseTable
  },
  data () {
    return {
      loading: false, // 加载动画
      listData: { // 存储后端返回的表格数据
        data: [],
        total: 0
      }
    }
  },
  computed: {
    ...mapGetters(['getQueryParams']),
    trendsSlots () {
      // 返回组件插槽，过滤掉'操作'插槽
      const useLess = ['handle']
      const slots = this.initTable.columns.filter((item) => {
        return !useLess.includes(item.dataIndex)
      })
      return slots
    }
  },
  methods: {
    // 初始化表格
    async init (params, _ = { pageIndex: 1, pageSize: 10 }) {
      this.loading = true
      const data = {
        ...params,
        ...this.apiQuery.data,
        pagination: { ..._ }
      }
      const res = await this.$api(this.apiQuery.url, data)
      const list = this.handleData(res.list)
      this.listData = { data: list, total: res.total }
      this.loading = false
    },
    async deleteBtnClick () {},
    // 分页器刷新表格,判断是否使用缓存查询
    updatePage (_) {
      const params = this.isNeedStorage
        ? this.getQueryParams(this.queryName)
        : {}
      this.init(params, { pageIndex: _.pageIndex, pageSize: _.pageSize })
    },
    updateSelect (_) {
      console.log(_, '选择序号改变了')
    }
  },
  created () {
    this.isNeedStorage
      ? this.init(
        this.getQueryParams(this.queryName),
        this.initTable.current_size
      )
      : this.init({}, this.initTable.current_size)
  }
}
</script>

初始化表格

// 初始化表格
async init (params, _ = { pageIndex: 1, pageSize: 10 }) {
  this.loading = true
  const data = { // 请求参数
    ...params,
    ...this.apiQuery.data,
    pagination: { ..._ }
  }
  const res = await this.$api(this.apiQuery.url, data) // 获取表格数据
  const list = this.handleData(res.list)
  this.listData = { data: list, total: res.total } // 存入data
  this.loading = false
}

分页器和选择框

// @updatePage="updatePage" -----   @updateSelect="updateSelect"
updatePage (_) { // 分页器改变重新获取数据
  const params = this.isNeedStorage
    ? this.getQueryParams(this.queryName)
    : {}
  this.init(params, { pageIndex: _.pageIndex, pageSize: _.pageSize })
}

updateSelect (_) {
  console.log(_, '选择序号改变了')
}

配置文件

import { comLayout02 } from '../base.config'
export const proTableConfig = { // 其实就是base-table的配置文件
  layout: {
    content: { xl: 24 }
  }, // 表格宽度
  tableOptions: {
    style: { width: '100%' }
  },
  rowKey: 'productId', // 列表唯一id
  columns: [
    {
      dataIndex: 'productId',
      title: 'setProduct.productId'
    },
    {
      dataIndex: 'appId',
      title: 'setProduct.appId'
    }

    { dataIndex: 'handle', title: '操作', minWidth: '80' }
  ],
  current_size: comLayout02.currentSize,
  tableShowList: comLayout02.tableShowList
}

computed-table计算表格

props

props: {
    initData: { // 表格默认数据
      type: Array,
      default: () => []
    },
    queryName: { // 如果需要vuex中的formData缓存,那么就可以写入和search-form一样的queryName
      type: String,
      default: () => ''
    },
    initTable: { // 初始化表格组件，也就是edit-table的配置
      type: Object,
      require: true
    },
    isNeedStorage: { // 是否需要使用vuex中的搜索参数初始化表格
      type: Boolean,
      default: false
    }
}

script

<script>
import { createNamespacedHelpers } from 'vuex'
import EditTable from '@/components/AntDesign/ant-table/edit-table.vue'
const { mapGetters } = createNamespacedHelpers('common')
export default {
  components: {
    EditTable
  },
  data () {
    return {
      listData: {
        data: [],
        total: 0
      }
    }
  },
  computed: {
    ...mapGetters(['getQueryParams']),
    trendsSlots () { // 返回组件插槽，过滤掉'操作'插槽
      const useLess = ['handle']
      const slots = this.initTable.columns.filter((item) => {
        return !useLess.includes(item.dataIndex)
      })
      return slots
    },
    handleValueChange (value, key) { // 当表格里面的表单数据发生变化的时候触发
      // console.log(value, key)
      return 1
    }
  },
  created () {
    // 初始化表格
    this.listData = { ...this.listData, data: this.initData }
  }
}
</script>

计算表格数据发生变化

// @updateData="updateData" 由edit-table组件触发
updateData (dataSource) {
  // 表格里面的数据发生变化时立刻传给父组件
  this.$emit('updateData', dataSource)
}

分页器和选择框

// 计算表格目前还没有遇到需要分页和选择框的需求,还没有完善
updatePage (_) {
  const params = this.getQueryParams(this.queryName)
  // this.init(params, _)
},
updateSelect (_) {
  console.log(_, '选择序号改变了')
}

提交表格数据

submitForm (canNull = []) { // 一行中的谁可以为空不填
  const dataSource = this.$refs.editTableRef.dataSource
  let checked = true // true是没问题的
  let checkedName // 是哪一个属性不合法
  if (dataSource.length === 0) return { checked, result: dataSource } // 表格为空直接返回
  dataSource.forEach((item) => { // 循环判断
    if (canNull.length === 0) {
      // 每一项都不可以为空
      Object.keys(item).forEach((name) => {
        if (
          item[name] === null ||
          item[name] === undefined ||
          item[name] === ''
        ) {
          checked = false
          checkedName = name
        }
      })
    } else {
      const noNull = Object.keys(item).filter((key) => { // 把可以为空的过滤掉
        return !canNull.includes(key)
      })
      noNull.forEach((name) => { // 判断剩下不可以为空的
        if (
          item[name] === null ||
          item[name] === undefined ||
          item[name] === ''
        ) {
          checked = false
          checkedName = name
        }
      })
    }
  })
  return { checked, result: checked ? dataSource : checkedName }
},

增加删除表格项

handleAddDelete (action = 'add', _) { // 传入edit-table action: 'add'/'delete'
  // 增加删除列表项
  this.$refs.editTableRef.handleAddDelete(action, _)
}

配置文件

export let feeIsValidate = true
export const beforeFeeList = {
  layout: ...,
  tableOptions: ...,
  rowKey: ...,
  columns: [
    {
      dataIndex: 'name',
      title: 'setProduct.beforeLoanFee'
    },
    {
      dataIndex: 'rate',
      title: 'setProduct.rate'
    },
    {
      dataIndex: 'fixedCharge',
      title: 'setProduct.fixedCharge'
    },

    { dataIndex: 'handle', title: 'table.operation', minWidth: '80' }
  ],
  tableForm: { // 表格里面的表单类型: input/inputNumber/select
    formMain: {
      name: {
        type: 'input'
      },
      rate: {
        type: 'inputNumber'
      },
      fixedCharge: {
        type: 'inputNumber'
      }，
      chargeType: {
          type: 'select',
          options: [
            {
              value: 2,
              label: vue.$t('setProduct.Yes')
            },
            {
              value: 1,
              label: vue.$t('setProduct.No')
            }
          ]
        }
    },
    rules: { // 表单检验规则
      name: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              feeIsValidate = false
              return callback(new Error("beforeLoanFeeName can't be null"))
            }
            feeIsValidate = true
            callback()
          },
          required: true,
          trigger: 'change'
        }
      ]
    }
  }
}

detail-dialog

示例

<a-modal
    v-bind="detailOptions"
    :visible="visible"
    centered
    destroyOnClose
    @ok="switchVisible"
    @cancel="switchVisible"
>
    <base-card v-bind="cardList"></base-card>
    <slot name="default"></slot>
	<template slot="footer">
        <slot name="footer">
            <a-button type="primary" @click="switchVisible">关闭</a-button>
        </slot>
    </template>
</a-modal>
<script>
export default {
  props: {
    detailOptions: { // 卡片的配置项
      type: Object,
      default: () => ({
        width: '80%'
      })
    },
    : { // 在外部过滤完的数据
      type: Object,
      default: () => {}
    }
  },
  components: {
    BaseCard
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    switchVisible () {
      this.visible = !this.visible
    }
  }
}
</script>

数据

// cardList是数组
[
    { // 第一个卡片
        "type": "default",
        "key": "12",
        "cardOption": {
            "title": "产品信息"
        },
        "itemLayout": {
            "span": 4,
            "style": {
                "margin": "15px 0"
            }
        },
        "contentList": [
            {
                "title": "产品",
                "text": "credifio-co"
            },
            {
                "title": "产品名称",
                "text": "Kes 7 Days"
            }
        ]
    },
    { // 其他卡片
        
    }
]

使用方法

配置数据处理函数

filterData

/**
 * @param 表单数组，所有要改动的表单项，添加进来的属性名
 * @param 更改表单中的表单项
 */
export const filterData = (_, keyFun, name = 'inputRule') => {
  _.forEach((item) => {
    for (let obj of keyFun) {
      if (obj[item.value]) {
        item[name] = obj[item.value]
      }
    }
  })
  return _
}
// 使用
export const addLevelForm = (vue) => {
  return {
    ...comLayout01,
    formMain: [
      {
        value: 'appId',
        type: 'select',
        label: 'setProduct.appId'
      }
    ]
  }
}
// 使用filterData也可以使用initFormOptions
initLevelForm () {
  const formMain = filterData(
    addLevelForm(this).formMain,
    [
      {
        appId: [
          ...getVestApp(this.enumerate.appId, this.setting.curSystem.value)
        ],
        // ...
      }
    ],
    'options'
  )
  return { ...addLevelForm(this), formMain }
}

listFilterData

/**
 * @param 表单数组，第几步的表单项，所有要改动的表单项，添加进来的属性名
 * @param 给弹出框中的表单项初始化，更新表单项
 */
export const listFilterData = (_, step, keyFun, name = 'inputRule') => {
  const form = _.find((item) => {
    return item.step === step
  })
  if (form.initForm) {
    const formMain = filterData(form.initForm.formMain, keyFun, name)
    const initForm = { ...form.initForm, formMain }
    const formList = _.map((item) => {
      return item.step === step ? { ...item, initForm } : { ...item }
    })
    return formList
  }
  return _
}
// 使用
export const levelEditForm = (vue) => {
  return {
    formList: [
      {
        addTitle: vue.$t('setProduct.addProduct'),
        editTitle: vue.$t('setProduct.editLevel'),
        confirmText: 'setProduct.confirm',
        cancelText: 'setProduct.cancel',
        prevText: 'setProduct.prev',
        nextText: 'setProduct.next',
        step: 1, // 这是第几步才会出现的表单
        name: 'step1', // 表单的数据绑定
        initForm: levelActionForm(vue)
      }
    ]
  }
}
levelEditForm () {
  const config = levelEditForm(this)
  let formList = dialogFilterData(
    config.formList,
    1, // 第几步的表单要添加
    [
      {
        appId: [
          ...getVestApp(this.enumerate.appId, this.setting.curSystem.value)
        ]
      }
    ],
    'options'
  )
  return { ...config, formList }
}

initData

/**
 * @param 初始化表单数据,如果没有默认值的话将所有值置空
 */
export const initData = (initArray, initObj = {}) => {
  // 做数据回显,初始化表单数据
  const data = {}
  initArray.forEach((item) => {
    if (initObj[item.value] !== undefined) {
      data[item.value] = initObj[item.value]
    } else {
      data[item.value] = ''
    }
  })
  return data
}

initListData

/**
 * @param 初始化多个表单数据
 */
export const initListData = (formList, echoFormList = []) => {
  const data = {}
  formList.forEach((item) => {
    if (item.initForm) { // 判断有无表单配置对象
      echoFormList.forEach((initItem) => {
        if (item.name === initItem.name) {
          data[item.name] = initData(item.initForm.formMain, initItem.initForm)
        } else if (!item[initItem.name] && initItem[item.name]) {
          // formList不存在这个step，echoFormList存在
          data[initItem.name] = {}
        } else if (!initItem[item.name] && item[initItem.name]) {
          // formList存在这个step，echoFormList不存在
          data[item.name] = initData(item.initForm.formMain)
        }
      })
    }
    if (echoFormList.length === 0) {
      // 即使没有初始化数组也不至于报错
      data[item.name] = {}
    }
  })
  return data
}
// 使用
switchVisible () {
  // 切换弹窗显隐，并且初始化数据
  this.step = 1
  this.formData = initListData(this.formList, this.echoFormList)
  this.visible = !this.visible
}

initEchoFormList

// 更新初始化，保留之前的初始化数据，也可以增加修改
export const initEchoFormList = (echoFormList, newEchoFormList) => {
  echoFormList.forEach((item) => {
    newEchoFormList.forEach((key) => {
      if (item.name === key.name) {
        item.initForm = { ...item.initForm, ...key.initForm }
      }
    })
  })
  return echoFormList
}

initFormOptions

/**
 * @param 初始化表单中的选择框
 */
export const initFormOptions = (formMain, optionsList) => {
  const _ = Object.keys(optionsList)
  formMain.forEach((item) => {
    _.forEach((key) => {
      if (item.value === key && item.type === 'select') {
        item.options = optionsList[key]
      }
    })
  })
  return formMain
}
// 使用
export const levelSearchFormConfig = {
  ...comLayout02,
  formMain: [
    {
      value: 'appId',
      type: 'select',
      label: 'setProduct.appId'
    }
  ]
}
levelSearchFormConfig () {
  const appIdOptions = [
    { label: this.$t('table.all'), value: '' },
    ...getVestApp(this.enumerate.appId, this.setting.curSystem.value)
  ]
  // 初始化表单选择框
  const formMain = initFormOptions(levelSearchFormConfig.formMain, {
    appId: appIdOptions
  })
  return { ...levelSearchFormConfig, formMain }
}

搜索表单

<!-- 搜索表单 -->
<search-form
  ref="searchFromRef"
  queryName="setProduct"
  :initForm="proSearchFormConfig"
  @reset="search"
  @submit="search"
>
  <template #add>
    <a-col>
      <a-button
        type="primary"
        @click="$refs.productActionRef.handleAddProduct()"
      >添加产品</a-button>
    </a-col>
  </template>
</search-form>

base-dialog弹窗

示例

<base-dialog
    v-bind="productDialogConfig"
    ref="baseDialogRef"
    @actionNextSubmit="actionNextSubmit"
    @selectUpdate="hasSetLevel"
    @switchVisible="resetFeeActionTable"
>
    <!--步骤插槽-->
    <template #step1>
      <computed-table
        class="computed_beforeFee"
        ref="computedBeforeFeeRef"
        queryName="computedBefore"
        :initTable="beforeFeeList"
        :initData="beforeFeeData"
        :isNeedStorage="false"
      >
        <template #leftTitle>
          <div>
            <p>{{ $t('setProduct.beforeLoanFee') }}</p>
            <a-button type="primary" @click="handleBeforeFee('add')">
              <a-icon type="plus" />
            </a-button>
          </div>
        </template>
        <template #handle="scope">
          <a-button type="danger" @click="handleBeforeFee('delete', scope.row)"
            ><a-icon type="delete"
          /></a-button>
        </template>
      </computed-table>
      <!-- 贷前费用和贷后费用的分割线 -->
      <computed-table
        class="computed_table"
        ref="computedAfterFeeRef"
        queryName="computedAfter"
        :initTable="afterFeeList"
        :initData="afterFeeData"
        :isNeedStorage="false"
      >
        <template #leftTitle>
          <div>
            <p>{{ $t('setProduct.afterLoanFee') }}</p>
            <a-button type="primary" @click="handleAfterFee('add')">
              <a-icon type="plus" />
            </a-button>
          </div>
        </template>
        <template #handle="scope">
          <a-button type="danger" @click="handleAfterFee('delete', scope.row)"
            ><a-icon type="delete"
          /></a-button>
        </template>
      </computed-table>
    </template>
</base-dialog>

编辑回显数据

适用于第一次点击编辑按钮的时候，但是如果要完成类似于点击默认产品出现第二步，而第二步的产品回显要查询得到数据，那么这个方法就不适用，可以直接使用setFormData方法改变表单数据

// <a-button @click="$refs.productActionRef.handleAddProduct()">
// {{ $t('setProduct.addProduct') }}
// </a-button>
async handleEditProduct (_) {
  try {
    const res = await this.$api(
      `/${this.setting.curSystem.prefixApi}${getProductNew}?productId=${_.productId}`,
      {},
      'get'
    )
    // 如果不是默认产品就可以这样
    this.$refs.baseDialogRef.handleAction({
      action: 'edit',
      data: { step1: res }, // !回显要加上是第几步的表单数据
      disabledList: { step1: ['productName', 'limitDays'] } // 指定第几步的禁用
    })
  } catch (error) {
    console.log(error)
  }
},

编辑禁用输入框

在添加时，是不需要禁用某些输入框的，但是编辑时需要的，所以在编辑时，除了要传数据，还要传disabledList

// 如果不是默认产品就可以这样
this.$refs.baseDialogRef.handleAction({
  action: 'edit',
  data: { step1: res }, // !回显要加上是第几步的表单数据
  disabledList: { step1: ['productName', 'limitDays'] } // 指定第几步的禁用
})

配置文件禁用输入框

比如说一开始就不可以输入的框，或者是类似于第二步的添加等级，都是死的，从头到尾，无论是添加还是编辑都是禁用的，那么就可以使用

formMain: [
  {
    value: 'appId',
    type: 'select',
    label: 'setProduct.appId',
    disabled: true
  },
  {
    value: 'creditLevel',
    type: 'input',
    label: 'setProduct.creditLevel',
    disabled: true
  }
]

动态回显修改表单数据

this.$refs.baseDialogRef.setFormData({
  stepName: 'step2',
  value: data // !回显要加上是第几步的表单数据
})

配置处理，添加属性

initLevelForm () { // 第二步的表单
  const formMain = filterData(
    addLevelForm(this).formMain,
    [
      {
        appId: [
          ...getVestApp(this.enumerate.appId, this.setting.curSystem.value)
        ]
      }
    ],
    'options'
  )
  return { ...addLevelForm(this), formMain }
}

中途添加步骤

// <base-dialog @selectUpdate="hasSetLevel">
hasSetLevel (data) { // 选择框产品类型更换决定是否有第二步
  const { value = 3, step } = data
  if (step === 1) {
    this.productTypeActive = value
  }
}

// <base-dialog v-bind="productDialogConfig">
import { proActionConfig } from './config/productConfig/pro-action.config'
computed: {
    proActionConfig() {
        const config = proActionConfig(this)
        let formList = dialogFilterData( // 第一步配置过滤
            config.formList,
            1,
            [
              {
                appId: [
                  ...getVestApp(this.enumerate.appId, this.setting.curSystem.value)
                ]
              }
            ],
            'options'
        )
        if (this.productTypeActive === 1) {
            formList.push({ // 添加步骤
              addTitle: '第2步',
              editTitle: this.$t('编辑'),
              confirmText: 'confirm',
              cancelText: 'cancel',
              prevText: 'prev',
              nextText: 'next',
              step: 2, // 这是第几步才会出现的表单
              name: 'step2', // 表单的数据绑定
              initForm: this.initLevelForm
            })
        } else {
            formList.length === 2 && formList.pop()
        }
        return { ...config, formList }
    }
}

修改初始化echoFormList

利用initEchoFormList函数

productDialogConfig () {
    const config = proActionConfig(this)
    const echoFormList = initEchoFormList(config.echoFormList, [
        {
            name: 'step2',
            initForm: {
              appId: this.appId
            }
        }
    ])
    return { ...config, formList }
}

显示弹窗并初始化

handleAddProduct () {
  this.$refs.baseDialogRef.handleAction({ action: 'add' })
}

确认action

// <base-dialog @actionNextSubmit="actionNextSubmit">
actionNextSubmit (value) {
  // 弹窗确认数据
  const { formData, step, formList, stepName, action } = value
  let product
  let data = { ...formData }

  if (step === 1) {
    product = this.productFilter(data)
    if (product) {
      if (data.productType === 1) { // 默认产品有第二步，先不发送请求
        this.$refs.baseDialogRef.stepControl('next', 2)
      } else {
        action === 'add' && this.addProduct(product)
        action === 'edit' && this.editProduct(product)
      }
    }
  } else if (step === 2) {
    product = this.productFilter(formList['step1'])
    if (product) {
      action === 'add' && this.addProduct(product)
      action === 'edit' && this.editProduct(product)
    }
  }
}

computed-table

  <computed-table
    class="computed_table"
    ref="computedAfterFeeRef"
    queryName="computedAfter"
    :initTable="afterFeeList"
    :initData="afterFeeData"
    :isNeedStorage="false"
  >
    <!-- @updateData="feeUpdateData" -->
    <template #leftTitle>
      <div>
        <p>{{ $t('setProduct.afterLoanFee') }}</p>
        <a-button type="primary" @click="handleAfterFee('add')">
          <a-icon type="plus" />
        </a-button>
      </div>
    </template>
    <template #handle="scope">
      <a-button type="danger" @click="handleAfterFee('delete', scope.row)"
        ><a-icon type="delete"
      /></a-button>
    </template>
  </computed-table>

添加删除表单项

handleBeforeFee (action = 'add', row) {
  const uniqueId = _uniqueId()
  if (action === 'add') {
    this.$refs.computedBeforeFeeRef.handleAddDelete('add', {
      uniqueId,
      name: '', // 费用名称
      fixedCharge: 0, // 固定费用金额
      rate: 0 // 砍头利率
    })
  } else {
    this.$refs.computedBeforeFeeRef.handleAddDelete('delete', row.uniqueId)
  }
}

重置表格数据

// <base-dialog  @cancelAction="resetFeeActionTable">
// 当弹窗消失时重置表格数据
resetFeeActionTable () {
  this.beforeFeeData = []
  this.afterFeeData = []
}

编辑表格

• @click="$refs.productActionRef.handleEditProduct(scope.row)"

• async handleEditProduct (_) {
    try {
      const res = await this.$api(...) // 获取回显数据,其中包括了表格和表单数据
      let bfFee
      if (res.preLoanFeeSettings.length !== 0) {
        bfFee = res.preLoanFeeSettings.map((item) => { // 添加唯一标识,方便删除和添加
          return { ...item, uniqueId: _uniqueId() }
        })
      }
      this.beforeFeeData = bfFee || [] // 赋值给data，因为传过去的数据也是data中的数据
      let { logList ...params } = res // 删除回显数据中不需要的属性
      this.$refs.baseDialogRef.handleAction({
        action: 'edit',
        data: { step1: params }, // !回显要加上是第几步的表单数据
        disabledList: { step1: ['productName', 'limitDays'] } // 指定第几步的禁用项
      })
    } catch (error) {
      console.log(error)
    }
  }

• handleAction ({ action = 'add', data = {}, disabledList = {} }) {
    this.switchVisible() // 先初始化，不然会覆盖后面的回显数据
    this.action = action
    if (this.action === 'edit') {
      // 如果是编辑需要回显数据
      this.formData = { ...data }
    }
    this.disabledList = { ...disabledList }
  }