iTDM-web/itdmWeb/src/views/module-iTDM/itdmShiYanXuQiu/ShiyanXuqiuList.vue

<template>
  <a-card :bordered="false">
    <table class="main-table">



<td class="title">资质要求</td>
<td class="content" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto;">
  <div style="width:100%; flex-wrap:wrap; display:flex; flex-direction:column;">
    <div style="width:100%; display:flex; flex-direction:row; justify-content:space-between;">
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText1" />
        <label>气候环境</label>
      </div>
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText6" />
        <label>模态试验</label>
      </div>
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText11" />
        <label>静强度</label>
      </div>
    </div>
    <div style="width:100%; display:flex; flex-direction:row; justify-content:space-between;">
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText2" />
        <label>力学环境</label>
      </div>
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText7" />
      

  <label>外场测试</label>
      </div>
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText12" />
        <label>其他</label>
      </div>
    </div>
    <div style="width:100%; display:flex; flex-direction:row; justify-content:space-between;">
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText3" />
        <label>可靠性试验</label>
      </div>
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText8" />
        <label>课题研究</label>
      </div>
      <div style="width: auto;">
        
      </div>
    </div>
    <div style="width:100%; display:flex; flex-direction:row; justify-content:space-between;">
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText4" />
        <label>综合环境算</label>
      </div>
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText9" />
        <label>淋雨试验</label>
      </div>
      <div style="width: auto;">
      </div>
    </div>
    <div style="width:100%; display:flex; flex-direction:row; justify-content:space-between;">
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText5" />
        <label>仿真计</label>
      </div>
      <div style="width: auto;">
        <input type="checkbox" v-model="tableData.zizhiYaoqiu_dictText10" />
        <label>沙尘试验</label>
      </div>
      <div style="width: auto;">
      </div>
    </div>
  </div>
</td>
    <td class="title">产品线</td>
        <td class="content" style="display: flex; align-items: center; justify-content: center">
          <input type="checkbox" v-model="tableData.jishuzhan_dictText1" /> 检测试验&nbsp;<input
            type="checkbox"
            v-model="tableData.jishuzhan_dictText2"
          />
          研制试验&nbsp; 
 </td>

            <!-- <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 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="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.qihoushiyan" />
          力学试验
          <input style="width: 180px; text-align: center" v-model="tableData.lixueshiyan" />
           力学/气候
          <input style="width: 100px; text-align: center" v-model="tableData.lixueqihou" />
          重要试验
          <input style="width: 100px; text-align: center" v-model="tableData.zhongyaoshiyan" />
          非标试验
          <input style="width: 100px; text-align: center" v-model="tableData.feibiaozshiyan" />
        </td>
      <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">
          <div style="display: flex; align-items: flex-end">
            <table>
              <thead>
                <td>序号</td>
                <td>试验设备</td>
                <td>试验时间（h）</td>
                <td>试验单价（rmb/h）</td>
                <td>试验费用</td>
                <td style="width: 60px">操作</td>
              </thead>
              <tr v-for="(item, index) in tableData.cleanPrice" :key="index">
                <td>{{ index + 1 }}</td>
                <td><input style="max-width: 150px; text-align: center" v-model="item.shebei" /></td>
                <td><input style="max-width: 150px; text-align: center" v-model="item.time" /></td>
                <td><input style="max-width: 150px; text-align: center" v-model="item.price" /></td>
                <td><input style="max-width: 150px; text-align: center" v-model="item.total" /></td>
                <td><div class="delBtn" @click="delRow(index)" v-show="tableData.cleanPrice.length >= 2">删除</div></td>
              </tr>
              <tr>
                <td>合计</td>
                <td></td>
                <td></td>
                <td></td>
                <td>{{ totalCleanPrice }}</td>
              </tr>
            </table>
            <div class="addRow" @click="addRow">添加</div>
            <div class="addRow" @click="addSubTable">提交</div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="title">预计报价</td>
        <td class="content" colspan="3">
          <input style="width: 100%; text-align: center" v-model="tableData.yujiBaojia" />
        </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>
      </tr>
    <div class="btn" @click="submit">提交</div>
  </a-card>
</template>

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

