优化滚动分页，封装组件，

licp

2024-04-24 70b128785737df0d6065b09a75cf79b49efe22fa

 src/components/view/b4-sample-defects.vue

@@ -57,12 +57,12 @@
         <div class="search_thing">
            <div class="search_label">检验项目：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                  v-model="entity.laboratoryName" @keyup.enter.native="refreshTable()"></el-input></div>
                  v-model="entity.inspectionItems" @keyup.enter.native="refreshTable()"></el-input></div>
         </div>
         <div class="search_thing">
            <div class="search_label">委托编号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                  v-model="entity.laboratoryNumber" @keyup.enter.native="refreshTable()"></el-input></div>
                  v-model="entity.orderNumber" @keyup.enter.native="refreshTable()"></el-input></div>
         </div>
         <div class="search_thing" style="padding-left: 30px;">
            <el-button size="small" @click="refresh()">重 置</el-button>
@@ -79,30 +79,30 @@
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="date"
          prop="inspection_item"
          label="检验项目"
          sortable
          min-width="180">
          <template slot-scope="scope">
            <p>
              <el-tag style="margin-right: 10px;height: 24px;border-radius: 10px;line-height: 24px;border: 0;" :type="scope.row.level==2?'success':''">{{ '0' + scope.row.level }}</el-tag>
              <span>{{ scope.row.date }}</span>
              <span>{{ scope.row.inspection_item }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          prop="entrust_code"
          label="委托编号"
          sortable
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="name"
          label="检验人"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="create_time"
          label="检验时间"
          min-width="180">
        </el-table-column>
@@ -121,27 +121,11 @@
   export default {
      data() {
         return {
            entity: {},
        tableData: [{
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          level:1,
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              level:2,
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              level:2,
          }]
        }],
            entity: {
          orderNumber:null,
          inspectionItems:null,
        },
        tableData: [],
        page:{
          current:1,
          size:20,
@@ -151,15 +135,39 @@
         }
      },
      mounted() {

         this.getPower()
         // this.getPower()
      this.refreshTable()
      },
      methods: {
      refreshTable(){
        this.loading = true
        this.$axios.post(this.$api.insOrder.selectSampleDefects, {
               ...this.page,
               ...this.entity
            }).then(res => {
          this.loading = false
               if (res.code === 201) {
                  this.loading = false
                  return
               }
          this.total = res.data.total;
          this.tableData = res.data.records.map(item=>{
            item.level = 1;
            item.inspection_item = item.sample
            item.children = item.children.map(m=>{
              m.id = Math.random(10000)
              m.level = 2;
              return m
            })
            return item
          });
        })
      },
      refresh(){
        this.page.size = 20;
        this.entity = {
          orderNumber:null,
          inspectionItems:null,
        },
        this.page.current = 1;
        this.refreshTable();
      },