modified: .env.development modified: .env.production modified: .en...

Fixiaobai

2023-08-17 db639ba99b5856503053cf74efe73b6c5604d9d6

 src/views/laboratory/measure/index.vue

@@ -1,230 +1,178 @@
<template>
  <div>
      <div class="content-main">
          <div class="top-bar">
              <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item :label="this.radioValue === 0 ? '仪器设备编号:' : '编号:'" class="sermargin">
                <el-input
                  v-model="searchData.code"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item :label="this.radioValue === 0 ? '仪器设备名称:' : '设备名称'" class="sermargin">
                <el-input
                  v-model="searchData.name"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item :label="this.radioValue === 0 ? '计量单位:' : '计量单位：'" style="margin-right: 20px;">
                <el-input
                  v-model="searchData.measureunit"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              </el-form>
              <el-form>
                <el-form-item v-if="this.radioValue === 0" class="rightBtn">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="primary" plain @click="reset">重置</el-button>
                </el-form-item>
                <el-form-item v-if="this.radioValue === 1" class="rightBtn">
                  <el-button type="primary" icon="el-icon-plus">新增计划</el-button>
                </el-form-item>
              </el-form>
              </el-form>
          </div>
          <div class="library-table">
            <div class="table-header">
              <div class="search-bar">
                <el-radio-group v-model="radioValue" @change="radioclick">
                <el-radio-button v-for="item in options" :key="item.value" :label="item.value">
    <div class="content-main">
      <div class="top-bar">
        <el-form :hidden="lookVisible" ref="form" :inline="true" :model="searchData">
          <el-form-item :label="this.radioValue === 0 ? '仪器设备编号:' : '计划单号:'" class="sermargin">
            <el-input v-model="searchData.code" @blur="blurSearch()" class="input-form" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item v-if="this.radioValue === 0" :label="this.radioValue === 0 ? '仪器设备名称:' : '设备名称'"
            class="sermargin">
            <el-input v-model="searchData.name" class="input-form" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item v-if="this.radioValue === 0" :label="this.radioValue === 0 ? '计量单位:' : '计量单位：'"
            style="margin-right: 20px;">
            <el-input v-model="searchData.measureunit" class="input-form" placeholder="请输入">
            </el-input>
          </el-form-item>
        </el-form>
        <el-form :hidden="lookVisible">
          <el-form-item v-if="this.radioValue === 0" class="rightBtn">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" plain @click="reset()">重置</el-button>
          </el-form-item>
          <el-form-item v-if="this.radioValue === 1" class="rightBtn">
            <el-button type="primary" @click="addPlan()" icon="el-icon-plus">新增计划</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="library-table">
        <div class="table-header">
          <div class="search-bar">
            <el-radio-group v-model="radioValue" @change="radioclick">
              <el-radio-button v-for="item in options" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio-button>
              </el-radio-group>
              </div>
            </div>
            <div class="table-box">
              <el-table
                v-if="this.radioValue === 0"
                :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="measureLedgerTable"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  prop="hello"
                  label="仪器设备编号"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrust_coding"
                  label="仪器设备名称"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrusted"
                  label="测量范围"
                  min-width="15%"
                />
                <el-table-column
                  prop="samples_number"
                  label="计量周期"
                  min-width="6%"
                />
                <el-table-column
                  prop="inspection_status"
                  label="计量结果"
                  min-width="6%">
                  <template slot-scope="scope">
                    <div v-if="scope.row.inspection_status === 1">
                      <span style="color: green;">正常</span>
                    </div>
                    <div v-else>
                      <span style="color: red;">失准</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="specifications_models"
                  label="计量日期"
                  min-width="12%"
                />
                <el-table-column
                  prop="dateSurvey"
                  label="计量有效期"
                  min-width="8%"
                />
                <el-table-column
                  prop="completionDeadline"
                  label="负责人"
                  min-width="6%"
                />
                <el-table-column
                  prop="contacts"
                  label="创建日期"
                  min-width="8%"
                />
                <el-table-column
                  prop="inspectionTime"
                  label="创建人"
                  min-width="8%"
                />
                <el-table-column
                  prop="inspectionTime"
                  label="计量编号"
                  min-width="8%"
                />
                <el-table-column
                  label="操作"
                  min-width="15%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" >查看计量履历</el-button>
                    <el-button type="text" size="small" >查看附件</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                v-if="this.radioValue === 1"
                :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="measurePlanTable"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  prop="hello"
                  label="计量单号"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrust_coding"
                  label="设备编号"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrusted"
                  label="设备名称"
                  min-width="15%"
                />
                <el-table-column
                  prop="samples_number"
                  label="计划日期"
                  min-width="6%"
                />
                <el-table-column
                  prop="inspection_status"
                  label="计量状态"
                  min-width="6%">
                  <template slot-scope="scope">
                    <div v-if="scope.row.inspection_status === 1">
                      <span style="color: green;">已完成</span>
                    </div>
                    <div v-else>
                      <span style="color: red;">未完成</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="specifications_models"
                  label="计量负责人"
                  min-width="12%"
                />
                <el-table-column
                  prop="dateSurvey"
                  label="计量单位"
                  min-width="8%"
                />
                <el-table-column
                  prop="completionDeadline"
                  label="创建人"
                  min-width="6%"
                />
                <el-table-column
                  prop="contacts"
                  label="创建日期"
                  min-width="8%"
                />
                <el-table-column
                  label="操作"
                  min-width="15%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" >查看计量履历</el-button>
                    <el-button type="text" size="small" >查看附件</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
            </el-radio-group>
          </div>
        </div>
        <div class="table-box">
          <el-table v-if="this.radioValue == 0" :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="measureLedgerTable" style="width: 100%">
            <el-table-column type="index" min-width="10%" />
            <el-table-column prop="equipmentCode" label="仪器设备编号" min-width="10%" />
            <el-table-column label="计量单位" prop="measurementUnit" min-width="10%"></el-table-column>
            <el-table-column prop="equipmentName" label="仪器设备名称" min-width="10%" />
            <el-table-column prop="measuringRange" label="测量范围" min-width="10%" />
            <el-table-column prop="termValidity" label="计量周期" min-width="10%">
              <template slot-scope="scope">
                {{ scope.row.termValidity }}月
              </template>
            </el-table-column>
            <el-table-column prop="result" label="计量结果" min-width="10%">
              <template slot-scope="scope">
                <div v-if="scope.row.result === 1">
                  <span style="color: rgb(78, 210, 16);">正常</span>
                </div>
                <div v-else-if="scope.row.result === 2">
                  <span style="color: rgb(27, 202, 233);">矫正后可用</span>
                </div>
                <div v-else>
                  <span style="color: red;">失准</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="endDate" label="计量日期" min-width="12%" />
            <el-table-column prop="validit" label="计量有效期" min-width="10%" />
            <el-table-column prop="name" label="负责人" min-width="10%" />
            <el-table-column prop="createTime" label="创建日期" min-width="10%" />
            <el-table-column prop="name" label="创建人" min-width="8%" />
            <el-table-column prop="code" label="计量编号" min-width="8%" />
            <el-table-column label="操作" min-width="15%">
              <template slot-scope="scope">
                <el-button type="text" @click="lookMeasurement(scope.row.equipmentCode)" size="small">查看计量履历</el-button>
                <el-button type="text" size="small">查看附件</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table v-show="this.radioValue == 1" :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="measurePlanTable" style="width: 100%">
            <el-table-column type="index" min-width="10%" />
            <el-table-column prop="plannedOrderNumber" label="计划单号" min-width="10%" />
            <el-table-column prop="palanDate" label="计划日期" min-width="10%">
              <template lot-scope="scope">
                <!-- {{ scope.row.palanDate }} -->
              </template>
            </el-table-column>
            <el-table-column prop="status" label="计划状态" min-width="6%">
              <template slot-scope="scope">
                <div v-if="scope.row.status == 1">
                  <span style="color: green;">已完成</span>
                </div>
                <div v-else>
                  <span style="color: red;">未完成</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="measurePerson" label="计划负责人" min-width="12%" />
            <el-table-column prop="createPerson" label="创建人" min-width="10%" />
            <el-table-column label="创建时间" prop="createTime" min-width="10%" />
            <el-table-column prop="id" label="操作" min-width="15%">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="lookPalan(scope.row.id)">查看计量履历</el-button>
                <el-button type="text" size="small">查看附件</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div style="display: flex;justify-content: end;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
        <span>我来啦!</span>
      </el-drawer>
      <div id="myMOdel"
        :style="`position: absolute;transition: 1s;top:${mymodelTop}px; left: 9px; width: 100%; height: 60vh; background-color: #fff;z-index: 20;`">
        <el-col :span="10">
          <p style="font-size: 13px;padding-left: 40px;">计划信息</p>
        </el-col>
        <el-col>
          <el-form :model="planInfo" style="padding-left: 150px;color: #9b9898;">
            <el-form-item>
              <el-col :span="8">计划编号：<span style="color: black;">{{ planInfo.plannedOrderNumber }}</span></el-col>
              <el-col :span="8">负责人：<span style="color: black;">{{ planInfo.measurePerson }}</span></el-col>
              <el-col :span="8">计划时间：<span style="color: black;">{{ planInfo.palanDate }}</span></el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="8">计量单位：<span style="color: black;">{{ planInfo.unit }}</span></el-col>
              <el-col :span="8">创建人：<span style="color: black;">{{ planInfo.createPerson }}</span></el-col>
              <el-col :span="8">创建时间：<span style="color: black;">{{ planInfo.createTime }}</span></el-col>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-col style="font-size: 13px;padding-left: 55px;">
            计量信息
          </el-col>
          <el-col>
            <el-progress style="width: 95%;padding-left: 40px;margin-top: 20px;" :percentage="6" :stroke-width="2"
              :show-text="false"></el-progress>
          </el-col>
        </el-col>
        <el-col  style="width:93%;height: 20vh;margin-top: 30px; margin-left: 40px;">
          <el-table :data="measureData">
            <el-table-column type="inde" label="序号"/>
            <el-table-column type="inde" label="仪器设备编号"/>
            <el-table-column type="inde" label="仪器设备名称"/>
            <el-table-column type="inde" label="测量范围"/>
            <el-table-column type="inde" label="计算周期"/>
            <el-table-column type="inde" label="计算结果"/>
            <el-table-column type="inde" label="计算日期"/>
            <el-table-column type="inde" label="计算有效期"/>
            <el-table-column type="inde" label="负责人"/>
            <el-table-column type="inde" label="创建日期"/>
            <el-table-column type="inde" label="创建人"/>
            <el-table-column type="inde" label="计量单位"/>
            <el-table-column type="inde" label="计量编号"/>
          </el-table>
        </el-col>
        <el-col style="width: 93%;margin-left: 40px; display: flex;justify-content: end;">
          <el-pagination @size-change="handleSizeChangePlan" @current-change="handleCurrentChangePllan"
              :current-page="currentPagePlan" :page-sizes="[5, 10, 20]" :page-size="pageSizePlan"
              layout="total, sizes, prev, pager, next, jumper" :total="totalPlan">
            </el-pagination>
        </el-col>
      </div>
    </div>
  </div>
