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