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

yuyu

2023-08-08 2260184afb85c80eabce02da190f9f07ee660ab3

 src/views/experiment/planAssignments/index.vue

@@ -1,13 +1,259 @@
<template>
  <div>检验计划分配</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" :inline="true" :model="searchData">
        <el-form-item label="设备名称:" class="sermargin">
          <el-select v-model="searchData.devicename" placeholder="全部" style="width: 100px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检验时间:" class="sermargin">
          <el-date-picker
            v-model="searchData.time"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检验人:" style="margin-right: 20px;">
          <el-select v-model="searchData.person" placeholder="全部" style="width: 80px;margin-right: 100px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain style="margin-right: 10px;">重置</el-button>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
      <div class="formwrapper">
        <el-table
          ref="planTable"
          :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="planTable"
          style="width: 100%"
        >
        <el-table-column
          type="index"
          label="序号"
          min-width="10%"
        />
        <el-table-column
          prop="device"
          label="检验设备"
          min-width="8%"
        />
        <el-table-column
          prop="samplename"
          label="样品名称"
          min-width="8%"
        />
        <el-table-column
          prop="sampleid"
          label="样品编号"
          min-width="10%"
        />
        <el-table-column
          prop="modelandspecification"
          label="规格型号"
          min-width="12%"
        />
        <el-table-column
          prop="unit"
          label="单位"
          min-width="5%"
        />
        <el-table-column
          prop="amount"
          label="数量"
          min-width="5%"
        />
        <el-table-column
          prop="checkproject"
          label="检验项目"
          min-width="12%"
        />
        <el-table-column
          prop="checker"
          label="检验人"
          min-width="6%"
        />
        <el-table-column
          prop="duration"
          label="计划工期/h"
          min-width="8%"
        />
        <el-table-column
          prop="progress"
          label="检验进度"
          min-width="12%">
          <template slot-scope="scope">
            <div v-if="scope.row.progress === 100" style="display: flex;">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" status="success" style="width: 70%;"></el-progress>
              <span style="color: rgb(103, 194, 58);">已完成</span>
            </div>
            <div v-if="scope.row.progress <100 && scope.row.progress >0" style="display: flex;">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" status="warning" style="width: 70%;"></el-progress>
              <span style="color: rgb(230, 162, 60);">检验中</span>
            </div>
            <div v-if="scope.row.progress === 0" style="display: flex;">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" style="width: 70%;"></el-progress>
              <span style="color: gray">未分配</span>
            </div>
            <div v-else>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="starttime"
          label="计划开始时间"
          min-width="10%"
        />
        <el-table-column
          prop="finishtime"
          label="计划结束时间"
          min-width="10%"
        />
        <el-table-column
            label="操作"
            min-width="8%"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        </el-table>
      </div>
      </div>
  </div>
</template>

<script>
export default {

}
  data() {
    return {
      searchData: {
        devicename: "",
        time: "",
        person: "",
      },
      options: [
        {
          value: "选项1",
          label: "选项1",
        },
        {
          value: "选项2",
          label: "选项2",
          disabled: true,
        },
      ],
      planTable: [{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 100,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      },{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 60,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      },{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 30,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      },{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 0,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      }]
    };
  },
};
</script>

<style lang="scss" scoped>

.content-main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top-bar {
  margin: -25px -15px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 5px 24px 0px 24px;
  .sermargin {
    margin-right: 60px;
  }
}
.table-box{
  background-color: #fff;
  margin: 0px -15px;
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  height: 78vh;
  .formwrapper{
    padding: 0px 20px;
    margin-top: 0px;
    flex: 1;
    background: #fff;
    /* padding: 20px 20px 10px 20px; */
    display: flex;
    flex-direction: column;
    .el-table {
      flex: 1;
    }
  }
}
</style>