equipment/src/views/bggl/8000/jj/fenxiang/czsc.vue

<!--压力管道元件及焊接材料的材质审查报告-->
<template>
  <div class="app-container" style="margin-top: -15px;height: 100%">
    <sticky style="margin-bottom: 10px;">
      <btn ref="btn" />
    </sticky>
    <el-form ref="ysjl" :model="ysjl" class="el-form" label-width="100px" style="height: max-content">
      <template style="height: auto">
        <div v-if="state !== 'finish'">
          <el-upload :show-file-list="false" :before-upload="beforeUpload" style="float: left; margin-right: 10px;" action="123">
            <el-button type="primary" size="mini" icon="el-icon-upload">
              导入数据
            </el-button>
          </el-upload>
          <el-button type="success" icon="el-icon-download" title="下载导入模板" size="mini" @click="downloadTemplate">
            下载导入模板
          </el-button>
          <el-button type="success" size="mini" icon="el-icon-circle-plus-outline" @click="addRow()">
            添加
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-remove-outline" @click="delRow()">
            删除
          </el-button>
        </div>
        <el-table ref="czscList" :data="tableData" border style="width: 100%;" :row-class-name="tableRowClassName" @row-click="onRowClick" @selection-change="handleSelectionChange">
          <el-table-column label="管道元件材质及焊接材料的材质" align="center">
            <el-table-column type="selection" width="50" />
            <el-table-column prop="C1" type="index" label="序号" width="50" align="center" :resizable="false" />
            <el-table-column prop="C2" label="元件名称" width="300" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C2" :disabled="edit" />
              </template>
            </el-table-column>
            <el-table-column prop="C3" label="规格型号" width="200" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C3" :disabled="edit" />
              </template>
            </el-table-column>
            <el-table-column prop="C4" label="数量" width="100" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C4" :disabled="edit" />
              </template>
            </el-table-column>
            <el-table-column prop="C5" label="材质" width="100" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C5" :disabled="edit" />
              </template>
            </el-table-column>
            <el-table-column prop="C6" label="供货状态" width="100" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C6" :disabled="edit" />
              </template>
            </el-table-column>
            <el-table-column prop="C7" label="质量证明书" width="300" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C7" :disabled="edit" />
              </template>
            </el-table-column>
            <el-table-column prop="C8" label="复验报告" width="100" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C8" :disabled="edit" />
              </template>
            </el-table-column>
            <el-table-column prop="C9" label="审查结果" width="120" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input v-model="scope.row.C9" :disabled="edit" />
              </template>
            </el-table-column>
          </el-table-column>
        </el-table><br><br>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="检验日期" prop="jianyanjieshuriqi">
              <el-date-picker v-model="ysjl.jianyanjieshuriqi" :disabled="edit" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </div>
</template>
<script>
import Sticky from '@/components/Sticky'
import btn from '@/views/common/FxButton'
export default {
  name: 'YlgdCzscReport',
  components: { Sticky, btn },
  data() {
    return {
      ysjl: {},
      ysjlids: '',
      param: {},
      ysjlId: this.$route.query.id,
      multipleSelection: [],
      selected: {},
      defaultParam: {},
      state: '',
      edit: false,
      delRowIndex: [],
      tableData: []
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.api({
        url: '/fenxiang/getFxByYsjlId',
        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) === null ? JSON.parse('[]') : JSON.parse(data.param.fubiao)
        } else {
          this.getJyxm()
        }
        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)
      })
    },
    tableRowClassName({ row, rowIndex }) {
      row.C1 = rowIndex + 1
    },
    handleSelectionChange(val) {
      this.delRowIndex = []
      for (let i = 0; i < val.length; i++) {
        this.delRowIndex.push(val[i].C1 - 1)
      }
    },
    onRowClick(row) { // 表格单击选中行
      this.$refs.czscList.toggleRowSelection(row)
    },
    getJyxm() {
      // 查询检验项目
      this.api({
        url: '/jyxm/getCyJyxm',
        method: 'get',
        params: {
          templateId: this.ysjl.modelId,
          order: 1
        }
      }).then(data => {
        this.tableData = data
        this.$refs.btn.getParentInfo(this.ysjl, this.param, null, this.tableData, this.state, this.$route.query.jyxm)
      })
    },
    addRow: function() {
      const d = {
        C1: this.tableData.length + 1
      }
      this.tableData.push(d)
      setTimeout(() => {
        this.$refs.czscList.setCurrentRow(d)
      }, 10) // 用于延时渲染后选中这行
    },
    delRow: function() {
      if (this.delRowIndex.length === 0) {
        this.$message({
          type: 'error',
          message: '请选中需要删除的数据！'
        })
        return false
      } else {
        this.$confirm('该条数据删除后无法恢复,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // 对delRowIndex进行排序，因为删除一个元素后index值会变
            this.delRowIndex.sort(function(x, y) {
              if (x < y) {
                return 1
              }
              if (x > y) {
                return -1
              }
              return 0
            })
            for (let i = 0; i < this.delRowIndex.length; i++) {
              this.tableData.splice(this.delRowIndex[i], 1)
            }
            this.$refs.czscList.clearSelection()
            this.delRowIndex = []
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    // 下载导入模板
    downloadTemplate() {
      this.api({
        url: '/upload/downloadTemplate',
        method: 'post',
        params: {
          templateName: '压力管道元件及焊接材料的材质审查报告.xlsx'
        }
      }).then(data => {
        window.open(data)
      })
    },
    // 上传数据
    beforeUpload(file) {
      // 判断文件后缀名
      var index = file.name.lastIndexOf('.')
      var ext = file.name.substr(index + 1).toLocaleLowerCase()
      if (ext !== 'xls' && ext !== 'xlsx') {
        this.$message.error('只能上传xls/xlsx格式的文件')
        return false
      }
      const fd = new FormData()
      fd.append('file', file)
      fd.append('paramData', JSON.stringify(this.tableData))
      fd.append('added', 1)
      this.api({
        url: '/upload/uploadSchedule',
        method: 'post',
        data: fd
      }).then(data => {
        this.tableData = data
        this.$refs.btn.getParentInfo(this.ysjl, this.param, null, this.tableData, this.state, this.$route.query.jyxm)
        this.$message({ message: '上传成功！', type: 'success' })
      })
    }
  }
}
</script>