export default {
  name: 'ItdmShiyanxiangmuList',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      description: '试验项目输入管理页面',
      tableData: {
        cleanPrice: [
          {
            total: 0,
          },
        ],
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '是否新客户',
          align: 'center',
          dataIndex: 'newkehu',
        },
        {
          title: '客户行业',
          align: 'center',
          dataIndex: 'kehuHangye',
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'kehuMingcheng',
        },
        {
          title: '输入类型',
          align: 'center',
          dataIndex: 'shuruLeixing',
        },
        {
          title: '试验信息',
          align: 'center',
          dataIndex: 'shiyanXinxi',
        },
        {
          title: '方案设计',
          align: 'center',
          dataIndex: 'fanganSheji_dictText',
        },
        {
          title: '试验评审',
          align: 'center',
          dataIndex: 'shiyanPingshen_dictText',
        },
        {
          title: '用车安排',
          align: 'center',
          dataIndex: 'yongcheAnpai_dictText',
        },
        {
          title: '工装设计',
          align: 'center',
          dataIndex: 'gongzhuangSheji_dictText',
        },
        {
          title: '用餐安排',
          align: 'center',
          dataIndex: 'yongcanAnpai_dictText',
        },
        {
          title: '住宿安排',
          align: 'center',
          dataIndex: 'zhusuAnpai_dictText',
        },
        {
          title: '报告确认',
          align: 'center',
          dataIndex: 'baogaoQueren_dictText',
        },
        {
          title: '客户姓名',
          align: 'center',
          dataIndex: 'kehuName',
        },
        {
          title: '客户电话',
          align: 'center',
          dataIndex: 'kehuPhone',
        },
        {
          title: '合同编号',
          align: 'center',
          dataIndex: 'hetongBianhao',
        },
        {
          title: '试验要求',
          align: 'center',
          dataIndex: 'shiyanYaoqiu',
        },
        {
          title: '报告体系',
          align: 'center',
          dataIndex: 'baogaoTixi_dictText',
        },
        {
          title: '资质要求',
          align: 'center',
          dataIndex: 'zizhiYaoqiu_dictText',
        },
        {
          title: '预计报价',
          align: 'center',
          dataIndex: 'yujiBaojia',
        },
        {
          title: '评审结论',
          align: 'center',
          dataIndex: 'pingshenJielun',
        },
        {
          title: '主审人',
          align: 'center',
          dataIndex: 'zhushenRen',
        },
        {
          title: '主审时间',
          align: 'center',
          dataIndex: 'zhushenShijian',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/itdmShiYanXiangMu/itdmShiyanxiangmu/list',
        delete: '/itdmShiYanXiangMu/itdmShiyanxiangmu/delete',
        deleteBatch: '/itdmShiYanXiangMu/itdmShiyanxiangmu/deleteBatch',
        exportXlsUrl: '/itdmShiYanXiangMu/itdmShiyanxiangmu/exportXls',
        importExcelUrl: 'itdmShiYanXiangMu/itdmShiyanxiangmu/importExcel',
      },
      dictOptions: {},
      superFieldList: [],
    }
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    totalCleanPrice() {
      let total = 0
      this.tableData.cleanPrice.forEach((item) => {
        if (!isNaN(item.total)) {
          total += Number(item.total)
        }
      })
      return total.toFixed(2)
    },
  },
  methods: {
    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)
    },
    addRow() {
      this.tableData.cleanPrice.push({})
    },
    delRow(index) {
      this.tableData.cleanPrice.splice(index, 1)
    },
    initDictConfig() {},
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'newkehu', text: '是否新客户', dictCode: '' })
      fieldList.push({ type: 'string', value: 'kehuHangye', text: '客户行业', dictCode: '' })
      fieldList.push({ type: 'string', value: 'kehuMingcheng', text: '客户名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'shuruLeixing', text: '输入类型', dictCode: '' })
      fieldList.push({ type: 'string', value: 'shiyanXinxi', text: '试验信息', dictCode: '' })
      fieldList.push({ type: 'string', value: 'fanganSheji', text: '方案设计', dictCode: 'fangan_sheji' })
      fieldList.push({ type: 'string', value: 'shiyanPingshen', text: '试验评审', dictCode: 'shiyan_pingshen' })
      fieldList.push({ type: 'string', value: 'yongcheAnpai', text: '用车安排', dictCode: 'yongche_anpai' })
      fieldList.push({ type: 'string', value: 'gongzhuangSheji', text: '工装设计', dictCode: 'gongzhuang_sheji' })
      fieldList.push({ type: 'string', value: 'yongcanAnpai', text: '用餐安排', dictCode: 'yongcan_anpai' })
      fieldList.push({ type: 'string', value: 'zhusuAnpai', text: '住宿安排', dictCode: 'zhusu_anpai' })
      fieldList.push({ type: 'string', value: 'baogaoQueren', text: '报告确认', dictCode: 'baogao_queren' })
      fieldList.push({ type: 'string', value: 'kehuName', text: '客户姓名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'kehuPhone', text: '客户电话', dictCode: '' })
      fieldList.push({ type: 'string', value: 'hetongBianhao', text: '合同编号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'shiyanYaoqiu', text: '试验要求', dictCode: '' })
      fieldList.push({ type: 'string', value: 'baogaoTixi', text: '报告体系', dictCode: 'baogao_tixi' })
      fieldList.push({ type: 'string', value: 'zizhiYaoqiu', text: '资质要求', dictCode: 'zizhi_yaoqiu' })
      fieldList.push({ type: 'string', value: 'yujiBaojia', text: '预计报价', dictCode: '' })
      fieldList.push({ type: 'string', value: 'pingshenJielun', text: '评审结论', dictCode: '' })
      fieldList.push({ type: 'string', value: 'zhushenRen', text: '主审人', dictCode: '' })
      fieldList.push({ type: 'string', value: 'zhushenShijian', text: '主审时间', dictCode: '' })
      this.superFieldList = fieldList
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
table * {
  box-sizing: border-box;
  font-size: 14px;
}
table {
  border: 1px solid rgb(30, 53, 65);
}
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;
}

.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: 4px 15px;
  font-size: 13px;
  border: 1px solid rgb(3, 188, 244);
  color: rgb(8, 187, 241);
  border-radius: 4px;
  cursor: pointer;
}
.delBtn {
  padding: 3px 10px;
  text-align: center;
  font-size: 12px;
}
</style>