cip-components/cip-form-input/basic/table/index.vue

<template>
  <div class="basic-table">
    <cip-table :offset="offset"
               :data="modelValue"
               @update:data="updateData"
               :columns="options"
               :depend-on-values="dependOnValues"
               :border="hideBorder"
               :field-key="fieldKey"
               :tableHeaderLabel="config.tableHeaderLabel"
               :hide-index="config.hideIndex"
               :index-fixed="config.indexFixed ?? true"
               :show-summary="config.showSummary"
               :span-method="config.spanMethod"
               size="small"
               :stripe="true"
               :in-form="true">
      <el-table-column width="80px" v-if="!config?.hideDelete" fixed="right" label="操作">
        <template #default="{$index}">
          <cip-table-button @click="insertItem($index)">
            <i class="el-icon-circle-plus-outline cip-primary-color  handler-size"/>
          </cip-table-button>
          <cip-table-button @click="deleteItem($index)">
            <i class="el-icon-remove-outline cip-danger-color handler-size"/>
          </cip-table-button>
        </template>
      </el-table-column>
    </cip-table>
    <div style="text-align: center" v-if="!config?.hideAdd">
      <el-button size="medium" type="text" @click="addItem">
        <i  class="el-icon-circle-plus create-handle" />
      </el-button>
    </div>
  </div>
</template>
<script>
import { computed, defineAsyncComponent, inject } from 'vue'
import { formInputProps } from '@cip/components/cip-form-input/form-input-props'
import { ElButton, ElMessageBox, ElTableColumn } from 'element-plus'
import { useFormInput } from '@cip/components/hooks/form-input'
import CipTableButton from '@cip/components/cip-table-button'
import { setOptionWritable } from './util'
export default {
  name: 'basic-table',
  components: {
    CipTable: defineAsyncComponent(() => import('@cip/components/cip-table')),
    CipTableButton,
    ElButton,
    ElTableColumn
  },
  props: {
    ...formInputProps,
    type: {
      default: 'input'
    }
  },
  setup (props, context) {
    const elFormItem = inject('elFormItem', {})
    const formInput = useFormInput(props, context)
    const { emitInput } = formInput
    // if (!isArray(props.modelValue)) {
    //   emitInput([])
    // }
    const offset = computed(() => {
      return props.config.hideIndex ? undefined : 0
    })
    const hideBorder = computed(() => {
      return !props.config.hideBorder
    })

    const options = computed(() => {
      let options = props.config.options || []
      if (props.config.tableColumnStatus === 'writable') {
        options = setOptionWritable(options, true)
      }
      return options
    })

    const addItem = () => {
      const val = Array.isArray(props.modelValue) ? props.modelValue : []
      val.push({})
      emitItemValidate(val)
      emitInput(val)
    }
    const insertItem = (index) => {
      const val = props.modelValue
      val.splice(index, 0, {})
      emitItemValidate(val)
      emitInput(val)
    }
    const deleteItem = (index) => {
      ElMessageBox.confirm('确实删除此列', '提示').then(() => {
        const val = props.modelValue
        val.splice(index, 1)
        emitItemValidate(val)
        emitInput(val)
      }).catch(() => {})
    }

    const emitItemValidate = (val) => {
      // eslint-disable-next-line no-unused-expressions
      elFormItem.formItemMitt?.emit('el.form.change', [val])
    }

    const updateData = (val) => {
      formInput.emitModelValue(val)
    }

    return {
      offset,
      hideBorder,
      options,
      insertItem,
      deleteItem,
      addItem,
      updateData
    }
  }
}
</script>
<style lang="less">
.el-form-item.is-error{
  .basic-table{
    outline: 1px solid @danger;
  }
}
.basic-table{
  overflow: hidden;
  width: 0;
  flex-grow: 2;
  .handler-size{
    font-size: 16px;
  }
  .create-handle{
    font-size: 24px;
  }
}
</style>