1
This commit is contained in:
李狗蛋
parent
490577d411
commit
ec897ec7b6
9
vue/src/api/user.js
Normal file
9
vue/src/api/user.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
export function getTenantCodeByUser(data) {
|
||||||
|
return request({
|
||||||
|
url: "/api/account/sysuserdetail/getTenantCodeByUser",
|
||||||
|
method: "post",
|
||||||
|
params: data,
|
||||||
|
});
|
||||||
|
}
|
||||||
BIN
vue/src/assets/logo.png
Normal file
BIN
vue/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
130
vue/src/components/HelloWorld.vue
Normal file
130
vue/src/components/HelloWorld.vue
Normal file
@ -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>
|
||||||
22
vue/src/main.js
Normal file
22
vue/src/main.js
Normal file
@ -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");
|
||||||
34
vue/src/router/index.js
Normal file
34
vue/src/router/index.js
Normal file
@ -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;
|
||||||
5
vue/src/store/getters.js
Normal file
5
vue/src/store/getters.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
const getters = {
|
||||||
|
token: (state) => state.user.token,
|
||||||
|
cookie: (state) => state.user.cookie,
|
||||||
|
};
|
||||||
|
export default getters;
|
||||||
25
vue/src/store/index.js
Normal file
25
vue/src/store/index.js
Normal file
@ -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;
|
||||||
17
vue/src/store/modules/user.js
Normal file
17
vue/src/store/modules/user.js
Normal file
@ -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,
|
||||||
|
};
|
||||||
106
vue/src/styles/btn.scss
Normal file
106
vue/src/styles/btn.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
83
vue/src/styles/element-ui.scss
Normal file
83
vue/src/styles/element-ui.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
31
vue/src/styles/element-variables.scss
Normal file
31
vue/src/styles/element-variables.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
271
vue/src/styles/formgeneratorhome.scss
Normal file
271
vue/src/styles/formgeneratorhome.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
527
vue/src/styles/index.scss
Normal file
527
vue/src/styles/index.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
100
vue/src/styles/mixin.scss
Normal file
100
vue/src/styles/mixin.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
226
vue/src/styles/sidebar.scss
Normal file
226
vue/src/styles/sidebar.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
48
vue/src/styles/transition.scss
Normal file
48
vue/src/styles/transition.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
35
vue/src/styles/variables.scss
Normal file
35
vue/src/styles/variables.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
31
vue/src/utils/auth.js
Normal file
31
vue/src/utils/auth.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
61
vue/src/utils/request.js
Normal file
61
vue/src/utils/request.js
Normal file
@ -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;
|
||||||
5
vue/src/views/AboutView.vue
Normal file
5
vue/src/views/AboutView.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
18
vue/src/views/HomeView.vue
Normal file
18
vue/src/views/HomeView.vue
Normal file
@ -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>
|
||||||
317
vue/src/views/login/login.vue
Normal file
317
vue/src/views/login/login.vue
Normal file
@ -0,0 +1,317 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="login-form">
|
||||||
|
|
||||||
|
<div class="title-container">
|
||||||
|
<h3 class="title">
|
||||||
|
供应商验证
|
||||||
|
</h3>
|
||||||
|
<div class="desc"> </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 ©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>
|
||||||
522
vue/src/views/master/master.vue
Normal file
522
vue/src/views/master/master.vue
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user