8.15提交

yuyu

2023-08-15 4a8efc53405efe0d20312694d39fbd8184badb39

 src/views/rawMaterials/reportForInspection/index.vue

@@ -1,207 +1,234 @@
<template>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" inline="true" :model="searchData">
        <el-form-item>
          <el-input
            v-model="searchData.keyword"
            class="input-form"
            placeholder="请输入申请单号/检验对象/对象位置/对象名称"
  <div>
    <template v-if="!showDetail">
      <div class="content-main">
        <div class="top-bar">
          <el-form ref="form" :inline="true" :model="searchData">
            <el-form-item>
              <el-input
                v-model="searchData.keyword"
                class="input-form"
                placeholder="请输入申请单号/检验对象/对象位置/对象名称"
              >
                <i slot="prefix" class="el-input__icon el-icon-search" />
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button type="primary" plain>重置</el-button>
            </el-form-item>
            <el-dropdown>
              <span class="retrieval">
                高级检索<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form>
          <el-form class="rightBtn">
            <el-form-item class="getDataBtn">
              <el-button type="primary" icon="el-icon-download" plain>获取ERP数据</el-button>
            </el-form-item>
            <el-form-item class="createBtn">
              <el-button type="primary" icon="el-icon-plus" @click="checkTypeVisible = true">新增检验单</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">
                <el-radio-button label="全部" />
                <el-radio-button label="待提交" />
                <el-radio-button label="已提交" />
                <el-radio-button label="已作废" />
              </el-radio-group>
            </div>
          </div>
          <div class="table-box">
            <el-table
              ref="inspectionTable"
              :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="inspectionTable"
              style="width: 100%"
            >
              <el-table-column
                prop="type"
                label="检验类型"
                min-width="200"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.type===0">原材料检验</span>
                  <span v-else-if="scope.row.type===1">半成品检验</span>
                  <span v-else-if="scope.row.type===2">成品检验</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                min-width="200"
              />
              <el-table-column
                prop="userName"
                label="申请人"
                min-width="200"
              />
              <el-table-column
                prop="inspectUserId"
                label="检验人"
                min-width="200"
              />
              <el-table-column
                prop="inspectionStatus"
                label="检验状态"
                min-width="200"
              />
              <el-table-column
                prop="qualifiedState"
                label="合格状态"
                min-width="200"
              />
              <el-table-column
                prop="inspectStartTime"
                label="检验开始时间"
                min-width="200"
              />
              <el-table-column
                prop="inspectEndTime"
                label="检验结束时间"
                min-width="200"
              />
              <el-table-column
                label="操作"
                min-width="200"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                  <el-button type="text" size="small">作废</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div>
              <el-pagination
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
        <div class="checkType">
          <el-dialog
            title="新增检验单"
            :visible.sync="checkTypeVisible"
            width="40%"
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="primary" plain>重置</el-button>
        </el-form-item>
        <el-dropdown>
          <span class="retrieval">
            高级检索<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form>
      <el-form class="rightBtn">
        <el-form-item class="getDataBtn">
          <el-button type="primary" icon="el-icon-download" plain>获取ERP数据</el-button>
        </el-form-item>
        <el-form-item class="createBtn">
          <el-button type="primary" 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">
            <el-radio-button label="全部" />
            <el-radio-button label="待提交" />
            <el-radio-button label="已提交" />
            <el-radio-button label="已作废" />
          </el-radio-group>
            <div class="check-box">
              <el-radio-group v-model="addInspectionType">
                <el-radio :label="0" border>原材料检验</el-radio>
                <el-radio :label="1" border>半成品检验</el-radio>
                <el-radio :label="2" border>成品检验</el-radio>
              </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="checkTypeVisible = false">取 消</el-button>
              <el-button type="primary" @click="goToForInspectionDetail">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
      <div class="table-box">
        <el-table
          ref="inspectionTable"
          :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="inspectionTable"
          style="width: 100%"
        >
          <el-table-column
            prop="applicationOrdernumber"
            label="申请单号"
            min-width="200"
          />
          <el-table-column
            prop="typeofInspection"
            label="检验类型"
            min-width="200"
          />
          <el-table-column
            prop="objectofInspection"
            label="检验对象"
            min-width="200"
          />
          <el-table-column
            prop="palceofObject"
            label="对象位置"
            min-width="200"
          />
          <el-table-column
            prop="name"
            label="对象名称"
            min-width="200"
          />
          <el-table-column
            prop="date"
            label="登记日期"
            min-width="200"
          />
          <el-table-column
            prop="registrant"
            label="登记人"
            min-width="200"
          />
          <el-table-column
            prop="applicationTime"
            label="申请时间"
            min-width="200"
          />
          <el-table-column
            label="操作"
            min-width="200"
            :fixed="true"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small">作废</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
      <div>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.inspectionTable.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
      </div>
      </div>
    </div>
    </template>
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
import { getInspectionList, addInspection } from '@/api/rawMaterials/reportForInspection'
export default {
  data() {
    return {
      showDetail: false,
      searchData: {
        keyword: ''
      },
      inspectionTable: [{
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      }
      ],
        'id': '1681215775833042945',
        'type': 0,
        'inspectionStatus': 0,
        'qualifiedState': null,
        'state': 1,
        'createTime': '2023-07-18 16:14:11',
        'updateTime': null,
        'version': null,
        'userName': '测试人员',
        'inspectUserId': null,
        'inspectStartTime': null,
        'inspectEndTime': null
      }],
      currentPage: 1,
      total: 20, // 总条数
      pageSize: 100, // 每页的数据条数
      radioValue: '全部'
      pageSize: 10, // 每页的数据条数
      radioValue: '全部',
      checkTypeVisible: false,
      addInspectionType: 0
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        console.log(val)// 新路由信息
        console.log(oldval)// 老路由信息
      },
      // 深度观察监听
      deep: true
    }
  },
  created() {
    this.getInspectionTableData()
  },
  updated() {
    if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
  },
  methods: {
    async getInspectionTableData() {
      const res = await getInspectionList({ pageSize: this.currentPage, countSize: this.pageSize })
      // this.inspectionTable = data
      console.log(res)
      this.inspectionTable = res.data
    },
    async goToForInspectionDetail() {
      try {
        //
        const form = new FormData()
        form.append('type', this.addInspectionType)
        let { data: inspectionDetail } = await addInspection(form)
        // console.log(res)
        inspectionDetail = JSON.stringify(inspectionDetail)
        this.$message.success('添加成功')
        this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
      } catch (error) {
        this.$message.error('添加失败')
      }
    },
    // 查看对应申请单详情
    handleClick(row) {
      console.log(row)
      const inspectionDetail = JSON.stringify(row)
      this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
@@ -219,11 +246,43 @@
</script>

<style lang="scss" scoped>
  .content-main{
.checkType{
  .check-box{
    .el-radio-group{
      display: flex;
      justify-content: space-around;
      .el-radio{
        // display: flex;
        // align-items: center;
        &.is-checked{
          background: #ecf5ff;
          border-color: #b3d8ff;
         ::v-deep  .el-radio__label{
            color: #333 !important;

          }
        }
        height: auto;
        font-size: 22px !important;
        padding: 20px 40px !important;
        ::v-deep  .el-radio__label{
          font-size: 22px !important;
          padding-left: 0px !important;
        }
        ::v-deep  .el-radio__input{
        display: none !important;
      }
    }
 }
  }
}
 .content-main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 88px);
    padding: 15px;
  }
  .top-bar{
    margin: -25px;
@@ -276,6 +335,11 @@
          flex-direction: column;
          .el-table {
            flex: 1;
            display: flex;
            flex-direction: column;
            ::v-deep .el-table__body-wrapper{
              flex: 1;
            }
          }
          >div:nth-child(2){
            display: flex;