xiMenZi/lms/nladmin-ui/src/views/wms/produceScreen/setup.vue

<template>
  <div class="container">
    <div class="header" />
    <div class="set_wrap">
      <el-row type="flex" justify="space-between" class="mgb5">
        <el-col :span="5" class="set-label">用户名</el-col>
        <el-col :span="17"><input v-model="username" type="text" class="set-input"></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="mgb10">
        <el-col :span="5" class="set-label">密码</el-col>
        <el-col :span="17"><input v-model="password" type="password" class="set-input"></el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="8"><button class="login_button" :disabled="disabled" @click="toLogin">登录</button></el-col>
      </el-row>
    </div>
    <div class="pop-wraper pop-wraper-1" :class="{'popshow': show, 'pophide': !show}">
      <div class="pop-h1">选择设备</div>
      <div class="pop-grid">
        <el-row class="filter-wraper" type="flex" justify="space-between">
          <el-col :span="5" class="p-label">设备</el-col>
          <el-col :span="18" class="select-wraper">
            <el-select v-model="value" :popper-append-to-body="false" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.device_code"
                :label="item.device_name"
                :value="item.device_code"
                class="option-wraper"
              />
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-row type="flex" justify="space-around">
        <el-col :span="6">
          <button class="login_button login_button_dis" @click="show = false">取消</button>
        </el-col>
        <el-col :span="6">
          <button class="login_button" :disabled="disabled" @click="toSure">确定</button>
        </el-col>
      </el-row>
    </div>
    <div v-show="show" class="modal" />
  </div>
</template>

<script>
import { encrypt } from '@/utils/rsaEncrypt'
import crudProduceScreen from './produceScreen'
// import crudProduceScreen from './mork'
export default {
  data() {
    return {
      username: '',
      password: '',
      options: [],
      value: '',
      disabled: false,
      show: false
    }
  },
  methods: {
    toLogin() {
      this.disabled = true
      if (!this.username) {
        this.$message('请输入用户名')
        this.disabled = false
        return
      }
      if (!this.password) {
        this.$message('请输入密码')
        this.disabled = false
        return
      }
      crudProduceScreen.authLogin({ username: this.username, password: encrypt(this.password) }).then(res => {
        this.disabled = false
        crudProduceScreen.getUserOrDevice({ username: this.username }).then(res => {
          this.options = [...res]
          this.show = true
        })
      }).catch(() => {
        this.disabled = false
      })
    },
    toSure() {
      this.disabled = true
      if (!this.value) {
        this.$message('请选择设备')
        this.disabled = false
        return
      }
      crudProduceScreen.deviceInLogin({ device_code: this.value }).then(res => {
        res.username = this.username
        this.$store.dispatch('addScreenData', JSON.stringify(res))
        this.show = false
        this.disabled = false
        this.$router.push('/produceScreen/1')
      }).catch(() => {
        this.disabled = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>