页面样式优化

李林

2024-05-13 cf55b35ed95d2550edbd28429ebfe55b52a5a71b

 src/components/do/b1-inspect-order-plan/Inspection.vue

@@ -41,8 +41,13 @@
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    /* overflow-x: hidden; */
    overflow-x: scroll;
    overflow-x: hidden;
    /* overflow-x: scroll; */
    cursor: grab;
  }

  .center-box:active{
    cursor: grabbing;
  }

  .tables {
@@ -65,6 +70,10 @@
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
  }

  .content *{
    user-select: none;
  }

@@ -212,7 +221,7 @@
            size="small">{{ item.templateName }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="center-box">
      <div class="center-box" id="nav">
        <table border="1" class="tables" cellpadding="10" v-for="(item,index) in tableList" :key="index">
          <tbody>
            <tr v-for="(m,i) in item.arr" :key="i">
@@ -241,8 +250,8 @@
                      v-else-if="getInspectionValueType(n.i) == 4">/</span>
                  </template>
                  <template v-else-if="n.v.ps!=undefined && n.v.ps.value==='结论'">
                    <el-select v-if="(getInspectionValueType(n.i) == 2 || getInspectionValueType(n.i) == 5) && state==1" class="table_input" v-model="n.v.v"
                      @change="saveInsContext()">
                    <el-select v-if="(getInspectionValueType(n.i) == 2 || getInspectionValueType(n.i) == 5) && state==1"
                      class="table_input" v-model="n.v.v" @change="saveInsContext()">
                      <el-option label="合格" :value="1"></el-option>
                      <el-option label="不合格" :value="0"></el-option>
                    </el-select>
@@ -310,7 +319,7 @@
    </el-drawer>
    <el-drawer title="任务切换" :visible.sync="taskVisible" :size="500">
      <ValueTable class="value-table" ref="insOrderPlan" :url="$api.insOrderPlan.selectInsOrderPlanList"
        :componentData="componentData" :key="upIndex" />
        :componentData="componentData" :key="upIndex" style="max-height: 100%;height: inherit;"/>
    </el-drawer>
    <el-dialog title="检验复核" :visible.sync="reviewDia" width="500px">
      <div class="body" style="display: flex;padding: 10px;" v-if="reviewDia">
@@ -426,6 +435,7 @@
      this.getInsStateDicts()
      this.getComparisonList()
      this.getAuthorizedPerson()
      this.scrollInit()
    },
    watch: {
      id(val) {
@@ -542,7 +552,7 @@
      },
      selectEnumByCategoryOfSelect(val) {
        this.enumList = []
        if(val===undefined||val===null){
        if (val === undefined || val === null) {
          return
        }
        this.$axios.post(this.$api.enums.selectEnumByCategory, {
@@ -1246,6 +1256,33 @@
          this.personList = data
        })
      },
      scrollInit() {
        // 获取要绑定事件的元素
        const nav = document.getElementById("nav")
        var flag; // 鼠标按下
        var downX; // 鼠标点击的x下标
        var scrollLeft; // 当前元素滚动条的偏移量
        nav.addEventListener("mousedown", function(event) {
          flag = true;
          downX = event.clientX; // 获取到点击的x下标
          scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
        });
        nav.addEventListener("mousemove", function(event) {
          if (flag) { // 判断是否是鼠标按下滚动元素区域
            var moveX = event.clientX; // 获取移动的x轴
            var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
            this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
          }
        });
        // 鼠标抬起停止拖动
        nav.addEventListener("mouseup", function() {
          flag = false;
        });
        // 鼠标离开元素停止拖动
        nav.addEventListener("mouseleave", function(event) {
          flag = false;
        });
      }
    }
  }
</script>