页面样式优化

李林

2024-05-13 cf55b35ed95d2550edbd28429ebfe55b52a5a71b

页面样式优化

 src/components/do/b1-ins-order/add.vue

@@ -287,7 +287,7 @@
          <template slot-scope="scope">
            <el-select v-model="scope.row.standardMethodListId" :disabled="scope.row.model==null||active>1"
              placeholder="检验标准" size="small" :loading="methodLoad" @change="(value)=>methodChange(value, scope.row)"
              @focus="methodFocus" :readonly="active>1">
              @focus="methodFocus" :readonly="active>1" style="width: 100%;">
              <el-option v-for="item in methods" :key="item.id" :label="item.code" :value="item.id">
              </el-option>
            </el-select>
@@ -868,8 +868,8 @@
      },
      activeStandardTree() {
        let trees = this.selectTree.split(" - ")
        if (trees.length < 4) {
          this.$message.error('未选择样品')
        if (trees.length < 5) {
          this.$message.error('未选择型号')
          return
        }
        this.addObj.factory = trees[0]

 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>

 src/components/view/b2-standard.vue

@@ -218,7 +218,8 @@
          <el-table-column prop="manHourGroup" label="工时分组" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="templateId" label="模板" width="200">
            <template slot-scope="scope">
              <el-select v-model="scope.row.templateId" size="small" @change="(value)=>upStandardProductListOfTemplate(value,scope.row.id)">
              <el-select v-model="scope.row.templateId" size="small" filterable
               @change="(value)=>upStandardProductListOfTemplate(value,scope.row.id)">
                <el-option v-for="(a, ai) in templateList" :key="ai" :label="a.name" :value="a.id"></el-option>
              </el-select>
            </template>
@@ -932,7 +933,7 @@
        return '';
      },
      upProductSelect(selection, row) {
        row.state = row.state == 1 ? 0 : 1
        row.state = (row.state == 1 ? 0 : 1)
        this.$axios.post(this.$api.standardTree.upStandardProductList, {
          id: row.id,
          state: row.state
@@ -955,11 +956,13 @@
      handleAll(e) {
        if (e.length > 0) {
          this.productList.map(m => {
            m.state = 0
            this.upProductSelect(null, m)
            return m
          })
        } else {
          this.productList.map(m => {
            m.state = 1
            this.upProductSelect(null, m)
            return m
          })