1

vue/src/api/user.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function getTenantCodeByUser(data) {
+  return request({
+    url: "/api/account/sysuserdetail/getTenantCodeByUser",
+    method: "post",
+    params: data,
+  });
+}

vue/src/components/HelloWorld.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

vue/src/main.js

@@ -0,0 +1,22 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import Cookies from "js-cookie";
+import Element from "element-ui";
+import "./styles/element-variables.scss";
+
+import axios from "axios";
+
+Vue.prototype.$axios = axios;
+Vue.config.productionTip = false;
+Vue.use(Element, {
+  size: Cookies.get("size") || "small", // set element-ui default size
+});
+Element.Dialog.props.closeOnClickModal.default = false; // 全局关闭，点击遮罩层关闭弹窗
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");

vue/src/router/index.js

@@ -0,0 +1,34 @@
+// import Vue from "vue";
+// import VueRouter from "vue-router";
+// import { createApp } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
+
+//Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    component: () => import("@/views/login/login"),
+    name: "SysUrl",
+    meta: { title: "sysurl", icon: "el-icon-set-up" },
+  },
+  {
+    path: "/about",
+    component: () => import("@/views/AboutView"),
+    name: "SysRole",
+    meta: { icon: "el-icon-postcard" },
+  },
+  {
+    path: "/master",
+    component: () => import("@/views/master/master"),
+    name: "master",
+    meta: { icon: "el-icon-postcard" },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router;

vue/src/store/getters.js

@@ -0,0 +1,5 @@
+const getters = {
+  token: (state) => state.user.token,
+  cookie: (state) => state.user.cookie,
+};
+export default getters;

vue/src/store/index.js

@@ -0,0 +1,25 @@
+import Vue from "vue";
+
+import Vuex from "vuex";
+import getters from "./getters";
+Vue.use(Vuex);
+
+// https://webpack.js.org/guides/dependency-management/#requirecontext
+const modulesFiles = require.context("./modules", true, /\.js$/);
+
+// you do not need `import app from './modules/app'`
+// it will auto require all vuex module from modules file
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  // set './app.js' => 'app'
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
+  const value = modulesFiles(modulePath);
+  modules[moduleName] = value.default;
+  return modules;
+}, {});
+
+const store = new Vuex.Store({
+  modules,
+  getters,
+});
+
+export default store;

vue/src/store/modules/user.js

@@ -0,0 +1,17 @@
+import { getToken, setToken, removeToken, getCookie } from "@/utils/auth";
+
+const state = {
+  token: getToken(),
+  cookie: getCookie(),
+};
+
+const mutations = {};
+
+const actions = {};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

vue/src/styles/btn.scss

