equipment/src/views/bggl/8000/dj/dq/fenxiang/hxcf.vue

<!--化学成分分析-->
<template>
  <div class="app-container">
    <sticky style="margin-bottom: 10px;">
      <btn ref="btn" />
    </sticky>
    <el-form ref="ysjl" :model="ysjl" class="el-form" label-position="right" label-width="130px">
      <fieldset>
        <legend>基本信息</legend>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="报告编号" prop="baogaobianhao">
              <el-input v-model="ysjl.baogaobianhao" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="管道编号" prop="guandaobianhao">
              <el-input v-model="param.guandaobianhao" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="管道规格(外径mm×壁厚mm)" label-width="200px" prop="guandaoguige">
              <el-input v-model="param.guandaoguige" :disabled="edit">
                <template slot="append">
                  (mm)
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="管道名称" prop="shebeimingcheng">
              <el-input v-model="ysjl.shebeimingcheng" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="管道材质" prop="guandaocaizhi">
              <el-input v-model="param.guandaocaizhi" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="管道级别" prop="guandaojibie">
              <el-input v-model="param.guandaojibie" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="取样方法" prop="quyangfangfa">
              <el-input v-model="param.quyangfangfa" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="检测部位" prop="jiancebuwei">
              <el-input v-model="param.jiancebuwei" :disabled="edit" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="试件编号" prop="shijianbianhao">
              <el-input v-model="param.shijianbianhao" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="执行标准" prop="fangfabiaozhun">
              <el-input v-model="param.fangfabiaozhun" :disabled="edit" />
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
      <fieldset>
        <legend>化验结果报告</legend>
        <el-table id="myTable" ref="tableData" :data="tableData" :row-class-name="tableRowClassName" border stripe style="width:100%;margin-top: 5px;">
          <el-table-column type="selection" width="40" />
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="C1" align="center" label="A">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C1" :disabled="edit" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="C2" label="B">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C2" :disabled="edit" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="C3" label="C">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C3" :disabled="edit" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="C4" label="D">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C4" :disabled="edit" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="C5" label="E">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C5" :disabled="edit" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="C6" label="F">
            <template slot-scope="scope">
              <el-input v-model="scope.row.C6" :disabled="edit" />
            </template>
          </el-table-column>
        </el-table>
      </fieldset>
      <fieldset>
        <legend>检验信息</legend>
        <el-form-item label="评定意见" prop="fenxijieguo">
          <el-input v-model="param.fenxijieguo" :disabled="edit" type="textarea" rows="4" style="width: 800px;" />
        </el-form-item>
        <el-form-item label="" prop="jianyanrenyuan" style="display: none;">
          <el-input v-model="ysjl.jianyanrenyuan" type="text" />
        </el-form-item>
      </fieldset>
    </el-form>
  </div>
</template>
<script>
import Sticky from '@/components/Sticky'
import btn from '@/views/common/FxButton'
export default {
  name: 'GdZbgHxcf',
  components: { Sticky, btn },
  data() {
    return {
      ysjl: {},
      param: {},
      tableData: [],
      state: '',
      edit: false,
      info: {
        ysjlId: this.$route.query.id,
        jyxm: this.$route.query.jyxm
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.api({
        url: '/fx',
        method: 'get',
        params: {
          ysjlId: this.$route.query.id,
          jyxm: this.$route.query.jyxm
        }
      }).then(data => {
        this.ysjl = data.ysjl
        this.state = 'create'
        if (data.param !== null && data.param !== undefined) {
          // 有无损原始报告参数
          this.state = 'update'
          this.param = data.param
          this.tableData = JSON.parse(data.param.fubiao)
        }
        if (this.tableData.length === 0) {
          this.tableData = [{ C1: 'C', C2: '', C3: 'Mo', C4: '', C5: 'Ti', C6: '' }, { C1: 'Si', C2: '', C3: 'V', C4: '', C5: 'Nb', C6: '' },
            { C1: 'Mn', C2: '', C3: 'Al', C4: '', C5: 'Cu', C6: '' }, { C1: 'S', C2: '', C3: 'Cr', C4: '', C5: '', C6: '' },
            { C1: 'P', C2: '', C3: 'Ni', C4: '', C5: '', C6: '' }, { C1: '', C2: '', C3: '', C4: '', C5: '', C6: '' }, { C1: '', C2: '', C3: '', C4: '', C5: '', C6: '' }]
        }
        if (this.ysjl.flowstatus === 4) {
          this.state = 'finish'
          this.edit = true
        }
        this.$refs.btn.getParentInfo(this.ysjl, this.param, null, this.tableData, this.state, this.$route.query.jyxm)
      })
    },
    // 表格单击选中行
    onRowClick(row) {
      this.$refs.tableData.toggleRowSelection(row)
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    }
  }
}
</script>
<style>
  #myTable .el-input__inner{
    padding: 0px 5px;
    text-align: center;
  }
</style>