设备档案卡添加的弹窗；扫码签到的弹窗

src/views/component/deviceSubtableDialog.vue

@@ -0,0 +1,617 @@
+<template>
+    <van-dialog
+        ref="dialog"
+        v-model="dialogVisible"
+        :z-index="99"
+        :title="dynamicParams.editFromType"
+        :style="{ width: width, top: top }"
+        :overlay="true"
+        :overlay-class="'van-dialog__overlay'"
+        @close="closeDialog"
+    >
+        <div class="maintenanceCycle">
+            <div class="maintenanceFont">维护周期：</div>
+            <van-cell
+                title="请选择"
+                is-link
+                :value="selectedLabel"
+                @click="showPicker = true"
+            />
+            <van-popup v-model="showPicker" position="bottom">
+                <van-radio-group
+                    v-model="selectedValue"
+                    @change="onSelectChange"
+                >
+                    <van-radio
+                        v-for="item in cycleOptions"
+                        :key="item.value"
+                        :name="item.value"
+                        :label="item.label"
+                    />
+                </van-radio-group>
+            </van-popup>
+        </div>
+        <div
+            v-if="judgeShow > 0"
+            class="maintenanceCycle"
+            style="align-items: baseline"
+        >
+            <div class="maintenanceFont">
+                {{ cycleOptions[judgeShow].label }}日期：
+            </div>
+            <div>
+                <div v-if="judgeShow == 1" class="maintenanceCycle marginNone">
+                    <van-checkbox-group v-model="dayCheckList">
+                        <van-checkbox
+                            v-for="(item, i) in weekList"
+                            :key="i"
+                            :name="item"
+                            class="rightMargin"
+                            @change="handleChange"
+                        />
+                    </van-checkbox-group>
+                </div>
+                <!-- 月选择 -->
+                <van-popup v-model="showMonthPicker" position="bottom">
+                    <van-picker
+                        v-model="monthDateValue"
+                        :columns="monthDateOptions.map((item) => item.label)"
+                        @confirm="onMonthConfirm"
+                        @cancel="showMonthPicker = false"
+                    />
+                </van-popup>
+                <!-- 周选择 -->
+                <van-radio-group v-model="weekDateValue">
+                    <van-radio
+                        v-for="(item, i) in weekList"
+                        :key="i"
+                        :name="item"
+                        >{{ item }}</van-radio
+                    >
+                </van-radio-group>
+                <!-- 季度选择 -->
+                <van-popup v-model="showQuarterPicker" position="bottom">
+                    <van-picker
+                        v-model="quarterDateValue"
+                        :columns="qmonthDateOptions.map((item) => item.label)"
+                        @confirm="onQuarterConfirm"
+                        @cancel="showQuarterPicker = false"
+                    />
+                </van-popup>
+                <!-- 半年选择 -->
+                <van-popup v-model="showMidyearPicker" position="bottom">
+                    <van-picker
+                        v-model="midyearDateValue"
+                        :columns="mymonthDateOptions.map((item) => item.label)"
+                        @confirm="onMidyearConfirm"
+                        @cancel="showMidyearPicker = false"
+                    />
+                </van-popup>
+                <van-popup v-model="showYearPicker" position="bottom">
+                    <van-picker
+                        v-model="yearDateValue"
+                        :columns="ymonthDateOptions.map((item) => item.label)"
+                        @confirm="onYearConfirm"
+                        @cancel="showYearPicker = false"
+                    />
+                </van-popup>
+                <div
+                    v-if="periodDayDate != '' && judgeShow == 1"
+                    class="describe"
+                >
+                    下次维护日期为
+                    <span class="fontColor">{{ periodDayDate }}</span>
+                </div>
+                <div
+                    v-if="periodWeekDate != '' && judgeShow == 3"
+                    class="describe"
+                >
+                    下次维护日期为
+                    <span class="fontColor">{{ periodWeekDate }}</span>
+                </div>
+                <div
+                    v-if="periodMonthDate != '' && judgeShow == 2"
+                    class="describe"
+                >
+                    下次维护日期为
+                    <span class="fontColor">{{ periodMonthDate }}</span>
+                </div>
+                <div
+                    v-if="periodQuarterDate != '' && judgeShow == 4"
+                    class="describe"
+                >
+                    下次维护日期为
+                    <span class="fontColor">{{ periodQuarterDate }}</span>
+                </div>
+                <div
+                    v-if="periodMidYearDate != '' && judgeShow == 5"
+                    class="describe"
+                >
+                    下次维护日期为
+                    <span class="fontColor">{{ periodMidYearDate }}</span>
+                </div>
+                <div
+                    v-if="periodYearDate != '' && judgeShow == 6"
+                    class="describe"
+                >
+                    下次维护日期为
+                    <span class="fontColor">{{ periodYearDate }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="maintenanceCycle" style="align-items: normal">
+            <div class="maintenanceFont">维护项目：</div>
+            <van-field
+                v-model="maintenanceTextarea"
+                label="请输入内容"
+                rows="4"
+                autosize
+                type="textarea"
+                :style="{ width: '50%' }"
+                placeholder="请输入内容"
+                @input="countWords"
+            >
+                <template #input>
+                    <van-textarea
+                        :maxlength="500"
+                        :show-word-limit="true"
+                        @overlimit="handleOverLimit"
+                    />
+                </template>
+            </van-field>
+        </div>
+        <div slot="footer" class="el-dialog--center">
+            <ibps-toolbar
+                :actions="
+                    editFromType != 'consult' ? toolbars : toolbarsConsult
+                "
+                @action-event="handleActionEvent"
+            />
+        </div>
+    </van-dialog>
+</template>
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String
+    },
+    customClass: {
+      type: String
+    },
+    width: {
+      type: String,
+      default: '80%'
+    },
+    top: {
+      type: String,
+      default: '10%'
+    },
+    editFromType: {
+      type: String,
+      default: 'add'
+    },
+    dynamicParams: {
+      type: Object
+    },
+    templateKey: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    const lunarGeneration = (sum) => {
+      const arr = []
+      for (let i = 1; i < sum; i++) {
+        const mid = { value: '', label: '' }
+        mid.value = '第' + i + '日'
+        mid.label = '第' + i + '日'
+        arr.push(mid)
+      }
+      return arr
+    }
+    const monthLunarGeneration = (sum) => {
+      const arr = []
+      for (let i = 1; i < sum; i++) {
+        const mid = { value: '', label: '' }
+        mid.value = '第' + i + '个月'
+        mid.label = '第' + i + '个月'
+        arr.push(mid)
+      }
+      return arr
+    }
+    const formatCurrentDate = () => {
+      const today = new Date()
+      const year = today.getFullYear()
+      const month = (today.getMonth() + 1).toString().padStart(2, '0')
+      const day = today.getDate().toString().padStart(2, '0')
+      return `${year}-${month}-${day}`
+    }
+    return {
+      qrCode: '',
+      dialogVisible: this.visible,
+      cycleOptions: [{
+        value: '按需保养',
+        label: '按需保养'
+      }, {
+        value: '日保养',
+        label: '日保养'
+      }, {
+        value: '月保养',
+        label: '月保养'
+      }, {
+        value: '周保养',
+        label: '周保养'
+      }, {
+        value: '季度保养',
+        label: '季度保养'
+      }, {
+        value: '半年保养',
+        label: '半年保养'
+      }, {
+        value: '年保养',
+        label: '年保养'
+      }],
+      cycleValue: '',
+      qmonthDateOptions: monthLunarGeneration(4),
+      ymonthDateOptions: monthLunarGeneration(13),
+      mymonthDateOptions: monthLunarGeneration(7),
+      monthDateOptions: lunarGeneration(29),
+      monthDateValue: '',
+      weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      quarterList: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]],
+      midList: [[1, 2, 3, 4, 5, 6], [7, 8, 9, 10, 11, 12]],
+      dayCheckList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      maintenanceTextarea: '',
+      toolbars: [
+        { key: 'confirm', label: '确定' },
+        { key: 'cancel' }
+      ],
+      toolbarsConsult: [{ key: 'cancel' }],
+      weekDateValue: '',
+      quarterDateValue: '',
+      midyearDateValue: '',
+      yearDateValue: '',
+      periodDayDate: '',
+      periodWeekDate: '',
+      periodMonthDate: '',
+      periodQuarterDate: '',
+      periodMidYearDate: '',
+      periodYearDate: '',
+      nowData: formatCurrentDate(),
+      judgeShow: 0,
+      daysOfWeek: [7, 1, 2, 3, 4, 5, 6]
+    }
+  },
+  watch: {
+    visible: {
+      handler: function(val, oldVal) {
+        this.dialogVisible = this.visible
+      },
+      immediate: true
+    },
+    cycleValue: {
+      handler: function(val, oldVal) {
+        if (val === '日保养') {
+          this.judgeShow = 1
+        } else if (val === '月保养') {
+          this.judgeShow = 2
+        } else if (val === '周保养') {
+          this.judgeShow = 3
+        } else if (val === '季度保养') {
+          this.judgeShow = 4
+        } else if (val === '半年保养') {
+          this.judgeShow = 5
+        } else if (val === '年保养') {
+          this.judgeShow = 6
+        } else {
+          this.judgeShow = 0
+        }
+      },
+      immediate: true
+    },
+    dayCheckList: {
+      handler: function(val, oldVal) {
+        const today = new Date()
+        const dayOfWeekNumber = this.daysOfWeek[today.getDay()]
+        const weekNum = []
+        val.forEach((item, i) => {
+          const num = this.weekList.findIndex(e => e === item) + 1
+          weekNum.push(num)
+        })
+        weekNum.sort(function(a, b) {
+          return a - b
+        })
+        const num = weekNum.findIndex(e => e > dayOfWeekNumber)
+        if (val.length > 0 && num !== -1) {
+          this.periodDayDate = this.getDayDate(weekNum[num], 0)
+        } else if (val.length > 0 && num === -1) {
+          this.periodDayDate = this.getDayDate(weekNum[0], 1)
+        } else {
+          this.periodDayDate = ''
+        }
+      },
+      immediate: true
+    },
+    weekDateValue: {
+      handler: function(val, oldVal) {
+        const today = new Date()
+        const dayOfWeekNumber = this.daysOfWeek[today.getDay()]
+        const weekNum = []
+        const num1 = this.weekList.findIndex(e => e === val) + 1
+        weekNum.push(num1)
+        const num = weekNum.findIndex(e => e > dayOfWeekNumber)
+        if (val !== '' && num !== -1) {
+          this.periodWeekDate = this.getDayDate(weekNum[0], 0)
+        } else if (val !== '' && num === -1) {
+          this.periodWeekDate = this.getDayDate(weekNum[0], 1)
+        } else {
+          this.periodWeekDate = ''
+        }
+      },
+      immediate: true
+    },
+    monthDateValue: {
+      handler: function(val, oldVal) {
+        const turnVal = val.replace(/[^0-9]/ig, '')
+        const today = new Date()
+        const day = today.getDate()
+        const nextMonth = this.getNextMonthDate(today, turnVal, 1)
+        const currentMonth = this.getNextMonthDate(today, turnVal, 0)
+        this.periodMonthDate = turnVal > day ? currentMonth : nextMonth
+      }
+      // immediate: true
+    },
+    quarterDateValue: {
+      handler: function(val, oldVal) {
+        const turnVal = val.replace(/[^0-9]/ig, '')
+        const today = new Date()
+        const month = today.getMonth() + 1
+        const qu = this.getQuarter(today)
+        const nowM = this.quarterList[qu - 1][turnVal - 1]
+        const nextM = this.quarterList[qu][turnVal - 1]
+
+        const endMonth = month >= nowM ? nextM : nowM
+        const yearPJ = today.getFullYear()
+        const monthPJ = endMonth > 9 ? endMonth : '0' + endMonth
+
+        this.periodQuarterDate = yearPJ + '-' + monthPJ + '-01'
+      }
+      // immediate: true
+    },
+    midyearDateValue: {
+      handler: function(val, oldVal) {
+        const turnVal = val.replace(/[^0-9]/ig, '')
+        const today = new Date()
+        const month = today.getMonth() + 1
+        const qu = month > 6 ? 2 : 1
+        const nowM = this.midList[qu - 1][turnVal - 1]
+        const nextM = this.midList[qu][turnVal - 1]
+
+        const endMonth = month >= nowM ? nextM : nowM
+        const yearPJ = today.getFullYear()
+        const monthPJ = endMonth > 9 ? endMonth : '0' + endMonth
+
+        this.periodMidYearDate = yearPJ + '-' + monthPJ + '-01'
+      }
+      // immediate: true
+    },
+    yearDateValue: {
+      handler: function(val, oldVal) {
+        const turnVal = val.replace(/[^0-9]/ig, '')
+        const today = new Date()
+        const month = today.getMonth() + 1
+        const year = today.getFullYear()
+        const qu = month >= turnVal ? year + 1 : year
+        const monthPJ = turnVal > 9 ? turnVal : '0' + turnVal
+
+        this.periodYearDate = qu + '-' + monthPJ + '-01'
+      }
+      // immediate: true
+    }
+  },
+  created() {
+    this.loadFormData()
+  },
+  methods: {
+    handleActionEvent({ key }) {
+      switch (key) {
+        case 'confirm':
+          this.handleConfirm(key)
+          break
+        case 'cancel':
+          this.closeDialog()
+          break
+        default:
+          break
+      }
+    },
+    handleConfirm(key) {
+      const a = this.dynamicParams.formObj.getData(this.templateKey)
+      const val = this.corresponding(this.cycleValue)
+      const valNum = this.correspondingNum(this.cycleValue)
+      if (this.cycleValue !== '按需保养' && this.cycleValue !== '' && val !== '' && valNum !== '' && this.maintenanceTextarea !== '') {
+        if (this.dynamicParams.position === 'manage') {
+          this.$set(a, this.dynamicParams.params.index, { ...a[this.dynamicParams.params.index], weiHuLeiXing: this.cycleValue, weiHuRiQi: val, riQiShuZi: valNum, weiHuXiangMuC: this.maintenanceTextarea })
+        } else {
+          a.push({ weiHuLeiXing: this.cycleValue, weiHuRiQi: val, riQiShuZi: valNum, weiHuXiangMuC: this.maintenanceTextarea })
+        }
+        // this.$nextTick(function(){
+        this.dynamicParams.formObj.setData(this.templateKey, a)
+        // })
+
+        this.closeDialog()
+      } else if (this.cycleValue === '按需保养' && this.cycleValue !== '' && this.maintenanceTextarea !== '') {
+        if (this.dynamicParams.position === 'manage') {
+          this.$set(a, this.dynamicParams.params.index, { weiHuLeiXing: this.cycleValue, weiHuXiangMuC: this.maintenanceTextarea })
+        } else {
+          a.push({ weiHuLeiXing: this.cycleValue, weiHuXiangMuC: this.maintenanceTextarea })
+        }
+        // this.$nextTick(function(){
+        this.dynamicParams.formObj.setData(this.templateKey, a)
+        // })
+
+        this.closeDialog()
+      } else {
+        this.dynamicParams.formObj.$message.warning('请保证所有信息都已填写')
+      }
+    },
+    corresponding(content) {
+      const that = this
+      if (content === '日保养') {
+        let str = '每周'
+        const numArr = []
+        that.dayCheckList.forEach((element, i) => {
+          const ind = that.weekList.findIndex(item => item === element) !== -1 ? that.weekList.findIndex(item => item === element) + 1 : ''
+          numArr.push(ind)
+        })
+        numArr.sort(function(a, b) {
+          return a - b
+        })
+        numArr.forEach((element, i) => {
+          if (i === that.dayCheckList.length - 1) {
+            str = str + element
+          } else {
+            str = str + element + ','
+          }
+        })
+        return str === '每周1,2,3,4,5,6,7' ? '每天' : str
+      } else if (content === '月保养') {
+        return '每月' + that.monthDateValue
+      } else if (content === '周保养') {
+        const ind = that.weekList.findIndex(item => item === that.weekDateValue) !== -1 ? that.weekList.findIndex(item => item === that.weekDateValue) + 1 : ''
+        return '每周' + ind
+      } else if (content === '季度保养') {
+        return '每季度' + that.quarterDateValue
+      } else if (content === '半年保养') {
+        return '每半年' + that.midyearDateValue
+      } else if (content === '年保养') {
+        return '每年' + that.yearDateValue
+      } else {
+        return ''
+      }
+    },
+    correspondingNum(content) {
+      const that = this
+      if (content === '日保养') {
+        let str = ''
+        const numArr = []
+        that.dayCheckList.forEach((element, i) => {
+          const ind = that.weekList.findIndex(item => item === element) + 1
+          numArr.push(ind)
+        })
+        numArr.sort(function(a, b) {
+          return a - b
+        })
+        numArr.forEach((element, i) => {
+          if (i === that.dayCheckList.length - 1) {
+            str = str + element
+          } else {
+            str = str + element + ','
+          }
+        })
+        return str
+      } else if (content === '月保养') {
+        const turnVal = that.monthDateValue.replace(/[^0-9]/ig, '')
+        return turnVal
+      } else if (content === '周保养') {
+        const ind = that.weekList.findIndex(item => item === that.weekDateValue) !== -1 ? that.weekList.findIndex(item => item === that.weekDateValue) + 1 : ''
+        return ind
+      } else if (content === '季度保养') {
+        const turnVal = that.quarterDateValue.replace(/[^0-9]/ig, '')
+        return turnVal
+      } else if (content === '半年保养') {
+        const turnVal = that.midyearDateValue.replace(/[^0-9]/ig, '')
+        return turnVal
+      } else if (content === '年保养') {
+        const turnVal = that.yearDateValue.replace(/[^0-9]/ig, '')
+        return turnVal
+      } else {
+        return ''
+      }
+    },
+    assignment(content) {
+      const that = this
+      if (content.weiHuLeiXing === '日保养') {
+        const strArr = []
+        const str = content.weiHuRiQi === '每天' ? '1,2,3,4,5,6,7' : content.weiHuRiQi.slice(2)
+        const partArr = str.split(',')
+        // console.log(partArr)
+        partArr.forEach((e, i) => {
+          const num = e * 1 - 1
+          strArr.push(this.weekList[num])
+        })
+        this.dayCheckList = strArr
+      } else if (content.weiHuLeiXing === '月保养') {
+        that.monthDateValue = content.weiHuRiQi.slice(2)
+      } else if (content.weiHuLeiXing === '周保养') {
+        const str = content.weiHuRiQi.slice(2)
+        const partArr = str.split(',')
+        // console.log(partArr*1-1)
+        that.weekDateValue = this.weekList[partArr * 1 - 1]
+      } else if (content.weiHuLeiXing === '季度保养') {
+        that.quarterDateValue = content.weiHuRiQi.slice(3)
+      } else if (content.weiHuLeiXing === '半年保养') {
+        that.midyearDateValue = content.weiHuRiQi.slice(3)
+      } else if (content.weiHuLeiXing === '年保养') {
+        that.yearDateValue = content.weiHuRiQi.slice(2)
+      } else {
+        // 本人加的
+        return
+      }
+    },
+    // 关闭当前窗口
+    closeDialog() {
+      this.$emit('close', false)
+    },
+    loadFormData() {
+      if (this.dynamicParams.position === 'manage') {
+        const a = this.dynamicParams.formObj.getData(this.templateKey)[this.dynamicParams.params.index]
+        this.assignment(a)
+        this.cycleValue = a.weiHuLeiXing
+        this.maintenanceTextarea = a.weiHuXiangMuC
+      }
+    },
+    getDayDate(type, dates) {
+      const now = new Date()
+      const nowTime = now.getTime()
+      const day = now.getDay()
+      const longTime = 24 * 60 * 60 * 1000
+      const n = longTime * 7 * (dates || 0)
+      let dd = nowTime - (day - type) * longTime + n
+      dd = new Date(dd)
+      const y = dd.getFullYear()
+      let m = dd.getMonth() + 1
+      let d = dd.getDate()
+      m = m < 10 ? '0' + m : m
+      d = d < 10 ? '0' + d : d
+      const daynow = y + '-' + m + '-' + d
+      return daynow
+    },
+    // 获取往后几个月相应的日期
+    // currentDate：当前日期
+    // dayOfMonth：获取几号
+    // val：往后几个月
+    getNextMonthDate(currentDate, dayOfMonth, val) {
+      const currentYear = currentDate.getFullYear()
+      const currentMonth = currentDate.getMonth()
+      const nextMonth = currentMonth + val
+
+      const nextMonthDate = new Date(currentYear, nextMonth, dayOfMonth)
+      const formattedDate = nextMonthDate.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')
+      return formattedDate
+    },
+    // 获取当前季度
+    getQuarter(date) {
+      return Math.floor(date.getMonth() / 3) + 1
+    }
+
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>

src/views/component/qrcodeedDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <van-dialog
+  v-model="dialogVisible"
+  title="扫码签到"
+  :show-cancel-button="false"
+  :close-on-popstate="false"
+  style="width: 50%; top: 6vh;"
+  class="qrcode-dialog"
+>
+  <!-- 在这里放置你的对话框内容 -->
+
+  <!-- 如果需要自定义底部操作按钮，可以在这里添加 -->
+  <template #footer>
+    <!-- 示例按钮 -->
+    <van-button round block type="primary" native-type="submit">确定</van-button>
+  </template>
+  <div class="codePic">
+    <div id="qrcode" ref="qrcodes" class="qrCode" />
+  </div>
+  <span slot="footer" class="dialog-footer">
+    <van-button type="primary" @click="downloadCode()">下载二维码</van-button>
+    <van-button @click="dialogVisible = false">关 闭</van-button>
+  </span>
+  </van-dialog>
+</template>
+<script>
+import QRCode from 'qrcodejs2' // 引入qrcode
+import { BASE_URL } from '@/constant'
+export default {
+  name: 'qrcode',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    codeId: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      qrCode: '',
+      dialogVisible: this.visible,
+      url: 'http://192.168.2.16:8080/'
+    }
+  },
+  watch: {
+    dialogVisible: {
+      handler: function(val, oldVal) {
+        if (val === true) {
+          this.$nextTick(() => {
+            this.qrcodeRender()
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    downloadCode() {
+      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+      const a = document.createElement('a')
+      a.href = myCanvas[0].toDataURL('image/png')
+      a.download = name
+      a.click()
+    },
+    qrcodeRender() {
+      if (this.qrCode) {
+        this.$refs.qrcodes.innerHTML = ''
+      }
+      this.qrCode = new QRCode('qrcode', {
+        width: 200,
+        height: 200,
+        // text: `${this.url}h5/#/pages/signin/signin?codeId=${this.codeId}`,
+        text: `${BASE_URL}h5/#/pages/signin/signin?codeId=${this.codeId}`,
+        colorDark: '#000000', // 前景色
+        colorLight: '#FFFFFF', // 背景色
+        correctLevel: QRCode.CorrectLevel.L
+      })
+    }
+  }
+}
+</script>

src/views/component/trainingManage/barcodeDialog.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="sample-scan">
+        <!-- 扫码接收的输入框 -->
+        <van-field
+            ref="redarInput"
+            v-model="scanDetail"
+            style="z-index: -999;"
+            @input="change"
+        />
+        <!-- 扫码操作组件 -->
+        <div v-if="visible" class="popContainer" @click="TipsClick">
+            <dv-decoration-12 style="width:150px;height:150px;margin:0 auto;top: 35%;">
+                <span style="color: #66D9EF;">开始扫描</span>
+            </dv-decoration-12>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+  components: {},
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    func: {
+      type: Function,
+      required: false
+    }
+  },
+  data() {
+    return {
+      redar: false,
+      scanDetail: ''
+    }
+  },
+  watch: {
+    visible: {
+      handler(val, oldName) {
+        if (val) {
+          this.$nextTick(() => {
+            this.$refs.redarInput.focus() // 聚焦input
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    change(page) {
+      if (page) {
+        this.func(page)
+        this.scanDetail = ''
+      }
+    },
+    TipsClick() {
+      this.$refs.redarInput.focus() // 聚焦input
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.sample-scan .popContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999999;
+    background: rgba(0, 0, 0, 0.7);
+}
+</style>