接口交互

src/pages/modules/device.vue

@@ -1,35 +1,30 @@
 <template>
   <div class="page_container">
     <div class="t_box">
-      <el-tabs tab-position="left" @tab-click="tabClick">
-        <el-tab-pane label="自定义">
+      <el-tabs tab-position="left" v-model="activeName" @tab-click="tabClick">
+        <el-tab-pane label="自定义" name="zdy">
           <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="e in dataList" :key="e.point_code">
+            <el-col class="point_item" v-for="(e, i) in dataList" :key="'zdy' + i">
               <el-popover
                 placement="bottom"
-                trigger="click"
-                :value="popId === e.point_code"
-                @show="popId = e.point_code"
-                @hide="popId = null">
-                <el-row type="flex">
-                  <el-button class="task_button" v-for="e in radioOption" :key="e.value" @click="radioInput(e.value)">{{ e.label }}</el-button>
+                trigger="manual"
+                :ref="`popover-${i}`">
+                <el-row type="flex" justify="space-between" align="middle" style="margin-bottom: .1rem">
+                  <el-col :span="18"><el-input placeholder="修改名称" v-model="stationName" @focus="show" data-layout="normal"></el-input></el-col>
+                  <el-button type="success" icon="el-icon-check" size="mini" style="height: .3rem" :disabled="disabled" @click="_updateStation(e, i)"></el-button>
                 </el-row>
-                <div slot="reference" class="zbox point_item_i"><p>{{ e.point_code }}</p></div>
+                <el-row type="flex" justify="space-between">
+                  <el-button class="task_button" :class="{'task_checked': e.action_type === el.value}" v-for="el in radioOption" :key="el.value" @click="radioInput(e, i, el.value)">{{ el.label }}</el-button>
+                </el-row>
+                <div slot="reference" class="zbox point_item_i" @click="openPopover(i)"><p>{{ e.station_name }}</p></div>
               </el-popover>
             </el-col>
           </el-row>
         </el-tab-pane>
-        <el-tab-pane label="任务链">
+        <el-tab-pane label="任务链" name="rwl">
           <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="e in linkData" :key="e.point_code">
-              <div class="zbox point_item_i" @click="handleLinkCheck(e)"><p>{{ e.point_code }}</p></div>
-            </el-col>
-          </el-row>
-        </el-tab-pane>
-        <el-tab-pane label="标准任务">
-          <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="(e, i) in dataList" :key="i">
-              <div class="zbox point_item_i" @click="handleCheck(e)"><p>{{ e.point_code }}</p></div>
+            <el-col class="point_item" v-for="(e, i) in linkData" :key="'rwl' + i">
+              <div class="zbox point_item_i" @click="handleLinkCheck(e)"><p>{{ e.chain_name }}</p></div>
             </el-col>
           </el-row>
         </el-tab-pane>
@@ -38,14 +33,14 @@
     <el-row type="flex" class="result_w" justify="space-between" align="middle">
       <el-col :span="15" class="result_items_w">
         <el-row type="flex" class="result_items" justify="start" align="top">
-          <el-col class="pp_item" v-for="(e, i) in newData" :key="e.point_code">
+          <el-col class="pp_item" v-for="(e, i) in newData" :key="'new' + i">
             <el-row type="flex" align="middle">
               <div class="point_item point_checked">
                 <el-row type="flex" align="middle" class="zbox">
                   <el-col :span="18">
-                    <p style="padding-left: 0.02rem;">{{ e.point_code }}</p>
+                    <p style="padding-left: 0.02rem;">{{ e.station_name }}</p>
                   </el-col>
-                  <el-col :span="6" style="border-left: 1px solid #fff;"><p style="font-size: .12rem;font-weight: 700;text-align: center;padding-right: 0.02rem;">{{ e.radio }}</p></el-col>
+                  <el-col :span="6" style="border-left: 1px solid #fff;"><p style="font-size: .12rem;font-weight: 700;text-align: center;padding-right: 0.02rem;">{{ radioOption | findByValue(e.action_type) }}</p></el-col>
                 </el-row>
               </div>
               <i class="el-icon-caret-right icon-caret-right" :style="i === newData.length - 1 ? 'visibility: hidden' : ''"></i>
