wangzhenglan
2 years ago
commit
f6e32cda18
55 changed files with 37041 additions and 0 deletions
@ -0,0 +1,5 @@
|
||||
[*.{js,jsx,ts,tsx,vue}] |
||||
indent_style = space |
||||
indent_size = 2 |
||||
trim_trailing_whitespace = true |
||||
insert_final_newline = true |
||||
@ -0,0 +1,26 @@
|
||||
module.exports = { |
||||
root: true, |
||||
|
||||
env: { |
||||
node: true |
||||
}, |
||||
|
||||
extends: [ |
||||
'plugin:vue/essential', |
||||
'@vue/standard' |
||||
], |
||||
|
||||
parserOptions: { |
||||
parser: 'babel-eslint' |
||||
}, |
||||
|
||||
rules: { |
||||
'no-console': 'off', |
||||
'no-debugger': 'off' |
||||
}, |
||||
|
||||
'extends': [ |
||||
'plugin:vue/essential', |
||||
'@vue/standard' |
||||
] |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
|
||||
|
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,24 @@
|
||||
# jtadmin |
||||
|
||||
## Project setup |
||||
``` |
||||
npm install |
||||
``` |
||||
|
||||
### Compiles and hot-reloads for development |
||||
``` |
||||
npm run serve |
||||
``` |
||||
|
||||
### Compiles and minifies for production |
||||
``` |
||||
npm run build |
||||
``` |
||||
|
||||
### Lints and fixes files |
||||
``` |
||||
npm run lint |
||||
``` |
||||
|
||||
### Customize configuration |
||||
See [Configuration Reference](https://cli.vuejs.org/config/). |
||||
@ -0,0 +1,14 @@
|
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset' |
||||
], |
||||
plugins: [ |
||||
[ |
||||
'component', |
||||
{ |
||||
libraryName: 'element-ui', |
||||
styleLibraryName: 'theme-chalk' |
||||
} |
||||
] |
||||
] |
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
{ |
||||
"name": "jtadmin", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build", |
||||
"lint": "vue-cli-service lint" |
||||
}, |
||||
"dependencies": { |
||||
"axios": "^0.21.1", |
||||
"core-js": "^3.6.5", |
||||
"echarts": "^5.1.1", |
||||
"element-ui": "^2.4.5", |
||||
"sass-loader": "^10.1.1", |
||||
"vue": "^2.6.11", |
||||
"vue-quill-editor": "^3.0.6", |
||||
"vue-router": "^3.2.0", |
||||
"vuex": "^4.0.2" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "~4.5.0", |
||||
"@vue/cli-plugin-eslint": "~4.5.0", |
||||
"@vue/cli-plugin-router": "~4.5.0", |
||||
"@vue/cli-service": "~4.5.0", |
||||
"@vue/eslint-config-standard": "^5.1.2", |
||||
"babel-eslint": "^10.1.0", |
||||
"babel-plugin-component": "^1.1.1", |
||||
"eslint": "^6.7.2", |
||||
"eslint-plugin-import": "^2.20.2", |
||||
"eslint-plugin-node": "^11.1.0", |
||||
"eslint-plugin-promise": "^4.2.1", |
||||
"eslint-plugin-standard": "^4.0.0", |
||||
"eslint-plugin-vue": "^6.2.2", |
||||
"less": "^4.1.1", |
||||
"node-sass": "^7.0.1", |
||||
"vue-cli-plugin-element": "^1.0.1", |
||||
"vue-template-compiler": "^2.6.11", |
||||
"webpack": "^4.46.0", |
||||
"webpack-cli": "^4.10.0" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html> |
||||
<html lang=""> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,17 @@
|
||||
<template> |
||||
<div id="app"> |
||||
<!-- <h3>我是默认访问的页面</h3> --> |
||||
<!-- 添加路由占位符--> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "app" |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -0,0 +1,9 @@
|
||||
import axios from "../util/axios"; |
||||
|
||||
|
||||
export function getMenuList(){ |
||||
return axios({ |
||||
url: '/home/getRightsList', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
@ -0,0 +1,148 @@
|
||||
import axios from "../util/axios"; |
||||
|
||||
|
||||
export function selectProuductList(data) { |
||||
return axios({ |
||||
url: '/prouduct/selectList', |
||||
method: 'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function deleteProuduct(data){ |
||||
return axios({ |
||||
url:'/prouduct/deleteProuduct', |
||||
method:'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function onAddProuduct(data){ |
||||
return axios({ |
||||
url:'/prouduct/onAddProuduct', |
||||
method:'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function updateProuduct(data){ |
||||
return axios({ |
||||
url:'/prouduct/updateProuduct', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function addupdateProuduct(data){ |
||||
return axios({ |
||||
url:'/prouduct/addupdateProuduct', |
||||
method:'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function toExcel(callback){ |
||||
return axios({ |
||||
url:'/prouduct/downloadExcel', |
||||
method:'post', |
||||
procgress: true, |
||||
back: callback, |
||||
responseType:'blob' |
||||
}) |
||||
} |
||||
|
||||
export function onSubmit(data){//data是前端传递给后端的值
|
||||
return axios({ |
||||
url:'/prouduct/onSubmit', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function onbrandslist(){ |
||||
return axios({ |
||||
url:'/prouduct/onbrandslist', |
||||
method:'get' |
||||
}) |
||||
} |
||||
|
||||
export function onchannellist(){ |
||||
return axios({ |
||||
url:'/prouduct/onchannellist', |
||||
method:'get' |
||||
}) |
||||
} |
||||
|
||||
export function ontypelist(){ |
||||
return axios({ |
||||
url:'/prouduct/ontypelist', |
||||
method:'get' |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function inventorylist(data){ |
||||
return axios({ |
||||
url:'/inventory/inventorylist', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function inventorytype(){ |
||||
return axios({ |
||||
url:'/inventory/typelist', |
||||
method:'post' |
||||
}) |
||||
} |
||||
|
||||
export function inventorybrands(){ |
||||
return axios({ |
||||
url:'/inventory/brandslist', |
||||
method:'post' |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function UpInventory(data){//data是前端传递给后端的值
|
||||
return axios({ |
||||
url:'/inventory/UpdateInventory', |
||||
method:'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function inventoryselect(data){//data是前端传递给后端的值
|
||||
return axios({ |
||||
url:'/inventory/select', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function handleDetail(data){//data是前端传递给后端的值
|
||||
return axios({ |
||||
url:'/inventory/handleDetail', |
||||
method:'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function addInventoryList(data){//data是前端传递给后端的值
|
||||
return axios({ |
||||
url:'/inventory/addList', |
||||
method:'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function InventoryExcel(callback){ |
||||
return axios({ |
||||
url:'/inventory/downloadExcel', |
||||
method:'post', |
||||
procgress: true, |
||||
back: callback, |
||||
responseType:'blob' |
||||
})
|
||||
} |
||||
@ -0,0 +1,114 @@
|
||||
import axios from "../util/axios"; |
||||
|
||||
|
||||
export function selectSupplierList(data) { |
||||
return axios({ |
||||
url: '/SupplierList/selectList', |
||||
method: 'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function updateSupplier(data) { |
||||
return axios({ |
||||
url: '/SupplierList/updateSupplier', |
||||
method: 'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function deleteSupplier(data) { |
||||
return axios({ |
||||
url: '/SupplierList/deleteSupplier', |
||||
method: 'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function addupdateSupplier(data) { |
||||
return axios({ |
||||
url: '/SupplierList/addupdateSupplier', |
||||
method: 'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
export function onbrandslist() { |
||||
return axios({ |
||||
url: '/SupplierList/onbrandslist', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function onAddSupplier(data) { |
||||
return axios({ |
||||
url: '/SupplierList/onAddSupplier', |
||||
method: 'post', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function onSubmit(data) { |
||||
return axios({ |
||||
url: '/SupplierList/onSubmit', |
||||
method: 'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function SupplierNum() { |
||||
return axios({ |
||||
url: '/SupplierList/SupplierNum', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
export function selectSupplyList(data){ |
||||
return axios({ |
||||
url:'/Supply/selectSupplyList', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
export function supplyDetail(data){ |
||||
return axios({ |
||||
url:'/Supply/supplyDetail', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
export function onsupply(data){ |
||||
return axios({ |
||||
url:'/Supply/supplyselect', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
export function goodsTypes(){ |
||||
return axios({ |
||||
url:'/Supply/goodsTypes', |
||||
method:'get' |
||||
}) |
||||
} |
||||
|
||||
|
||||
export function Onorder(data){ |
||||
return axios({ |
||||
url:'/Supply/Onorder', |
||||
method:'get', |
||||
params:data |
||||
}) |
||||
} |
||||
@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,331 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2362705" target="_blank" class="nav-more">查看项目</a> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">用户</div> |
||||
<div class="code-name">&#xe612;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">权限</div> |
||||
<div class="code-name">&#xe61e;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">订单</div> |
||||
<div class="code-name">&#xe600;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">统计</div> |
||||
<div class="code-name">&#xe604;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">商 品 </div> |
||||
<div class="code-name">&#xe601;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">用户</div> |
||||
<div class="code-name">&#xe60a;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">锁</div> |
||||
<div class="code-name">&#xe60c;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||
<ul> |
||||
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> |
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下：</p> |
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont iconyonghu"></span> |
||||
<div class="name"> |
||||
用户 |
||||
</div> |
||||
<div class="code-name">.iconyonghu |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont iconquanxian"></span> |
||||
<div class="name"> |
||||
权限 |
||||
</div> |
||||
<div class="code-name">.iconquanxian |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont iconicon--copy"></span> |
||||
<div class="name"> |
||||
订单 |
||||
</div> |
||||
<div class="code-name">.iconicon--copy |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont iconziyuan"></span> |
||||
<div class="name"> |
||||
统计 |
||||
</div> |
||||
<div class="code-name">.iconziyuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont iconshangpin"></span> |
||||
<div class="name"> |
||||
商 品 |
||||
</div> |
||||
<div class="code-name">.iconshangpin |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont iconuser"></span> |
||||
<div class="name"> |
||||
用户 |
||||
</div> |
||||
<div class="code-name">.iconuser |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont iconsuo"></span> |
||||
<div class="name"> |
||||
锁 |
||||
</div> |
||||
<div class="code-name">.iconsuo |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||
<ul> |
||||
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li> |
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont iconxxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#iconyonghu"></use> |
||||
</svg> |
||||
<div class="name">用户</div> |
||||
<div class="code-name">#iconyonghu</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#iconquanxian"></use> |
||||
</svg> |
||||
<div class="name">权限</div> |
||||
<div class="code-name">#iconquanxian</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#iconicon--copy"></use> |
||||
</svg> |
||||
<div class="name">订单</div> |
||||
<div class="code-name">#iconicon--copy</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#iconziyuan"></use> |
||||
</svg> |
||||
<div class="name">统计</div> |
||||
<div class="code-name">#iconziyuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#iconshangpin"></use> |
||||
</svg> |
||||
<div class="name">商 品 </div> |
||||
<div class="code-name">#iconshangpin</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#iconuser"></use> |
||||
</svg> |
||||
<div class="name">用户</div> |
||||
<div class="code-name">#iconuser</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#iconsuo"></use> |
||||
</svg> |
||||
<div class="name">锁</div> |
||||
<div class="code-name">#iconsuo</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||
<ul> |
||||
<li>支持多色图标了，不再受单色限制。</li> |
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,45 @@
|
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1614052170975'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1614052170975#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAXMAAsAAAAAC4QAAAWAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDbAqJNIdOATYCJAMgCxIABCAFhG0HaRvBCciemjyJaVow1cYQ9YblwUNA9lj3VS9JI2kO4AWsG3ia8Wkln6jj/j4+z36aLIS3NF7SVGG7ULqf1kk46XCBjgsC4HL3E3gavj29yG5pVhaGWRkEuMA2OOEizCwBqV1/cMx0a0qwPJvNJTtwFDge0ICyv7HI/sVe7IX4VcTtKWbbxR14GgigJCMairq0uhksCGwTAWjB0ANg4dATERRiqvSAkzHoCBozXE/cArBV+3n6owZZAIwWgT2rW1cyDPkvvU/m8qKMQZERlhVnBXA+B3BAJQAE0CHQvgK4Ea8Eknr+FqEPgMvE6C96iZd62a/w98nBIngPZydLE5fP/8UDcBpBZyAMKAXk9gE7KmHAe0gs4PCeWKDBeyGDplDQQofCBj+bIhwyZFEkow4MAJjKCR+ABACtAegGpmykWRmNUw0Mj2S2l7Ihr+8ra9nikw397X4M2cS6Du7Emid9yi7kn/qwgSYlb3IfPbJO50Iciy9QT6/vE/o8aq/HW6gUquzThuYqUNdHqeLQx9bei6cZ2uFPUyzjgzX3PK3BHm22nzaecbfddko+2WrhV39lyxXStSOf23rPHqeJgx9aLTh6CsTuXoj9iQcKbfn90OGjZWdCbE+cOhnab2St2SVvdaGyIk8gjj3HaqHZzpOhVkdPe5nvORNifeLUsHBiTbEMQT7K2tp4Ciu7DQpabu1tBCyzVeqKsvZP+FffJOr73tYOO/o+xdj/rl8ruW2tJuOONdtcPz7u3XHJdtOxS22f+IPgn150KHyIrGXXg+PK96RsSH7yZO7jpVnDFLWOfB7uFopkSA/Ja7Dz5OrTXorTz51ylkxSvWEVVMbc/uvaSlPirScu2OR3oNL6Fa8a38u53/VyphJbdhAzOEcZYJk1C2oemOtv0WZdEtx52GXdVtjvUFboPulRVuFgcJAtHpPu9seYQYfqf5e/VvslLWZlXr8IMbiojLA+Pwk2NIPg09BpVZUW1y0OZi7aWBf4ZM2X+jo69b2SlvvrgqQk3KRPurHaMbZKWCXnd9ziw4JoG+K8izcv2sfBRq2MvmfCryO7gMLAc4ijIz7Rs126p+GQOCAWTywLPB6ocVqGlc52zkXLvuVk5eSwMMW+KeybjY+1SDsow7ZxO8Ye36hVGEiHWSe3jzLOoR0OEmkTuH+Lt3tXLxxB4KZVE06v14/YXwh1q0LMnC6bYTIBKXHiQCqDg/evq6h82WGlpsq0NnYlXExundm3x6e6PB86l4gqJ6p/D+SzGTrbDaMs9ZaNKqYmBI/VROUGz57UV3j3PWWc/893eBfytNmhSg0mdyLvmHQryhnJ5vNhBgAIDvOrvAFtGT9KLsvYz/eQwxdZXBbg+yD0G/sy/p6S5/iGzP9LrEKt/6Jln332P9P6mYReDdjTgTqy87/XCiQW/AECMQTBbt8HU5o7S6c0FAROfmKGqQPzKAMoPgB88d3h+FqkMuoQBYjpEJyBMSQBZ8pECmwl0Fhqgc7UFJQClJ23REBAolgCyMcyAYiPC8C4zgLn4yVSYL+AJho/QOcTCUqfwPlGSzYxVkUCHpDwMBocQ8wQq6NEk2SllzZiWq8ZEOwijdqKBZEJoYQq1dypMqzDQhF7RAOdKEkUogRWi0qF52GNhkWcwKrwkBSrlCQuM67qmKAvih1itWClJQE2QIINQxg0BoExhKVDKeMlVp7vb4TR9DQGCBE9n+ytMIGImR4hAbGIT4Ask+sS9WxKtciAlgiJohQE6lzM0kIoJSum4XEWAhe8TAUbIomFMkOUk4k46kcllcdWr9TO6QkAhb3ZDBhxEqSRTgaZJKFvWR2t1Fvw+gHdKCPxJ04TEyNncWNm48xYgMVCVOIQzTE6E72IBVLUswA=') format('woff2'), |
||||
url('iconfont.woff?t=1614052170975') format('woff'), |
||||
url('iconfont.ttf?t=1614052170975') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1614052170975#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.iconyonghu:before { |
||||
content: "\e612"; |
||||
} |
||||
|
||||
.iconquanxian:before { |
||||
content: "\e61e"; |
||||
} |
||||
|
||||
.iconicon--copy:before { |
||||
content: "\e600"; |
||||
} |
||||
|
||||
.iconziyuan:before { |
||||
content: "\e604"; |
||||
} |
||||
|
||||
.iconshangpin:before { |
||||
content: "\e601"; |
||||
} |
||||
|
||||
.iconuser:before { |
||||
content: "\e60a"; |
||||
} |
||||
|
||||
.iconsuo:before { |
||||
content: "\e60c"; |
||||
} |
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,58 @@
|
||||
{ |
||||
"id": "2362705", |
||||
"name": "JT项目图标", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon", |
||||
"description": "京淘项目中使用的图标", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "1135940", |
||||
"name": "用户", |
||||
"font_class": "yonghu", |
||||
"unicode": "e612", |
||||
"unicode_decimal": 58898 |
||||
}, |
||||
{ |
||||
"icon_id": "2836957", |
||||
"name": "权限", |
||||
"font_class": "quanxian", |
||||
"unicode": "e61e", |
||||
"unicode_decimal": 58910 |
||||
}, |
||||
{ |
||||
"icon_id": "7722152", |
||||
"name": "订单", |
||||
"font_class": "icon--copy", |
||||
"unicode": "e600", |
||||
"unicode_decimal": 58880 |
||||
}, |
||||
{ |
||||
"icon_id": "9008792", |
||||
"name": "统计", |
||||
"font_class": "ziyuan", |
||||
"unicode": "e604", |
||||
"unicode_decimal": 58884 |
||||
}, |
||||
{ |
||||
"icon_id": "19609047", |
||||
"name": "商 品 ", |
||||
"font_class": "shangpin", |
||||
"unicode": "e601", |
||||
"unicode_decimal": 58881 |
||||
}, |
||||
{ |
||||
"icon_id": "2459201", |
||||
"name": "用户", |
||||
"font_class": "user", |
||||
"unicode": "e60a", |
||||
"unicode_decimal": 58890 |
||||
}, |
||||
{ |
||||
"icon_id": "11746775", |
||||
"name": "锁", |
||||
"font_class": "suo", |
||||
"unicode": "e60c", |
||||
"unicode_decimal": 58892 |
||||
} |
||||
] |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,38 @@
|
||||
/* 定义全局样式表 */ |
||||
html, |
||||
body, |
||||
#app { |
||||
height: 100%; |
||||
width: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
/* 定义最小宽度 */ |
||||
min-width: 1366px; |
||||
} |
||||
|
||||
/* 定义卡片样式 */ |
||||
.el-card { |
||||
margin-top: 15px; |
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important; |
||||
} |
||||
|
||||
/* 定义表格上边距*/ |
||||
.el-table { |
||||
margin-top: 15px; |
||||
} |
||||
|
||||
/* 定义分页上边距*/ |
||||
.el-pagination { |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
} |
||||
|
||||
/* 定义富文本编辑器的宽度 */ |
||||
.ql-editor { |
||||
min-height: 350px; |
||||
} |
||||
|
||||
video { |
||||
min-height: 200px; |
||||
min-width: 100%; |
||||
} |
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,212 @@
|
||||
<template> |
||||
<div> |
||||
<el-form ref="addInventory" :inline="true" :model="addInventory" class="demo-form-inline" label-width="100px" :rules="rules"> |
||||
<el-row style="padding-right:800px;" > |
||||
<el-col span="24"> |
||||
<el-form-item label="产品编码" prop="productNum"> |
||||
<el-input v-model="addInventory.productNum" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="产品名称" prop="productName"> |
||||
<el-input v-model="addInventory.productName" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="产品类型" prop="productType"> |
||||
<el-select v-model="addInventory.productType" > |
||||
<el-option v-for="item in typelist" :key="item.type" :value="item.type"></el-option> |
||||
{{item}} |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="品牌" prop="productBrands"> |
||||
<el-select v-model="addInventory.productBrands" > |
||||
<el-option v-for="item in brandslist" :key="item.brands" :value="item.brands"></el-option> |
||||
{{item}} |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="总库存量" prop="allStock"> |
||||
<el-input v-model="addInventory.allStock" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="现余库存" prop="remainingQty"> |
||||
<el-input v-model="addInventory.remainingQty" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-left:250px"> |
||||
<el-col span="2"> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="addInventoryList">添加</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col span="2"> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="$router.go(0)">返回</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
</el-form> |
||||
|
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {addInventoryList} from'@/api/prouduct.js' |
||||
// import {inventorybrands} from '@/api/prouduct.js' |
||||
// import {inventorytype}from '@/api/prouduct.js' |
||||
import {onbrandslist} from '@/api/prouduct.js' |
||||
import {ontypelist} from '@/api/prouduct.js' |
||||
|
||||
export default { |
||||
data(){ |
||||
const sureType =(rules,value,callback) => { |
||||
if (!value) { |
||||
return callback(new Error('请选择产品类型')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
const sureBrands=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('请选择品牌')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
return{ |
||||
addInventory:{ |
||||
productNum:'', |
||||
productName:'', |
||||
productType:'', |
||||
productBrands:'', |
||||
allStock:'', |
||||
remainingQty:'' |
||||
}, |
||||
brandslist:[], |
||||
typelist:[], |
||||
rules:{ |
||||
productNum:[ |
||||
{ required: true, message: '产品编码不能为空',trigger: 'blur'} |
||||
], |
||||
productName:[ |
||||
{required:true,message:'产品名称不能为空',trigger:'blur'}, |
||||
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
||||
], |
||||
productType:[ |
||||
{required:true,validator:sureType,trigger:'change'} |
||||
], |
||||
productBrands:[ |
||||
{ required: true,validator:sureBrands, trigger: "change"} |
||||
], |
||||
allStock:[ |
||||
{required:true,message:'产品总量不能为空',trigger:'blur'} |
||||
], |
||||
remainingQty:[ |
||||
{required:true,message:'现余库存不能为空',trigger:'blur'} |
||||
] |
||||
} |
||||
|
||||
|
||||
} |
||||
}, |
||||
methods:{ |
||||
addInventoryList(){ |
||||
this.$refs.addInventory.validate((valid)=>{ |
||||
if(valid){ |
||||
addInventoryList(this.addInventory).then((response)=>{ |
||||
if(response.code !==200)return this.$message.error("添加失败") |
||||
this.$message.success("添加成功") |
||||
}) |
||||
this.$refs.addInventory.resetFields(); |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
|
||||
|
||||
// //下拉框brandslist |
||||
// inventorybrands(){ |
||||
// inventorybrands().then((response)=>{ |
||||
// // console.log(response) |
||||
// this.brandslist=response.data |
||||
// }) |
||||
// }, |
||||
|
||||
|
||||
// //下拉框typelist |
||||
// inventorytype(){ |
||||
// inventorytype().then((response)=>{ |
||||
// console.log(response) |
||||
// this.typelist=response.data |
||||
// //console.log(this.typelist) |
||||
// }) |
||||
// } |
||||
|
||||
//下拉框brandslist |
||||
onbrandslist(){ |
||||
onbrandslist().then((response)=>{ |
||||
// console.log(response) |
||||
this.brandslist=response.data |
||||
}) |
||||
}, |
||||
|
||||
|
||||
//下拉框typelist |
||||
ontypelist(){ |
||||
ontypelist().then((response)=>{ |
||||
console.log(response) |
||||
this.typelist=response.data |
||||
}) |
||||
} |
||||
|
||||
// activated(){ |
||||
// this.addbrandlist=this.$router.params.addbrands |
||||
// } |
||||
// onBack(){ |
||||
// this.$router.push({path:"/prouduct"}) |
||||
// } |
||||
|
||||
|
||||
}, |
||||
|
||||
|
||||
created() { |
||||
this.ontypelist(); |
||||
this.onbrandslist(); |
||||
} |
||||
|
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,276 @@
|
||||
<template> |
||||
<div> |
||||
<el-form ref="addProuduct" :inline="true" :model="addProuduct" class="demo-form-inline" label-width="100px" :rules="rules"> |
||||
<el-row style="padding-right:800px;" > |
||||
<el-col span="24"> |
||||
<el-form-item label="产品编码:" prop="num"> |
||||
<el-input v-model="addProuduct.num" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="产品名称:" prop="name"> |
||||
<el-input v-model="addProuduct.name" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="产品类型:" prop="type"> |
||||
<el-select v-model="addProuduct.type" > |
||||
<el-option v-for="item in addtypelist" :key="item.type" :value="item.type"></el-option> |
||||
{{item}} |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="流通商品:" prop="state"> |
||||
<el-select v-model="addProuduct.state" > |
||||
<el-option label="是" value='1'></el-option> |
||||
<el-option label="否" value='0'></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="产品规格:" prop="size"> |
||||
<el-input v-model="addProuduct.size" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="产品功效:" prop="benefits"> |
||||
<el-input v-model="addProuduct.benefits" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="品牌:" prop="brands"> |
||||
<el-select v-model="addProuduct.brands" > |
||||
<el-option v-for="item in addbrandslist" :key="item.brands" :value="item.brands"></el-option> |
||||
{{item}} |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:800px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="产品组渠道:" prop="channel"> |
||||
<el-select v-model="addProuduct.channel" > |
||||
<el-option v-for="item in addchannellist" :key="item.channel" :value="item.channel"></el-option> |
||||
{{item}} |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-left:250px"> |
||||
<el-col span="2"> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="onAddProuduct">添加</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col span="2"> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="$router.go(0)">返回</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
</el-form> |
||||
|
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {onAddProuduct} from'@/api/prouduct.js' |
||||
import {onbrandslist} from '@/api/prouduct.js' |
||||
import {onchannellist}from '@/api/prouduct.js' |
||||
import {ontypelist}from '@/api/prouduct.js' |
||||
|
||||
export default { |
||||
data(){ |
||||
const sureNum=(rules,value,callback)=>{ |
||||
|
||||
var checkNumber=/\D/ |
||||
if (!value) { |
||||
return callback(new Error('产品编码不能为空')) |
||||
}else if(checkNumber.test(value)){ |
||||
return callback(new Error('产品编码必须是数字')) |
||||
} else { |
||||
callback(); |
||||
} |
||||
|
||||
}; |
||||
|
||||
const sureType =(rules,value,callback) => { |
||||
if (!value) { |
||||
return callback(new Error('请选择产品类型')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
const sureState=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('请选择是否流通')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
const sureSize=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('产品规格不能为空')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
const sureBenefits=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('产品功效不能为空')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
const sureBrands=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('请选择品牌')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
const sureChannel=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('请选择产品渠道')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
} |
||||
|
||||
|
||||
return{ |
||||
addProuduct:{ |
||||
num: '', |
||||
name: '', |
||||
type:'', |
||||
state:'', |
||||
size:'', |
||||
benefits:'', |
||||
brands:'', |
||||
channel:'' |
||||
}, |
||||
addbrandslist:[], |
||||
addchannellist:[], |
||||
addtypelist:[], |
||||
rules:{ |
||||
num:[ |
||||
{ required: true,validator:sureNum,trigger: 'blur'} |
||||
|
||||
], |
||||
name: [ |
||||
{ required: true, message: '产品名称不能为空', trigger: 'blur' }, |
||||
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
||||
], |
||||
type:[ |
||||
{ required: true,validator:sureType, trigger: "change"} |
||||
], |
||||
state:[ |
||||
{ required: true,validator:sureState, trigger: "change"} |
||||
], |
||||
size:[ |
||||
{ required: true,validator:sureSize, trigger: "change"} |
||||
], |
||||
benefits:[ |
||||
{ required: true,validator:sureBenefits, trigger: "change"} |
||||
], |
||||
brands:[ |
||||
{ required: true,validator:sureBrands, trigger: "change"} |
||||
], |
||||
channel:[ |
||||
{ required: true,validator:sureChannel, trigger: "change"} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
methods:{ |
||||
|
||||
onAddProuduct(){ |
||||
this.$refs.addProuduct.validate((valid)=>{ |
||||
if(valid){ |
||||
onAddProuduct(this.addProuduct).then((response)=>{ |
||||
if(response.code !==200)return this.$message.error("添加失败") |
||||
this.$message.success("添加成功") |
||||
}) |
||||
this.$refs.addProuduct.resetFields(); |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
|
||||
//下拉框brandslist |
||||
onbrandslist(){ |
||||
onbrandslist().then((response)=>{ |
||||
// console.log(response) |
||||
this.addbrandslist=response.data |
||||
}) |
||||
}, |
||||
|
||||
//下拉框channellist |
||||
onchannellist(){ |
||||
onchannellist().then((response)=>{ |
||||
console.log(response) |
||||
this.addchannellist=response.data |
||||
}) |
||||
}, |
||||
|
||||
//下拉框typelist |
||||
ontypelist(){ |
||||
ontypelist().then((response)=>{ |
||||
console.log(response) |
||||
this.addtypelist=response.data |
||||
}) |
||||
}, |
||||
|
||||
// activated(){ |
||||
// this.addbrandlist=this.$router.params.addbrands |
||||
// } |
||||
// onBack(){ |
||||
// this.$router.push({path:"/prouduct"}) |
||||
// } |
||||
|
||||
|
||||
}, |
||||
|
||||
|
||||
created() { |
||||
this.onbrandslist(); |
||||
this.onchannellist(); |
||||
this.ontypelist(); |
||||
} |
||||
|
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,287 @@
|
||||
<template> |
||||
<div> |
||||
<el-steps :active="active" finish-status="success"> |
||||
<el-step title="步骤 1"></el-step> |
||||
<el-step title="步骤 2"></el-step> |
||||
</el-steps> |
||||
|
||||
<el-form ref="addSupplier" :inline="true" :model="addSupplier" :rules="rules" class="demo-form-inline" label-width="100px" title="供应商基本信息" v-if="active==0"> |
||||
<el-row style="padding-right:100px;" > |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商编码" prop="supplierNum" > |
||||
<el-input v-model="addSupplier.supplierNum" disabled ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商名称" prop="supplierName"> |
||||
<el-input v-model="addSupplier.supplierName" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商品牌" prop="supplierBrands"> |
||||
<el-select v-model="addSupplier.supplierBrands" > |
||||
<el-option v-for="item in addbrandslist" :key="item.brands" :value="item.brands"></el-option> |
||||
{{item}} |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商联系人" prop="supplierContact"> |
||||
<el-input v-model="addSupplier.supplierContact" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="联系电话" prop="supplierNumber"> |
||||
<el-input v-model="addSupplier.supplierNumber"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
|
||||
|
||||
<el-form ref="addSupplier2" :inline="true" :model="addSupplier2" :rules="rules2" class="demo-form-inline" label-width="100px" title="供应商基本信息" v-if="active==1"> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商收件人" prop="supplierReceiver"> |
||||
<el-input v-model="addSupplier2.supplierReceiver"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商邮箱号" prop="supplierEmail"> |
||||
<el-input v-model="addSupplier2.supplierEmail"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商起始日" prop="supplierStartDate"> |
||||
<el-date-picker v-model="addSupplier2.supplierStartDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商终止日" prop="supplierTerminationDate"> |
||||
<el-date-picker v-model="addSupplier2.supplierTerminationDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-left:85px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商地址" prop="supplierAddress"> |
||||
<el-input v-model="addSupplier2.supplierAddress" style="width:400px"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
</el-form> |
||||
|
||||
|
||||
|
||||
<el-button style="margin-top: 12px;" @click="next" v-if="active==0">下一步</el-button> |
||||
<el-button style="margin-top: 12px;" @click="back" v-if="active==1">上一步</el-button> |
||||
<el-button style="margin-top: 12px;" @click="sure" v-if="active==1">添加</el-button> |
||||
<el-button style="margin-top: 12px;" @click="keep" v-if="active==2">返回</el-button> |
||||
|
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {onAddSupplier} from'@/api/supplier.js' |
||||
import {onbrandslist} from '@/api/prouduct.js' |
||||
import {ontypelist}from '@/api/prouduct.js' |
||||
import {SupplierNum} from '@/api/supplier.js' |
||||
|
||||
export default { |
||||
data(){ |
||||
const sureBrands=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('请选择品牌')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
const sureNumber=(rules,value,callback)=>{ |
||||
var checkNumber=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ |
||||
if(!value){ |
||||
return callback(new Error('联系电话不能为空')) |
||||
}else if(checkNumber.test(value)){ |
||||
return callback() |
||||
}else{ |
||||
callback(new Error('手机号格式不正确')); |
||||
} |
||||
}; |
||||
const sureEmail=(rules2,value,callback)=>{ |
||||
var checkEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ |
||||
if(!value){ |
||||
return callback(new Error('邮箱不能为空')) |
||||
}else if(checkEmail.test(value)){ |
||||
return callback(); |
||||
}else{ |
||||
callback(new Error('邮箱格式不正确')); |
||||
} |
||||
}; |
||||
const sureDate=(rules2,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('日期不能为空')) |
||||
}else{ |
||||
return callback(); |
||||
} |
||||
}; |
||||
return{ |
||||
active:0, |
||||
addSupplier:{ |
||||
}, |
||||
addSupplier2:{ |
||||
|
||||
}, |
||||
addbrandslist:[], |
||||
addchannellist:[], |
||||
addtypelist:[], |
||||
rules:{ |
||||
supplierName:[ |
||||
{required:true,message:'产品名称不能为空',trigger:'blur'}, |
||||
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
||||
], |
||||
supplierBrands:[ |
||||
{required:true,validator:sureBrands,trigger:'change'} |
||||
], |
||||
supplierContact:[ |
||||
{ required: true,message:'联系人不能为空', trigger: "change"} |
||||
], |
||||
supplierNumber:[ |
||||
{required:true,validator:sureNumber, trigger:'blur'} |
||||
] |
||||
|
||||
}, |
||||
rules2:{ |
||||
supplierReceiver:[ |
||||
{required:true,message:'收件人不能为空', trigger:'blur'} |
||||
], |
||||
supplierEmail:[ |
||||
{required:true,validator:sureEmail, trigger:'blur'} |
||||
], |
||||
supplierStartDate:[ |
||||
{required:true,validator:sureDate, trigger:'blur'} |
||||
], |
||||
supplierTerminationDate:[ |
||||
{required:true,validator:sureDate, trigger:'blur'} |
||||
], |
||||
supplierAddress:[ |
||||
{required:true,message:'供应商地址不能为空',trigger:'blur'} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
methods:{ |
||||
next() { |
||||
this.$refs.addSupplier.validate((valid)=>{ |
||||
if(valid){ |
||||
if (this.active++ > 2) this.active = 0; |
||||
} |
||||
|
||||
}) |
||||
}, |
||||
|
||||
back(){ |
||||
if (this.active-- > 2) this.active = 0; |
||||
}, |
||||
|
||||
keep(){ |
||||
location.reload(true) |
||||
}, |
||||
|
||||
|
||||
sure(){ |
||||
let Supplier={} |
||||
Supplier.supplierNum=this.addSupplier.supplierNum |
||||
Supplier.supplierName=this.addSupplier.supplierName |
||||
Supplier.supplierBrands=this.addSupplier.supplierBrands |
||||
Supplier.supplierContact=this.addSupplier.supplierContact |
||||
Supplier.supplierNumber=this.addSupplier.supplierNumber |
||||
Supplier.supplierReceiver=this.addSupplier2.supplierReceiver |
||||
Supplier.supplierEmail=this.addSupplier2.supplierEmail |
||||
Supplier.supplierStartDate=this.addSupplier2.supplierStartDate |
||||
Supplier.supplierTerminationDate=this.addSupplier2.supplierTerminationDate |
||||
Supplier.supplierAddress=this.addSupplier2.supplierAddress |
||||
this.$refs.addSupplier2.validate((valid)=>{ |
||||
if(valid){ |
||||
onAddSupplier(Supplier).then((response)=>{ |
||||
if(response.code !==200)return this.$message.error("添加失败") |
||||
this.$message.success("添加成功") |
||||
this.active=2; |
||||
}) |
||||
|
||||
} |
||||
}) |
||||
|
||||
|
||||
}, |
||||
|
||||
|
||||
//下拉框brandslist |
||||
onbrandslist(){ |
||||
onbrandslist().then((response)=>{ |
||||
// console.log(response) |
||||
this.addbrandslist=response.data |
||||
}) |
||||
}, |
||||
|
||||
|
||||
//下拉框typelist |
||||
ontypelist(){ |
||||
ontypelist().then((response)=>{ |
||||
console.log(response) |
||||
this.addtypelist=response.data |
||||
}) |
||||
}, |
||||
|
||||
|
||||
//拿到添加供应商编码 |
||||
SupplierNum(){ |
||||
SupplierNum().then((response)=>{ |
||||
console.log(response) |
||||
this.addSupplier.supplierNum=response.data |
||||
}) |
||||
} |
||||
|
||||
// activated(){ |
||||
// this.addbrandlist=this.$router.params.addbrands |
||||
// } |
||||
// onBack(){ |
||||
// this.$router.push({path:"/prouduct"}) |
||||
// } |
||||
|
||||
|
||||
}, |
||||
|
||||
|
||||
created() { |
||||
this.onbrandslist(); |
||||
this.ontypelist(); |
||||
this.SupplierNum(); |
||||
} |
||||
|
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,287 @@
|
||||
<template> |
||||
<div> |
||||
<el-steps :active="active" finish-status="success"> |
||||
<el-step title="步骤 1"></el-step> |
||||
<el-step title="步骤 2"></el-step> |
||||
</el-steps> |
||||
|
||||
<el-form ref="addSupplier" :inline="true" :model="addSupplier" :rules="rules" class="demo-form-inline" label-width="100px" title="供应商基本信息" v-if="active==0"> |
||||
<el-row style="padding-right:100px;" > |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商编码" prop="supplierNum" > |
||||
<el-input v-model="addSupplier.supplierNum" disabled ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商名称" prop="supplierName"> |
||||
<el-input v-model="addSupplier.supplierName" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商品牌" prop="supplierBrands"> |
||||
<el-select v-model="addSupplier.supplierBrands" > |
||||
<el-option v-for="item in addbrandslist" :key="item.brands" :value="item.brands"></el-option> |
||||
{{item}} |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商联系人" prop="supplierContact"> |
||||
<el-input v-model="addSupplier.supplierContact" ></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="联系电话" prop="supplierNumber"> |
||||
<el-input v-model="addSupplier.supplierNumber"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
|
||||
|
||||
<el-form ref="addSupplier2" :inline="true" :model="addSupplier2" :rules="rules2" class="demo-form-inline" label-width="100px" title="供应商基本信息" v-if="active==1"> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商收件人" prop="supplierReceiver"> |
||||
<el-input v-model="addSupplier2.supplierReceiver"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商邮箱号" prop="supplierEmail"> |
||||
<el-input v-model="addSupplier2.supplierEmail"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商起始日" prop="supplierStartDate"> |
||||
<el-date-picker v-model="addSupplier2.supplierStartDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-right:100px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商终止日" prop="supplierTerminationDate"> |
||||
<el-date-picker v-model="addSupplier2.supplierTerminationDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="padding-left:85px;"> |
||||
<el-col span="24"> |
||||
<el-form-item label="供应商地址" prop="supplierAddress"> |
||||
<el-input v-model="addSupplier2.supplierAddress" style="width:400px"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
</el-form> |
||||
|
||||
|
||||
|
||||
<el-button style="margin-top: 12px;" @click="next" v-if="active==0">下一步</el-button> |
||||
<el-button style="margin-top: 12px;" @click="back" v-if="active==1">上一步</el-button> |
||||
<el-button style="margin-top: 12px;" @click="sure" v-if="active==1">添加</el-button> |
||||
<el-button style="margin-top: 12px;" @click="keep" v-if="active==2">返回</el-button> |
||||
|
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {onAddSupplier} from'@/api/supplier.js' |
||||
import {onbrandslist} from '@/api/prouduct.js' |
||||
import {ontypelist}from '@/api/prouduct.js' |
||||
import {SupplierNum} from '@/api/supplier.js' |
||||
|
||||
export default { |
||||
data(){ |
||||
const sureBrands=(rules,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('请选择品牌')) |
||||
}else{ |
||||
callback(); |
||||
} |
||||
}; |
||||
const sureNumber=(rules,value,callback)=>{ |
||||
var checkNumber=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ |
||||
if(!value){ |
||||
return callback(new Error('联系电话不能为空')) |
||||
}else if(checkNumber.test(value)){ |
||||
return callback() |
||||
}else{ |
||||
callback(new Error('手机号格式不正确')); |
||||
} |
||||
}; |
||||
const sureEmail=(rules2,value,callback)=>{ |
||||
var checkEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ |
||||
if(!value){ |
||||
return callback(new Error('邮箱不能为空')) |
||||
}else if(checkEmail.test(value)){ |
||||
return callback(); |
||||
}else{ |
||||
callback(new Error('邮箱格式不正确')); |
||||
} |
||||
}; |
||||
const sureDate=(rules2,value,callback)=>{ |
||||
if(!value){ |
||||
return callback(new Error('日期不能为空')) |
||||
}else{ |
||||
return callback(); |
||||
} |
||||
}; |
||||
return{ |
||||
active:0, |
||||
addSupplier:{ |
||||
}, |
||||
addSupplier2:{ |
||||
|
||||
}, |
||||
addbrandslist:[], |
||||
addchannellist:[], |
||||
addtypelist:[], |
||||
rules:{ |
||||
supplierName:[ |
||||
{required:true,message:'产品名称不能为空',trigger:'blur'}, |
||||
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
||||
], |
||||
supplierBrands:[ |
||||
{required:true,validator:sureBrands,trigger:'change'} |
||||
], |
||||
supplierContact:[ |
||||
{ required: true,message:'联系人不能为空', trigger: "change"} |
||||
], |
||||
supplierNumber:[ |
||||
{required:true,validator:sureNumber, trigger:'blur'} |
||||
] |
||||
|
||||
}, |
||||
rules2:{ |
||||
supplierReceiver:[ |
||||
{required:true,message:'收件人不能为空', trigger:'blur'} |
||||
], |
||||
supplierEmail:[ |
||||
{required:true,validator:sureEmail, trigger:'blur'} |
||||
], |
||||
supplierStartDate:[ |
||||
{required:true,validator:sureDate, trigger:'blur'} |
||||
], |
||||
supplierTerminationDate:[ |
||||
{required:true,validator:sureDate, trigger:'blur'} |
||||
], |
||||
supplierAddress:[ |
||||
{required:true,message:'供应商地址不能为空',trigger:'blur'} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
methods:{ |
||||
next() { |
||||
this.$refs.addSupplier.validate((valid)=>{ |
||||
if(valid){ |
||||
if (this.active++ > 2) this.active = 0; |
||||
} |
||||
|
||||
}) |
||||
}, |
||||
|
||||
back(){ |
||||
if (this.active-- > 2) this.active = 0; |
||||
}, |
||||
|
||||
keep(){ |
||||
location.reload(true) |
||||
}, |
||||
|
||||
|
||||
sure(){ |
||||
let Supplier={} |
||||
Supplier.supplierNum=this.addSupplier.supplierNum |
||||
Supplier.supplierName=this.addSupplier.supplierName |
||||
Supplier.supplierBrands=this.addSupplier.supplierBrands |
||||
Supplier.supplierContact=this.addSupplier.supplierContact |
||||
Supplier.supplierNumber=this.addSupplier.supplierNumber |
||||
Supplier.supplierReceiver=this.addSupplier2.supplierReceiver |
||||
Supplier.supplierEmail=this.addSupplier2.supplierEmail |
||||
Supplier.supplierStartDate=this.addSupplier2.supplierStartDate |
||||
Supplier.supplierTerminationDate=this.addSupplier2.supplierTerminationDate |
||||
Supplier.supplierAddress=this.addSupplier2.supplierAddress |
||||
this.$refs.addSupplier2.validate((valid)=>{ |
||||
if(valid){ |
||||
onAddSupplier(Supplier).then((response)=>{ |
||||
if(response.code !==200)return this.$message.error("添加失败") |
||||
this.$message.success("添加成功") |
||||
this.active=2; |
||||
}) |
||||
|
||||
} |
||||
}) |
||||
|
||||
|
||||
}, |
||||
|
||||
|
||||
//下拉框brandslist |
||||
onbrandslist(){ |
||||
onbrandslist().then((response)=>{ |
||||
// console.log(response) |
||||
this.addbrandslist=response.data |
||||
}) |
||||
}, |
||||
|
||||
|
||||
//下拉框typelist |
||||
ontypelist(){ |
||||
ontypelist().then((response)=>{ |
||||
console.log(response) |
||||
this.addtypelist=response.data |
||||
}) |
||||
}, |
||||
|
||||
|
||||
//拿到添加供应商编码 |
||||
SupplierNum(){ |
||||
SupplierNum().then((response)=>{ |
||||
console.log(response) |
||||
this.addSupplier.supplierNum=response.data |
||||
}) |
||||
} |
||||
|
||||
// activated(){ |
||||
// this.addbrandlist=this.$router.params.addbrands |
||||
// } |
||||
// onBack(){ |
||||
// this.$router.push({path:"/prouduct"}) |
||||
// } |
||||
|
||||
|
||||
}, |
||||
|
||||
|
||||
created() { |
||||
this.onbrandslist(); |
||||
this.ontypelist(); |
||||
this.SupplierNum(); |
||||
} |
||||
|
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,54 @@
|
||||
import Vue from 'vue' |
||||
import App from './App.vue' |
||||
import router from './router' |
||||
import './plugins/element.js' |
||||
import './assets/css/global.css' |
||||
import './assets/ali-icon/iconfont.css' |
||||
import axios from '@/util/axios.js' |
||||
/* 导入富文本编辑器 */ |
||||
import VueQuillEditor from 'vue-quill-editor' |
||||
import ElementUI from 'element-ui'; |
||||
import 'element-ui/lib/theme-chalk/index.css'; |
||||
import './plugins/element.js' |
||||
import store from './store' |
||||
// import axios from 'axios'
|
||||
|
||||
|
||||
|
||||
|
||||
/* 导入富文本编辑器对应的样式 */ |
||||
import 'quill/dist/quill.core.css' // import styles
|
||||
import 'quill/dist/quill.snow.css' // for snow theme
|
||||
import 'quill/dist/quill.bubble.css' // for bubble theme
|
||||
|
||||
|
||||
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */ |
||||
/* 父组件将参数传递给子组件 需要声明 prototype.key= xxx */ |
||||
Vue.prototype.$http = axios |
||||
|
||||
Vue.config.productionTip = false |
||||
|
||||
/* 定义过滤器 */ |
||||
/* Vue.filter("定义过滤器名称",function(参数){ |
||||
过滤器需要添加teturn |
||||
}) */ |
||||
Vue.filter("priceFormat",function(price){ |
||||
//console.log(price)
|
||||
return (price / 100).toFixed(2) |
||||
}) |
||||
|
||||
/* 将富文本编辑器注册为全局可用的组件 */ |
||||
Vue.use(VueQuillEditor) |
||||
|
||||
Vue.use(ElementUI); |
||||
Vue.config.productionTip = false |
||||
|
||||
|
||||
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */ |
||||
/* 父组件将参数传递给子组件 需要声明 prototype.key= xxx */ |
||||
Vue.prototype.$api = axios |
||||
|
||||
new Vue({ |
||||
router, |
||||
render: h => h(App) |
||||
}).$mount('#app') |
||||
@ -0,0 +1,86 @@
|
||||
import Vue from 'vue' |
||||
import { |
||||
Button, |
||||
Form, |
||||
FormItem, |
||||
Input, |
||||
Message, |
||||
Container, |
||||
Header, |
||||
Main, |
||||
Menu, |
||||
Aside, |
||||
Submenu, |
||||
MenuItemGroup, |
||||
MenuItem, |
||||
Breadcrumb, |
||||
BreadcrumbItem, |
||||
Card, |
||||
Row, |
||||
Col, |
||||
Table, |
||||
TableColumn, |
||||
Switch, |
||||
Tooltip, |
||||
Pagination, |
||||
Dialog, |
||||
MessageBox, |
||||
Tag, |
||||
Tree, |
||||
Select, |
||||
Option, |
||||
Cascader, |
||||
Alert, |
||||
Tabs, |
||||
TabPane, |
||||
Steps, |
||||
Step, |
||||
CheckboxGroup, |
||||
Checkbox, |
||||
Upload, |
||||
DatePicker |
||||
|
||||
} from 'element-ui' |
||||
//实现父子组件参数传递
|
||||
Vue.use(Button) |
||||
Vue.use(Form) |
||||
Vue.use(FormItem) |
||||
Vue.use(Input) |
||||
Vue.use(Container) |
||||
Vue.use(Header) |
||||
Vue.use(Main) |
||||
Vue.use(Aside) |
||||
Vue.use(Menu) |
||||
Vue.use(Submenu) |
||||
Vue.use(MenuItemGroup) |
||||
Vue.use(MenuItem) |
||||
Vue.use(Breadcrumb) |
||||
Vue.use(BreadcrumbItem) |
||||
Vue.use(Card) |
||||
Vue.use(Row) |
||||
Vue.use(Col) |
||||
Vue.use(Table) |
||||
Vue.use(TableColumn) |
||||
Vue.use(Switch) |
||||
Vue.use(Tooltip) |
||||
Vue.use(Pagination) |
||||
Vue.use(Dialog) |
||||
Vue.use(Tag) |
||||
Vue.use(Tree) |
||||
Vue.use(Select) |
||||
Vue.use(Option) |
||||
Vue.use(Cascader) |
||||
Vue.use(Alert) |
||||
Vue.use(Tabs) |
||||
Vue.use(TabPane) |
||||
Vue.use(Steps) |
||||
Vue.use(Step) |
||||
Vue.use(CheckboxGroup) |
||||
Vue.use(Checkbox) |
||||
Vue.use(Upload) |
||||
Vue.use(DatePicker) |
||||
|
||||
//将弹框组件挂载到Vue对象中 用户可以使用this关键字调用
|
||||
Vue.prototype.$message = Message |
||||
//通过MessageBox函数定义 消息提示框
|
||||
Vue.prototype.$confirm = MessageBox.confirm |
||||
@ -0,0 +1,91 @@
|
||||
import Vue from 'vue' |
||||
import VueRouter from 'vue-router' |
||||
import Home from '../views/Home.vue' |
||||
import Welcome from '../views/Welcome.vue' |
||||
import Prouduct from '../views/Prouduct/Prouduct.vue' |
||||
import Prouduct_inventory from '../views/Prouduct/Prouduct_inventory.vue' |
||||
import Supplier_informstion from '../views/Supplier/Supplier_informstion.vue' |
||||
import Supplier_supply from '../views/Supplier/Supplier_supply.vue' |
||||
import Dealer_sales from '../views/Dealer/Dealer_sales.vue' |
||||
import Dealer_information from '../views/Dealer/Dealer_information.vue' |
||||
import Order_outstanding from '../views/Order/Order_outstanding.vue' |
||||
import Order_complete from '../views/Order/Order_complete.vue' |
||||
|
||||
Vue.use(VueRouter) |
||||
|
||||
|
||||
// // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
|
||||
// const originalPush = VueRouter.prototype.push
|
||||
// VueRouter.prototype.push = function push(location) {
|
||||
// return originalPush.call(this, location).catch(err => err)
|
||||
// }
|
||||
// 缓存原型上的push函数
|
||||
const originPush = VueRouter.prototype.push |
||||
const originReplace = VueRouter.prototype.replace |
||||
// 给原型对象上的push指定新函数函数
|
||||
VueRouter.prototype.push = function (location, onComplete, onAbort) { |
||||
// 判断如果没有指定回调函数, 通过call调用源函数并使用catch来处理错误
|
||||
if (onComplete===undefined && onAbort===undefined) { |
||||
return originPush.call(this, location, onComplete, onAbort).catch(() => {}) |
||||
} else { // 如果有指定任意回调函数, 通过call调用源push函数处理
|
||||
originPush.call(this, location, onComplete, onAbort) |
||||
} |
||||
} |
||||
// replace同理处理
|
||||
VueRouter.prototype.replace = function (location, onComplete, onAbort) { |
||||
if (onComplete===undefined && onAbort===undefined) { |
||||
return originReplace.call(this, location, onComplete, onAbort).catch(() => {}) |
||||
} else { |
||||
originReplace.call(this, location, onComplete, onAbort) |
||||
} |
||||
} |
||||
|
||||
const routes = [ |
||||
{ |
||||
path: '/', |
||||
name: 'Home', |
||||
component: Home, redirect:'/welcome',children:[ |
||||
{path:'/welcome',component:Welcome}, |
||||
{path:'/prouduct',component:Prouduct}, |
||||
{path:'/prouduct_inventory',component:Prouduct_inventory}, |
||||
{path:'/supplier_informstion',component:Supplier_informstion}, |
||||
{path:'/supplier_supply',component:Supplier_supply}, |
||||
{path:'/dealer_information',component:Dealer_information}, |
||||
{path:'/dealer_sales',component:Dealer_sales}, |
||||
{path:'/order_outstanding',component:Order_outstanding}, |
||||
{path:'/order_complete',component:Order_complete} |
||||
] |
||||
}, |
||||
// {
|
||||
// path: '/about',
|
||||
// name: 'About',
|
||||
// // route level code-splitting
|
||||
// // this generates a separate chunk (about.[hash].js) for this route
|
||||
// // which is lazy-loaded when the route is visited.
|
||||
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
// },
|
||||
// {
|
||||
// path: '/prouduct',
|
||||
// name: 'Prouduct',
|
||||
// // route level code-splitting
|
||||
// // this generates a separate chunk (about.[hash].js) for this route
|
||||
// // which is lazy-loaded when the route is visited.
|
||||
// component: () => import(/* webpackChunkName: "about" */ '../views/Prouduct.vue')
|
||||
// },
|
||||
// {
|
||||
// path: '/text',
|
||||
// name: 'Text',
|
||||
// // route level code-splitting
|
||||
// // this generates a separate chunk (about.[hash].js) for this route
|
||||
// // which is lazy-loaded when the route is visited.
|
||||
// component: () => import(/* webpackChunkName: "about" */ '../views/Text.vue')
|
||||
// }
|
||||
] |
||||
|
||||
const router = new VueRouter({ |
||||
mode: 'history', |
||||
base: process.env.BASE_URL, |
||||
routes |
||||
}) |
||||
|
||||
export default router |
||||
@ -0,0 +1,15 @@
|
||||
import Vue from 'vue' |
||||
import Vuex from 'vuex' |
||||
|
||||
Vue.use(Vuex) |
||||
|
||||
export default new Vuex.Store({ |
||||
state: { |
||||
}, |
||||
mutations: { |
||||
}, |
||||
actions: { |
||||
}, |
||||
modules: { |
||||
} |
||||
}) |
||||
@ -0,0 +1,29 @@
|
||||
// import Cookies from 'js-cookie'
|
||||
|
||||
// const TokenKey = 'Admin-Token'
|
||||
|
||||
// const ExpiresInKey = 'Admin-Expires-In'
|
||||
|
||||
// export function getToken() {
|
||||
// return Cookies.get(TokenKey)
|
||||
// }
|
||||
|
||||
// export function setToken(token) {
|
||||
// return Cookies.set(TokenKey, token)
|
||||
// }
|
||||
|
||||
// export function removeToken() {
|
||||
// return Cookies.remove(TokenKey)
|
||||
// }
|
||||
|
||||
// export function getExpiresIn() {
|
||||
// return Cookies.get(ExpiresInKey) || -1
|
||||
// }
|
||||
|
||||
// export function setExpiresIn(time) {
|
||||
// return Cookies.set(ExpiresInKey, time)
|
||||
// }
|
||||
|
||||
// export function removeExpiresIn() {
|
||||
// return Cookies.remove(ExpiresInKey)
|
||||
// }
|
||||
@ -0,0 +1,127 @@
|
||||
import axios from 'axios' |
||||
import { Notification, MessageBox, Message } from 'element-ui' |
||||
// import store from '@/store'
|
||||
import { getToken } from '@/util/auth' |
||||
import errorCode from '@/util/errorCode' |
||||
|
||||
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' |
||||
// 创建axios实例
|
||||
const service = axios.create({ |
||||
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
||||
baseURL:'http://localhost:8081' , |
||||
|
||||
// 超时
|
||||
timeout: 10000 |
||||
}) |
||||
// request拦截器
|
||||
service.interceptors.request.use(config => { |
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false |
||||
if (getToken() && !isToken) { |
||||
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
} |
||||
// get请求映射params参数
|
||||
if (config.method === 'get' && config.params) { |
||||
let url = config.url + '?'; |
||||
for (const propName of Object.keys(config.params)) { |
||||
const value = config.params[propName]; |
||||
var part = encodeURIComponent(propName) + "="; |
||||
if (value && typeof(value) !== "undefined") { |
||||
if (typeof value === 'object') { |
||||
for (const key of Object.keys(value)) { |
||||
let params = propName + '[' + key + ']'; |
||||
var subPart = encodeURIComponent(params) + "="; |
||||
url += subPart + encodeURIComponent(value[key]) + "&"; |
||||
} |
||||
} else { |
||||
url += part + encodeURIComponent(value) + "&"; |
||||
} |
||||
} |
||||
} |
||||
url = url.slice(0, -1); |
||||
config.params = {}; |
||||
config.url = url; |
||||
} |
||||
return config |
||||
}, error => { |
||||
console.log(error) |
||||
Promise.reject(error) |
||||
}) |
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(res => { |
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200; |
||||
|
||||
// 获取错误信息
|
||||
const msg = errorCode[code] || res.data.msg || errorCode['default'] |
||||
if (code === 401) { |
||||
// 单点登录时使用
|
||||
window.location.replace(res.data.loginUrl) |
||||
} else if (code === 500) { |
||||
Message({ |
||||
message: msg, |
||||
type: 'error' |
||||
}) |
||||
return Promise.reject(new Error(msg)) |
||||
} else if (code !== 200) { |
||||
Notification.error({ |
||||
title: msg |
||||
}) |
||||
return Promise.reject('error') |
||||
} else { |
||||
return res.data |
||||
} |
||||
}, |
||||
error => { |
||||
console.log('err' + error) |
||||
let { message } = error; |
||||
if (message == "Network Error") { |
||||
message = "后端接口连接异常"; |
||||
} |
||||
else if (message.includes("timeout")) { |
||||
message = "系统接口请求超时"; |
||||
} |
||||
else if (message.includes("Request failed with status code")) { |
||||
message = "系统接口" + message.substr(message.length - 3) + "异常"; |
||||
} |
||||
Message({ |
||||
message: message, |
||||
type: 'error', |
||||
duration: 5 * 1000 |
||||
}) |
||||
return Promise.reject(error) |
||||
} |
||||
) |
||||
|
||||
// 通用下载方法
|
||||
export function download(url, params, filename) { |
||||
return service.post(url, params, { |
||||
transformRequest: [(params) => { |
||||
return tansParams(params) |
||||
}], |
||||
headers: { |
||||
'Content-Type': 'application/x-www-form-urlencoded' |
||||
}, |
||||
responseType: 'blob' |
||||
}).then((data) => { |
||||
const content = data |
||||
const blob = new Blob([content]) |
||||
if ('download' in document.createElement('a')) { |
||||
const elink = document.createElement('a') |
||||
elink.download = filename |
||||
elink.style.display = 'none' |
||||
elink.href = URL.createObjectURL(blob) |
||||
document.body.appendChild(elink) |
||||
elink.click() |
||||
URL.revokeObjectURL(elink.href) |
||||
document.body.removeChild(elink) |
||||
} else { |
||||
navigator.msSaveBlob(blob, filename) |
||||
} |
||||
}).catch((r) => { |
||||
console.error(r) |
||||
}) |
||||
} |
||||
|
||||
export default service |
||||
@ -0,0 +1,92 @@
|
||||
import Vue from 'vue' |
||||
import { |
||||
Button, |
||||
Form, |
||||
FormItem, |
||||
Input, |
||||
Message, |
||||
Container, |
||||
Header, |
||||
Main, |
||||
Menu, |
||||
Aside, |
||||
Submenu, |
||||
MenuItemGroup, |
||||
MenuItem, |
||||
Breadcrumb, |
||||
BreadcrumbItem, |
||||
Card, |
||||
Row, |
||||
Col, |
||||
Table, |
||||
TableColumn, |
||||
Switch, |
||||
Tooltip, |
||||
Pagination, |
||||
Dialog, |
||||
MessageBox, |
||||
Tag, |
||||
Tree, |
||||
Select, |
||||
Option, |
||||
Cascader, |
||||
Alert, |
||||
Tabs, |
||||
TabPane, |
||||
Steps, |
||||
Step, |
||||
CheckboxGroup, |
||||
Checkbox, |
||||
Upload, |
||||
DatePicker, |
||||
CheckboxButton, |
||||
Descriptions, |
||||
DescriptionsItem |
||||
|
||||
} from 'element-ui' |
||||
//实现父子组件参数传递
|
||||
Vue.use(Button) |
||||
Vue.use(Form) |
||||
Vue.use(FormItem) |
||||
Vue.use(Input) |
||||
Vue.use(Container) |
||||
Vue.use(Header) |
||||
Vue.use(Main) |
||||
Vue.use(Aside) |
||||
Vue.use(Menu) |
||||
Vue.use(Submenu) |
||||
Vue.use(MenuItemGroup) |
||||
Vue.use(MenuItem) |
||||
Vue.use(Breadcrumb) |
||||
Vue.use(BreadcrumbItem) |
||||
Vue.use(Card) |
||||
Vue.use(Row) |
||||
Vue.use(Col) |
||||
Vue.use(Table) |
||||
Vue.use(TableColumn) |
||||
Vue.use(Switch) |
||||
Vue.use(Tooltip) |
||||
Vue.use(Pagination) |
||||
Vue.use(Dialog) |
||||
Vue.use(Tag) |
||||
Vue.use(Tree) |
||||
Vue.use(Select) |
||||
Vue.use(Option) |
||||
Vue.use(Cascader) |
||||
Vue.use(Alert) |
||||
Vue.use(Tabs) |
||||
Vue.use(TabPane) |
||||
Vue.use(Steps) |
||||
Vue.use(Step) |
||||
Vue.use(CheckboxGroup) |
||||
Vue.use(Checkbox) |
||||
Vue.use(Upload) |
||||
Vue.use(DatePicker) |
||||
Vue.use(CheckboxButton) |
||||
Vue.use(Descriptions) |
||||
Vue.use(DescriptionsItem) |
||||
|
||||
//将弹框组件挂载到Vue对象中 用户可以使用this关键字调用
|
||||
Vue.prototype.$message = Message |
||||
//通过MessageBox函数定义 消息提示框
|
||||
Vue.prototype.$confirm = MessageBox.confirm |
||||
@ -0,0 +1,6 @@
|
||||
export default { |
||||
'401': '认证失败，无法访问系统资源', |
||||
'403': '当前操作没有权限', |
||||
'404': '访问资源不存在', |
||||
'default': '系统未知错误,请反馈给管理员' |
||||
} |
||||
@ -0,0 +1,44 @@
|
||||
<template> |
||||
<div style="margin-top: 20px"> |
||||
<el-checkbox-group v-model="prdouctselect.type" size="medium"> |
||||
<el-checkbox-button v-for="type in typelist" :label="type.type" :key="type.type">{{type}}</el-checkbox-button> |
||||
</el-checkbox-group> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {inventorytype}from '@/api/prouduct.js' |
||||
|
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
prdouctselect: {}, |
||||
typelist:[], |
||||
|
||||
} |
||||
|
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
//下拉框typelist |
||||
inventorytype(){ |
||||
inventorytype().then((response)=>{ |
||||
console.log(response) |
||||
this.typelist=response.data |
||||
}) |
||||
} |
||||
|
||||
}, |
||||
|
||||
|
||||
created() { |
||||
this.inventorytype(); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,22 @@
|
||||
<template> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
|
||||
export default { |
||||
data () { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
methods:{ |
||||
|
||||
}, |
||||
|
||||
created() { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,209 @@
|
||||
<template> |
||||
|
||||
<!-- 定义布局容器 --> |
||||
<el-container class="home-container"> |
||||
|
||||
<!-- 定义头标签 --> |
||||
<el-header> |
||||
<div> |
||||
<span>紫艺化妆品管理系统</span> |
||||
</div> |
||||
<el-button type="info" @click="logout">退出</el-button> |
||||
</el-header> |
||||
|
||||
<!-- 定义中间区域--> |
||||
<el-container> |
||||
<!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值--> |
||||
<el-aside :width="isCollapse ? '64px' : '200px' "> |
||||
<!-- 这是左侧菜单--> |
||||
|
||||
<!--定义折叠项--> |
||||
<div class="leftCollapse" @click="collspseClick">|||</div> |
||||
|
||||
<!-- |
||||
background-color 定义背景色 |
||||
text-color="#fff" 定义文字颜色 |
||||
active-text-color="#4094ff" 选中元素的颜色 |
||||
unique-opened 是否只保持一个子菜单的展开 |
||||
collapse 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） |
||||
collapse-transition 是否开启折叠动画 默认不要展现 |
||||
router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 |
||||
--> |
||||
<el-menu background-color="#2C3E50" text-color="#fff" active-text-color="#4094ff" unique-opened |
||||
:collapse="isCollapse" :collapse-transition="isCollapseTransition" router :default-active="defaultActive"> |
||||
|
||||
<!-- 定义一级菜单 --> |
||||
<el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id"> |
||||
<!-- 定义一级菜单模版 --> |
||||
<template slot="title"> |
||||
<!-- 定义左侧图标--> |
||||
<i :class="menuIcon[menu.id]"></i> |
||||
<!-- 定义菜单名称--> |
||||
<span>{{menu.menu}}</span> |
||||
</template> |
||||
<!-- 定义二级菜单 --> |
||||
<el-menu-item :index="childrenMenu.path" v-for="childrenMenu in menu.children" :key="childrenMenu.id" |
||||
@click="defaultActiveMenu(childrenMenu.path)"> |
||||
<template slot="title"> |
||||
<i class="el-icon-menu"></i> |
||||
<span>{{childrenMenu.menu}}</span> |
||||
</template> |
||||
</el-menu-item> |
||||
</el-submenu> |
||||
</el-menu> |
||||
</el-aside> |
||||
|
||||
<!-- 定义主页面结构--> |
||||
<el-main> |
||||
<!-- 定义路由展现页面--> |
||||
<router-view></router-view> |
||||
</el-main> |
||||
</el-container> |
||||
</el-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import{getMenuList}from'../api/home.js' |
||||
|
||||
|
||||
export default { |
||||
//初始化函数 |
||||
created() { |
||||
//动态获取左侧菜单信息 |
||||
this.getMenuList() |
||||
//设定模式选中按钮 |
||||
this.defaultActive = window.sessionStorage.getItem("activeMenu") |
||||
}, |
||||
data() { |
||||
return { |
||||
//左侧菜单数据 |
||||
menuList: [], |
||||
menuIcon: { |
||||
'1': 'iconfont iconuser', |
||||
'3': 'iconfont iconshangpin', |
||||
'5': 'iconfont iconicon--copy', |
||||
'7': 'iconfont iconquanxian', |
||||
'8': 'iconfont iconziyuan' |
||||
}, |
||||
//定义是否折叠 |
||||
isCollapse: false, |
||||
//是否展现折叠动态效果 |
||||
isCollapseTransition: false, |
||||
//定义默认高亮 |
||||
defaultActive: '' |
||||
} |
||||
}, |
||||
methods: { |
||||
logout() { |
||||
//1.删除session中的数据 |
||||
window.sessionStorage.clear() |
||||
//2.用户访问登录页面 |
||||
this.$router.push('/login') |
||||
}, |
||||
|
||||
|
||||
async getMenuList() { |
||||
getMenuList().then((result)=>{ |
||||
console.log(result) |
||||
if(result.code !== 200) |
||||
return this.$message.error("左侧菜单查询失败") |
||||
this.menuList = result.data |
||||
}) |
||||
|
||||
}, |
||||
|
||||
|
||||
//设定左侧折叠展开效果 |
||||
collspseClick() { |
||||
this.isCollapse = !this.isCollapse |
||||
}, |
||||
defaultActiveMenu(activeMenu){ |
||||
//为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory |
||||
window.sessionStorage.setItem("activeMenu",activeMenu) |
||||
this.defaultActive = activeMenu |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<!-- 防止样式重叠 --> |
||||
<style lang="scss"> |
||||
.el-header { |
||||
background-color: #2B4B6B; |
||||
display: flex; |
||||
/* 灵活的盒子容器 */ |
||||
|
||||
justify-content: space-between; |
||||
/* 左右对齐 */ |
||||
|
||||
align-items: center; |
||||
/* 文本元素居中对齐 */ |
||||
|
||||
color: #FFFFFF; |
||||
/* 设定字体颜色 */ |
||||
|
||||
padding-left: 1px; |
||||
} |
||||
.div { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
} |
||||
|
||||
.span { |
||||
margin-left: 15px; |
||||
font-size: 25px; |
||||
/* 设定字体高度 */ |
||||
} |
||||
|
||||
.el-aside { |
||||
background-color: #2C3E50; |
||||
|
||||
} |
||||
|
||||
.el-menu { |
||||
border-right: none; |
||||
} |
||||
|
||||
.el-main { |
||||
background-color: #E9EEF3; |
||||
color: #333; |
||||
min-height: 850px; |
||||
max-width: 1500px; |
||||
} |
||||
|
||||
.home-container { |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.iconfont { |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
/* 定义折叠项 */ |
||||
.leftCollapse { |
||||
|
||||
/* 设定背景色 */ |
||||
background-color: #708090; |
||||
|
||||
/* 定义字体大小 */ |
||||
font-size: 10px; |
||||
|
||||
/* 定义行高 */ |
||||
line-height: 30px; |
||||
|
||||
/* 定义颜色 */ |
||||
color: #FFFFFF; |
||||
|
||||
/* 设置居中 */ |
||||
text-align: center; |
||||
|
||||
/* 设定字符间距 */ |
||||
letter-spacing: 4px; |
||||
|
||||
/* 鼠标放上之后设置为小手 */ |
||||
cursor: pointer; |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,22 @@
|
||||
<template> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
|
||||
export default { |
||||
data () { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
methods:{ |
||||
|
||||
}, |
||||
|
||||
created() { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,22 @@
|
||||
<template> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
|
||||
export default { |
||||
data () { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
methods:{ |
||||
|
||||
}, |
||||
|
||||
created() { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,98 @@
|
||||
<template> |
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> |
||||
<el-tab-pane |
||||
:key="item.name" |
||||
v-for="(item, index) in editableTabs" |
||||
:label="item.title" |
||||
:name="item.name" |
||||
> |
||||
<div> |
||||
<span v-if="index==0" > |
||||
<ProuductList></ProuductList></span> |
||||
<span v-else> |
||||
<ProuductAdd></ProuductAdd></span> |
||||
</div> |
||||
|
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</template> |
||||
|
||||
<script> |
||||
import ProuductList from '@/components/Prouduct/ProuductList.vue' |
||||
import ProuductAdd from '@/components/Prouduct/ProuductAdd.vue' |
||||
// import {onbrandslist} from '@/api/prouduct.js' |
||||
|
||||
export default { |
||||
name:'Prouduct', |
||||
components:{ |
||||
ProuductList, |
||||
ProuductAdd |
||||
}, |
||||
data() { |
||||
return { |
||||
// brandslist:[], |
||||
editableTabsValue: '1', |
||||
editableTabs: [{ |
||||
title: '产品信息', |
||||
name: '1', |
||||
content: 'Tab 1 content' |
||||
}, { |
||||
title: '产品添加', |
||||
name: '2', |
||||
content: 'Tab 2 content' |
||||
}], |
||||
tabIndex: 2 |
||||
} |
||||
}, |
||||
methods: { |
||||
handleTabsEdit(targetName, action) { |
||||
if (action === 'add') { |
||||
let newTabName = ++this.tabIndex + ''; |
||||
this.editableTabs.push({ |
||||
title: 'New Tab', |
||||
name: newTabName, |
||||
content: 'New Tab content' |
||||
}); |
||||
this.editableTabsValue = newTabName; |
||||
} |
||||
if (action === 'remove') { |
||||
let tabs = this.editableTabs; |
||||
let activeName = this.editableTabsValue; |
||||
if (activeName === targetName) { |
||||
tabs.forEach((tab, index) => { |
||||
if (tab.name === targetName) { |
||||
let nextTab = tabs[index + 1] || tabs[index - 1]; |
||||
if (nextTab) { |
||||
activeName = nextTab.name; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
this.editableTabsValue = activeName; |
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName); |
||||
} |
||||
}, |
||||
|
||||
// //下拉框brandslist |
||||
// onbrandslist(){ |
||||
// onbrandslist().then((response)=>{ |
||||
// // console.log(response) |
||||
// this.brandslist=response.data |
||||
// }) |
||||
// this.$router.push({ |
||||
// name:'ProuductAdd', |
||||
// params:{ |
||||
// addbrands:this.brandslist |
||||
// } |
||||
// }) |
||||
|
||||
// } |
||||
|
||||
}, |
||||
|
||||
// created(){ |
||||
// this.onbrandslist(); |
||||
// } |
||||
} |
||||
</script> |
||||
@ -0,0 +1,97 @@
|
||||
<template> |
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> |
||||
<el-tab-pane |
||||
:key="item.name" |
||||
v-for="(item, index) in editableTabs" |
||||
:label="item.title" |
||||
:name="item.name" |
||||
> |
||||
<div> |
||||
<span v-if="index==0" > |
||||
<InventoryList></InventoryList></span> |
||||
<span v-else> |
||||
<InventoryAdd></InventoryAdd></span> |
||||
</div> |
||||
|
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</template> |
||||
|
||||
<script> |
||||
import InventoryList from '@/components/Prouduct/InventoryList' |
||||
import InventoryAdd from '@/components/Prouduct/InventoryAdd' |
||||
|
||||
export default { |
||||
name:'Prouduct_inventory', |
||||
components:{ |
||||
InventoryList, |
||||
InventoryAdd |
||||
}, |
||||
data() { |
||||
return { |
||||
// brandslist:[], |
||||
editableTabsValue: '1', |
||||
editableTabs: [{ |
||||
title: '产品库存信息', |
||||
name: '1', |
||||
content: 'Tab 1 content' |
||||
}, { |
||||
title: '产品库存添加', |
||||
name: '2', |
||||
content: 'Tab 2 content' |
||||
}], |
||||
tabIndex: 2 |
||||
} |
||||
}, |
||||
methods: { |
||||
handleTabsEdit(targetName, action) { |
||||
if (action === 'add') { |
||||
let newTabName = ++this.tabIndex + ''; |
||||
this.editableTabs.push({ |
||||
title: 'New Tab', |
||||
name: newTabName, |
||||
content: 'New Tab content' |
||||
}); |
||||
this.editableTabsValue = newTabName; |
||||
} |
||||
if (action === 'remove') { |
||||
let tabs = this.editableTabs; |
||||
let activeName = this.editableTabsValue; |
||||
if (activeName === targetName) { |
||||
tabs.forEach((tab, index) => { |
||||
if (tab.name === targetName) { |
||||
let nextTab = tabs[index + 1] || tabs[index - 1]; |
||||
if (nextTab) { |
||||
activeName = nextTab.name; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
this.editableTabsValue = activeName; |
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName); |
||||
} |
||||
}, |
||||
|
||||
// //下拉框brandslist |
||||
// onbrandslist(){ |
||||
// onbrandslist().then((response)=>{ |
||||
// // console.log(response) |
||||
// this.brandslist=response.data |
||||
// }) |
||||
// this.$router.push({ |
||||
// name:'ProuductAdd', |
||||
// params:{ |
||||
// addbrands:this.brandslist |
||||
// } |
||||
// }) |
||||
|
||||
// } |
||||
|
||||
}, |
||||
|
||||
// created(){ |
||||
// this.onbrandslist(); |
||||
// } |
||||
} |
||||
</script> |
||||
@ -0,0 +1,97 @@
|
||||
<template> |
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> |
||||
<el-tab-pane |
||||
:key="item.name" |
||||
v-for="(item, index) in editableTabs" |
||||
:label="item.title" |
||||
:name="item.name" |
||||
> |
||||
<div> |
||||
<span v-if="index==0" > |
||||
<SupplierList></SupplierList></span> |
||||
<span v-else> |
||||
<SupplierAdd></SupplierAdd></span> |
||||
</div> |
||||
|
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</template> |
||||
|
||||
<script> |
||||
import SupplierList from '@/components/Supplier/SupplierList' |
||||
import SupplierAdd from '@/components/Supplier/SupplierAdd' |
||||
|
||||
export default { |
||||
name:'Supplier_informstion', |
||||
components:{ |
||||
SupplierList, |
||||
SupplierAdd |
||||
}, |
||||
data() { |
||||
return { |
||||
// brandslist:[], |
||||
editableTabsValue: '1', |
||||
editableTabs: [{ |
||||
title: '供应商信息', |
||||
name: '1', |
||||
content: 'Tab 1 content' |
||||
}, { |
||||
title: '供应商添加', |
||||
name: '2', |
||||
content: 'Tab 2 content' |
||||
}], |
||||
tabIndex: 2 |
||||
} |
||||
}, |
||||
methods: { |
||||
handleTabsEdit(targetName, action) { |
||||
if (action === 'add') { |
||||
let newTabName = ++this.tabIndex + ''; |
||||
this.editableTabs.push({ |
||||
title: 'New Tab', |
||||
name: newTabName, |
||||
content: 'New Tab content' |
||||
}); |
||||
this.editableTabsValue = newTabName; |
||||
} |
||||
if (action === 'remove') { |
||||
let tabs = this.editableTabs; |
||||
let activeName = this.editableTabsValue; |
||||
if (activeName === targetName) { |
||||
tabs.forEach((tab, index) => { |
||||
if (tab.name === targetName) { |
||||
let nextTab = tabs[index + 1] || tabs[index - 1]; |
||||
if (nextTab) { |
||||
activeName = nextTab.name; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
this.editableTabsValue = activeName; |
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName); |
||||
} |
||||
}, |
||||
|
||||
// //下拉框brandslist |
||||
// onbrandslist(){ |
||||
// onbrandslist().then((response)=>{ |
||||
// // console.log(response) |
||||
// this.brandslist=response.data |
||||
// }) |
||||
// this.$router.push({ |
||||
// name:'ProuductAdd', |
||||
// params:{ |
||||
// addbrands:this.brandslist |
||||
// } |
||||
// }) |
||||
|
||||
// } |
||||
|
||||
}, |
||||
|
||||
// created(){ |
||||
// this.onbrandslist(); |
||||
// } |
||||
} |
||||
</script> |
||||
@ -0,0 +1,97 @@
|
||||
<template> |
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> |
||||
<el-tab-pane |
||||
:key="item.name" |
||||
v-for="(item, index) in editableTabs" |
||||
:label="item.title" |
||||
:name="item.name" |
||||
> |
||||
<div> |
||||
<span v-if="index==0" > |
||||
<SupplyList></SupplyList></span> |
||||
<span v-else> |
||||
<SupplyAdd></SupplyAdd></span> |
||||
</div> |
||||
|
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</template> |
||||
|
||||
<script> |
||||
import SupplyAdd from '../../components/Supplier/SupplyAdd.vue' |
||||
import SupplyList from '../../components/Supplier/SupplyList.vue' |
||||
|
||||
export default { |
||||
name:'Supplier_informstion', |
||||
components:{ |
||||
SupplyAdd, |
||||
SupplyList |
||||
}, |
||||
data() { |
||||
return { |
||||
// brandslist:[], |
||||
editableTabsValue: '1', |
||||
editableTabs: [{ |
||||
title: '货物信息', |
||||
name: '1', |
||||
content: 'Tab 1 content' |
||||
}, { |
||||
title: '货物添加', |
||||
name: '2', |
||||
content: 'Tab 2 content' |
||||
}], |
||||
tabIndex: 2 |
||||
} |
||||
}, |
||||
methods: { |
||||
handleTabsEdit(targetName, action) { |
||||
if (action === 'add') { |
||||
let newTabName = ++this.tabIndex + ''; |
||||
this.editableTabs.push({ |
||||
title: 'New Tab', |
||||
name: newTabName, |
||||
content: 'New Tab content' |
||||
}); |
||||
this.editableTabsValue = newTabName; |
||||
} |
||||
if (action === 'remove') { |
||||
let tabs = this.editableTabs; |
||||
let activeName = this.editableTabsValue; |
||||
if (activeName === targetName) { |
||||
tabs.forEach((tab, index) => { |
||||
if (tab.name === targetName) { |
||||
let nextTab = tabs[index + 1] || tabs[index - 1]; |
||||
if (nextTab) { |
||||
activeName = nextTab.name; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
this.editableTabsValue = activeName; |
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName); |
||||
} |
||||
}, |
||||
|
||||
// //下拉框brandslist |
||||
// onbrandslist(){ |
||||
// onbrandslist().then((response)=>{ |
||||
// // console.log(response) |
||||
// this.brandslist=response.data |
||||
// }) |
||||
// this.$router.push({ |
||||
// name:'ProuductAdd', |
||||
// params:{ |
||||
// addbrands:this.brandslist |
||||
// } |
||||
// }) |
||||
|
||||
// } |
||||
|
||||
}, |
||||
|
||||
// created(){ |
||||
// this.onbrandslist(); |
||||
// } |
||||
} |
||||
</script> |
||||
@ -0,0 +1,13 @@
|
||||
<template> |
||||
|
||||
<div> |
||||
<span>欢迎你</span> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
|
||||
|
||||
</script> |
||||
@ -0,0 +1,24 @@
|
||||
const path = require('path'); |
||||
module.exports = { |
||||
mode:'development', |
||||
entry:{ |
||||
main:'./src/main.js', |
||||
},
|
||||
output:{ |
||||
path:path.resolve(__dirname,'../dist'), //打包的路径(绝对路径)
|
||||
filename:'[name].js' //按入口文件命名打包成的文件名
|
||||
}, |
||||
//模块
|
||||
module:{ |
||||
rules:[] |
||||
},
|
||||
plugins:[], //插件
|
||||
|
||||
//服务功能配置
|
||||
devServer:{ |
||||
contentBase:path.resolve(__dirname,'../dist'), //基本目录结构
|
||||
host:'localhost', //ip地址
|
||||
compress:true, //开启服务器端压缩
|
||||
port:8888 //端口
|
||||
} //服务功能配置
|
||||
} |
||||
Loading…
Reference in new issue