@@ -0,0 +1,106 @@
+@import './variables.scss';
+
+@mixin colorBtn($color) {
+  background: $color;
+
+  &:hover {
+    color: $color;
+
+    &:before,
+    &:after {
+      background: $color;
+    }
+  }
+}
+
+.blue-btn {
+  @include colorBtn($blue)
+}
+
+.light-blue-btn {
+  @include colorBtn($light-blue)
+}
+
+.red-btn {
+  @include colorBtn($red)
+}
+
+.pink-btn {
+  @include colorBtn($pink)
+}
+
+.green-btn {
+  @include colorBtn($green)
+}
+
+.tiffany-btn {
+  @include colorBtn($tiffany)
+}
+
+.yellow-btn {
+  @include colorBtn($yellow)
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+
+  &:hover {
+    background: #fff;
+
+    &:before,
+    &:after {
+      width: 100%;
+      transition: 600ms ease all;
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2px;
+    width: 0;
+    transition: 400ms ease all;
+  }
+
+  &::after {
+    right: inherit;
+    top: inherit;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.svg-icon-arrow {
+  cursor: pointer;
+  color: #1890ff;
+  padding-left: 10px;
+  font-size: 20px;
+}

vue/src/styles/element-ui.scss

@@ -0,0 +1,83 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    min-width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}

vue/src/styles/element-variables.scss

@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

vue/src/styles/formgeneratorhome.scss

@@ -0,0 +1,271 @@
+$selectedColor: #f6f7ff;
+$lighterBlue: #409EFF;
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.components-list {
+  padding: 8px;
+  box-sizing: border-box;
+  height: 100%;
+  .components-item {
+    display: inline-block;
+    width: 48%;
+    margin: 1%;
+    transition: transform 0ms !important;
+  }
+}
+.components-draggable {
+  padding-bottom: 20px;
+}
+.components-title {
+  font-size: 14px;
+  color: #222;
+  margin: 6px 2px;
+  .svg-icon {
+    color: #666;
+    font-size: 18px;
+  }
+}
+
+.components-body {
+  padding: 8px 10px;
+  background: $selectedColor;
+  font-size: 12px;
+  cursor: move;
+  border: 1px dashed $selectedColor;
+  border-radius: 3px;
+  .svg-icon {
+    color: #777;
+    font-size: 15px;
+  }
+  &:hover {
+    border: 1px dashed #787be8;
+    color: #787be8;
+    .svg-icon {
+      color: #787be8;
+    }
+  }
+}
+
+.left-board {
+  width: 260px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+}
+.left-scrollbar{
+  height: calc(100vh - 42px);
+  overflow: hidden;
+}
+.center-scrollbar {
+  height: calc(100vh - 42px);
+  overflow: hidden;
+  border-left: 1px solid #f1e8e8;
+  border-right: 1px solid #f1e8e8;
+  box-sizing: border-box;
+}
+.center-board {
+  height: 100vh;
+  width: auto;
+  margin: 0 350px 0 260px;
+  box-sizing: border-box;
+}
+.empty-info {
+  position: absolute;
+  top: 46%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 18px;
+  color: #ccb1ea;
+  letter-spacing: 4px;
+}
+.action-bar {
+  position: relative;
+  height: 42px;
+  text-align: right;
+  padding: 0 15px;
+  box-sizing: border-box;;
+  border: 1px solid #f1e8e8;
+  border-top: none;
+  border-left: none;
+  .delete-btn {
+    color: #F56C6C;
+  }
+}
+.logo-wrapper {
+  position: relative;
+  height: 42px;
+  background: #fff;
+  border-bottom: 1px solid #f1e8e8;
+  box-sizing: border-box;
+}
+.logo {
+  position: absolute;
+  left: 12px;
+  top: 6px;
+  line-height: 30px;
+  color: #00afff;
+  font-weight: 600;
+  font-size: 17px;
+  white-space: nowrap;
+  > img {
+    width: 30px;
+    height: 30px;
+    vertical-align: top;
+  }
+  .github {
+    display: inline-block;
+    vertical-align: sub;
+    margin-left: 15px;
+    > img {
+      height: 22px;
+    }
+  }
+}
+
+.center-board-row {
+  padding: 12px 12px 15px 12px;
+  box-sizing: border-box;
+  & > .el-form {
+    // 69 = 12+15+42
+    height: calc(100vh - 69px);
+  }
+}
+.drawing-board {
+  height: 100%;
+  position: relative;
+  .components-body {
+    padding: 0;
+    margin: 0;
+    font-size: 0;
+  }
+  .sortable-ghost {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    &::before {
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 3px;
+      background: rgb(89, 89, 223);
+      z-index: 2;
+    }
+  }
+  .components-item.sortable-ghost {
+    width: 100%;
+    height: 60px;
+    background-color: $selectedColor;
+  }
+  .active-from-item {
+    & > .el-form-item {
+      background: $selectedColor;
+      border-radius: 6px;
+    }
+    & > .drawing-item-copy, & > .drawing-item-delete {
+      display: initial;
+    }
+    & > .component-name {
+      color: $lighterBlue;
+    }
+  }
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+}
+.drawing-item {
+  position: relative;
+  cursor: move;
+  &.unfocus-bordered:not(.active-from-item) > div:first-child {
+    border: 1px dashed #ccc;
+  }
+  .el-form-item {
+    padding: 12px 10px;
+  }
+}
+.drawing-row-item {
+  position: relative;
+  cursor: move;
+  box-sizing: border-box;
+  border: 1px dashed #ccc;
+  border-radius: 3px;
+  padding: 0 2px;
+  margin-bottom: 15px;
+  .drawing-row-item {
+    margin-bottom: 2px;
+  }
+  .el-col {
+    margin-top: 22px;
+  }
+  .el-form-item {
+    margin-bottom: 0;
+  }
+  .drag-wrapper {
+    min-height: 80px;
+  }
+  &.active-from-item {
+    border: 1px dashed $lighterBlue;
+  }
+  .component-name {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #bbb;
+    display: inline-block;
+    padding: 0 6px;
+  }
+}
+.drawing-item, .drawing-row-item {
+  &:hover {
+    & > .el-form-item {
+      background: $selectedColor;
+      border-radius: 6px;
+    }
+    & > .drawing-item-copy, & > .drawing-item-delete {
+      display: initial;
+    }
+  }
+  & > .drawing-item-copy, & > .drawing-item-delete {
+    display: none;
+    position: absolute;
+    top: -10px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 50%;
+    font-size: 12px;
+    border: 1px solid;
+    cursor: pointer;
+    z-index: 1;
+  }
+  & > .drawing-item-copy {
+    right: 56px;
+    border-color: $lighterBlue;
+    color: $lighterBlue;
+    background: #fff;
+    &:hover {
+      background: $lighterBlue;
+      color: #fff;
+    }
+  }
+  & > .drawing-item-delete {
+    right: 24px;
+    border-color: #F56C6C;
+    color: #F56C6C;
+    background: #fff;
+    &:hover {
+      background: #F56C6C;
+      color: #fff;
+    }
+  }
+}

vue/src/styles/index.scss

@@ -0,0 +1,527 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import './btn.scss';
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+//main-container全局样式
+.app-container {
+  padding: 20px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &.draft {
+    background: #d0d0d0;
+  }
+
+  &.deleted {
+    background: #d0d0d0;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-input {
+    width: 150px;
+    margin-right: 10px;
+  }
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}
+
+//refine vue-multiselect plugin
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}
+
+.center-tabs {
+  .el-tabs__header {
+    margin-bottom: 0!important;
+  }
+  .el-tabs__item {
+    width: 50%;
+    text-align: center;
+  }
+  .el-tabs__nav {
+    width: 100%;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #C0D4F0;
+  border-radius: 3px;
+}
+
+// formgenerator
+$editorTabsborderColor: #121315;
+.editor-tabs {
+  background: $editorTabsborderColor;
+  .el-tabs__header {
+    margin: 0;
+    border-bottom-color: $editorTabsborderColor;
+    .el-tabs__nav {
+      border-color: $editorTabsborderColor;
+    }
+  }
+  .el-tabs__item {
+    height: 32px;
+    line-height: 32px;
+    color: #888a8e;
+    border-left: 1px solid $editorTabsborderColor!important;
+    background: #363636;
+    margin-right: 5px;
+    user-select: none;
+  }
+  .el-tabs__item.is-active {
+    background: #1e1e1e;
+    border-bottom-color: #1e1e1e!important;
+    color: #fff;
+  }
+  .el-icon-edit {
+    color: #f1fa8c;
+  }
+  .el-icon-document {
+    color: #a95812;
+  }
+  :focus.is-active.is-focus:not(:active) {
+    box-shadow: none;
+    border-radius: 0;
+  }
+}
+
+.right-scrollbar {
+  .el-scrollbar__view {
+    padding: 12px 18px 15px 15px;
+  }
+}
+
+.reg-item {
+  padding: 12px 6px;
+  background: #f8f8f8;
+  position: relative;
+  border-radius: 4px;
+  .close-btn {
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+    cursor: pointer;
+    font-size: 12px;
+    &:hover {
+      background: rgba(210, 23, 23, 0.5)
+    }
+  }
+  & + .reg-item {
+    margin-top: 18px;
+  }
+}
+
+.action-bar {
+  & .el-button+.el-button {
+    margin-left: 15px;
+  }
+  & i {
+    font-size: 20px;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+  }
+}
+
+.custom-tree-node {
+  width: 100%;
+  font-size: 14px;
+  .node-operation {
+    float: right;
+  }
+  i[class*="el-icon"] + i[class*="el-icon"] {
+    margin-left: 6px;
+  }
+  .el-icon-plus {
+    color: #409EFF;
+  }
+  .el-icon-delete {
+    color: #157a0c;
+  }
+}
+
+// 
+.popoverTo {
+  .el-popover__title {
+
+    font-size: 14px;
+  }
+}
+
+// 弹窗和内弹窗
+.pop-up,
+.inner-pop-up,
+.pop-up-height {
+  display: flex;
+
+  // 弹窗内边据
+  .el-dialog__body {
+    padding: 0px 20px;
+  }
+  .dataForm {
+    border-top: 1px solid #ccc;
+    padding: 20px 0;
+  }
+  // 弹窗里面的表单的外边距设置 el-dialog-bottom
+   .el-dialog-bottom {
+    margin-bottom: 10px;
+    margin-top: 5px;
+  }
+  // 弹窗标题加粗 title 粘性定位固定在顶部
+  .el-dialog__header {
+    position: sticky;
+    top: 0;
+    background-color: #FFFFFF;
+    box-shadow: 0 1px 2px 1px #f0f0f0;
+    z-index: 9999;
+    .el-dialog__title {
+      font-weight: bold;
+    }
+  }
+  // 限制弹窗的高度
+  .el-dialog {
+    max-height: calc(100% - 10vh ) !important;
+    // min-height: 20vh;
+    margin:  auto  !important;
+    overflow: auto;
+    position: relative;
+    // 个性化-固定在容器顶部
+    .content-fixed-top {
+      position: fixed;
+      padding-top: 10px;
+      margin-top: 2px;
+      z-index: 9999;
+      background-color: #fff;
+    }
+     // 个性化-中部
+    .content-fixed-conter {
+      padding-top: 50px;
+    }
+    // 个性化-固定底部
+    .content-fixed-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: 9999;
+      background-color: #fff;
+      .pagination-container {
+          margin-top: 0;
+          padding: 25px 0;
+      }
+
+    }
+    .filter-container {
+      
+      padding-bottom: 0px;
+    }
+  }
+  
+}
+.pop-up-height {
+  .el-dialog {
+    height: calc(100% - 10vh ) !important;
+  }
+}
+
+
+// 表单里面的input框 手动添加icon 图标
+.icon_style {
+
+  .el-form-item__content{
+    position: relative;
+  }
+  .icon {
+    width: calc(100% - 47px);
+    height: calc(100% - 2px);
+    color: #C0C4CC;
+    transform: translateY(-50%); 
+    display: flex;
+    align-content: center;
+    justify-content: flex-end; 
+    position: absolute ; 
+    top: 50%; 
+    left: 0;
+    .el-icon-circle-close{
+      line-height: inherit;
+      background-color: #fff;
+      padding: 0 8px;
+      &:hover {
+        color: #1890FF;
+        cursor: pointer;
+      }
+    }
+  }
+  .el-input__suffix {
+    display: none;
+  }
+}
+
+.app-sticky {
+  width: 100%;
+  height: calc(100vh - 84px);
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 0 20px;
+  // 表格的导航栏 粘性定位国定
+  .positionStl {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background-color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+
+    .filter-container {
+      padding-bottom: 0;
+    }
+  }
+  .pagination-container {
+    margin-top: 0;
+    padding: 10px 16px !important;
+    position: sticky;
+    bottom: 0;
+    z-index: 20;
+  }
+
+  #screenfull-container {
+    height: calc( 100% - 94px - 52px );
+    .mainHeight {
+      height: calc( 100% - 23px )
+    }
+    #tableData {
+      tr td .cell {
+        line-height: initial !important;
+        // 超出两行 以省略号显示
+        overflow : hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2; // 控制几行
+        -webkit-box-orient: vertical;
+      }
+    
+  
+      .el-button--small {
+          padding: 0px;
+      }
+    }
+  }
+
+}
+
+// 黑色字体
+.el-input.is-disabled .el-input__inner {
+    color: #000;
+
+}
+
+// 让input number类型的标签不产生上下加减的按钮
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0;
+}
+
+// 自定义加载
+ .daoru .el-loading-mask .el-loading-spinner {
+    font-size: 50px;
+    .el-loading-text {
+      font-size: 20px;
+    }
+}
+
+// el-divider 组件的修改样式
+.divider {
+  margin: 30px 0 !important;
+  .el-divider__text {
+    font-weight: bold;
+    font-size: 17px;
+  
+  }
+}
+
+// 加载中  .el-loading-spinner .circular 
+.el-loading-spinner .circular  {
+  width: 70px;
+  height: 70px;
+}

