增加人事系统对接

value

2024-05-16 083c818af77d33d619dba3dc20f94e996225a1c7

 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 {
@@ -59,13 +64,16 @@

  .content {
    display: flex;
    /* width: 100px; */
    height: 100%;
    align-items: center;
    justify-content: left;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
  }

  .content *{
    user-select: none;
  }

@@ -133,16 +141,33 @@
    color: #303133;
  }

  .inspection .el-input-group__append{
  .inspection .el-input-group__append {
    padding: 0 10px;
    color: #3A7BFA;
    background-color: #fff;
  }

  .inspection .center-box .el-input__inner{
  .inspection .center-box .el-input__inner {
    font-size: 12px;
    padding: 0 6px;
    text-align: center;
  }

  .inspection .el-textarea__inner {
    padding: 2px;
  }

  .inspection .el-textarea__inner::-webkit-scrollbar {
    width: 0;
  }

  .inspection .el-select {
    display: flex;
    align-items: center;
  }

  .inspection .el-textarea__inner {
    min-height: 100% !important;
  }
</style>
<template>
@@ -152,7 +177,8 @@
      <el-col :span="12" style="text-align: right;">
        <el-button size="small" type="primary" @click="sampleVisible=true">样品切换</el-button>
        <el-button size="small" type="primary" @click="taskVisible=true">任务切换</el-button>
        <el-button size="small" type="primary" @click="submit" v-show="state==1" :loading="submitLoading">提交</el-button>
        <el-button size="small" type="primary" @click="addVerifyDia = true" v-show="state==1"
          :loading="submitLoading">提交</el-button>
        <!-- 复核 -->
        <el-button size="medium" type="primary" @click="upInsReview(1)" :loading="reviewLoading"
          v-show="state>1">通过</el-button>
@@ -191,11 +217,11 @@
    <div class="center">
      <div class="search">
        <el-radio-group v-model="currentTable" size="small">
          <el-radio-button :label="item.templateId" v-for="(item,index) in tableLists"
            :key="index" size="small">{{ item.templateName }}</el-radio-button>
          <el-radio-button :label="item.templateId" v-for="(item,index) in tableLists" :key="index"
            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">
@@ -203,34 +229,57 @@
                v-if="n.v.mc==undefined || Object.keys(n.v.mc).length === 4" :colspan="n.v.mc&&n.v.mc.cs?n.v.mc.cs:1"
                :rowspan="n.v.mc&&n.v.mc.rs?n.v.mc.rs:1"
                :style="`background:${n.v.bg};color:${n.v.fc};font-size:${n.v.fs}px;width:${handleWidth(n)}px !important;height:${item.style.rowlen[n.r]}px;font-wight:${n.v.bl?'bold':''};`">
                <div class="content" :class="`content-h-${n.v.ht} content-v-${n.v.vt}`" :style="`width:${handleWidth(n)}px !important;min-height:${item.style.rowlen[n.r]}px;`">
                <div class="content" :class="`content-h-${n.v.ht} content-v-${n.v.vt}`"
                  :style="`width:${handleWidth(n)}px !important;min-height:${item.style.rowlen[n.r]}px;`">
                  <template v-if="n.v.ps!=undefined && n.v.ps.value==='检验值' && state==1">
                    <el-input v-if="getInspectionValueType(n.i) == 1" class="table_input" v-model="n.v.v"
                      :disabled="getInspectionItemType(n.i) == 1 || (n.u != userId && n.u != undefined && n.u != '')"
                      @change="m=>changeInput(m,`${item.templateId}-${n.r}-${n.c}-${n.i}`)">
                      <el-button slot="append" type="primary" icon="el-icon-edit" size="mini" v-if="getInspectionItemType(n.i) == 1" @click="getSystemValue(n)"></el-button>
                      <el-button slot="append" type="primary" icon="el-icon-edit" size="mini"
                        v-if="getInspectionItemType(n.i) == 1" @click="getSystemValue(n)"></el-button>
                    </el-input>
                    <el-input v-else-if="getInspectionValueType(n.i) == 2" class="table_input" type="textarea"
                      :autosize="{ minRows: 1}" v-model="n.v.v" :disabled="state>1" />
                    <el-select v-else-if="getInspectionValueType(n.i) == 5" class="table_input"  v-model="n.v.v"
                      :disabled="state>1">
                      <el-option label="是" value="是"></el-option>
                      <el-option label="否" value="否"></el-option>
                      v-model="n.v.v"
                      :disabled="getInspectionItemType(n.i) == 1 || (n.u != userId && n.u != undefined && n.u != '')"
                      @change="saveInsContext()" />
                    <el-select v-else-if="getInspectionValueType(n.i) == 5" class="table_input" v-model="n.v.v"
                      :disabled="state>1" @visible-change="e=>getDic(e,n.i)" @change="saveInsContext()">
                      <el-option v-for="(e, i) in enumList" :key="i" :label="e.label" :value="e.value"></el-option>
                    </el-select>
                    <span :style="`font-family:${n.v.ff} !important;`"
                      v-else-if="getInspectionValueType(n.i) == 4">/</span>
                  </template>
                  <template v-else-if="n.v.ps!=undefined && n.v.ps.value==='结论'">
                    <span v-if="n.v.v===1" :style="`font-family:${n.v.ff} !important;color: green;`">合格</span>
                    <span v-else-if="n.v.v===0" :style="`font-family:${n.v.ff} !important;color: red;`">不合格</span>
                    <span v-else :style="`font-family:${n.v.ff} !important;`">待定</span>
                    <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>
                    <template v-else>
                      <span v-if="n.v.v===1" :style="`font-family:${n.v.ff} !important;color: green;`">合格</span>
                      <span v-else-if="n.v.v===0" :style="`font-family:${n.v.ff} !important;color: red;`">不合格</span>
                      <span v-else :style="`font-family:${n.v.ff} !important;`">待定</span>
                    </template>
                  </template>
                  <template v-else-if="n.v.ps!=undefined && n.v.ps.value==='设备编码' && state==1">
                    <el-select v-model="n.v.v" placeholder="设备" @visible-change="e=>getEquipOptions(e,n.i)"
                       remote @change="(val)=>changeEquip(val, n)">
                    <el-select v-model="n.v.v" placeholder="设备" @visible-change="e=>getEquipOptions(e,n.i)" remote
                      @change="(val)=>changeEquip(val, n)">
                      <el-option v-for="item in equipOptions" :key="item.value" :label="item.value" :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                  <template v-else-if="n.v.ps!=undefined && n.v.ps.value==='要求值' && state==1">
                    <span :style="`font-family:${n.v.ff} !important;`">{{getTell(n.i)}}</span>
                  </template>
                  <template v-else-if="n.v.ps!=undefined && n.v.ps.value==='最终值' && state==1">
                    <el-input class="table_input" type="textarea"
                      :disabled="getInspectionItemType(n.i) == 1 || (n.u != userId && n.u != undefined && n.u != '')"
                      v-model="n.v.v" @change="saveInsContext()" v-if="getInspectionValueType(n.i) == 2"></el-input>
                    <el-select v-else-if="getInspectionValueType(n.i) == 5" class="table_input" v-model="n.v.v"
                      :disabled="state>1" @visible-change="e=>getDic(e,n.i)" @change="saveInsContext()">
                      <el-option v-for="(e, i) in enumList" :key="i" :label="e.label" :value="e.value"></el-option>
                    </el-select>
                    <span v-else :style="`font-family:${n.v.ff} !important;`">{{n.v.v}}</span>
                  </template>
                  <span v-else :style="`font-family:${n.v.ff} !important;`">{{n.v.v}}</span>
                </div>
@@ -270,19 +319,33 @@
    </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">
        <div class="search_label" style="width: 150px;"><span class="required-span">* </span>不通过的理由：</div>
        <div class="search_input" style="width: 100%;">
          <el-input size="small" clearable v-model="noReason" type="textarea"
            :autosize="{ minRows: 4}"></el-input>
          <el-input size="small" clearable v-model="noReason" type="textarea" :autosize="{ minRows: 4}"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviewDia = false">取 消</el-button>
        <el-button type="primary" @click="handleReviewDia" :loading="reviewLoading">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="指定复核人员" :visible.sync="addVerifyDia" width="400px">
      <div class="body" style="display: flex;padding: 10px;align-items: center;">
        <div class="search_label" style="width: 150px;"><span class="required-span">*</span>复核人</div>
        <div class="search_input" style="width: 100%;">
          <el-select v-model="verifyUser" placeholder="请选择" size="small" style="width: 100%;" clearable filterable>
            <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVerifyDia = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
@@ -353,9 +416,13 @@
        reviewDia: false,
        noReason: '',
        tableWidth: 1000,
        currentTable:null,
        tableLists:[],
        widthList:[]
        currentTable: null,
        tableLists: [],
        widthList: [],
        addVerifyDia: false,
        verifyUser: null,
        personList: [],
        enumList: []
      }
    },
    created() {
@@ -367,6 +434,8 @@
      this.getTypeDicts()
      this.getInsStateDicts()
      this.getComparisonList()
      this.getAuthorizedPerson()
      this.scrollInit()
    },
    watch: {
      id(val) {
@@ -401,10 +470,10 @@
          this.currentKey = 1;
        })
      },
      currentTable(val1,val0){
        if(val0!=null&&val1!=val0){
          this.tableLists.forEach((m,i)=>{
            if(m.templateId==val1){
      currentTable(val1, val0) {
        if (val0 != null && val1 != val0) {
          this.tableLists.forEach((m, i) => {
            if (m.templateId == val1) {
              this.tableList = null;
              this.tableList = [(this.tableLists[i])];
              this.handleTableData()
@@ -481,17 +550,28 @@
          this.comparisonList = data;
        })
      },
      selectEnumByCategoryOfSelect(val) {
        this.enumList = []
        if (val === undefined || val === null) {
          return
        }
        this.$axios.post(this.$api.enums.selectEnumByCategory, {
          category: val
        }).then(res => {
          this.enumList = res.data;
        })
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
      getTableLists(){
      getTableLists() {
        const mySet1 = new Set();
        this.tableLists = this.currentSample.insProduct.filter(m => {
          let num0 = mySet1.size;
          if (m.templateId != null) {
          if (m.templateId != null&&m.template != null) {
            mySet1.add(JSON.stringify({
              template: m.template,
              templateId: m.templateId
@@ -502,7 +582,7 @@
            return m
          }
        });
        if(this.tableLists&&this.tableLists.length>0){
        if (this.tableLists && this.tableLists.length > 0) {
          this.tableList = null;
          this.tableList = [this.tableLists[0]]
          this.currentTable = this.tableLists[0].templateId;
@@ -569,17 +649,20 @@
                let count2 = 0
                for (let i in this.currentSample.insProduct) {
                  if (this.currentSample.insProduct[i].templateId === a.templateId && this.currentSample
                    .insProduct[i].inspectionItem + this.currentSample.insProduct[i].inspectionItemSubclass === str) {
                      ids.push({
                        r: b.r,
                        id: this.currentSample.insProduct[i].id,
                        product: this.currentSample.insProduct[i]
                      })
                      break
                    .insProduct[i].inspectionItem +
                    (this.currentSample.insProduct[i].inspectionItemSubclass == null ? '' : this.currentSample
                      .insProduct[i].inspectionItemSubclass) ===
                    str) {
                    ids.push({
                      r: b.r,
                      id: this.currentSample.insProduct[i].id,
                      product: this.currentSample.insProduct[i]
                    })
                    break
                  }
                  count2++
                }
                if(count2 == this.currentSample.insProduct.length){
                if (count2 == this.currentSample.insProduct.length) {
                  dels.add(b.r)
                }
              }
@@ -600,7 +683,8 @@
                if (a.template[b].v.ps != undefined && a.template[b].v.ps.value === '单位') {
                  a.template[b].v.v = id.product.unit
                }
                if (a.template[b].v.ps != undefined && a.template[b].v.ps.value === '试验方法') {
                if (a.template[b].v.ps != undefined && (a.template[b].v.ps.value === '试验方法' || a.template[b].v
                    .ps.value === '检测方法')) {
                  a.template[b].v.v = id.product.methodS
                }
              }
@@ -646,19 +730,19 @@
            if (b.v.ps != undefined && b.v.ps.value === '检验值') {
              b.v.v = ''
              b.u = ''
              b.i&&this.param[b.i].insValue.push(b)
              b.i && this.param[b.i].insValue.push(b)
            }
            if (b.v.ps != undefined && b.v.ps.value === '计算值') {
              b.v.v = ''
              b.i&&this.param[b.i].comValue.push(b)
              b.i && this.param[b.i].comValue.push(b)
            }
            if (b.v.ps != undefined && b.v.ps.value === '设备编码') {
              b.v.v = ''
              b.i&&this.param[b.i].equipValue.push(b)
              b.i && this.param[b.i].equipValue.push(b)
            }
            if (b.v.ps != undefined && b.v.ps.value === '设备名称') {
              b.v.v = ''
              b.i&&this.param[b.i].equipName.push(b)
              b.i && this.param[b.i].equipName.push(b)
            }
            if (b.v.ps != undefined && b.v.ps.value === '最终值') {
              b.v.v = ''
@@ -669,18 +753,20 @@
              } else {
                this.param[b.i].resValue = b
              } */
              if(b.i !== undefined){
              if (b.i !== undefined) {
                this.param[b.i].resValue = b
              }
            }
            if (b.v.ps != undefined && b.v.ps.value === '结论') {
              this.param[b.i].insResult = b
              conclusionList.forEach((n, i) => {
                if (n.r == b.r && n.c == b.c) {
                  b.v.f =
                    `(${this.comparisonList.find(j=>j.value==(finalList[i].c)).label}${finalList[i].r+1})`
                }
              })
              if (b.i !== undefined) {
                this.param[b.i].insResult = b
                conclusionList.forEach((n, i) => {
                  if (n.r == b.r && n.c == b.c) {
                    b.v.f =
                      `(${this.comparisonList.find(j=>j.value==(finalList[i].c)).label}${finalList[i].r+1})`
                  }
                })
              }
            }
            set.add(b.r)
            if (b.v.f) {
@@ -772,7 +858,7 @@
                }
              })
            })
            if (item.methodName == '自定义方法' && item.v.ps!=undefined && item.v.ps.value == '结论') {
            if (item.methodName == '自定义方法' && item.v.ps != undefined && item.v.ps.value == '结论') {
              if (this.currentSample.insProduct.find(m => m.id == item.i)) {
                let ask = this.currentSample.insProduct.find(m => m.id == item.i).ask.split('&');
                let res = Object.values(comValue)[0]
@@ -836,13 +922,13 @@
                  valueList.forEach(b => {
                    str = str.replace(b.name, b.value)
                  })
                  if(item.v.f.includes('/')>-1){
                    if(Object.getOwnPropertyNames(comValue).length==valueList.length){
                  if (item.v.f.includes('/') > -1) {
                    if (Object.getOwnPropertyNames(comValue).length == valueList.length) {
                      comResult = eval(str)
                    }else{
                    } else {
                      comResult = ''
                    }
                  }else{
                  } else {
                    comResult = eval(str)
                  }
                  break;
@@ -851,7 +937,8 @@
                if (a[0].r == item.r && comResult != '') {
                  for (var b in a) {
                    if (a[b].c == item.c) {
                      a[b].v.v = parseFloat(comResult.toFixed(3))
                      let val = parseFloat(comResult.toFixed(3))
                      a[b].v.v = isNaN(val) ? '' : val
                      break
                    }
                  }
@@ -863,19 +950,19 @@
        })
        this.getCurrentInsProduct(pId)
      },
      getCurrentInsProduct(pId){
        if(!this.tableList[0].insProductResult){
      getCurrentInsProduct(pId) {
        if (!this.tableList[0].insProductResult) {
          this.tableList[0].insProductResult = {}
        }
        for (let m in this.param[pId]){
        for (let m in this.param[pId]) {
          let value = this.param[pId][m]
          switch (m){
          switch (m) {
            case 'comValue':
              if(value&&value.length>0){
                this.tableList[0].insProductResult[m]=[];
                value.forEach((a,i)=>{
              if (value && value.length > 0) {
                this.tableList[0].insProductResult[m] = [];
                value.forEach((a, i) => {
                  let obj = {
                    v:a.v.v,
                    v: a.v.v,
                  }
                  this.tableList[0].insProductResult[m].push(obj);
                })
@@ -883,12 +970,12 @@
              this.tableList[0].insProductResult[m] = JSON.stringify(this.tableList[0].insProductResult[m])
              break;
            case 'insValue':
              if(value&&value.length>0){
                this.tableList[0].insProductResult[m]=[];
                value.forEach((a,i)=>{
              if (value && value.length > 0) {
                this.tableList[0].insProductResult[m] = [];
                value.forEach((a, i) => {
                  let obj = {
                    v:a.v.v,
                    u:a.u,
                    v: a.v.v,
                    u: a.u,
                  }
                  this.tableList[0].insProductResult[m].push(obj);
                })
@@ -896,11 +983,11 @@
              this.tableList[0].insProductResult[m] = JSON.stringify(this.tableList[0].insProductResult[m])
              break;
            case 'equipValue':
              if(value&&value.length>0){
                this.tableList[0].insProductResult[m]=[];
                value.forEach((a,i)=>{
              if (value && value.length > 0) {
                this.tableList[0].insProductResult[m] = [];
                value.forEach((a, i) => {
                  let obj = {
                    v:a.v.v,
                    v: a.v.v,
                  }
                  this.tableList[0].insProductResult[m].push(obj);
                })
@@ -908,11 +995,11 @@
              this.tableList[0].insProductResult[m] = JSON.stringify(this.tableList[0].insProductResult[m])
              break;
            case 'equipName':
              if(value&&value.length>0){
                this.tableList[0].insProductResult[m]=[];
                value.forEach((a,i)=>{
              if (value && value.length > 0) {
                this.tableList[0].insProductResult[m] = [];
                value.forEach((a, i) => {
                  let obj = {
                    v:a.v.v,
                    v: a.v.v,
                  }
                  this.tableList[0].insProductResult[m].push(obj);
                })
@@ -960,7 +1047,7 @@
              let regex = /[=\+\-\*\%\(\)\/\s]/g
              let mode = item.v.f.replace(regex, ' ').split(' ');
              mode.filter(m => m && !Number(m)).forEach(m => {
                let r =  m.replace(/[a-zA-Z]/g, "") - 1
                let r = m.replace(/[a-zA-Z]/g, "") - 1
                let c = this.comparisonList.find(j => j.label == m.split('')[0]).value
                valueList.push({
                  c,
@@ -980,15 +1067,22 @@
          }
        }
      },
      handleWidth(n){
        let sum = 0;
        if(n.v.mc&&n.v.mc.cs&&n.v.mc.c!=undefined){
          for(let i=0;i<n.v.mc.cs;i++){
            let num = this.widthList[i+n.v.mc.c]?this.widthList[i+n.v.mc.c]:100
            sum+=num;
      getTell(id) {
        for (var a in this.currentSample.insProduct) {
          if (this.currentSample.insProduct[a].id == id) {
            return this.currentSample.insProduct[a].tell
          }
        }else{
          sum = this.widthList[n.c]?this.widthList[n.c]:100
        }
      },
      handleWidth(n) {
        let sum = 0;
        if (n.v.mc && n.v.mc.cs && n.v.mc.c != undefined) {
          for (let i = 0; i < n.v.mc.cs; i++) {
            let num = this.widthList[i + n.v.mc.c] ? this.widthList[i + n.v.mc.c] : 100
            sum += num;
          }
        } else {
          sum = this.widthList[n.c] ? this.widthList[n.c] : 100
        }
        return sum
      },
@@ -1032,7 +1126,7 @@
          }).then(res => {
            if (res.code === 200 && res.data) {
              this.equipOptions = res.data.map(m => {
                m.value = m.factoryNo
                m.value = m.managementNumber
                m.label = m.deviceName
                return m
              })
@@ -1040,6 +1134,17 @@
          }).catch(error => {
            console.error(error)
          })
        }
      },
      getDic(e, id) {
        if (e) {
          for (var a in this.currentSample.insProduct) {
            if (this.currentSample.insProduct[a].id == id) {
              let str = this.currentSample.insProduct[a].dic
              this.selectEnumByCategoryOfSelect(str)
              return str
            }
          }
        }
      },
      getUserInfo() {
@@ -1095,10 +1200,16 @@
        }
      },
      submit() {
        if (this.verifyUser === null || this.verifyUser === '') {
          this.$message.error("请指定复核人员")
          return
        }
        this.addVerifyDia = false
        this.submitLoading = true;
        this.$axios.post(this.$api.insOrderPlan.submitPlan, {
          orderId: this.orderId,
          laboratory: this.sonLaboratory,
          verifyUser: this.verifyUser
        }).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功")
@@ -1110,7 +1221,7 @@
          this.submitLoading = false;
        })
      },
      saveInsContext(){
      saveInsContext() {
        this.$axios.post(this.$api.insOrderPlan.saveInsContext, {
          param: JSON.stringify(this.param)
        }).then(res => {
@@ -1121,16 +1232,56 @@
          this.$message.success('已保存')
        })
      },
      changeEquip(val,n){
        for(let i in this.equipOptions){
          if(this.equipOptions[i].value === val){
            for(let i1 in this.param[n.i].equipName){
              if(this.param[n.i].equipName[i1].i === n.i && this.param[n.i].equipName[i1].r === n.r){
      changeEquip(val, n) {
        for (let i in this.equipOptions) {
          if (this.equipOptions[i].value === val) {
            for (let i1 in this.param[n.i].equipName) {
              if (this.param[n.i].equipName[i1].i === n.i && this.param[n.i].equipName[i1].r === n.r) {
                this.param[n.i].equipName[i1].v.v = this.equipOptions[i].label
              }
            }
          }
        }
        this.saveInsContext()
      },
      getAuthorizedPerson() {
        this.$axios.get(this.$api.user.getUserMenu).then(res => {
          let data = []
          res.data.forEach(a => {
            data.push({
              label: a.name,
              value: a.id
            })
          })
          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;
        });
      }
    }
  }