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

<template>
  <div class="u-OA-jixiao">
    <div class="head">第二部分　试验需求评审</div>
    <table class="main-table">
      <tr>
        <td class="title" style="width: 100px;">技术线</td>
        <td class="content" style="width: 440px;">
          <div>
            <el-checkbox-group v-model="tableData.checkList" :disabled='disabled1'>
              <div class="jishuxian">
                <el-checkbox label="气候环境"></el-checkbox>
                <el-checkbox label="力学环境"></el-checkbox>
                <el-checkbox label="综合环境"></el-checkbox>
                <el-checkbox label="可靠性试验"></el-checkbox>
                <el-checkbox label="仿真计算"></el-checkbox>
                <el-checkbox label="模态试验"></el-checkbox>
                <el-checkbox label="外场测试"></el-checkbox>
                <el-checkbox label="课题研究"></el-checkbox>
                <el-checkbox label="淋雨试验"></el-checkbox>
                <el-checkbox label="沙尘试验"></el-checkbox>
                <el-checkbox label="静强度"></el-checkbox>
                <el-checkbox label="其他"></el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </td>
        <td class="title white" style="width: 100px;">产品线</td>
        <td class="content" style="width: 440px;">
          <el-checkbox-group v-model="tableData.checkList2" :disabled='disabled1'>
            <div class="jishuxian" style="justify-content: center;">
              <el-checkbox label="检测试验"></el-checkbox>
              <el-checkbox label="研制试验"></el-checkbox>
            </div>
          </el-checkbox-group>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px;">试验分级</td>
        <td class="content" style="width: 440px;">
          <div style="display: flex;justify-content: center;color: red;align-items:center;">重要性系数：
            <input v-model="tableData.factor" :disabled='disabled1'/>
          </div>
        </td>
        <td class="title white" style="width: 100px">重要性标准</td>
        <td class="content" style="width: 450px">
          <div class="jishuxian" style="justify-content: center;">气候试验：0.40　　力学试验：0.70　　重要/非标试验：1.00</div>
          <!-- <div class="jishuxian" style="justify-content: center;">重要试验：1.00　　非标试验：1.00</div> -->
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px;">试验等级</td>
        <td class="content" style="width: 360px;">
          <div style="display: flex; align-items: flex-end;">
            <table>
              <tr>
                <td>序号</td>
                <td>试验类型</td>
                <td>实验内容</td>
                <td>设备选择</td>
                <td style="width: 60px">操作</td>
              </tr>
              <tr v-for="(item, index) in tableData.testDengji" :key="index">
                <td>{{ index + 1 }}</td>
                <td><input style="max-width: 100px; text-align: center" v-model="item.type" :disabled='disabled1'/></td>
                <td><input style="max-width: 100px; text-align: center" v-model="item.neirong" :disabled='disabled1'/></td>
                <td><input style="max-width: 100px; text-align: center" v-model="item.device" :disabled='disabled1'/></td>
                <!-- <td><div class="delBtn" @click="delRow(index)" v-show="tableData.testDengji.length >= 2">删除</div></td> -->
                <td><el-button class="delBtn" @click="delRow(index)" v-show="tableData.testDengji.length >= 2" :disabled='disabled1'>删除</el-button></td>
              </tr>
            </table>
            <!-- <div class="addRow" style="margin-right:1.1%" @click="addRow">添加</div> -->
            <el-button class="addRow" style="margin-right:1.1%" @click="addRow" :disabled='disabled1'>添加</el-button>
          </div>
        </td>
        <td class="title white" style="width: 100px;">备注</td>
        <td class="content" style="width: 450px;">
          <input v-model="tableData.shuruLeixing" style="text-align: center" :disabled='disabled1'/>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px;">三外需求</td>
        <td class="content" style="width: 360px;" colspan="3">
          <div style="display: flex; align-items: flex-end;">
            <table>
              <tr>
                <td>序号</td>
                <td>类型</td>
                <td>项目</td>
                <td>单位</td>
                <td>预算</td>
                <td style="width: 60px">操作</td>
              </tr>
              <tr v-for="(item, index) in tableData.demandSanwai" :key="index">
                <td>{{ index + 1 }}</td>
                <td><input style="max-width: 100px; text-align: center" v-model="item.leixing" :disabled='disabled1'/></td>
                <td><input style="max-width: 100px; text-align: center" v-model="item.xiangmu" :disabled='disabled1'/></td>
                <td><input style="max-width: 100px; text-align: center" v-model="item.danwei" :disabled='disabled1'/></td>
                <td><input style="max-width: 100px; text-align: center" v-model="item.yusuan" :disabled='disabled1'/></td>
                <!-- <td><div class="delBtn" @click="delRow2(index)" v-show="tableData.demandSanwai.length >= 2">删除</div></td> -->
                <td><el-button class="delBtn" @click="delRow2(index)" v-show="tableData.demandSanwai.length >= 2" :disabled='disabled1'>删除</el-button></td>
              </tr>
              <tr>
                <td style="font-weight: bold;">合计</td>
                <td></td>
                <td></td>
                <td></td>
                <td style="font-weight: bold;">{{ totalCleanPrice }}</td>
              </tr>
            </table>
            <!-- <div class="addRow" @click="addRow2">添加</div> -->
            <el-button class="addRow" @click="addRow2" :disabled='disabled1'>添加</el-button>
            <div class="btn" style="margin-right:1.1%" @click="addSubTable1">保存</div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px;">评审结论</td>
        <td class="content" style="width: 360px;">
          <el-radio-group v-model="tableData22.radio" :disabled='disabled2'>
            <el-radio :label="1">可以满足</el-radio>
            <el-radio :label="2">部分满足</el-radio>
            <el-radio :label="3">不能满足</el-radio>
          </el-radio-group>
        </td>
        <td class="title white" style="width: 100px;">主审人</td>
        <td class="content" style="width: 450px;">
          <div style="height:50px;width: 450px;text-align: center;line-height: 50px;">{{ fqUserName }}　　时间： {{ shenheTime }}</div>
          <!-- {{ fqUserName }}　　时间 {{ shenheTime }} -->
          <!-- <input v-model="tableData.shuruLeixing" style="text-align: center" /> -->
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px;" colspan="2">项目流转</td>
        <td class="title white" style="width: 100px;">工程技术部部长</td>
        <td class="content" style="width: 450px;display:flex;border:0px;align-items:center;" >
          <div style="height:50px;width: 450px;text-align: center;line-height: 50px;">{{ fqUserName }}　　时间： {{ shenheTime }}</div>
          <div class="btn" style="position: absolute;right: 3%;" @click="addSubTable2">保存</div>
          <!-- <input v-model="tableData.shuruLeixing" style="text-align: center" /> -->
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { runFlowPathSaveData } from '@/api/api'
export default {
    name: 'itdmXqPingshen',
    props: {
      // json
      tableData2: {
        type: Array,
        default: false,
        required: false,
      }
    },
    data() {
        return {
            tableData: {
              // 试验等级
              testDengji: [
                {
                  total: 0,
                },
              ],
              // 三外需求
              demandSanwai: [
                {
                  total: 0,
                },
              ],
              // 技术线
              // checkList: ['气候环境','力学环境'],
              checkList: [],
              // 产品线
              checkList2: [],
              // 重要性系数
              factor: '',
            },
            tableData22: {
              // 评审结论
              radio: '',
            },
            disabled1: true,
            disabled2: true,
            fqUserName: '',
            shenheTime: ''
        }
    },
    created(){
      console.log(22222,this.tableData2)
      // if (this.tableData2[0].dangqian == true && this.tableData2[0].isUpdate == true) {
      //   this.disabled1 = false
      // }
      // if (this.tableData2[1].dangqian == true && this.tableData2[1].isUpdate == true) {
      //   this.disabled2 = false
      // }
    },
    watch: {
      tableData2: {
        handler(newV, oldV){
          if(newV && newV[0]){
            if (newV[0].saveData != null) {
              this.tableData = JSON.parse(newV[0].saveData)
            }
            if (newV[1].saveData != null) {
              this.tableData22 = JSON.parse(newV[1].saveData)
              this.fqUserName = newV[1].fqUserName
              this.shenheTime = newV[1].shenheTime
            }
            if (newV[0].dangqian == true && newV[0].isUpdate == true) {
              this.disabled1 = false
            }
            if (newV[1].dangqian == true && newV[1].isUpdate == true) {
              this.disabled2 = false
            }
          }
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      totalCleanPrice() {
        let total = 0
        this.tableData.demandSanwai.forEach((item) => {
          if (!isNaN(item.yusuan)) {
            total += Number(item.yusuan)
          }
        })
        return total.toFixed(2)
      },
    },
    methods: {
      addRow() {
        this.tableData.testDengji.push({})
      },
      addRow2() {
        this.tableData.demandSanwai.push({})
      },
      delRow(index) {
        this.tableData.testDengji.splice(index, 1)
      },
      delRow2(index) {
        this.tableData.demandSanwai.splice(index, 1)
      },
      addSubTable1() {
        if (this.tableData2[0].dangqian == true && this.tableData2[0].isUpdate == true) {
          console.log(this.tableData,this.tableData2[0].id)
          const a = {
            runFlowPathStep: this.tableData2[0].id,
            saveData: JSON.stringify(this.tableData)
          }
          console.log(a)
          runFlowPathSaveData(a).then((res) => {
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
            }
          })
        } else {
          this.$message.error("无保存权限或当前节点不在进行中")
        }


        // console.log(this.tableData.cleanPrice)
        // console.log(this.tableData,this.tableData2[0].id)
        // const a = {
        //   runFlowPathStep: this.tableData2[0].id,
        //   saveData: JSON.stringify(this.tableData)
        // }
        // console.log(a)
        // runFlowPathSaveData(a).then((res) => {
        //   console.log(res)
        //     this.$message.success(res.message)
        // })
      },
      addSubTable2() {
        if (this.tableData2[1].dangqian == true && this.tableData2[1].isUpdate == true) {
          console.log(this.tableData22,this.tableData2[1].id)
          const a = {
            runFlowPathStep: this.tableData2[1].id,
            saveData: JSON.stringify(this.tableData22)
          }
          console.log(a)
          runFlowPathSaveData(a).then((res) => {
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
            }
          })
        } else {
          this.$message.error("无保存权限或当前节点不在进行中")
        }
      },
    }
}
</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%;
  table-layout:fixed;
}
td {
  text-align: center;
  border: 1px solid rgb(30, 53, 65);
}
tr {
  height: 50px;
}

.main-table {
  background-color: #EBF1DD;
}
.title {
  background-color: #fff;
}
.addRow {
  padding: 6px 10px;
  text-align: center;
  font-size: 12px;
  margin-left: 20px;
  /* 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; */
  width: 60px;
  height: 24px;
  padding: 2px 10px;
  font-size: 13px;
  border: 1px solid rgb(3, 188, 244);
  color: rgb(8, 187, 241);
  border-radius: 4px;
  cursor: pointer;
  margin-left: 20px;
}
.delBtn {
  padding: 6px 10px;
  text-align: center;
  font-size: 12px;
}
input {
  padding: 0 20px;
  height: 50px;
  outline: none;
  border: none;
  background: transparent;
}

.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);
}
.jishuxian{
  box-sizing: border-box;
  text-align: center;
  line-height: 30px;
  display: flex;
  flex-wrap:wrap;
  padding-left: 3%;
  /* justify-content: center; */
}
</style>