vue/src/styles/mixin.scss

@@ -0,0 +1,100 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}
+
+@mixin action-bar {
+  .action-bar {
+    height: 33px;
+    background: #f2fafb;
+    padding: 0 15px;
+    box-sizing: border-box;
+  
+    .bar-btn {
+      display: inline-block;
+      padding: 0 6px;
+      line-height: 32px;
+      color: #8285f5;
+      cursor: pointer;
+      font-size: 14px;
+      user-select: none;
+      & i {
+        font-size: 20px;
+      }
+      &:hover {
+        color: #4348d4;
+      }
+    }
+    .bar-btn + .bar-btn {
+      margin-left: 8px;
+    }
+    .delete-btn {
+      color: #f56c6c;
+      &:hover {
+        color: #ea0b30;
+      }
+    }
+  }
+}

vue/src/styles/sidebar.scss

@@ -0,0 +1,226 @@
+#app {
+
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    background-color: $menuBg;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 16px;
+    }
+
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

vue/src/styles/transition.scss

@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

vue/src/styles/variables.scss

@@ -0,0 +1,35 @@
+// base color
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5;
+
+$menuBg:#304156;
+$menuHover:#263445;
+
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+
+$sideBarWidth: 210px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

vue/src/utils/auth.js

@@ -0,0 +1,31 @@
+import Cookies from "js-cookie";
+
+const TokenKey = "kdservice-sessionid";
+
+export function getToken() {
+  // console.log('取出to'+Cookies.get(TokenKey))
+  return Cookies.get(TokenKey);
+}
+
+export function setToken(token) {
+  // console.log('设置传入to'+token)
+  return Cookies.set(TokenKey, token);
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey);
+}
+
+const CookieKey = "cookie";
+
+export function getCookie() {
+  return Cookies.get(CookieKey);
+}
+
+export function setCookie(cookie) {
+  return Cookies.set(CookieKey, cookie);
+}
+
+export function removeCookie() {
+  return Cookies.remove(CookieKey);
+}

