yh-pub 1.0.0

package/layout/main/login/login.vue

@@ -0,0 +1,151 @@
+<style lang="less">
+@import "./login.less";
+</style>
+
+<template>
+  <div class="login">
+    <div class="login-logo">
+      <img
+        src="@/assets/images/logo-tm.png"
+        width="334px"
+        height="53px" />
+    </div>
+    <div class="login-con">
+      <div class="login-title">
+        <div class="login-title-cn">中控系统</div>
+        <div class="login-title-en">Central Control System</div>
+      </div>
+      <div class="form-con">
+        <el-form
+          ref="loginForm"
+          :model="form"
+          :rules="rules"
+          size="large"
+          layout="inline"
+          @keydown.enter.native="handleSubmit">
+          <el-form-item prop="userName">
+            <el-input
+              ref="username"
+              v-model="form.username"
+              size="large"
+              placeholder="请输入用户名">
+              <el-icon
+                slot="prefix"
+                class="user" />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              ref="password"
+              type="password"
+              size="large"
+              v-model="form.password"
+              placeholder="请输入密码"
+              style="line-height: 40px">
+              <el-icon
+                slot="prefix"
+                class="lock" />
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              @click="handleSubmit"
+              type="primary"
+              style="width: 100%"
+              size="large"
+              :loading="loading">
+              登录
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <p class="login-tip">{{ errorMsg }}</p>
+      </div>
+    </div>
+    <!-- <div class="login-info">
+      <div class="login-info-item">
+        <div class="login-info-icon">
+          <i class="iconfont icon-house" />
+        </div>
+        <div class="login-info-text">WMS</div>
+      </div>
+      <div class="login-info-item">
+        <div class="login-info-icon">
+          <i class="iconfont icon-notebook-" />
+        </div>
+        <div class="login-info-text">EAM</div>
+      </div>
+      <div class="login-info-item">
+        <div class="login-info-icon">
+          <i class="iconfont icon-appstore" />
+        </div>
+        <div class="login-info-text">WCS</div>
+      </div>
+      <div class="login-info-item">
+        <div class="login-info-icon">
+          <i class="iconfont icon-monitor1" />
+        </div>
+        <div class="login-info-text">TMS</div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { useUserStore } from "@/store/user";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  data() {
+    return {
+      errorMsg: "",
+      form: {
+        username: "",
+        password: "",
+      },
+      loading: false,
+      rules: {
+        username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
+        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.loading = true;
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          const userStore = useUserStore();
+          let data = {
+            username: this.form.username,
+            password: this.form.password,
+          };
+          userStore
+            .handleLogin(data)
+            .then(async (res) => {
+              this.loading = false;
+              if (res.data.result) {
+                this.$message.success("登录成功");
+                userStore.getUserInfo().then(() => {
+                  this.$router
+                    .replace({
+                      path: this.$config.homePath,
+                    })
+                    .then(() => {
+                      window.navigation.reload();
+                    });
+                });
+              } else {
+                // this.$message.error(res.data.msg);
+              }
+            })
+            .catch((e) => {
+              console.error(e);
+              this.loading = false;
+              this.$message.error(e);
+            });
+        }
+      });
+    },
+  },
+});
+</script>

package/layout/main/main.less

