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"
      :customRow="clickThenCheck"
      ref="table"
      bordered
      class="u-edit-table"
    >


      <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" option-label-prop="label" @change="handleChange">
            <!-- 针对样品名称有相同的情况，做以下更改 -->
            <!-- <a-select-option v-for="d in yangpins" :key="d.sampleName"> -->
            <a-select-option v-for="d in yangpins" :key="d.key" :label="d.sampleName" :channel="d">
              <!-- <el-row>
                <el-col :span="12">{{ d.sampleName }}</el-col>
                <el-col :span="12">{{ d.sampleModelSpecification }}</el-col>
              </el-row> -->
              {{ d.sampleName +'——'+ d.sampleModelSpecification}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </template>

      <template slot="sampleModelSpecification" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.sampleModelSpecification'">
          <a-input disabled v-model="record.sampleModelSpecification" />
        </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="standardRequirementQ" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.standardRequirementQ'" :rules="validatorRules.standardRequirementQ">
          <!-- <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.standardRequirementQ"
            allowClear
            optionFilterProp="label"
            :dropdownMatchSelectWidth="false"
            @change="handleDescCate"
            mode="multiple"
          >
            <a-select-option v-for="yj in yijuLists" :key="yj.name" :label="yj.name">
              {{ yj.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,
      // 当前点击的是第几行
      clickIndex: -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: '12%',
          scopedSlots: { customRender: 'yangpinKeyId' }
        },
        {
          title: '规格型号',
          dataIndex: 'sampleModelSpecification',
          key: 'sampleModelSpecification',
          align: 'center',
          width: '12%',
          scopedSlots: { customRender: 'sampleModelSpecification' }
        },
        {
          title: '检测项目',
          dataIndex: 'testItems',
          key: 'testItems',
          align: 'center',
          width: '12%',
          scopedSlots: { customRender: 'testItems' }
        },
        {
          title: '检测依据',
          dataIndex: 'standardRequirementQ',
          key: 'standardRequirementQ',
          align: 'center',
          width: '15%',
          scopedSlots: { customRender: 'standardRequirementQ' }
        },
        {
          title: '判定依据',
          dataIndex: 'judgementBasis',
          key: 'judgementBasis',
          align: 'center',
          width: '15%',
          scopedSlots: { customRender: 'judgementBasis' }
        },
        {
          title: '检测依据文件',
          dataIndex: 'yijufile',
          key: 'yijufile',
          width: '12%',
          align: 'center',
          scopedSlots: { customRender: 'yijufile' }
        },

        {
          title: '备注',
          dataIndex: 'beizhu',
          key: 'beizhu',
          width: '7%',
          align: 'center',
          scopedSlots: { customRender: 'beizhu' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '5%',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: []
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    yangpinInfos() {
      return this.$store.getters.yangpinInfos
    },
    shiyanInfos() {
      return this.$store.getters.shiyanInfos
    },
    // count() {
    //   return this.$store.getters.countSy
    // },
  },
  created() {
    this.getYijuLists()
    // console.log(JSON.parse(sessionStorage.getItem('yangpin')))
    // console.log(JSON.parse(sessionStorage.getItem('yangpinkz')))
    // const data = JSON.parse(sessionStorage.getItem('yangpinkz'))
    if (this.shiyanInfos.length > 0) {
      this.model.list = this.shiyanInfos.map((item, index) => {
        // console.log(!item.standardRequirement)
        // console.log(item.standardRequirement)
        if(!item.standardRequirement){
          item.standardRequirementQ = []
        } else {
          item.standardRequirementQ = item.standardRequirement.split(',')
        }
        item.key = (index+1) + ''
        item.editable = true
        return item
      })
      this.count = this.shiyanInfos.length + 1
      console.log(this.model.list)
      
    }else{
      this.newMember()
    }

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

    this.yangpins = this.yangpinInfos

    // 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
      })
    },
    // 获取当前点击行是哪儿一行
    clickThenCheck(record, index){
      return {
        on: {
          click: () => {
            // console.log(record, index)
            this.clickIndex = index
          }
        }
      }
    },

    // 获得选中项信息
    handleChange(value,optipn) {
      console.log(777,value,optipn);
      if(value){
        const a = optipn.data.attrs.channel
        // console.log(a)
        // 解决下拉选择后多个输入框显示-用$set,估计设置中间变量也能解决
        this.$set(this.model.list[this.clickIndex], 'sampleModelSpecification', a.sampleModelSpecification )
        this.$set(this.model.list[this.clickIndex], 'yangpinKeyId', a.sampleName )
      }
    },

    // 多选依据
    handleDescCate(value,optipn) {
      // console.log(value, optipn)
      // 这里用$set不好使
      // this.$set(this.model.list[this.clickIndex], 'standardRequirementQ', value)
      // 解决多选数据选择不回显--设置中间变量
      const newData = [...this.model.list];
      const target = newData[this.clickIndex];
      target.standardRequirementQ = value;
      this.model.list = newData;
    },

    newMember() {
      this.model.list.push({
        key: this.count + '',
        yangpinKeyId: '',
        testItems: '',
        standardRequirementQ: [], // 前端用来下拉选择的，直接standardRequirement赋值standardRequirement会有问题
        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
    // },

    submitForm() {
      // sessionStorage.setItem('yangpinkz', JSON.stringify(this.model.list))
      this.$store.commit('SET_SHIYANINFO', this.model.list);
      
      this.$refs.form.validate(valid => {
        if (valid) {  
          this.$emit('submitForm')
        }
      })
    },
    prevStep() {
      // sessionStorage.setItem('yangpinkz', JSON.stringify(this.model.list))
      // var newData = this.model.list.map(item => {
      //   item.standardRequirement = item.standardRequirementQ.toString()
      //   return item
      // })
      // this.model.list = newData
      for (let i = 0; i < this.model.list.length; i++) {
        const element = this.model.list[i];
        element.standardRequirement = element.standardRequirementQ.join(',')
      }
      this.$store.commit('SET_SHIYANINFO', this.model.list);

      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-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;
  }
  /deep/.ant-select-selection{
    border: none;
  }
  /deep/.ant-select-selection:focus{
    box-shadow: none;
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) .ant-select-selection{
    background: #e6f7ff;
  }
}
.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>