委托检验、原材料报检和检验申请页面

yuyu

2023-08-08 2260184afb85c80eabce02da190f9f07ee660ab3

 src/views/inspectionManagement/commissionInspection/addCommision.vue

@@ -1,24 +1,26 @@
<template>
  <div class="content-main">
    <div class="firstBox">
      <span>检测信息</span>
      <div tableBox>
        <el-button type="primary" size="small" style="background-color: rgb(1, 102, 226);">添加样品</el-button>
      <div class="title">检测信息</div>
      <div class="tableBox">
        <div class="tableBox-header">
        <el-button class="split" type="primary" size="small" style="background-color: rgb(1, 102, 226);">添加样品</el-button>
        <el-input
          v-model="searchData"
          class="input-form"
          class="input-form split"
          placeholder="扫描二维码录入样品..."
          prefix-icon="el-icon-search"
          style="width: 200px;"
        >
        </el-input>
        <el-button type="primary" size="small" style="background-color: rgb(1, 102, 226);">重置</el-button>
      </div>
        <el-table
                ref="commisionTable"
                ref="detectionInfo"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="commisionTable"
                :data="detectionInfo"
                style="width: 100%"
              >
                <el-table-column
@@ -27,24 +29,14 @@
                  min-width="10%"
                />
                <el-table-column
                  prop="commisioncode"
                  label="委托编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="department"
                  label="委托单位"
                  min-width="10%"
                />
                <el-table-column
                  prop="samplecode"
                  prop="sampleid"
                  label="样品编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="samplename"
                  label="样品名称"
                  min-width="8%"
                  min-width="10%"
                />
                <el-table-column
                  prop="modelandspecification"
@@ -52,28 +44,34 @@
                  min-width="10%"
                />
                <el-table-column
                  prop="arrivetime"
                  label="送达时间"
                  prop="unit"
                  label="单位"
                  min-width="8%"
                />
                <el-table-column
                  prop="deadline"
                  label="完成期限"
                  prop="amount"
                  label="数量"
                  min-width="8%"
                />
                <el-table-column
                  prop="person"
                  label="委托编制人"
                  prop="addway"
                  label="添加方式"
                  min-width="8%">
                  <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.addway === 0 ? 'success' : 'primary'"
                    disable-transitions
                  >{{ scope.row.addway === 0 ? '扫描' : '录入' }}</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                  prop="experiment"
                  label="试验"
                  min-width="8%"
                />
                <el-table-column
                  prop="checkdate"
                  label="检验日期"
                  min-width="8%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  prop="other"
                  label="备注"
                  min-width="8%"
                />
                <el-table-column
@@ -81,6 +79,7 @@
                  min-width="8%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
@@ -88,6 +87,7 @@
              <!-- 分页器 -->
              <div>
                <el-pagination
                  class="pagination"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
@@ -106,43 +106,43 @@
                    <el-button type="primary" size="mini" style="background-color: rgb(1, 102, 226); ">打印委托单</el-button>
                    </el-col>
                </el-row>
                <el-form :model="infoForm" ref="infoForm" class="infoForm" label-position="left" label-width="100px" size="mini" >
                <el-form :model="infoForm" ref="infoForm" class="infoForm" label-position="right" label-width="100px" size="mini" >
                    <div class="formwrapper">
                        <el-row :gutter="50">
                        <el-col :span="12">
                        <el-row :gutter="200">
                        <el-col :span="5">
                        <el-form-item label="委托编号：">
                            <el-input style="width: 100px;" v-model="infoForm.commisioncode" placeholder="请输入订单号" readonly autocomplete="off" />  
                            <el-input style="width: 160px" type="text" :value="infoForm.commisioncode" readonly disabled="true" autocomplete="off" />  
                        </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-col :span="5">
                        <el-form-item label="委托单位：">
                            <el-select style="width: 180px;" v-model="infoForm.department" size="small" placeholder="请选择产品名称">
                            <el-select style="width: 160px;" v-model="infoForm.department" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-col :span="5">
                        <el-form-item label="联系人：">
                            <el-select style="width: 180px;" v-model="infoForm.contacter" size="small" placeholder="请选择产品名称">
                            <el-select style="width: 160px;" v-model="infoForm.contacter" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-col :span="5">
                        <el-form-item label="联系电话：">
                            <el-select style="width: 180px;" v-model="infoForm.tel" size="small" placeholder="请选择产品名称">
                            <el-select style="width: 160px;" v-model="infoForm.tel" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                    <el-row :gutter="200">
                        <el-col :span="5">
                        <el-form-item label="联系地址：" >
                            <el-select style="width: 180px;" v-model="infoForm.address" size="small" placeholder="请选择产品名称">
                            <el-select style="width: 160px;" v-model="infoForm.address" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
