yuyu
2023-08-16 e8b239efa63361a8984810bf9b4047981b98050c
src/views/inspectionManagement/reportForInspection/index.vue
@@ -37,18 +37,16 @@
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button type="primary" plain>重置</el-button>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="primary" plain @click="reset">重置</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-group v-model="radioValue" @change="radioclick">
                <el-radio-button v-for="option in radioOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio-button>
              </el-radio-group>
            </div>
            <div class="generateInsp">
@@ -66,7 +64,6 @@
            >
              <el-table-column
                type="selection"
                label=""
                min-width="10%"
              /> 
              <el-table-column
@@ -75,27 +72,27 @@
                min-width="8%"
              />
              <el-table-column
                prop="date"
                prop="createTime"
                label="来料日期"
                min-width="8%"
              />
              <el-table-column
                prop="providerName"
                prop="supplierName"
                label="供应商名称"
                min-width="12%"
              />
              <el-table-column
                prop="code"
                prop="materialCoding"
                label="材料编码"
                min-width="8%"
              />
              <el-table-column
                prop="name"
                prop="materialName"
                label="材料名称"
                min-width="8%"
              />
              <el-table-column
                prop="modelandspecification"
                prop="specificationsModels"
                label="规格型号"
                min-width="12%"
              />
@@ -105,33 +102,33 @@
                min-width="5%"
              />
              <el-table-column
                prop="amount"
                prop="quantity"
                label="数量"
                min-width="5%"
              />
              <el-table-column
                prop="commisiondate"
                prop="inspectionDate"
                label="报检日期"
                min-width="8%"
              />
              <el-table-column
                prop="person"
                prop="surveyor"
                label="检验人"
                min-width="8%"
              />
              <el-table-column
                prop="checkdate"
                prop="dateSurvey"
                label="检验日期"
                min-width="8%"
              />
              <el-table-column
                prop="state"
                prop="condition"
                label="状态"
                min-width="8%"
              >
              <template slot-scope="scope">
                <span :style="{ color: scope.row.state === '已检测' ? 'green' : 'red' }">
                  {{ scope.row.state }}
                <span :style="{ color: scope.row.condition === 1 ? 'green' : 'red' }">
                  {{ scope.row.condition === 1 ? '已检测':'未检测' }}
                </span>
              </template>
              </el-table-column>
@@ -142,10 +139,10 @@
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
                :total="total">
              </el-pagination>
            </div>
          </div>
@@ -154,6 +151,7 @@
</template>
<script>
import {getRawMaterialList } from '@/api/inspection/rawmaterial'
export default {
  data() {
    return {
@@ -165,79 +163,102 @@
        date: ''
      },
      options: [{
        value: '1',
        label: '部门1'
        value: 0,
        label: '全部'
      }, {
        value: '2',
        label: '部门2'
        value: 1,
        label: '已检验'
      }, {
        value: '3',
        label: '部门3'
        value: 2,
        label: '未检验'
      }],
      radioValue: '',
      radioOptions:[{
        label: '全部',
        value: 0
      },{
        value: 1,
        label: '已检验'
      },{
        value: 2,
        label: '待检验'
      }],
      radioValue: 0,
      inspectionTable: [{
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        createTime: '2023-07-28',
        supplier_name: '国网山东省电力有限公司',
        materialCoding: 'BP214274',
        materialName: '铝包钢绞线',
        specificationsModels: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '已检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '待检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '已检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '待检测'
        quantity: 21,
        dateSurvey: '2023-08-02',
        surveyor: '黄小明',
        inspectionDate: '2023-12-09',
        condition: 1
      }],
      currentPage: 0
      currentPage: 1,
      pageSize: 5,
      total:20,
      data: ''
    }
  },
  created(){
    this.getRawMaterialList()
  },
  methods: {
    // 获取分页列表数据
    async getRawMaterialList(){
      const res = await getRawMaterialList({pageNo: this.currentPage,pageSize:this.pageSize})
      // console.log(res)
      this.inspectionTable = res.data.row
      this.data = res.data.row
      this.total = res.data.total
    },
    async search(){
      this.radioValue = this.searchData.state
      const res = await getRawMaterialList({condition: this.searchData.state,
        createTime:this.searchData.date,
        materialCoding:this.searchData.code,
        materialName: this.searchData.name,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      })
      // console.log(res)
      this.inspectionTable = res.data.row
      this.data = res.data.row
      this.total = res.data.total
    },
    reset(){
      this.searchData = {
        code: '',
        name: '',
        state: '',
        date: ''
      }
      this.getRawMaterialList()
    },
    radioclick(){
      this.searchData.state = this.radioValue
      // console.log(this.radioValue)
      this.inspectionTable = this.data.filter((item)=>{
        return item.condition === this.radioValue
      })
      if(this.radioValue === 0){
        this.inspectionTable = this.data
      }
      this.total = this.inspectionTable.length
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
      this.getRawMaterialList({pageNo: this.currentPage,pageSize:this.pageSize})
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getRawMaterialList({pageNo: this.currentPage,pageSize:this.pageSize})
    }
  }
}