@@ -0,0 +1,81 @@
+.main{
+  height: 100%;
+  display: flex;
+  .logo-con{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    box-sizing: border-box;
+    background-color: #0051C1;
+    .max-logo{
+      height: 44px;
+      width: auto;
+      display: block;
+      margin: 0 auto;
+    }
+    .mini-logo{
+      width: 44px;
+      height: auto;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+  .header-con{
+    --header-size: 50px;
+    background: linear-gradient(90deg, #0051C1 0%, #3E93FE 100%);
+    width: 100%;
+    height: var(--header-size);
+    line-height: var(--header-size);
+    padding: 0 12px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: relative;
+    .class-collapsed{
+      position: absolute;
+      left: 0;
+      top: 9px;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      margin-right: 12px;
+      color: var(--el-color-white);
+      font-size: 26px;
+      cursor: pointer;
+    }
+  }
+  .main-layout-con{
+    flex: 1;
+    overflow: hidden;
+    background-color:#F3F5FA;
+    display: flex;
+    flex-direction: column;
+  }
+  .main-container{
+    flex: 1;
+    overflow: auto;
+    background-color: #fff;
+    padding: 0 10px 10px 10px;
+    box-sizing: border-box;
+  }
+  .left-sider{
+    width: 220px;
+    background-color: #21304C;
+    --el-menu-bg-color: #21304C;
+    --el-menu-text-color: var(--el-color-white);
+    --el-menu-active-color: var(--el-color-white);
+    --el-menu-hover-bg-color: transparent;
+    &.is-collapse {
+      width: 64px;
+    }
+  }
+  .right-container {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}

package/layout/main/main.vue

@@ -0,0 +1,202 @@
+<template>
+  <section class="main">
+    <aside
+      class="left-sider"
+      :class="{ 'is-collapse': collapse }">
+      <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
+      <div class="logo-con">
+        <template v-if="hasCustomLogo">
+          <img
+            v-show="!collapse"
+            class="max-logo"
+            :src="logo"
+            key="max-logo" />
+          <img
+            v-show="collapse"
+            class="mini-logo"
+            :src="minLogo"
+            key="min-logo" />
+        </template>
+        <template v-else>
+          <img
+            v-show="!collapse"
+            class="max-logo"
+            src="@/assets/images/logo.png"
+            key="max-logo" />
+          <img
+            v-show="collapse"
+            class="mini-logo"
+            src="@/assets/images/logo-min.png"
+            key="min-logo" />
+        </template>
+      </div>
+      <side-menu
+        :active-name="route?.name"
+        :collapse="collapse"
+        :menu-list="menuList"></side-menu>
+    </aside>
+    <section
+      class="right-container"
+      :class="{ 'is-collapse': collapse }">
+      <header class="header-con">
+        <i
+          :class="`iconfont class-collapsed ${collapse ? 'icon-indent' : 'icon-outdent'}`"
+          @click="handleCollapsedChange"></i>
+        <user
+          :message-unread-count="unreadCount"
+          :user-name="userName" />
+        <language v-if="config.useI18n" />
+        <!-- <error-store
+          v-if="config.plugin?.errorStore?.showInHeader"
+          :count="errorCount"></error-store>
+        <LogConsole></LogConsole> -->
+        <fullscreen v-model="isFullScreen" />
+      </header>
+      <main class="main-layout-con">
+        <tags-nav />
+        <section class="main-container">
+          <router-view v-slot="{ Component }">
+            <KeepAlive
+              :max="10"
+              ref="kpAliveRef">
+              <component
+                :is="Component"
+                :key="route.path" />
+            </KeepAlive>
+          </router-view>
+        </section>
+      </main>
+    </section>
+  </section>
+</template>
+
+<script setup>
+import "./main.less";
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { ElNotification } from "element-plus";
+import { getToken, getStorage } from "@/libs/util";
+import { markRead } from "@/api/user";
+import { useRouter, useRoute } from "vue-router";
+
+import config from "@/config";
+import { useAppStore } from "@/store/app.js";
+import { useUserStore } from "@/store/user.js";
+import SideMenu from "./components/side-menu/side-menu.vue";
+import TagsNav from "./components/tags-nav/tags-nav.vue";
+import User from "./components/user/user.vue";
+import Fullscreen from "./components/fullscreen/fullscreen.vue";
+import { Language } from "yh-i18n";
+
+const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
+
+const userStore = useUserStore();
+const appStore = useAppStore();
+const router = useRouter();
+const route = useRoute();
+const kpAliveRef = ref();
+
+const { menuList, errorCount, tagNavList } = storeToRefs(appStore);
+const { unreadCount } = storeToRefs(userStore);
+
+const hasCustomLogo = computed(() => {
+  return !!config.logo;
+});
+
+const logo = computed(() => {
+  return config.logo;
+});
+
+const minLogo = computed(() => {
+  return config.minLogo;
+});
+
+const userName = ref("");
+const collapse = ref(false);
+const unReadMessageMap = ref({});
+const websocketPath = baseUrl.replace("http", "ws") + "/webSocket";
+const isFullScreen = ref(false);
+let websocket = null;
+
+function handleCollapsedChange() {
+  collapse.value = !collapse.value;
+}
+
+function initWebsocket() {
+  let token = getToken();
+  if (typeof WebSocket === "undefined") {
+    ElMessage.info("您的浏览器不支持WebSocket");
+  } else if (token) {
+    try {
+      // 实例化websocket
+      websocket = new WebSocket(websocketPath + "?$_TOKEN=" + token);
+      // 监听websocket的连接
+      websocket.onopen = () => {
+        console.log("(" + websocketPath + ") websocket连接成功");
+      };
+      // 监听websocket的错误信息
+      websocket.onerror = () => {
+        console.log("(" + websocketPath + ") websocket连接错误");
+      };
+      // 监听websocket的消息
+      websocket.onmessage = (msg) => {
+        websocketGetMessage(msg);
+      };
+      // 监听websocket关闭
+      websocket.onclose = () => {
+        websocketClose();
+      };
+    } catch (e) {}
+  }
+}
+
+function websocketGetMessage(msg) {
+  let msgData = eval(msg.data);
+  if (msgData && msgData.length > 0) {
+    msgData.forEach((msg) => {
+      if (!unReadMessageMap.value[msg.ID]) {
+        unReadMessageMap.value[msg.ID] = msg;
+      }
+    });
+    Object.keys(unReadMessageMap.value).forEach((key) => {
+      let msg = unReadMessageMap.value[key];
+      if (!msg.hasOwnProperty("show")) {
+        ElNotification.open({
+          title: msg.TITLE,
+          desc: msg.TEXT,
+          duration: 0,
+          name: msg.ID,
+          onClose: () => {
+            delete unReadMessageMap.value[msg.ID];
+            markRead(msg.ID);
+          },
+        });
+        msg["show"] = true;
+      }
+    });
+  }
+}
+
+function websocketSendMessage(msg) {
+  websocket.send(msg);
+}
+
+function websocketClose() {
+  let that = this;
+  console.log("websocket关闭，尝试重新连接websocket");
+  window.setTimeout(() => {
+    that.initWebsocket();
+  }, 1000);
+}
+
+onMounted(async () => {
+  try {
+    userName.value = getStorage("userName");
+  } catch (error) {
+    console.error("菜单加载异常：", error);
+  }
+});
+onUnmounted(() => {
+  ElNotification.closeAll();
+});
+</script>

package/layout/main/system/dict.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-select
+    :modelValue="modelValue"
+    @change="handleChange">
+    <el-option
+      v-for="(item, i) in dictData"
+      :key="i"
+      :value="item.VALUE"
+      :label="item.NAME"></el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "dict",
+  props: {
+    modelValue: "",
+    dict: String,
+    _select_id: String,
+    url: {
+      type: String,
+      default() {
+        return "/sysSelector/list";
+      },
+    },
+  },
+  data() {
+    return {
+      dictData: [],
+      loading: false,
+    };
+  },
+  emits: ["update:modelValue", "change"],
+  methods: {
+    getData(v) {
+      this.loading = true;
+      this.axios
+        .post(
+          this.url,
+          this.$qs.stringify({
+            id: this._select_id,
+          })
+        )
+        .then((response) => {
+          this.loading = false;
+          if (response.data.result) {
+            this.dictData = response.data.data;
+          }
+        });
+    },
+    handleChange(v) {
+      this.$emit("update:modelValue", v);
+    },
+  },
+  watch: {
+    dict(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData(this.dict);
+  },
+};
+</script>