iTDM-web/itdmWeb/src/views/module-iTDM/itdmYeWu/itdmXmShuru.vue

<template>
  <div>
    <div class="head">第一部分　试验项目输入</div>
    <table class="main-table">
      <tr>
        <td class="title" style="width: 100px">委托单位</td>
        <td class="content" style="width: 360px">
          <table>
            <tr>
              <td>序号</td>
              <td>新客户</td>
              <td>客户行业</td>
              <td>客户名称</td>
            </tr>
            <tr>
              <td style="min-width: 50px">1</td>
              <td style="max-width: 130px">
                <input v-model="tableData.newkehu" style="text-align: center; max-width: 130px" />
              </td>
              <td style="max-width: 130px">
                <input v-model="tableData.kehuHangye" style="text-align: center; max-width: 130px" />
              </td>
              <td style="max-width: 130px">
                <input v-model="tableData.kehuMingcheng" style="text-align: center; max-width: 130px" />
              </td>
            </tr>
          </table>
        </td>
        <td class="title white" style="width: 100px">输入类型</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr style="height: 150px">
        <td class="title">实验信息</td>
        <td class="content"><input v-model="tableData.shiyanXinxi" style="text-align: center" /></td>
        <td class="title">定制需求</td>
        <td class="content">
          <div style="display: flex; align-items: center; justify-content: center">
            方案设计：
            <input type="radio" name="fangan" value="需要" v-model="tableData.fanganSheji" />需要&nbsp;<input
              type="radio"
              name="fangan"
              value="不需要"
              v-model="tableData.fanganSheji"
            />不需要&nbsp;&nbsp; 工装设计：
            <input type="radio" name="gongzhuang" value="需要" v-model="tableData.gongzhuangSheji" />需要 &nbsp;<input
              type="radio"
              name="gongzhuang"
              value="不需要"
              v-model="tableData.gongzhuangSheji"
            />不需要
          </div>

          <div style="display: flex; align-items: center; justify-content: center">
            试验评审：
            <input type="radio" name="shiyan" value="需要" v-model="tableData.shiyanPingshen" />需要 &nbsp;<input
              type="radio"
              name="shiyan"
              value="不需要"
              v-model="tableData.shiyanPingshen"
            />不需要&nbsp;&nbsp; 用餐安排：
            <input type="radio" name="yongcan" value="需要" v-model="tableData.yongcanAnpai" />需要 &nbsp;<input
              type="radio"
              name="yongcan"
              value="不需要"
              v-model="tableData.yongcanAnpai"
            />不需要
          </div>

          <div style="display: flex; align-items: center; justify-content: center">
            用车安排： <input type="radio" name="yongche" value="需要" v-model="tableData.yongcheAnpai" />需要
            &nbsp;<input
              type="radio"
              name="yongche"
              value="不需要"
              v-model="tableData.yongcheAnpai"
            />不需要&nbsp;&nbsp; 住宿安排：
            <input type="radio" name="zhusu" value="需要" v-model="tableData.zhusuAnpai" />需要 &nbsp;<input
              type="radio"
              name="zhusu"
              value="不需要"
              v-model="tableData.zhusuAnpai"
            />不需要
          </div>
        </td>
      </tr>
      <tr>
        <td class="title">客户<br />联系信息</td>
        <td class="content">
          姓名：<input style="width: 110px" v-model="tableData.kehuName" /> 电话：<input
            style="width: 150px"
            v-model="tableData.kehuPhone"
          />
        </td>
        <td class="title">合同编号</td>
        <td class="content">
          <input style="width: 100%; text-align: center" v-model="tableData.hetongBianhao" />
        </td>
      </tr>
      <tr>
        <td class="title">试验要求</td>
        <td class="content" colspan="3">
          <input style="width: 100%; text-align: center" v-model="tableData.shiyanYaoqiu" />
        </td>
      </tr>
      <tr>
        <td class="title">报告体系</td>
        <td class="content" style="display: flex; align-items: center; justify-content: center">
          <input type="radio" name="baogao" value="海检版" v-model="tableData.baogaoTixi" /> 海检版&nbsp;
          <input type="radio" name="baogao" value="瑞莱版" v-model="tableData.baogaoTixi" /> 瑞莱版&nbsp;
          <input type="radio" name="baogao" value="瑞莱海检版" v-model="tableData.baogaoTixi" /> 瑞莱海检版
        </td>
        <td class="title">资质要求</td>
        <td class="content" style="display: flex; align-items: center; justify-content: center">
          <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText1" /> CNAS&nbsp;<input
            type="checkbox"
            v-model="tableData.zizhiYaoqiu_dictText2"
          />
          CMA&nbsp; <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText3" /> ISTA &nbsp;<input
            type="checkbox"
            v-model="tableData.zizhiYaoqiu_dictText4"
          />
          船级社&nbsp; <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText5" /> 无
        </td>
      </tr>
      <tr>
        <td class="title">项目<br />虚拟结算额</td>
        <td class="content" colspan="3">
          <el-table :data="tableData.xnJiesuanPrice" class="u-dynamic-table" stripe  show-summary :summary-method="getSummaries" border ref="table">
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="eqName" label="试验设备" align="center" width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.eqName" placeholder="请选择"   value-key="id" @change="chooseEquipment($event, scope.$index)" style="width: 100%;">
                  <el-option
                    v-for="item in equipmentOptions"
                    :key="item.id"
                    :label="item.deviceName"
                    :value="item">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="typeName" label="试验类型" align="center" width="120"></el-table-column>
            <el-table-column prop="time" label="试验时间(h)" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.time" placeholder="请输入" @input="handleCheng(scope.row, scope.$index)"/>
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="试验单价(rmb/h)" align="center" width="140"></el-table-column>
            <el-table-column prop="costPrice" label="试验费用" align="center" width="100"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="addRow" @click="addRow">添加</div>
        </td>
      </tr>
      <tr>
        <td class="title">预计报价</td>
        <td class="content" colspan="3">
          <input style="width: 100%; text-align: center" v-model="tableData.yujiBaojia" />
          <div class="btn" style="margin-top:1%" @click="addSubTable">提交</div>
        </td>
      </tr>
      <tr>
        <td class="title">评审结论</td>
        <td class="content">
          <input style="width: 100%; text-align: center" v-model="tableData.pingshenJielun" />
        </td>
        <td class="title">主审人</td>
        <!-- <td class="content">
          <input style="width: 100px; text-align: center; margin-right: 50px" v-model="tableData.zhushenRen" />
          时间
          <input style="width: 100px; text-align: center" v-model="tableData.zhushenShijian" />
        </td> -->
        <td class="content">
            {{ tableData.zhushenRen }}
            时间{{tableData.zhushenShijian}}
            <div class="btn" @click="submit">提交</div>
        </td>
      </tr>
    </table>
    
  </div>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getDeviceList } from '@/api/api'

