9/17(2)

src/views/production/craftsmanship/index1.vue

-<template>
-  <div class="app-container">
-    <el-form ref="form" :model="form" :rules="rule" label-width="80px">
-      <div class="info"><span class="title">设备绑定</span></div>
-      <el-row :gutter="40">
-        <el-col :span="12" style="padding-left: 10%;">
-          <el-form-item label="jxpn" style="flex-basis: 50%;" prop="jxpn">
-            <el-input ref="input1" v-model="form.jxpn" placeholder="请输入jxpn" :minlength="3" style="width: 400px" :maxlength="100" @keyup.enter.native="handelTab(1,$event)" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="jbcode" style="flex-basis: 50%;" prop="jbcode">
-            <el-input ref="input2" v-model="form.jbcode" placeholder="请输入jbcode" style="width: 400px" :maxlength="10" @keyup.enter.native="handelTab(2,$event)" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="40">
-        <el-col :span="12" style="padding-left: 10%;">
-          <el-form-item label="jbrank" style="flex-basis: 50%;" prop="jbrank">
-            <el-input ref="input3" v-model="form.jbrank" placeholder="请输入jbrank" style="width: 400px" :maxlength="100" @keyup.enter.native="handelTab(3,$event)" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="wb" style="flex-basis: 50%;" prop="wb">
-            <el-input ref="input2" v-model="form.wb" placeholder="请输wb" style="width: 400px" :maxlength="10" @keyup.enter.native="handelTab(2,$event)" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="40">
-        <el-col :span="12" style="padding-left: 10%;">
-          <el-form-item label="jl" style="flex-basis: 50%;" prop="jl">
-            <el-input ref="input3" v-model="form.jl" placeholder="请输入jl" style="width: 400px" :maxlength="100" @keyup.enter.native="handelTab(3,$event)" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="gx" style="flex-basis: 50%;" prop="gx">
-            <el-input ref="input2" v-model="form.gx" placeholder="请选择gx" style="width: 400px" :maxlength="10" @keyup.enter.native="handelTab(2,$event)" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <!--      <div class="button">-->
-      <!--        <el-button type="primary" @click="submitForm">提交</el-button>-->
-      <!--      </div>-->
-    </el-form>
-    <el-form label-width="80px">
-      <el-row style="padding-left: 8.7%; padding-top: 1%">
-        <el-col :span="12">
-          <el-form-item style="flex-basis: 50%;">
-            <el-button type="primary" @click="submitForm">提交</el-button>
-            <el-button @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import { getBindData, bindApplication } from '@/api/production/application1'
-
-export default {
-  name: 'Role',
-  data() {
-    return {
-      isRequired: false,
-      // 对应后端配置文件cy.init.pgxList的的内容
-      phdList: ['003'],
-      // 判断是否存在缓存
-      exist: false,
-      form: {
-        jxpn: '',
-        jbcode: '',
-        jbrank: '',
-        wb: '',
-        jl: '',
-        gx: ''
-      },
-      rule: {
-        jxpn: [{ required: true, message: '请输入jxpn', trigger: 'blur' }],
-        jbcode: [{ required: true, message: '请输入jbcode', trigger: 'blur' }],
-        jbrank: [{ required: true, message: '请输入jbrank', trigger: 'blur' }],
-        wb: [{ required: true, message: '请输入wb', trigger: 'blur' }],
-        jl: [{ required: true, message: '请输入jl', trigger: 'blur' }],
-        gx: [{ required: true, message: '请选择gx', trigger: 'blur' }]
-      },
-      pissbList: [],
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.$refs.input1.$refs.input.focus()
-    })
-  },
-  // 路由跳转,是存储页面的值
-  beforeRouteLeave(to, from, next) {
-    console.log('form')
-    sessionStorage.setItem('applicationForm', JSON.stringify(this.form))
-    next()
-  },
-  created() {
-    sessionStorage.getItem('applicationForm') ? this.exist = true : this.exist = false
-    if (this.exist) {
-      this.form = JSON.parse(sessionStorage.getItem('applicationForm'))
-    }
-    this.init()
-  },
-  methods: {
-    handlePgxChange() {
-      if (this.phdList.includes(this.form.pgx)){
-        this.isRequired = true
-      } else {
-        this.isRequired = false
-      }
-    },
-    resetQuery() {
-      this.form = {
-        jxpn: '',
-        jbcode: '',
-        jbrank: '',
-        wb: '',
-        jl: '',
-        gx:''
-      }
-      sessionStorage.setItem('applicationForm', JSON.stringify(this.form))
-    },
-    handelTab(i, e) {
-      const that = this
-      if (!that.$refs['input' + i]) {
-        return
-      }
-      that.$nextTick(() => {
-        e.target.blur()
-        const index = i + 1
-        that.$refs['input' + index].focus()
-      })
-    },
-    // 重置
-    resetFrom() {
-      this.form = {
-        jxpn: '',
-        jbcode: '',
-        jbrank: '',
-        wb: '',
-        jl: '',
-        gx:''
-      }
-      this.$refs.form.clearValidate()
-    },
-    // 初始化要调的接口
-    init() {
-      this.getBind()
-    },
-    // 提交时要调的接口
-    submitForm() {
-      this.$confirm('是否确认提交?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            bindApplication(this.form).then(res => {
-              console.log('res', res)
-              if (res.code === 200) {
-                if (res.data !== null) {
-                  this.$message({
-                      showClose: true,
-                      message: '添加成功',
-                      type: 'success',
-                      duration: 5000
-                    })
-                }
-                this.resetFrom()
-              } else if (res.code === null) {
-                this.$message({
-                  showClose: true,
-                  message: res.message,
-                  type: 'error',
-                  duration: 10000
-                })
-              }
-            })
-          }
-        })
-      })
-    },
-    // 调数据字典查询
-    getBind() {
-      const obj = {
-        key: 'GX_CODE'
-      }
-      getBindData(obj).then(res => {
-        console.log('res', res)
-        if (res.code === 200 && res.data !== null) {
-          console.log('data', res.data)
-          this.pissbList = res.data
-        }
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-
-.app-container {
-  font-size: 18px;
-  padding: 0;
-
-  .info{
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-     .title{
-       font-size: 16px;
-       color: #333;
-       font-weight: 700;
-     }
-  }
-  .button{
-    margin-top: 7%;
-    margin-left: 20%;
-  }
-
-}
-
-</style>
-