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

<template>
  <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
    <a-table
      :columns="columns"
      :dataSource="model.list"
      :pagination="false"
    >


      <template slot="yangpinKeyId" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.yangpinKeyId'" :rules="validatorRules.yangpinKeyId">
          <a-select :disabled="formDisabled" v-model="record.yangpinKeyId" allowClear :dropdownMatchSelectWidth="false">
            <a-select-option v-for="d in yangpins" :key="d.sampleName">
              {{ d.sampleName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </template>

      <template slot="testItems" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.testItems'" :rules="validatorRules.testItems">
          <a-input :disabled="formDisabled" v-model="record.testItems" />
        </a-form-model-item>
      </template>


      <template slot="standardRequirement" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.standardRequirement'" :rules="validatorRules.standardRequirement">
          <!-- <j-multi-select-tag :disabled="formDisabled" v-model="record.standardRequirement" :dropdownMatchSelectWidth="false" dictCode="itdm_weituo_yiju,name,name" /> -->
          <!-- 为了解决下拉框显示不全的问题，原来的没有对应参数配置 -->
          <a-select :disabled="formDisabled" v-model="record.standardRequirement" allowClear :dropdownMatchSelectWidth="false">
            <a-select-option v-for="(item, index) in yijuLists" :key="index">
              {{ item.name }}
            </a-select-option>
          </a-select>    
        </a-form-model-item>
      </template>


      <template slot="judgementBasis" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.judgementBasis'" :rules="validatorRules.judgementBasis">
          <a-input :disabled="formDisabled" v-model="record.judgementBasis" />
        </a-form-model-item>
      </template>

      <template slot="yijufile" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.yijufile'" :rules="validatorRules.yijufile">
          <a-input :disabled="formDisabled" v-model="record.yijufile" />
        </a-form-model-item>
      </template>


      <template slot="beizhu" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.beizhu'">
          <a-input :disabled="formDisabled" v-model="record.beizhu" />
        </a-form-model-item>
      </template>


      <template slot="operation" slot-scope="text, record">
          <span>
              <a-popconfirm :disabled="formDisabled" title="是否要删除此行？" @confirm="remove(record.key)">
                <a>删除</a>
              </a-popconfirm>
            </span>
      </template>


    </a-table>
    <a-button :disabled="formDisabled" style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed"
              icon="plus"
              @click="newMember">
      新增试验信息
    </a-button>


    <a-form-item class="buttonAll">
      <div class="all">
        <a-button style="margin-left: 8px" @click="prevStep" class="next">上一步</a-button>
        <a-button v-if="!disabled" type="primary" style="margin-left: 8px" @click="submitForm" class="next">提交
        </a-button>
      </div>


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


</template>

<script>

import {getAction} from '@/api/manage'
export default {
  name: 'step3',

  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      yangpins: {},
      count: 1,
      model: {
        list: []
      },
      description: '高级表单常见于一次性输入和提交大批量数据的场景。',
      loading: false,
      validatorRules: {
        yangpinKeyId: [
          { required: true, message: '请选择样品!' }
        ],
        testItems: [
          { required: true, message: '请输入检测标准!' }
        ]

      },
      yijuLists: [],
      // table
      columns: [
        {
          title: '样品名称',
          dataIndex: 'yangpinKeyId',
          key: 'yangpinKeyId',
          align: 'center',
          width: '15%',
          scopedSlots: { customRender: 'yangpinKeyId' }
        },
        {
          title: '检测项目',
          dataIndex: 'testItems',
          key: 'testItems',
          align: 'center',
          width: '15%',
          scopedSlots: { customRender: 'testItems' }
        },
        {
          title: '检测依据',
          dataIndex: 'standardRequirement',
          key: 'standardRequirement',
          align: 'center',
          width: '20%',
          scopedSlots: { customRender: 'standardRequirement' }
        },
        {
          title: '判定依据',
          dataIndex: 'judgementBasis',
          key: 'judgementBasis',
          align: 'center',
          width: '25%',
          scopedSlots: { customRender: 'judgementBasis' }
        },
        {
          title: '检测依据文件',
          dataIndex: 'yijufile',
          key: 'yijufile',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'yijufile' }
        },

        {
          title: '备注',
          dataIndex: 'beizhu',
          key: 'beizhu',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'beizhu' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: []
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    this.getYijuLists()
    const data = JSON.parse(sessionStorage.getItem('yangpinkz'))
    if (data != null) {
      this.model.list=data
    }else{
      this.newMember()
    }

    console.log(sessionStorage.getItem('yangpin'))
    const yangpins = JSON.parse(sessionStorage.getItem('yangpin'))

    if (yangpins != null) {
      this.yangpins = yangpins
      console.log(this.yangpins)
    }

    this.count = sessionStorage.getItem('count1') != null ? Number(sessionStorage.getItem('count1')) : 1

  },
  methods: {
    // 获取所有依据列表
    getYijuLists(){
      getAction('/weituoyiju/itdmWeituoYiju/getAllList').then((res) => {
        // console.log(res)
        this.yijuLists = res.result
      })
    },

    newMember() {
      this.model.list.push({
        key: this.count + '',
        yangpinKeyId: '',
        testItems: '',
        standardRequirement: '',
        judgementBasis: '',
        yijufile: '',
        beizhu: '',
        editable: true,
        isNew: true
      })

      this.count++
      sessionStorage.setItem('count1', this.count)

    },
    remove(key) {
      const newData = this.model.list.filter(item => item.key !== key)
      this.model.list = newData
    },
    saveRow(key) {
      let target = this.model.list.filter(item => item.key === key)[0]
      target.editable = false
      target.isNew = false

    },

    handleChange(value, key, column) {
      const newData = [...this.model.list]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.model.list = newData
      }
    },
    submitForm() {
      sessionStorage.setItem('yangpinkz', JSON.stringify(this.model.list))

      this.$refs.form.validate(valid => {
        if (valid) {

          this.$emit('submitForm')
        }
      })

    },
    prevStep() {
      sessionStorage.setItem('yangpinkz', JSON.stringify(this.model.list))

      this.$emit('prevStep')
    }

  }
}
</script>

<style lang="less" scoped>
.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>