vue/src/utils/request.js

@@ -0,0 +1,61 @@
+import axios from "axios";
+import { Message } from "element-ui";
+import store from "@/store";
+import { getCookie, getToken } from "@/utils/auth";
+
+// create an axios instance
+const service = axios.create({
+  // baseURL: "http://1.14.142.111:9090", // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 5000, // request timeout
+});
+
+// request interceptor
+service.interceptors.request.use(
+  (config) => {
+    // do something before request is sent
+    if (store.getters.token) {
+      // config.headers['Cookie'] = 'kdservice-sessionid=' + getToken()
+      // config.headers['kdservice'] = getToken()
+    }
+    config.headers["Cookie"] = "kdservice-sessionid=" + getToken();
+    config.headers["Content-Type"] = "application/json";
+
+    return config;
+  },
+  (error) => {
+    // do something with request error
+    console.log(error); // for debug
+    return Promise.reject(error);
+  }
+);
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  (response) => {
+    const res = response.data;
+    // if the custom code is not 200, it is judged as an error.
+    if (res.code && res.code !== 200) {
+      Message({
+        message: res.message || "Error",
+        type: "error",
+        duration: 5 * 1000,
+      });
+      return Promise.reject(new Error(res.message || "Error"));
+    } else {
+      return res;
+    }
+  }
+);
+
+export default service;