</template>

@@ -233,87 +181,195 @@
export default {
  data() {
    return {
      searchData:{
      searchData: {
        code: '',
        name: '',
        measureunit: ''
      },
      radioValue: 0,
      options:[{
      options: [{
        value: 0,
        label: '计量台账'
      },{
        value: 1 ,
      }, {
        value: 1,
        label: '计量计划'
      }],
      measureLedgerTable: [],
      measurePlanTable: [],
      currentPage: 1,
      pageSize: 5,
      total: 20
      total: 0,
      currentPagePlan: 1,
      pageSizePlan: 5,
      totalPlan: 0,
      drawer: false,
      direction: 'rtl',
      lookVisible: false,
      measureData: [],
      planInfo: {
        plannedOrderNumber: 7897897987,
        measurePerson: '某某人',
        palanDate: "2021-09-08 ~ 2024-08-09",
        unit: '某某检测局',
        createPerson: '某某负责人',
        createTime: '2021-09-08'
      },
      mymodelTop: -450//14
    }
  },
  created(){
  created() {
    this.getStandingPageList()
  },
  methods: {
    async getStandingPageList(){
      const res = await getStandingPageList({pageNo:this.currentPage , pageSize:this.pageSize })
      this.measureLedgerTable = res.data
      console.log(this.measureLedgerTable)
    }
    
    handleSizeChangePlan(){

    },
    handleCurrentChangePllan(){

    },
    addPlan() {
      this.drawer = true
    },
    lookPalan(id) {
      this.lookVisible = true
      this.mymodelTop=10
      this.$parent.triggerMainBtnPlan()
    },
    combackLookPlan(){
      this.lookVisible = false
      this.mymodelTop=-450
    },
    blurSearch() {
      if (this.radioValue === 1) {
        console.log("计划");
      }
    },
    handleClose() {
      this.drawer = false
    },
    handleCurrentChange() {
      this.getStandingPageList()
    },
    handleSizeChange() {
      this.getStandingPageList()
    },
    async getStandingPageList() {
      const res = await getStandingPageList({
        currentPage: this.currentPage, pageSize: this.pageSize,
        code: this.searchData.code, name: this.searchData.name, unit: this.searchData.measureunit
      })
      this.measureLedgerTable = res.data.records
      this.total = res.data.total
      this.measureLedgerTable.forEach(item => {
        let dateStr = ''
        let dateArr = item.createTime
        dateStr = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2]
        item.createTime = dateStr
        let endArr = item.endDate
        item.endDate = endArr[0] + "-" + endArr[1] + "-" + endArr[2]
        item.validit = this.addMonths(item.endDate, item.termValidity)
      })
    },
    addMonths(yearMonthDay, monthNum) {
      var arr = yearMonthDay.split('-');//2020-08-19或2020-08
      var year = parseInt(arr[0]);
      var month = parseInt(arr[1]);
      month = month + monthNum;
      if (month > 12) {//月份加
        var yearNum = parseInt((month - 1) / 12);
        month = month % 12 == 0 ? 12 : month % 12;
        year += yearNum;
      } else if (month <= 0) {//月份减
        month = Math.abs(month);
        var yearNum = parseInt((month + 12) / 12);
        year -= yearNum;
      }
      month = month < 10 ? "0" + month : month;
      return year + "-" + month + "-" + arr[2];
    },
    search() {
      this.getStandingPageList()
    },
    reset(formName) {
      this.searchData.name = ''
      this.searchData.code = ''
      this.searchData.measureunit = ''
    },
    radioclick() {
      this.radioValue ? this.getPlanPageList() : this.getStandingPageList()
      this.reset()
    },
    async getPlanPageList() {
      const res = await getPlanPageList({
        currentPage: this.currentPage, pageSize: this.pageSize,
        code: this.searchData.code, name: this.searchData.name, unit: this.searchData.measureunit
      })
      res.data.list.forEach(item => {
        item.palanDate = item.beginTime + " ~ " + item.endTime
      })
      this.measurePlanTable = res.data.list
      this.total = res.data.total
    },
    lookMeasurement(code) {
      console.log(code);
    },
  }
}
</script>

<style scoped>
.top-bar {
  margin: -25px -15px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 5px 24px 0px 24px;

.top-bar{
    margin: -25px -15px;
    background: #fff;
  .sermargin {
    margin-right: 60px;
  }
}

.rightBtn {
  margin-right: 50px
}

.library-table {
  background-color: #fff;
  flex: 1;
  margin: 0px -15px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;

  .table-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .sermargin{
      margin-right: 60px;

    .el-form-item {
      margin-bottom: 30px !important;
    }
  }
.rightBtn{
    margin-right: 50px
}
.library-table{
      background-color: #fff;

  .table-box {
    padding: 0px 20px;
    margin-top: 0px;
    flex: 1;
    background: #fff;
    /* padding: 20px 20px 10px 20px; */
    display: flex;
    flex-direction: column;

    .el-table {
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }

    >div:nth-child(2) {
      display: flex;
      justify-content: end;
      margin: 10px 0;
    }
  }
}
</style>