crm-mobile/components/wk-form/wk-field-table.vue

<template>
  <view class="wk-field-table">
    <view v-for="(item, index) in dataList" :key="index">
      <view class="wk-field__label">
        <!-- <view v-if="field.isNull === 1" class="line" /> -->
        <text class="title">
          {{ _label }}（{{ index + 1 }}）
        </text>
        <text
          v-if="dataList.length > 1"
          class="control"
          @click="handleDelete(index)">
          删除
        </text>
      </view>
			
      <view class="wk-field__body">
        <wk-form
          v-if="showForm"
          ref="childForm"
          :fields="item"
          :is-detail-table="true"
          @change="(data) => handleValueChange(data, index)" />
      </view>
    </view>

    <view v-if="!field.disabled" class="wk-field__footer">
      <view @click="handleAdd">
        <text class="wk wk-plus add-icon" />
        <text>{{ field.remark || '' }}</text>
      </view>
    </view>
		
    <view v-if="field.disabled" class="mask" />
    <!-- <view class="mask"></view> -->
  </view>
</template>

<script>
  import mixins from './mixins'
  import { deepCopy } from '@/utils/lib.js'
  import formMixins from '@/mixins/formMixins.js'
	
  export default {
    name: 'WkFieldTable',
    components: {
      'wk-form': () => import('./wk-form.vue')
    },
    mixins: [mixins, formMixins],
    data() {
      return {
        defaultVal: null,
				
        dataList: [],
				
        showForm: true
      }
    },
    mounted() {
      // console.log('this.field: ', this.field)
      this.defaultVal = deepCopy(this.field.fieldExtendList).map(o => {
        return {
					...o,
					value: this.mixinsFormatFieldValue(o)
        }
      })
			
      if (this.$isEmpty(this.field.value)) {
        this.dataList.push(deepCopy(this.defaultVal))
      } else {
        // console.log('this.field: ', this.field)
        this.dataList = this.field.value.map(childArr => {
          // console.log('childArr', childArr)
          return childArr.map(o => {
            return {
							...o,
							value: this.mixinsFormatFieldValue(o)
            }
          })
        })
      }
    },
    methods: {
      /**
       * 修改
       * @param {Object} data
       * @param {Object} index
       */
      handleValueChange(data, index) {
        console.log('value change: ', data, index)

        this.$refs.childForm[index].getForm(false, false).then(res => {
          this.dataList[index] = res.field
          console.log('dataList: ', this.dataList)
					
          this.$emit('input', this.dataList)
          this.$emit('change', {
            index: this.index,
            field: this.field,
            value: this.dataList
          })
        })
      },

      /**
       * 添加事项
       */
      handleAdd() {
        this.dataList.push(deepCopy(this.defaultVal))
      },
			
      /**
       * 删除事项
       * @param {Object} index
       */
      handleDelete(index) {
        this.showForm = false
        this.dataList.splice(index, 1)
        this.$nextTick(() => {
          this.showForm = true
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.wk-field-table {
		position: relative;
		
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 100;
			background-color: transparent;
		}
		
		.wk-field__label {
			font-size: 28rpx;
			color: $gray;
			padding: 18rpx 30rpx;
			background-color: #F3F5FA;
			margin: 0 -30rpx;
			@include left;
			
			.title {
				flex: 1;
			}
			.control {
				color: $theme-color;
			}
		}
		
		.wk-field__body {
			margin: 0 -32rpx;
		}
		
		.wk-field__footer {
			height: 80rpx;
			font-size: 26rpx;
			color: $theme-color;
			background-color: #F3F5FA;
			margin: 0 -30rpx;
			@include center;
			.add-icon {
				font-size: 28rpx;
				color: $theme-color;
				margin-right: 15rpx;
			}
		}
	}
</style>