vue/src/views/AboutView.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

vue/src/views/HomeView.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'HomeView',
+  components: {
+    HelloWorld
+  }
+}
+</script>

vue/src/views/login/login.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="login-container">
+    <div class="login-form">
+
+      <div class="title-container">
+        <h3 class="title">
+           供应商验证
+        </h3>
+        <div class="desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+      </div>
+
+      <el-tabs v-model="activeName" stretch>
+        <el-tab-pane label="供应商登录" name="first">
+          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" autocomplete="on" label-position="left">
+            <el-form-item prop="Username">
+              <span class="svg-container">
+                <svg-icon icon-class="user" />
+              </span>
+              <el-input
+                  ref="Username"
+                  v-model="loginForm.Username"
+                  placeholder="供应商名称"
+                  name="Username"
+                  type="text"
+                  tabindex="2"
+                  autocomplete="on"
+                  style="width: 85%"
+              />
+            </el-form-item>
+            <el-tooltip  content="Caps lock is On" placement="right" manual>
+              <el-form-item prop="Password">
+                <span class="svg-container">
+                  <svg-icon icon-class="password" />
+                </span>
+                <el-input
+                    key="passwordType"
+                    ref="Password"
+                    v-model="loginForm.Password"
+                    placeholder="供应商编码"
+                    name="Password"
+                    tabindex="3"
+                    autocomplete="on"
+                    style="width: 85%"
+                />
+              </el-form-item>
+            </el-tooltip>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <div>
+        <el-button v-if="loginType" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="loginSubmit()">
+          登录
+        </el-button>
+
+      </div>
+<!--      <div class="forgotregister">-->
+<!--        <router-link :to="{path: '/forgotpassword', query: { } }">-->
+<!--          <span style="float: left">{{ $t('login.forgotPassword') }}</span>-->
+<!--        </router-link>-->
+
+<!--      </div>-->
+    </div>
+    <div class="globalFooter">
+      <div class="copyright">Copyright &copy;2022 珠海格致软件有限公司</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {login} from "@/api/login";
+import * as auth from "@/utils/auth.js"
+import {getToken} from "@/utils/auth.js";
+import axios from "axios";
+
+export default {
+  name: 'Login',
+  data() {
+    return {
+      loading : false,
+      activeName:'first',
+      loginType:false,
+      FBILLNO:'',
+      loginForm:{
+        Username:"",
+        Password:"",
+      },
+      loginRules: {
+        Username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        Password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+      data:{
+        FormId:"kafe2f22a0498441f9109c31cf5586da5",
+        FieldKeys:"FBILLNO,FSupplierId.FName",
+        FilterString:"",
+        OrderString:"",
+        TopRowCount:"0",
+        StartRow:"0",
+        Limit:100
+      }
+    }
+  },
+  watch: {
+
+  },
+  created() {
+    this.FBILLNO=this.$route.query.FBILLNO
+    if (this.$route.query.FBILLNO !== undefined){
+      this.loginType=true;
+    }
+  },
+  mounted() {
+
+  },
+  destroyed() {
+
+  },
+  methods: {
+    loginSubmit(){
+       let this_=this
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          let FilterString="FBILLNO like'%"+this.FBILLNO+"'";
+          this.data.FilterString=FilterString;
+          let query={}
+          query.FBILLNO=this.FBILLNO;
+          query.Username=this.loginForm.Username;
+          query.Password=this.loginForm.Password;
+          login(query).then((response) => {
+            if (response.status===200){
+              this.$router.push({
+                path: "/master?FBILLNO="+this_.FBILLNO+"&username="+this_.loginForm.Username+"&password="+this_.loginForm.Password,
+              });
+            }else {
+              this.handleWarning("登录失败，请联系管理员")
+            }
+          });
+        }
+      })
+
+    },
+    handleWarning(response) {
+      this.$message({
+        message: response.message || response,
+        type: 'warning',
+        duration: 2000
+      })
+    },
+
+    handleSuccess(response) {
+      this.$message({
+        message: response.message || response,
+        type: 'success',
+        duration: 2000
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    // width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+::v-deep .el-tabs__item {
+  color: white;
+}
+
+::v-deep .el-tabs__item.is-active {
+  color: #1890ff;
+}
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    .desc {
+      margin-top: 0px;
+      margin-bottom: 20px;
+      color: white;
+      font-size: 14px;
+    }
+
+    .set-language {
+      color: #fff;
+      position: absolute;
+      top: 3px;
+      font-size: 18px;
+      right: 0px;
+      cursor: pointer;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+.globalFooter {
+  margin: 48px 0 24px 0;
+  padding: 0 16px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+  }
+
+  .copyright {
+    color: rgba(0,0,0,0.45);
+    font-size: 14px;
+  }
+}
+
+.forgotregister {
+  text-align: right;
+  font-size: 14px;
+  color: white;
+
+  .register {
+    float: right;
+  }
+}
+</style>

vue/src/views/master/master.vue

@@ -0,0 +1,522 @@
+<template>
+  <div class="app-container">
+    <div div style="font-size:25px;text-align:left ; position:relative;">
+      <el-button v-if="view" type="primary" @click="saveData('false')">
+        {{ '保存' }}
+      </el-button>
+      <el-button v-if="view" type="primary" @click="saveData('true')">
+        {{ '提交' }}
+      </el-button>
+        <el-upload
+        class="upload-demo"
+        action="/api/upload"
+        :on-success="onSuccess"
+        multiple
+        :file-list="fileList">
+        <el-button size="small" type="primary">点击上传</el-button>
+      </el-upload>
+    </div>
+    <el-divider></el-divider>
+    <el-form ref="ContractSalaryForm" :rules="rules" :model="ruleFrom" :label-position="labelPosition"
+             label-width="auto" style="width: 100%" :disabled="!view">
+      <!-- 基础信息 -->
+      <div class="form-dataForm">
+        <el-row>基本信息</el-row>
+      </div>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label='报价单号' prop="FBILLNO">
+            <el-input v-model="ruleFrom.FBILLNO" readonly></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label='询价名称' prop="FProjectName">
+            <el-input v-model="ruleFrom.FProjectName" readonly></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="询价单号" prop="FSrcBillNo">
+            <el-input v-model="ruleFrom.FSrcBillNo" readonly/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="供应商编码" prop="FSupplierId">
+            <el-input maxlength="64" v-model="ruleFrom.FSupplierId" readonly></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="供应商名称" prop="FSupplierName">
+            <el-input maxlength="64" v-model="ruleFrom.FSupplierName" readonly></el-input>
+
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="开标日期" prop="FOpenDate">
+            <el-date-picker
+                style="width: 100%"
+                v-model="ruleFrom.FOpenDate"
+                type="date"
+                format="yyyy年MM月dd日 HH时mm分ss秒"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                readonly>
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label='报价状态' prop="FPriceStatus">
+            <el-input v-model="ruleFrom.FPriceStatus" readonly></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label='报价日期' prop="FQuoteDate">
+            <el-date-picker
+                style="width: 100%"
+                v-model="ruleFrom.FQuoteDate"
+                type="date"
+                format="yyyy年MM月dd日 HH时mm分ss秒"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                readonly>
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="报价截至日期" prop="FExpiryDate">
+            <el-date-picker
+                style="width: 100%"
+                v-model="ruleFrom.FExpiryDate"
+                type="date"
+                format="yyyy年MM月dd日 HH时mm分ss秒"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                readonly>
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label='联系人' prop="FContact">
+            <el-input v-model="ruleFrom.FContact" readonly></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label='电话' prop="FPhone">
+            <el-input v-model="ruleFrom.FPhone" placeholder='请输入电话' readonly></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="邮箱" prop="FMail">
+            <el-input v-model="ruleFrom.FMail" maxlength="64" placeholder="请输入邮箱" readonly/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label='币别' prop="FCurrId">
+            <el-input v-model="ruleFrom.FCurrId" readonly></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="含税" prop="FIsIncludedTax" style="text-align: left">
+            <el-switch v-model="ruleFrom.FIsIncludedTax" :active-value="'true'" :inactive-value="'false'"
+                       active-color="#13ce66"
+                       inactive-color="#ff4949" :disabled="true">
+              <!--              @change="priceInputView()"-->
+            </el-switch>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 其他信息 -->
+      <el-collapse v-model="activeNames">
+        <el-collapse-item title="其他信息" class="form-title" name="1">
+          <div class="form-content" v-if="activeNames=='1'">
+            <el-divider content-position="left"></el-divider>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item label='采购组织' prop="FPurOrgId">
+                  <el-input v-model="ruleFrom.FPurOrgId" readonly/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label='询价日期' prop="FDate">
+                  <el-date-picker type="date" format="yyyy年MM月dd日 HH时mm分ss秒"
+                                  value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleFrom.FDate"
+                                  style="width: 100%;" readonly/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label='询价员' prop="FBuyer">
+                  <el-input v-model="ruleFrom.FBuyer" readonly/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+
+    </el-form>
+    <el-tabs type="border-card" style="margin-top: 50px">
+      <el-tab-pane label="明细信息">
+        <div>
+          <el-table
+              :key="tableKey"
+              :data="list"
+              border
+              fit
+              highlight-current-row
+              show-summary
+              max-height="500px"
+              style="width: 100%"
+          >
+            <el-table-column prop="FSEQ" label="序号" align="center" width="50" fixed="left"></el-table-column>
+            <el-table-column
+                prop="FMaterialId"
+                label="物料代码"
+                min-width="150"
+                fixed="left"
+                align="center">
+            </el-table-column>
+            <el-table-column
+                prop="FMaterialName"
+                label="物料名称"
+                min-width="150"
+                align="center">
+            </el-table-column>
+            <el-table-column
+                prop="FMaterialModel"
+                label="规格型号"
+                min-width="150"
+                align="center">
+            </el-table-column>
+            <el-table-column
+                prop="FUnitID"
+                label="单位"
+                min-width="150"
+                align="center">
+            </el-table-column>
+            <el-table-column
+                prop="FQty"
+                label="询价数量"
+                min-width="100"
+                align="center">
+            </el-table-column>
+            <el-table-column
+                prop="FPrice"
+                label="单价"
+                min-width="100"
+                align="center">
+              <template slot-scope="scop">
+                <el-input type="number" v-model="scop.row.FPrice" v-show="priceInput"
+                          @input="updatePrice(scop.row)"></el-input>
+                <span v-show="!priceInput">{{ scop.row.FPrice }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+                prop="FTaxRate"
+                label="税率%"
+                min-width="100"
+                align="center">
+              <template slot-scope="scop">
+                <el-input type="number" v-model="scop.row.FTaxRate" v-show="priceInput"
+                          @input="updatePrice(scop.row)"></el-input>
+                <span v-show="!priceInput">{{ scop.row.FTaxRate }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+                prop="FTaxPrice"
+                label="含税单价"
+                min-width="110"
+                align="center">
+            </el-table-column>
+            <el-table-column
+                prop="FNote"
+                label="备注"
+                align="center"
+                width="240">
+            </el-table-column>
+            <el-table-column
+                prop="FPayConditionId"
+                label="付款方式"
+                align="center"
+                width="240">
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+
+
+import {queryData, queryDataItem, saveData} from "@/api/login";
+
+export default {
+  name: "master",
+  components: {},
+  data() {
+    return {
+      labelPosition: 'right',
+      list: [],
+      fileList: [],
+      data: {
+        FormId: "kafe2f22a0498441f9109c31cf5586da5",
+        FieldKeys: '',
+        FilterString: "FBILLNO like'%BJ23060004'",
+        OrderString: "",
+        TopRowCount: "0",
+        StartRow: "0",
+        Limit: 100
+      },
+      tableKey: 0,
+      FBILLNO: undefined,
+      username: undefined,
+      password: undefined,
+      // 折叠信息激活状态
+      activeNames: '1',
+      //组件的刷新
+      timer: '',
+      priceInput: false,
+      view: true,
+      //多选
+      multipleSelection: [],
+      listQuery: {
+        currentPage: 1,
+        pageSize: 10,
+        id: undefined,
+        type: undefined,
+      },
+      ruleFrom: {},
+      saveFrom: {
+        Creator: "String",
+        NeedUpDateFields: [],
+        IsAutoSubmitAndAudit: true,
+        Model: {
+          FID: '',
+          //供应商确认
+          FIsConfirm: true,
+          //供应商确认时间
+          FConfirmDate: '',
+          //供应商提交时间
+          FQuoteDate: '',
+          //供应商信息明细表：FEntryID 分录ID，FQty 询价数量，FPrice 单价，FTaxRate 税率，FTaxPrice 含税单价
+          FEntity: []
+        }
+      },
+      rules: {
+        FSupplierId: [{required: true, message: '请输入供应商编码', trigger: ['blur', 'change']}],
+        FExpiryDate: [{required: true, message: '请选择报价截至日期', trigger: ['blur', 'change']}],
+        FOpenDate: [{required: true, message: '请选择开标日期', trigger: ['blur', 'change']}],
+      },
+    }
+  },
+  created() {
+    if (this.$route.query.FBILLNO!==undefined && this.$route.query.username!==undefined && this.$route.query.password!==undefined){
+      this.FBILLNO = this.$route.query.FBILLNO
+      this.username = this.$route.query.username
+      this.password = this.$route.query.password
+      this.ruleFromData();
+      this.listData();
+    }else {
+      this.handleWarning("请重新登录");
+      if (this.$route.query.FBILLNO!==undefined){
+        this.$router.push({
+          path: "/?FBILLNO="+this.$route.query.FBILLNO,
+        });
+      }else {
+        this.handleWarning("请重新打开链接");
+        this.$router.push({
+          path: "/",
+        });
+      }
+
+    }
+
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    // 文件上传对返回的Json数据进行解析
+    onSuccess(response,file,fileList){
+      if(response.status == 0){
+        this.$message({
+          message:response.message,
+          type: 'error'
+        })
+      }else{
+        this.$message({
+          message:response.message,
+          type: 'success'
+        })
+      }
+    },
+
+    updatePrice(row) {
+      row.FTaxPrice = (Number(row.FPrice == "" ? 0 : row.FPrice) * (1 + (Number(row.FTaxRate == "" ? 0 : row.FTaxRate) / 100))).toFixed(2);
+      console.log(row)
+    },
+    // priceInputView() {
+    //   if (this.ruleFrom.FIsIncludedTax == 1) {
+    //     this.priceInput = true;
+    //   } else {
+    //     this.priceInput = false;
+    //   }
+    // },
+    saveData(IsAutoAdjustField) {
+      let query = {
+        FID: this.ruleFrom.FID,
+        IsAutoAdjustField: IsAutoAdjustField,
+        FEntity: []
+      }
+      if (IsAutoAdjustField === 'true') {
+        query.FQuoteDate = this.ruleFrom.FQuoteDate
+      }
+      if (this.list !== undefined && this.list.length > 0) {
+        for (let i = 0; i < this.list.length; i++) {
+          let item = {
+            FEntryID: this.list[i].FEntryID,
+            FQty: this.list[i].FQty,
+            FPrice: this.list[i].FPrice,
+            FTaxRate: this.list[i].FTaxRate,
+            FTaxPrice: this.list[i].FTaxPrice,
+            // FMaterialId: this.list[i].FMaterialId,
+          }
+          query.FEntity.push(item);
+        }
+      }
+      saveData(query).then(res => {
+        console.log(res.data.Result.ResponseStatus.IsSuccess)
+        if (res.data.Result.ResponseStatus.IsSuccess === true){
+          switch (IsAutoAdjustField){
+            case 'true':
+                  this.handleSuccess('提交成功');
+                  break;
+            case 'false':
+                  this.handleSuccess('保存成功');
+                  break;
+          }
+          this.listData()
+          this.ruleFromData();
+        }else {
+          switch (IsAutoAdjustField){
+            case 'true':
+              this.handleWarning('提交失败');
+              break;
+            case 'false':
+              this.handleWarning('保存失败');
+              break;
+          }
+        }
+
+      })
+    },
+    ruleFromData() {
+      // this.data.FieldKeys = this.FieldKeysMaster
+      let query = {
+        FBILLNO: this.FBILLNO,
+        username: this.username,
+        password: this.password
+      }
+      queryData(query).then(res => {
+        if (res.data==null){
+          this.handleWarning('获取数据失败，5秒后跳转至重新登录');
+          setTimeout(() => {
+            this.$router.push({
+              path: "/?FBILLNO="+this.$route.query.FBILLNO,
+            });
+          }, 5000);
+        }else {
+          this.ruleFrom = res.data[0]
+          this.view = res.data[0].Status
+          this.priceInput = res.data[0].Status
+        }
+      })
+    },
+    listData() {
+      let query = {
+        FBILLNO: this.FBILLNO,
+        username: this.username,
+        password: this.password
+      }
+      queryDataItem(query).then(res => {
+        this.list = res.data
+      })
+    },
+
+    handleWarning(response) {
+      this.$message({
+        message: response.message || response,
+        type: 'warning',
+        duration: 2000
+      })
+    },
+
+    handleSuccess(response) {
+      this.$message({
+        message: response.message || response,
+        type: 'success',
+        duration: 2000
+      })
+    }
+  },
+}
+</script>
+<style scoped>
+/* 设置表单的居中 */
+.dataForm-style {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 设置基础信息标题的样式 */
+.form-dataForm {
+  width: 100%;
+  height: 47px;
+  text-align: left;
+  line-height: 47px;
+  font-size: 17px;
+  font-weight: 600;
+  margin: 15px 0;
+  border-bottom: 1px solid #e6ebf5;
+  /* border-bottom: 1px solid #0efc61; */
+}
+
+/* 去掉折叠上边框线 */
+::v-deep .el-collapse {
+  border-top: 0;
+}
+
+/* 修改折叠标题样式 */
+::v-deep .form-title .el-collapse-item__header {
+  font-size: 17px;
+  font-weight: 600;
+}
+
+/* 修改折叠标题样式 */
+::v-deep .form-title .el-collapse-item__content {
+  border-bottom: 0;
+}
+
+/* 修改折叠标题箭头样式 */
+::v-deep .form-title .el-collapse-item__header .el-collapse-item__arrow {
+  margin: 0 0 0 5px;
+}
+
+::v-deep .el-divider--horizontal {
+  margin: 10px 0;
+}
+
+/* 去掉数字输入框上下加减按钮 */
+::v-deep input::-webkit-outer-spin-button,
+::v-deep input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+</style>