export default {
  name: 'itdmXmShuru',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      tableData: {
        xnJiesuanPrice: [{}],
      },
      equipmentOptions: [],
    }
  },
  created() {
    this.getDevicePrice()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    totalPrice() {
      let total = 0
      this.tableData.xnJiesuanPrice.forEach((item) => {
        var row = item.time * item.price
        if (!isNaN(row)) {
          total += Number(row)
        }
      })
      return total.toFixed(2)
    },
  },
  methods: {
    getDevicePrice(){
      getDeviceList().then(response => {
        console.log(response)
        this.equipmentOptions = response
      })
    },
    chooseEquipment(value, index){
      var row = this.tableData.xnJiesuanPrice[index]
      this.tableData.xnJiesuanPrice[index].type = value.zyxbz
      this.tableData.xnJiesuanPrice[index].typeName = value.zyxbzText
      this.tableData.xnJiesuanPrice[index].unitPrice = value.danjia
      this.tableData.xnJiesuanPrice[index].costPrice = row.unitPrice * row.time || 0
    },
    handleCheng(value, index){
      console.log(value)
      // console.log(this.$refs.table.summaryMethod())
      this.tableData.xnJiesuanPrice[index].costPrice = value.unitPrice * value.time || 0
    },
    getSummaries(param){
      const { columns, data } = param;
      console.log(columns, data)
      const len = columns.length;
      const sums = [];
      columns.forEach((column, index) => {
        // 第一列显示合计
        if (index === 0) {
          sums[index] = '合计';
          return;
        }else if(index === len - 2){ // 返回数据长度的最后一个
          const times = data.map(item => Number(item['time']));
          const prices = data.map(item=>Number(item['unitPrice']))
          const eqName = data.map(item => item['eqName']); // 谁改变也要写在这，要不不能触发
          // if (!times.every(value => isNaN(value))) {
            //通过reduce求和,curr为每一列的每个元素的值,return prev返回值给到sums[index]
            sums[index] = times.reduce((prev, curr, index) => {
              const value = Number(curr);
              //确定数据是否为空,不为空进行计算,为空返回原值
              if (!isNaN(value) && !isNaN(prices[index])) {
                //curr为工时,prices为单价,求得每行的金额,再通过reduce累加求和
                console.log(curr*prices[index], prev + curr*prices[index])
                return prev + curr*prices[index];
              } else {
                return prev;
              }
            }, 0);
          // } else {
          //   sums[index] = 0;
          // }
        }
      });
      return sums;
    },
    handleDelete(row, index){
      this.tableData.xnJiesuanPrice.splice(index, 1)
    },
    addRow() {
      this.tableData.xnJiesuanPrice.push({})
    },


    submit() {
    
      let zizhiYaoqiu = []
      if (this.tableData.zizhiYaoqiu_dictText1) {
        zizhiYaoqiu.push('CNAS')
      }
      if (this.tableData.zizhiYaoqiu_dictText2) {
        zizhiYaoqiu.push('CMA')
      }
      if (this.tableData.zizhiYaoqiu_dictText3) {
        zizhiYaoqiu.push('ISTA')
      }
      if (this.tableData.zizhiYaoqiu_dictText4) {
        zizhiYaoqiu.push('船级社')
      }
      if (this.tableData.zizhiYaoqiu_dictText5) {
        zizhiYaoqiu.push('无')
      }
      this.tableData.zizhiYaoqiu = zizhiYaoqiu.join(',')
        console.log(this.tableData)
    },
    addSubTable() {
      console.log(this.tableData.cleanPrice)
      console.log(this.tableData)
    },
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
table * {
  box-sizing: border-box;
  font-size: 14px;
}
table {
  border: 1px solid rgb(30, 53, 65);
  width: 100%;
}
input {
  padding: 0 20px;
  height: 50px;
  outline: none;
  border: none;
  background: transparent;
}
td {
  text-align: center;
  border: 1px solid rgb(30, 53, 65);
}

tr {
  height: 50px;
}
.head {
    height: 35px;
    background-color: #FFFF00;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    font-size: 18px;
    border: 1px solid rgb(30, 53, 65);
}

.main-table {
  background-color: rgb(219, 238, 244);
}
.title {
  background-color: #fff;
}
.addRow {
  width: 60px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  margin-left: 20px;
  cursor: pointer;
}
.btn {
  display: inline-block;
  padding: 2px 10px;
  font-size: 13px;
  border: 1px solid rgb(3, 188, 244);
  color: rgb(8, 187, 241);
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: 3%;
}
.delBtn {
  padding: 3px 10px;
  text-align: center;
  font-size: 12px;
}
</style>