@@ -55,66 +50,288 @@
       </el-col>
       <el-col :span="8">
         <el-row type="flex" justify="space-between" style="flex-wrap: wrap" >
-          <el-col :span="11" style="margin-bottom: .08rem"><button class="button_control button_control_disabled" @click="newData = []"><p>删除任务链</p></button></el-col>
-          <el-col :span="11" style="margin-bottom: .08rem"><button class="button_control button_control_disabled"><p>取消任务</p></button></el-col>
-          <el-col :span="11"><button class="button_control"><p>保存任务</p></button></el-col>
-          <el-col :span="11"><button class="button_control"><p>发送任务</p></button></el-col>
+          <el-col v-if="activeName === 'rwl'" :span="11" style="margin-bottom: .08rem"><button class="button_control" :class="{'button_control_disabled': !chainId}" :disabled="disabled" @click="_deleteTaskChain"><p>删除任务链</p></button></el-col>
+          <el-col v-if="activeName === 'zdy'" :span="11" style="margin-bottom: .08rem"><button class="button_control" :class="{'button_control_disabled': !newData.length}" @click="newData = []"><p>清空</p></button></el-col>
+          <el-col :span="11" style="margin-bottom: .08rem"><button class="button_control" :disabled="disabled" @click="_cancelTask"><p>取消任务</p></button></el-col>
+          <el-col v-if="activeName === 'zdy'" :span="11"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_saveTask"><p>保存任务</p></button></el-col>
+          <el-col :span="11"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_sendTask"><p>发送任务</p></button></el-col>
         </el-row>
-        <!-- <button class="button_control button_control_disabled" style="margin-bottom: .08rem" @click="newData = []"><p>{{$t('Empty')}}</p></button>
-        <button class="button_control"><p :style="$i18n.locale === 'en-us' ? 'font-size: 0.19rem;' : 'font-size: 0.22rem;'">{{$t('SendTask')}}</p></button> -->
       </el-col>
     </el-row>
+    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
   </div>
 </template>
 
 <script>
