接口

src/pages/modules/device.vue

@@ -58,13 +58,18 @@
         </el-row>
       </el-col>
     </el-row>
+    <save-chain v-if="saveVisible" ref="saveChain" @dataFormSubmit="dataFormSubmit"/>
     <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
   </div>
 </template>
 
 <script>
+import SaveChain from './save-chain.vue'
 import { queryStation, queryTaskChain, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
 export default {
+  components: {
+    SaveChain
+  },
   data () {
     return {
       activeName: 'zdy',
@@ -82,7 +87,8 @@ export default {
       options: {
         useKbEvents: false,
         preventClickEvent: false
-      }
+      },
+      saveVisible: false
     }
   },
   mounted () {
@@ -225,18 +231,23 @@ export default {
     },
     // 保存任务
     async _saveTask () {
-      this.disabled = true
       if (!this.newData.length) {
-        this.disabled = false
         return
       }
+      this.saveVisible = true
+      this.$nextTick(() => {
+        this.$refs.saveChain.init()
+      })
+    },
+    async dataFormSubmit (data) {
+      this.disabled = true
       try {
         this.loading = this.$loading({
           lock: true,
           spinner: 'el-icon-loading',
           background: 'rgba(0, 0, 0, 0.6)'
         })
-        let res = await saveTask(this.newData)
+        let res = await saveTask(this.newData, data)
         if (res) {
           this.$message(res.message)
           this._queryStation()

src/pages/modules/save-chain.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    title="设置"
+    :visible.sync="dialogVisible"
+    width="50%"
+    :before-close="handleClose">
+    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" size="mini">
+      <el-form-item label="任务链名称" prop="chain">
+        <el-input placeholder="请输入任务链名称" v-model="dataForm.chain" id="chain" @focus="show" data-layout="normal"></el-input>
+      </el-form-item>
+    </el-form>
+    <el-row type="flex" justify="space-around" style="margin-top: .3rem">
+      <el-col :span="7"><button class="button_control button_control_disabled" @click="exitUser"><p>{{$t('Cancel')}}</p></button></el-col>
+      <el-col :span="7"><button class="button_control" @click="dataFormSubmit"><p>{{$t('Save')}}</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" />
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dialogVisible: false,
+      dataForm: {
+        chain: ''
+      },
+      dataRule: {
+        chain: [
+          { required: true, message: '任务链名称不能为空', trigger: 'blur' }
+        ]
+      },
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.dialogVisible = true
+      this.dataForm.chain = ''
+    },
+    exitUser () {
+      this.dialogVisible = false
+      this.visible = false
+    },
+    dataFormSubmit () {
+      if (this.dataForm.chain === '') {
+        this.$message.error('任务链名称不能为空')
+        return
+      }
+      this.dialogVisible = false
+      this.visible = false
+      this.$emit('dataFormSubmit', this.dataForm.chain)
+    },
+    handleClose (done) {
+      this.visible = false
+      done()
+    },
+    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()
+      }
+    }
+  }
+}
+</script>