apt-nl-new/src/pages/modules/taskmanage/CarryPoint.vue

<template>
<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="title_wrap">
        <h2>{{ $t('carrypoint.topinfo') }}</h2>
      </div>
      <div class="box1">
        <div class="point-box">
          <div class="point fl" :class="{'statusbg': pkId === e.point_code}" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
        </div>
      </div>
      <div class="box2 buttons_wrapper">
        <button class="button_control" @click="toSure(selectObj.point_code, '3')"><p>{{ $t('carrypoint.button1') }}</p></button>
        <button class="button_control" @click="toSure(selectObj.point_code, '4')"><p>{{ $t('carrypoint.button2') }}</p></button>
        <button class="button_control" @click="showDialog('1')"><p>{{ $t('carrypoint.button3') }}</p></button>
        <button class="button_control" @click="toSure(selectObj.point_code, '1')"><p>{{ $t('carrypoint.button4') }}</p></button>
      </div>
    </div>
    <jxDialog
    ref="child"
    :title="$t('carrypoint.dialoginfo')"
    :type="type"
    :unclick="unclick"
    @toSure="toSureDialog"
    @toCancle="toCancle"
    >
    <div v-if="type === '1'" class="form_wraper">
      <div class="form">
        <div class="form_item">
          <div class="form_item__label"><i>*</i>{{ $t('carrypoint.pointcode') }}</div>
          <div class="form_item__content">
            <!-- <input type="text" class="form_item__input" v-model="pointcode" @focus="show" data-layout="normal"> -->
            <keyboard-input
              inputClass="form_item__input"
              keyboardClass="pointcode"
              :value="pointcode"
              @inputChange="inputChange1"
              @inputFocus="inputFocus"
            ></keyboard-input>
          </div>
        </div>
      </div>
    </div>
    </jxDialog>
  </div>
  <vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
</div>
</template>

<script>
import jxDialog from '@components/dialog.vue'
import KeyboardInput from '@components/keyboard-input'
import {queryPoint, confirmPoint} from '@/config/getData.js'
export default {
  name: 'CarryPoint',
  components: {
    jxDialog,
    KeyboardInput
  },
  data () {
    return {
      type: '',
      title: '',
      pointcode: '',
      unclick: false,
      disabled: false,
      visible: false,
      layout: 'normal',
      input: null,
      keyoptions: {
        useKbEvents: false,
        preventClickEvent: false
      },
      statusbg: false,
      pkId: '',
      selectObj: {},
      dataList: []
      // dataList: [
      //   {
      //     point_code: '1',
      //     code_name: '18-一线起升电机'
      //   },
      //   {
      //     point_code: '2',
      //     code_name: 'A-ZD102'
      //   },
      //   {
      //     point_code: '3',
      //     code_name: 'A-ZD103'
      //   },
      //   {
      //     point_code: '4',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '5',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '6',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '7',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '8',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '9',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '10',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '11',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '12',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '13',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '14',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '15',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '16',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '10',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '11',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '12',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '13',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '14',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '15',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '16',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '10',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '11',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '12',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '13',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '14',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '15',
      //     code_name: 'A-ZD101'
      //   },
      //   {
      //     point_code: '16',
      //     code_name: 'A-ZD101'
      //   }
      // ]
    }
  },
  created () {
    this.initData()
  },
  methods: {
    showDialog (type, e) {
      this.type = type
      this.$refs.child.active = true
      switch (type) {
        case '1':
          this.pointcode = ''
          this.unclick = true
          break
      }
    },
    toSureDialog (type) {
      switch (type) {
        case '1':
          this.confirmPoint(this.pointcode, '1')
          break
      }
      this.hide()
    },
    toCancle () {
      this.hide()
    },
    inputFocus () {
      this.visible = false
    },
    hide () {
      this.visible = false
    },
    inputChange1 (val) {
      this.pointcode = val
      // 限制只能输入数字,后端校验
      // this.pointcode = val.replace(/[^\d]/g, '')
    },
    // 这个接口需要放到agv上去才行
    async initData () {
      let res = await queryPoint()
      if (res.code === '1') {
        this.dataList = res.result
      } else {
        this.toast(res.desc)
      }
    },
    async confirmPoint (pcode, type) {
      let res = await confirmPoint(pcode, type)
      if (res.code === '1') {
        this.toast(res.desc)
        this.selectObj = {}
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } else {
        this.toast(res.desc)
      }
    },
    toRadio (e) {
      this.pkId = this.pkId === e.point_code ? '' : e.point_code
      this.selectObj = e
    },
    toSure (pcode, type) {
      if (this.selectObj.point_code) {
        this.confirmPoint(pcode, type)
      }
    },
    toClear () {
      this.selectObj = {}
    }
  }
}
</script>
<style lang="stylus" scoped>
.con
  float left
.box0
  width 1586px
  height 102px
  background center / 100% 100% url(../../../images/new/bg-task-r1.png) no-repeat
  .title
    font-size 36px
    color #F6F9FE
    padding-left 39px
    padding-top 48px
.box1
  // width 1592px
  // height 819px
  height 800px
  background center / 100% 100% url(../../../images/new/bg-task-r2.png) no-repeat
  padding-top 28px
  padding-left 44px
  .point-box
    width 100%
    height 600px
    overflow-y scroll
    .point
      width 248px
      height 134px
      line-height 134px
      color #B4C1D8
      font-size 26px
      text-align center
      margin-right 3px
      margin-bottom 13px
      background center / 100% 100% url(../../../images/new/bg2.png) no-repeat
    .statusbg
      box-sizing border-box
      color #3CC1FF
      background center / 100% 100% url(../../../images/new/bg1.png) no-repeat !important
.box2
  position fixed
  left 310px
  bottom 50px
.enClass .button_control p
  font-size 28px
</style>