+import { queryStation, queryTaskChain, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
 export default {
   data () {
     return {
-      popId: null,
-      radioOption: [{label: '取货', value: '取'}, {label: '放货', value: '放'}, {label: '移动', value: '移'}, {label: '返回点', value: '返'}],
-      dataList: [{point_code: 'A', radio: ''}, {point_code: 'B', radio: ''}, {point_code: 'C', radio: ''}, {point_code: 'D', radio: ''}, {point_code: 'E', radio: ''}, {point_code: 'F', radio: ''}],
+      activeName: 'zdy',
+      stationName: '',
+      radioOption: [{label: '取货', text: '取', value: 'Ascend'}, {label: '放货', text: '放', value: 'Descend'}, {label: '移动', text: '移', value: 'Move'}, {label: '返回点', text: '返', value: 'Customize'}],
+      dataList: [],
       newData: [],
-      linkData: [{point_code: 'A-B-C', radio: '取-放-移'}]
+      linkData: [],
+      chainId: null,
+      disabled: false,
+      loading: null,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
     }
   },
+  mounted () {
+    this._queryStation()
+  },
   methods: {
+    // 站点查询
+    async _queryStation () {
+      try {
+        let res = await queryStation()
+        if (res && res.data) {
+          this.dataList = [...res.data]
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    // 任务链查询
+    async _queryTaskChain () {
+      this.chainId = null
+      try {
+        let res = await queryTaskChain()
+        if (res && res.data) {
+          this.linkData = [...res.data]
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    // 点击自定义站点
+    openPopover (index) {
+      const popover = this.$refs[`popover-${index}`]
+      if (popover && popover[0]) {
+        popover[0].doShow()
+        this.stationName = ''
+      }
+    },
+    // 关闭弹窗
+    closePopover (index) {
+      const popover = this.$refs[`popover-${index}`]
+      if (popover && popover[0]) {
+        popover[0].doClose()
+      }
+    },
+    // 修改站点名称
+    async _updateStation (e, i) {
+      this.disabled = true
+      if (this.stationName === '') {
+        this.disabled = false
+        this.closePopover(i)
+        this.visible = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await updateStation(e.station_code, this.stationName)
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+        }
+        this.loading.close()
+        this.disabled = false
+        this.closePopover(i)
+        this.visible = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+        this.closePopover(i)
+        this.visible = false
+      }
+    },
+    // 切换标签
     tabClick () {
       this.newData = []
+      this.chainId = null
+      if (this.activeName === 'zdy') {
+        this._queryStation()
+      } else if (this.activeName === 'rwl') {
+        this._queryTaskChain()
+      }
     },
-    radioInput (e) {
-      const lastItem = this.newData.length > 0 ? this.newData[this.newData.length - 1].point_code : null
-      if (lastItem === this.popId) {
+    // 选取动作类型
+    radioInput (e, i, value) {
+      const lastItem = this.newData.length > 0 ? this.newData[this.newData.length - 1].station_code : null
+      if (lastItem === e.station_code) {
         this.$message('相邻的两个站点不能相同')
-        this.popId = ''
+        this.closePopover(i)
         return
       }
       if (this.newData.length > 4) {
         this.$message('最多选取5个站点')
-        this.popId = ''
+        this.closePopover(i)
         return
       }
-      this.newData.push({point_code: this.popId, radio: e})
-      this.popId = ''
-    },
-    handleCheck (e) {
-      if (this.newData.length > 3) {
-        return
-      }
-      if (this.newData.length === 0) {
-        this.newData.push({point_code: e.point_code, radio: '起'})
-      } else if (this.newData.length === 1) {
-        this.newData.push({point_code: e.point_code, radio: '终'})
-      } else if (this.newData.length === 2) {
-        this.newData.push({point_code: e.point_code, radio: '停'})
-      }
+      e.action_type = value
+      this.newData.push({station_code: e.station_code, station_name: e.station_name, action_type: e.action_type})
+      this.closePopover(i)
     },
+    // 点击任务链点位
     handleLinkCheck (e) {
-      const data = e.point_code.split('-')
-      const radio = e.radio.split('-')
-      data.map((e, i) => {
-        this.newData.push({point_code: e, radio: radio[i]})
+      const code = e.chain_point.split('-')
+      const cname = e.chain_name.split('-')
+      const type = e.action_type.split('-')
+      code.map((e, i) => {
+        this.newData.push({station_code: e, station_name: cname[i], action_type: type[i]})
       })
+      this.chainId = e.chain_id
+    },
+    // 发送任务
+    async _sendTask () {
+      this.disabled = true
+      if (!this.newData.length) {
+        this.disabled = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await sendTask(this.newData)
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+          this.newData = []
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    // 保存任务
+    async _saveTask () {
+      this.disabled = true
+      if (!this.newData.length) {
+        this.disabled = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await saveTask(this.newData)
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+          this.newData = []
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    // 取消任务
+    async _cancelTask () {
+      this.disabled = true
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await cancelTask()
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+          this.newData = []
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    // 删除任务链
+    async _deleteTaskChain () {
+      this.disabled = true
+      if (!this.chainId) {
+        this.disabled = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await deleteTaskChain(this.chainId)
+        if (res) {
+          this.$message(res.message)
+          this._queryTaskChain()
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    show (e) {
+      // 关闭中文keyboard
+      let arr = document.querySelectorAll('.hg-theme-default')
+      arr.forEach((ele) => {
+        ele.style.visibility = 'hidden'
+      })
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
     }
   }
 }
@@ -147,7 +364,6 @@ export default {
     line-height .2rem
     color #B4C1D8
     text-align center
-    display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3; /* 定义显示的行数 */
     overflow: hidden;
@@ -201,6 +417,9 @@ export default {
   &:active, &:hover
     border-color #146fd0
     border-left 1px solid #146fd0
+.task_button_checked
+  border-color #146fd0
+  border-left 1px solid #146fd0
 .task_checked
   color #FFF
   background-color #409EFF