DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/customform-table.vue

<template>
  <view>
    <!-- 循环按照 formValue 里的行来渲染表格块 -->
    <view v-for="(valueItem, valueIndex) in value" :key="valueIndex">
      <!-- 表格内部的组件 只有几种 (layer 类似 select，label 类似 title) -->
      <!-- 表格标题 除了第一个，后面的都有删除按钮 -->
      <view class="table-item padding-lr">
        <view class="table-item-title">{{ item.title }} (第{{ valueIndex + 1 }}行)</view>
        <view v-if="valueIndex !== 0 && edit" @click="tableDelete(valueIndex)" class="table-item-delete text-blue">
          删除
        </view>
      </view>

      <!-- 循环按照 fieldsData 里面定义的列来渲染组件 -->
      <view v-for="tableItem of item.fieldsData" :key="tableItem.id">
        <!-- 标题文字 label -->
        <l-input
          v-if="tableItem.type === 'label'"
          :value="getTableValue(`${valueIndex}.${tableItem.field}`)"
          :title="tableItem.name"
          disabled
        />

        <!-- 文字输入框 input (text) -->
        <l-input
          v-else-if="tableItem.type === 'input'"
          @input="setTableValue(`${valueIndex}.${tableItem.field}`, $event)"
          :value="getTableValue(`${valueIndex}.${tableItem.field}`)"
          :disabled="!edit"
          :required="Boolean(tableItem.verify)"
          :title="tableItem.name"
        />

        <!-- 单选和选择 radio select -->
        <l-select
          v-else-if="tableItem.type === 'radio' || tableItem.type === 'select'"
          @input="setTableValue(`${valueIndex}.${tableItem.field}`, $event)"
          :value="getTableValue(`${valueIndex}.${tableItem.field}`)"
          :required="Boolean(tableItem.verify)"
          :range="tableItem.__sourceData__"
          :title="tableItem.name"
          :disabled="!edit"
        />

        <!-- 弹层选择器 layer -->
        <l-layer-picker
          v-else-if="tableItem.type === 'layer'"
          @input="layerSetTableValue(valueIndex, $event, tableItem.__sourceData__)"
          :value="getTableValue(`${valueIndex}.${tableItem.field}`)"
          :required="Boolean(tableItem.verify)"
          :readonly="!edit"
          :title="tableItem.name"
          :source="tableItem.__sourceData__.source"
          :layerData="tableItem.__sourceData__.layerData"
        />

        <!-- 时间 datetime / time -->
        <l-datetime-picker
          v-else-if="tableItem.type === 'datetime' && tableItem.datetime === 'datetime'"
          @input="setTableValue(`${valueIndex}.${tableItem.field}`, $event)"
          :value="getTableValue(`${valueIndex}.${tableItem.field}`)"
          :required="Boolean(tableItem.verify)"
          :disabled="!edit"
          :title="tableItem.name"
        />

        <!-- 日期 datetime / date -->
        <l-date-picker
          v-else-if="tableItem.type === 'datetime' && tableItem.datetime !== 'datetime'"
          @input="setTableValue(`${valueIndex}.${tableItem.field}`, $event)"
          :value="getTableValue(`${valueIndex}.${tableItem.field}`)"
          :required="Boolean(tableItem.verify)"
          :disabled="!edit"
          :title="tableItem.name"
        />

        <!-- 多选 checkbox -->
        <l-checkbox-picker
          v-else-if="tableItem.type === 'checkbox'"
          @input="setTableValue(`${valueIndex}.${tableItem.field}`, $event)"
          :value="getTableValue(`${valueIndex}.${tableItem.field}`)"
          :readonly="!edit"
          :range="tableItem.__sourceData__"
          :required="Boolean(tableItem.verify)"
          :title="tableItem.name"
        />
      </view>
    </view>

    <!-- 添加表格按钮 -->
    <view
      v-if="edit"
      @click="tableAdd()"
      class="bg-white flex flex-wrap justify-center align-center solid-bottom margin-bottom"
    >
      <view class="add-btn text-blue padding">+ 添加一行表格</view>
    </view>
  </view>
</template>

<script>
import get from 'lodash/get'
import set from 'lodash/set'

export default {
  name: 'l-customform-table',
  
  props: {
    item: { type: Object, required: true },
    value: { type: Array, required: true },
    edit: { type: Boolean, default: true }
  },

  methods: {
    // 设置表单数据的方法
    setTableValue(path, value) {
      const newVal = this.COPY(this.value)
      set(newVal, path, value)
      this.$emit('input', newVal)
    },

    // 获取表单数据的方法
    getTableValue(path) {
      return get(this.value, path)
    },

    // 弹层，可能一次性设置多个字段
    layerSetTableValue(tableIndex, layerValue, layerInfo) {
      const newVal = this.COPY(this.value)
      const layerData = layerInfo.layerData || []

      layerData.forEach(({ name, value }) => {
        set(newVal, `${tableIndex}.${value}`, layerValue[name] || '')
      })
      this.$emit('input', newVal)
    },

    // 删除表格行
    tableDelete(tableIndex) {
      const newVal = this.value.filter((t, i) => i !== tableIndex)
      this.$emit('input', newVal)
    },

    // 添加表格行
    tableAdd() {
      const newVal = [...this.value, this.COPY(this.item.__defaultItem__)]
      this.$emit('input', newVal)
    }
  }
}
</script>

<style lang="less" scoped>
.table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  height: 30px;

  .table-item-action {
    cursor: pointer;
  }
}

.add-btn {
  text-align: center;
  line-height: 1em;
}
</style>