iTDM-web/itdmWeb/src/views/module-iTDM/weituo/modules/step/Step2.vue

<template>
  <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
    <a-table
      :columns="columns"
      :dataSource="model.data"
      :pagination="false"
      :rowKey="(record, index) => { return index }"
      bordered
      class="u-edit-table"
    >
      <!-- <template
        v-for="(col, i) in ['sampleName', 'sampleModelSpecification', 'sampleQuantities','sampleManufacturer']"
        :slot="col" slot-scope="text, record">
        <a-input
          :disabled="formDisabled"
          :key="col"
          style="margin: -5px 0"
          :value="text"
          :placeholder="columns[i].title"
          @change="e => handleChange(e.target.value, record.key, col)"
        />
      </template> -->
      <template slot="sampleName" slot-scope="text, record,index">
        <a-form-model-item :prop="'data.'+index+'.sampleName'" :rules="validatorRules.sampleName">
          <a-input :disabled="formDisabled" v-model="record.sampleName"></a-input>
        </a-form-model-item>
      </template>
      <template slot="sampleModelSpecification" slot-scope="text, record,index">
        <a-form-model-item :prop="'data.'+index+'.sampleModelSpecification'"
                           :rules="validatorRules.sampleModelSpecification">
          <a-input :disabled="formDisabled" v-model="record.sampleModelSpecification"></a-input>
        </a-form-model-item>
      </template>
      <template slot="sampleQuantities" slot-scope="text, record,index">
        <a-form-model-item :prop="'data.'+index+'.sampleQuantities'" :rules="validatorRules.sampleQuantities">
          <a-input :disabled="formDisabled" v-model="record.sampleQuantities"></a-input>
        </a-form-model-item>
      </template>
      <template slot="sampleManufacturer" slot-scope="text, record,index">
        <a-form-model-item :prop="'data.'+index+'.sampleManufacturer'" :rules="validatorRules.sampleManufacturer">
          <a-input :disabled="formDisabled" v-model="record.sampleManufacturer"></a-input>
        </a-form-model-item>
      </template>


      <template slot="operation" slot-scope="text, record">
          <span>
              <a-popconfirm title="是否要删除此行？" :disabled="formDisabled" @confirm="remove(record.key)">
                <a>删除</a>
              </a-popconfirm>
            </span>
      </template>
    </a-table>
    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" :disabled="formDisabled"
              icon="plus" @click="newMember">
      新增样品
    </a-button>


    <a-form-item class="buttonAll">
      <div class="all">
        <a-button @click="prevStep" class="next">上一步</a-button>
        <a-button type="primary" @click="nextStep" class="next">下一步</a-button>
      </div>

    </a-form-item>
  </a-form-model>


</template>

<script>


export default {
  name: 'step2',
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    let checkSampleNameGgxh = (rule, value, callback) => {
      // console.log(rule, value, callback)
      var currentRowIndex = parseInt(rule.field.substring(5, 6))
      var currentValue = this.model.data[currentRowIndex]
      // console.log(this.model.data[currentRowIndex])
      var arr = this.model.data.filter(item => item.sampleName === currentValue.sampleName && item.sampleModelSpecification === currentValue.sampleModelSpecification)
      // console.log(arr)
      if (arr.length > 1) {
        callback(new Error('样品名称和规格型号不能全重复'))
      } else {
        callback()
      }
    }
    let numbermin = (rule, value, callback) => {

      if (value < 1) {
        callback(new Error('样品数量必须大于等于1'))
      } else {
        callback()
      }
    }

    return {
      count: 1,
      validatorRules: {
        sampleName: [
          { required: true, message: '请输入样品名称!' },
          { validator: checkSampleNameGgxh }
        ],
        sampleModelSpecification: [
          { required: true, message: '请输入样品规格/型号!' },
          { validator: checkSampleNameGgxh }
        ],
        sampleQuantities: [
          { required: true, message: '请输入样品数量!' },
          { type: 'number', message: '样品数量必须是数字',transform:(value)=>Number(value) },
          { validator: numbermin }
        ],
        sampleManufacturer: [
          { required: true, message: '请输入生产厂家!' }
        ]
      },
      model: {
        data: []
      },
      description: '高级表单常见于一次性输入和提交大批量数据的场景。',
      loading: false,

      // table
      columns: [
        {
          title: '样品名称',
          dataIndex: 'sampleName',
          key: 'sampleName',
          align: 'center',
          scopedSlots: { customRender: 'sampleName' }
        },
        {
          title: '样品规格/型号',
          dataIndex: 'sampleModelSpecification',
          key: 'sampleModelSpecification',
          align: 'center',
          scopedSlots: { customRender: 'sampleModelSpecification' }
        },
        {
          title: '样品数量',
          dataIndex: 'sampleQuantities',
          key: 'sampleQuantities',
          align: 'center',
          scopedSlots: { customRender: 'sampleQuantities' }
        },
        {
          title: '生产厂家',
          dataIndex: 'sampleManufacturer',
          key: 'sampleManufacturer',
          align: 'center',
          scopedSlots: { customRender: 'sampleManufacturer' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    baseInfos() {
      return this.$store.getters.baseInfos
    },
    yangpinInfos() {
      return this.$store.getters.yangpinInfos
    },
  },
  created() {
    this.setInitData()
  },
  methods: {
    // 设置初始数据
    setInitData(){
      if (this.yangpinInfos.length > 0) {
        this.model.data = this.yangpinInfos.map((item, index) => {
          item.key = (index+1) + ''
          item.editable = true
          return item
        })
        this.count = this.yangpinInfos.length + 1
        // console.log(this.model.data)
      } else {
        this.model.data = []
        this.newMember()
      }
    },
    // 新增样品
    newMember() {
      console.log(this.count)
      this.model.data.push({
        key: this.count + '',
        sampleQuantities: 1,
        sampleModelSpecification: '',
        sampleName: '',
        sampleManufacturer: this.baseInfos ? this.baseInfos.weituoClient : '',
        editable: true,
        isNew: true
      })
      this.count++
    },
    // 删除
    remove(key) {
      console.log(key)
      const newData = this.model.data.filter(item => item.key !== key)
      this.model.data = newData
      // this.model.data.splice(this.model.data.findIndex(item=>item.key === key), 1)
    },
    //saveRow(key) {
    //   let target = this.data.filter(item => item.key === key)[0]
    //   target.editable = false
    //   target.isNew = false
    // },
    handleChange(value, key, column) {
      const newData = [...this.model.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.model.data = newData
      }
    },
    // 下一步
    nextStep() {
      // console.log(11111,this.model.data)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$store.commit('SET_YANGPININFO', this.model.data);
          this.$emit('nextStep')
        }
      })
    },
    // 上一步
    prevStep() {
      this.$store.commit('SET_YANGPININFO', this.model.data);
      this.$emit('prevStep')
    },
  }
}
</script>

<style lang="less" scoped>
.u-edit-table{
  margin-top: 12px;
  .ant-form-item{
    margin-bottom: 0;
  }
  /deep/.ant-table-tbody .ant-table-row td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  // .ant-table-tbody > tr > td{
    
  //   padding-top: 0 !important;
  // }
  .ant-input{
    // padding: 0;
    border: none;
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) .ant-input{
    background: #e6f7ff;
  }
  // .ant-input:hover{
  //   background: #e6f7ff;
  // }
  .ant-input:focus{
    box-shadow: none;
  }
}
.card {
  margin-bottom: 24px;
}

.next {
  width: 35%;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
}

.buttonAll {
  width: 100%;
  align-items: center;
  justify-content: center;
}

.all {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>