西门子操作屏

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

@@ -0,0 +1,106 @@
+<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" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.point_code"
+                :label="item.point_name"
+                :value="item.point_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 crudProduceScreen from './produceScreen'
+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: this.password }).then(res => {
+        this.disabled = false
+        crudProduceScreen.getUserOrDevice({ username: this.username }).then(res => {
+          this.options = [...res.content]
+          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 => {
+        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>