@@ -154,7 +154,7 @@
                              v-model="infoForm.deadline"
                              type="date"
                              placeholder="选择日期"
                              style="width: 180px;">
                              style="width: 160px;">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
@@ -164,41 +164,44 @@
                              v-model="infoForm.time"
                              type="date"
                              placeholder="选择日期"
                              style="width: 180px;">
                              style="width: 160px;">
                            </el-date-picker>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样方式：">
                          <el-select style="width: 180px;" v-model="infoForm.way" size="small" placeholder="送样">
                          <el-select style="width: 160px;" v-model="infoForm.way" size="small" placeholder="送样">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                    <el-row :gutter="200">
                        <el-col :span="5">
                        <el-form-item label="送样人：" >
                          <el-input style="width: 180px;" v-model="infoForm.sender" placeholder="请输入送样人" autocomplete="off" />
                          <el-input style="width: 160px;" v-model="infoForm.sender" placeholder="请输入送样人" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样人电话：" >
                          <el-input style="width: 180px;" v-model="infoForm.sendertel" placeholder="请输入送样人电话" autocomplete="off" />
                          <el-input style="width: 160px;" v-model="infoForm.sendertel" placeholder="请输入送样人电话" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="报告数：">
                            <el-input style="width: 180px;" v-model="infoForm.num" placeholder="请输入报告数" autocomplete="off" />
                            <el-input style="width: 160px;" v-model="infoForm.num" placeholder="请输入报告数" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="委托备注：">
                            <el-input style="width: 180px;" v-model="infoForm.other" placeholder="备注" autocomplete="off" />
                            <el-input style="width: 160px;" v-model="infoForm.other" placeholder="备注" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                    </el-row>
                    </div>
                    <div class="submitBtn">
                      <el-button type="primary" size="small" style="background-color: rgb(1, 102, 226);">提交</el-button>
                    </div>
                </el-form>
      </div>
@@ -210,9 +213,10 @@
export default {
  data() {
    return {
      currentPage: 0,
      searchData: '',
      infoForm: [{
        commisioncode: '',
      infoForm: {
        commisioncode: 'ST9162324',
        department: '',
        contacter: '',
        tel: '',
@@ -224,31 +228,78 @@
        sendertel: '',
        num: '',
        other: ''
      },
      detectionInfo: [{
        sampleid: 'GW31478631',
        samplename: '绝缘杆',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '根',
        amount: '40',
        addway: 0,
        experiment: '交流耐压试验',
        other: '123',
        opertion: '',
      }]
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.radioSelected = val.number // 选中行的number
      this.multipleSelection = val // 选中的一行数据
    },
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
    },
    handleCurrentChange(pageNo) {
      this.pageParams.pageNo = pageNo
    },
    headerBg({ row, rowIndex }) {
      console.log('rowIndex', rowIndex)
      if (rowIndex === 0) {
        return 'headerBgClass'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.firstBox{
  .title{
    padding:0px 10px 10px 10px;
  }
  .tableBox{
    background-color: #fff;
    padding: 0px 20px;
    margin: 0px -15px;
    flex: 1;
    background: #fff;
    /* padding: 20px 20px 10px 20px; */
    display: flex;
    flex-direction: column;
    .tableBox-header{
      padding: 20px 0px;
      .split{
        margin-right: 15px;
      }
    }
          .el-table {
            flex: 1;
          }
          >div:nth-child(3){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
  }
}
.secondBox{
  margin: 0px -15px;
  .header{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    margin-top: 10px;
  }
  .submitBtn{
    display: flex;
    justify-content: end;
    margin-right: 156px;
    margin-top: 20px;
  }
}
.infoForm{
  background-color: #fff;
  padding: 20px 50px;
}
</style>