优化

licp

2024-05-14 2caf6c0b519300a24788b7cd8d57fb0c1f0b1a0e

 src/components/view/b2-standard.vue

@@ -6,7 +6,7 @@

  .left {
    width: 270px;
    height: calc(100% - 40px - 30px);
    height: calc(100% - 40px - 10px);
    background-color: white;
    padding: 15px;
  }
@@ -38,8 +38,8 @@
  }

  .right .title {
    height: 50px;
    line-height: 50px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background-color: white;
  }
@@ -51,19 +51,33 @@

  .product_table {
    border-top: 1px solid #ebeef5;
    height: calc(100% - 275px);
    height: calc(100% - 235px);
    margin-top: 5px;
    background-color: white;
    user-select: none;
  }

  .product_table .el-table {
    height: 100%;
    height: calc(100% - 35px) !important;
  }

  .sort {
    width: 80% !important;
    overflow: hidden;
  }
  >>>.el-table__body-wrapper{
    height: calc(100% - 46px) !important;
  }
  >>>.header-class{
    height: 40px !important;
  }
  >>>.header-class th.el-table__cell>.cell{
    line-height: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  >>>.el-table__row{
    height: 30px !important;
  }
</style>
<style>
@@ -142,8 +156,8 @@
        <!-- </el-col> -->
      </el-row>
      <el-row class="standard_table" v-loading="tableLoad">
        <el-table class="el-table" :data="standardList" style="width: 100%;" height="220" tooltip-effect="dark"
          highlight-current-row @row-click="rowClick" ref="standard">
        <el-table class="el-table" :data="standardList" style="width: 100%;height: 220px !important;" height="220" tooltip-effect="dark"
          highlight-current-row @row-click="rowClick" ref="standard" header-row-class-name="header-class">
          <el-table-column prop="code" label="标准编号" show-overflow-tooltip width="200">
            <template slot-scope="scope">
              <span style="color: red;font-size: 14px;">{{scope.row['code']}}</span>
@@ -161,10 +175,15 @@
        </el-table>
      </el-row>
      <el-row class="product_table" v-loading="tableLoad2">
        <el-table :data="productList" ref="productTable" style="width: 100%;" height="100%" tooltip-effect="dark" stripe
          :fit="true" border @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
          @select="upProductSelect" @select-all="handleAll">
          <el-table-column type="selection" width="65">
        <el-table :data="pagedData" ref="productTable" style="width: 100%;" height="100%" tooltip-effect="dark" stripe
          :fit="true" border
          @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
          @select="upProductSelect"
          @select-all="handleAll"
          class="productTable"
          @filter-change="filterChange"
          header-row-class-name="header-class">
          <el-table-column type="selection" width="65" >
          </el-table-column>
          <el-table-column prop="model" label="型号" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="inspectionItem" label="检验项" min-width="140" show-overflow-tooltip></el-table-column>
@@ -231,6 +250,14 @@
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        style="position: absolute;right: 16px;bottom: 1px;"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </div>
    <el-dialog title="分类添加" :visible.sync="addDia" width="400px">
@@ -428,7 +455,31 @@
        sectionLoad: false,
        sectionRow: null,
        sectionList: [],
        templateList: []
        templateList: [],
        total:0,
        pageSize:100,
        currentPage:1,
        productLists:[],
      }
    },
    computed: {
      pagedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.total = this.productList.length;
        return this.productList.slice(start, end);
      },
    },
    watch:{
      pagedData:{
        deep:true,
        handler(val){
          setTimeout(() => {
            val.forEach(a => {
              if (a.state == 1) this.toggleSelection(a)
            })
          }, 300)
        }
      }
    },
    mounted() {
@@ -911,12 +962,13 @@
          id: row.id,
          tree: this.selectTree
        }).then(res => {
          this.productLists = this.HaveJson(res.data)
          this.productList = res.data
          setTimeout(() => {
            this.productList.forEach(a => {
              if (a.state == 1) this.toggleSelection(a)
            })
          }, 300)
          // setTimeout(() => {
          //   this.productList.forEach(a => {
          //     if (a.state == 1) this.toggleSelection(a)
          //   })
          // }, 300)
          this.tableLoad2 = false
        })
      },
@@ -948,20 +1000,27 @@
          }
          // this.$message.success('已保存')
        })
        this.productLists.map(item => {
          if(row.id == item.id){
              item.state = row.state;
            }
          return item
        })
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        // console.log(222222222222,row[property],value)
        return row[property] === value;
      },
      handleAll(e) {
        if (e.length > 0) {
          this.productList.map(m => {
          this.productList = this.productList.map(m => {
            m.state = 0
            this.upProductSelect(null, m)
            return m
          })
        } else {
          this.productList.map(m => {
          this.productList = this.productList.map(m => {
            m.state = 1
            this.upProductSelect(null, m)
            return m
@@ -1039,6 +1098,24 @@
          this.templateList = res.data
        })
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      filterChange(e){
        let arr =[];
        for (let key in e){
          arr = e[key]
        }
        if(arr.length>0){
          let arr0 = this.HaveJson(this.productLists).filter(item=>{
            return arr.find(value=>item.sonLaboratory==value)!==undefined
          })
          this.productList = this.HaveJson(arr0)
        }else{
          this.productList = this.HaveJson(this.productLists)
        }
        // productLists
      }
    }
  }
</script>