Commit dc0a89cf by fanx

init

0 parents
> 1%
last 2 versions
not dead
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 1
trim_trailing_whitespace = true
insert_final_newline = true
VUE_APP_NODE_ENV="development"
VUE_APP_VERSION="0.0.1"
VUE_APP_API="http://api.k780.com/"
VUE_APP_NODE_ENV="development"
VUE_APP_VERSION="0.0.1"
VUE_APP_API="http://www.baidu.com"
\ No newline at end of file \ No newline at end of file
VUE_APP_NODE_ENV="production"
VUE_APP_VERSION="0.0.1"
VUE_APP_API="http://www.baidu.com"
\ No newline at end of file \ No newline at end of file
VUE_APP_NODE_ENV="test"
VUE_APP_VERSION="0.0.1"
VUE_APP_API="http://www.baidu.com"
\ No newline at end of file \ No newline at end of file
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'arrow-parens': 0, // allow paren-less arrow functions
'generator-star-spacing': 0, // allow async-await
"no-unused-vars": [1, {
"vars": "local", //允许声明未使用变量
"args": "none" //参数不检查
}],
"semi": [0], //关闭语句强制分号结尾
"no-multiple-empty-lines": [0, { "max": 100 }], //空行最多不能超过100行
"no-mixed-spaces-and-tabs": [0], //关闭禁止混用tab和空格
"comma-dangle": [2, 'never'], //解决最后一行 有一个逗号问题
}
}
.DS_Store
node_modules
/dist
dist.zip
# 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?
# nafm-web
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
}
{
"name": "nafm-web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"test": "vue-cli-service serve --mode test",
"pro": "vue-cli-service serve --mode pro",
"build:dev": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:pro": "vue-cli-service build --mode pro --modern",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "1.7.3",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"js-cookie": "^2.2.1",
"nprogress": "^0.2.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.3",
"compression-webpack-plugin": "^3.1.0",
"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": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11",
"webpack-spritesmith": "^1.1.0"
}
}
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="pragma" content="no-cache">
<!-- HTTP 1.0 -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<!-- Prevent caching at the proxy server -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="dns-prefetch" href="//lib.baomitu.com" />
<!-- 使用CDN加速的CSS文件,配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<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>
<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<a-config-provider :locale="locale">
<router-view />
</a-config-provider>
</div>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
export default {
data() {
return {
locale: zhCN
}
}
}
</script>
File mode changed
import { handlePromise } from '@/utils/index'
// 门户管理--轮播图管理列表
export const carouselManageApi = (params) => {
return handlePromise($http.post('/api/list', params))
}
\ No newline at end of file \ No newline at end of file
html {
-webkit-tap-highlight-color: transparent;
}
body{
height: 100vh;
}
#app{
height: 100vh;
}
.icon {
width: 1.2em;
height: 1.2em;
fill: currentColor;
overflow: hidden;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: block;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.mr5 {
margin-right: 5px;
}
.mr10 {
margin-right: 10px;
}
.mt10 {
margin-top: 10px;
}
.ml20 {
margin-left: 20px;
}
.mr20 {
margin-right: 20px;
}
.mt20 {
margin-top: 20px;
}
.pad10 {
padding: 10px;
}
.pad20 {
padding: 20px;
}
.pl5 {
padding-left: 5px !important;
}
.pc50 {
width: 50% !important;
}
.pl20 {
padding-left: 20px;
}
.pr20 {
padding-right: 20px;
}
.pl15 {
padding-left: 15px;
}
.pr15 {
padding-right: 15px;
}
.buttonLeft5 {
margin-left: 5px;
}
.w100 {
width: 100%;
}
.w140 {
width: 140px !important;
}
.w224 {
width: 224px !important;
}
.ant-table-pagination.ant-pagination {
margin: 0;
padding-top: 10px;
}
.search-condition {
display: flex;
justify-content: flex-end;
}
.title1 {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
font-weight: bold;
}
.title2 {
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
font-weight: bold;
}
.text {
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
}
.Auxiliary {
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
}
.invalid {
font-size: 14px;
color: rgba(0, 0, 0, 0.25);
}
.tips {
font-size: 12px;
color: #E7390E;
}
.openButton,
.closeButton {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
margin-right: 3px;
}
.openButton {
background-color: #00A854;
}
.closeButton {
background-color: #F04134;
}
.form {
padding: 0;
}
.form .ant-form-item-control-wrapper {
width: calc((100vw - 344px)/4 - 74px - 20px);
}
.form .double_item_wrap .ant-form-item-control-wrapper {
width: calc((100vw - 344px)/2 - 74px - 20px);
}
.form .triple_item_wrap .ant-form-item-control-wrapper {
width: calc((100vw - 344px)*3/4 - 74px - 20px);
}
.form .quadruple_item_wrap .ant-form-item-control-wrapper {
width: calc(100vw - 344px - 74px - 20px);
}
.form .ant-form-item-with-help {
margin-bottom: 0px;
}
.form .ant-form-item {
padding-bottom: 10px;
margin-right: 20px;
}
.form .ant-form-item-label {
width: 74px;
text-align: left;
}
.form .submit {
text-align: right;
}
.form .submit button {
margin-left: 20px;
}
.form .time .ant-form-item-control-wrapper {
width: 250px;
}
.form .ant-form {
overflow: hidden;
}
.form .ant-form .submit {
float: right;
}
.form .ant-form .submit .ant-form-item-control-wrapper {
width: auto;
text-align: right;
}
.ant-spin-container {
border: #eee solid 1px;
}
.info {
padding: 20px;
}
.info .ant-descriptions-title {
border-bottom: 1px dotted #ccc;
padding: 5px 10px;
}
.info .ant-descriptions-view {
padding: 10px;
}
/* .mask-spin{
text-align: center;
background: rgba(208, 208, 208, 0.4);
border-radius: 0px;
margin-bottom: 20px;
padding: 30px 50px;
margin: 20px 0;
}
.loading {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
background: rgba(208, 208, 208, 0.4);
padding: 50px;
z-index: 100;
border-radius: 50%;
} */
::selection {
color: #FFFFFF;
background: #1890ff;
}
/deep/ input :hover {
border: 1px solid #1890ff;
}
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
.star-red {
color: #ed4014;
}
.flex-table {
padding-bottom: 15px;
}
.flex-table .ant-form-inline .ant-form-item {
display: flex;
}
.flex-table .ant-form-item-control-wrapper {
flex: 1;
}
.flex-table .ant-form-item-label {
width: auto;
}
\ No newline at end of file \ No newline at end of file
@import 'mixins.less';
@import 'variable.less';
@import 'common.less';
\ No newline at end of file \ No newline at end of file
.round-borders (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.justify-align-center() {
display: flex;
justify-content: center;
align-items: center;
}
.justify-align-between() {
display: flex;
align-items: center;
justify-content: space-between;
}
.justify-between {
display: flex;
justify-content: space-between;
}
.justify-center() {
display: flex;
justify-content: center;
}
.align-center() {
display: flex;
align-items: center;
}
.ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// flex 水平、垂直都居中,默认主轴方向为水平方向
.flex-center(@direction: row) when (@direction =row),
(@direction =h) {
.justify-align-center();
flex-direction: row;
}
// flex 水平、垂直都居中
.flex-center(@direction: row) when(@direction =column),
(@direction =v) {
.justify-align-center();
flex-direction: column;
}
// flex水平居中主轴为水平方向
.flex-center-h(@direction: row) when (@direction =row),
(@direction =h) {
.justify-center();
flex-direction: row;
}
// flex水平居中主轴为垂直方向
.flex-center-h(@direction: row) when (@direction =column),
(@direction =v) {
.align-center();
flex-direction: column;
}
// flex垂直居中主轴为水平方向
.flex-center-v(@direction: row) when (@direction =row),
(@direction =h) {
.align-center();
flex-direction: row;
}
// flex垂直居中主轴为垂直方向
.flex-center-v(@direction: row) when (@direction =column),
(@direction =v) {
.justify-center();
flex-direction: column;
}
// 固定显示多上行,size:固定显示的行数
.line-clamp(@size) {
overflow: hidden;
text-overflow: ellipsis;
line-clamp: @size;
-webkit-line-clamp: @size;
display: -webkit-box;
-webkit-box-orient: vertical;
}
// 旋转角度
.transform-rotate(@deg) {
transform: rotate(@deg);
-ms-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-webkit-transform: rotate(@deg);
-o-transform: rotate(@deg);
}
\ No newline at end of file \ No newline at end of file
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 200px 200px; }
.icon-logo { width: 200px; height: 200px; background-position: 0px 0px; }
\ No newline at end of file \ No newline at end of file
// 字体 全局变量
@font47 : 47px;
@font30 : 30px;
@font27 : 27px;
@font24 : 24px;
@font22 : 22px;
@font20 : 20px;
@font18 : 18px;
@font16 : 16px;
@font14 : 14px;
@font12 : 12px;
@font10 : 10px;
// radius-size
@radius-size-medium : 5px;
@radius-size-medium10 : 10px;
@radius-size-medium20 : 20px;
@radius-size-medium30 : 30px;
@warn: red;
// 标题字
@header-text-color: #272727;
// 选中色
@SelectBg: #1890ff;
// 字体反白色
@SelectColor: #FFFFFF;
//页面背景颜色
@bgColor: #f7f7f7;
@headerBg: #292F42;
//当前主题颜色
@theme: #E7390E;
// 页面颜色
@color000: #000;
@colorfff: #fff;
@color333: #333;
//
// 一级标题
@TitleFont1 : 16px;
@TitleColor1: rgba(0, 0, 0, .85);
// 二级标题
@TitleFont2 : 14px;
@TitleColor2: rgba(0, 0, 0, .65);
// 正文
@TextFont : 14px;
@TextColor: rgba(0, 0, 0, .65);
// 辅助文字大小及其颜色
@AuxiliaryFont : 14px;
@AuxiliaryColor: rgba(0, 0, 0, .45);
// 失效文字
@InvalidFont : 14px;
@InvalidColor: rgba(0, 0, 0, .25);
// 警告提示
@TipsFont : 12px;
@TipsColor: #E7390E;
// 查询表单label宽度
@SearchLabelWidth: 74px;
@LabelBetweenMargin: 20px;
\ No newline at end of file \ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Group 21</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
<g id="Group-21" transform="translate(77.000000, 73.000000)">
<g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
<ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
<ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
<path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
<path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
<path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
<g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
<ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
<path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
</g>
</g>
<g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
<ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
<ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
<path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
<g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
<ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
<path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
</g>
<ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
<ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
<ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
<path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
</g>
<g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
<ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
<g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
<ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
<path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
</g>
<path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
<ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
<ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
<path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
</g>
<g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
<g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
<circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
<path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
</g>
<circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
<path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
<path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
<polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
<path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
<path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
<path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
<circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
<circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
<circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
<circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
<circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file \ No newline at end of file
import * as utils from "@/utils/";
export default {
data() {
return {
// 界面加载遮罩显示与否控制
loading: false,
// 表格数据,如需特殊处理,可以在应用组件内检测本数据进行处理
tableData: [{
id: 1,
productName: '商品1',
firstCategoryName: '一',
secondCategoryName: '二',
storeName: '店铺',
description: '审核通过',
link: 'http://www.baidu.com',
}],
// 表格滚动相关
scroll: {},
// 表格分页相关
pagination: {
total: 0, // 总数据量
pageNo: 1, // 请求页
current: 1, // 当前页
pageSize: 10, // 默认每页显示数量
showSizeChanger: true, // 显示可改变每页数量
showQuickJumper: true,
pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
showTotal: total =>
`共 ${total}条记录 第${this.pagination.current}/${Math.ceil(
this.pagination.total / this.pagination.pageSize
)}页`
},
// 交互查询相关参数对象
confirmSearch: {}
};
},
created() {
if (this.$route.query.backInfo) {
let backInfo = JSON.parse(this.$route.query.backInfo);
this.pagination.current = this.pagination.pageNo =
backInfo.pageInfo.pageNo;
this.pagination.pageSize = backInfo.pageInfo.pageSize;
this.confirmSearch = {
...backInfo.searchInfo
};
}
this.init()
},
mounted() {
this.scroll = utils.tableScroll(this.columns, this.$refs.table);
},
methods: {
// 查询
searchHandle(queryName, id) {
this.$refs[queryName].validate(valid => {
if (valid) {
this.pagination.current = this.pagination.pageNo = 1;
let searchParams = {}
for (let li in this[queryName]) {
if (this[queryName][li] != "" || (Array.isArray(this[queryName][li]) && this[queryName][li].length || typeof this[queryName][li] === "number")) {
searchParams[li] = this[queryName][li];
}
}
this.confirmSearch = {
...searchParams,
id
};
this.tableListHandle();
} else {
return false;
}
});
},
// 重置
resetQuery(queryName) {
this[queryName] = {}
},
// 分页信息变化
pageChangeHandle(option) {
this.pagination.pageSize = option.pageSize;
this.pagination.current = this.pagination.pageNo = option.current;
this.tableListHandle()
},
// 表格数据渲染
tableListHandle() {
this.loading = true
this[this.queryName] = {
...this.confirmSearch
}
console.log('this.tableUrl',this.tableUrl)
this.$http.post(this.tableUrl, {
...this.confirmSearch,
pageNo: this.pagination.pageNo,
pageSize: this.pagination.pageSize
}).then(resData => {
/**
* 列表渲染特殊处理
* 原因:需求表明编辑等功能完成后需要回到原页面,但改变数据的某些状态或是字段会影响到渲染当前数据为空
* 处理:如果请求的当前界面列表数据为空则回退一页
*/
if (!resData.data.list.length && this.pagination.current > 1) {
this.pagination.current = this.pagination.pageNo = this.pagination.pageNo - 1
this.tableListHandle()
} else {
this.tableData = resData.data.list
this.pagination.total = Number(resData.data.total);
}
}).catch(err => {
this.$message.error(err.statusText)
}).finally(() => {
this.loading = false
})
},
// 列表也跳转其他路由界面统一处理
toOtherRouterPage(routerName, routerQuery) {
let tableInfo = {
searchInfo: {
...this.confirmSearch
},
pageInfo: {
pageNo: this.pagination.pageNo,
pageSize: this.pagination.pageSize
}
};
this.$router.push({
name: routerName,
query: {
...routerQuery,
tableInfo: JSON.stringify(tableInfo)
}
})
}
},
}
\ No newline at end of file \ No newline at end of file
<template>
<div>
<div class="nav-logo">NAFMII-WEB</div>
<div class="nav-right">
<a-avatar :src="userLogo" />
<a-dropdown overlayClassName="drapdownParent">
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
张三
<a-icon type="down" />
</a>
<a-menu slot="overlay" @click="handleLogout">
<a-menu-item key="1">
退出登录
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
userLogo: require('@/assets/images/user.png')
}
},
methods: {
handleLogout({ key }) {
this.$router.push({
path: '/login'
})
}
}
}
</script>
<style lang="less" scoped>
.nav-logo {
width: 200px;
text-align: center;
height: 64px;
line-height: 64px;
float: left;
color: #fff;
background: #001529;
border-bottom: 1px solid #000c17;
}
.nav-right {
padding: 0 24px;
float: right;
}
.drapdownParent {
font-size: 100px;
ul {
top: 20px !important;
}
}
</style>
\ No newline at end of file \ No newline at end of file
<template>
<a-layout-sider class="left-sider">
<div style="width: 200px">
<a-menu :selectedKeys="selectedKeys" :openKeys.sync="openKeys" mode="inline" theme="dark">
<template v-for="item in menuData">
<a-menu-item v-if="!item.children" :key="item.path" @click="handleMenuClick(item)">
<a-icon v-if="item.meta.icon" :type="item.meta.icon" />
<span>{{ item.meta.title }}</span>
</a-menu-item>
<sub-menu v-else :key="item.path" :menu-info="item" />
</template>
</a-menu>
</div>
</a-layout-sider>
</template>
<script>
import SubMenu from './SubMenu'
export default {
name: 'SiderMenu',
components: {
"sub-menu": SubMenu
},
watch: {
'$route.path': function (val) {
this.selectedKeys = this.selectedKeysMap[val]
this.openKeys = this.collapsed ? [] : this.openKeysMap[val]
}
},
data() {
this.selectedKeysMap = {}
this.openKeysMap = {}
const menuData = this.getMenuData(this.$router.options.routes)
return {
list: [],
menuData,
selectedKeys: this.selectedKeysMap[this.$route.path],
openKeys: this.collapsed ? [] : this.openKeysMap[this.$route.path]
};
},
methods: {
getMenuData(routes = [], parentKeys = [], selectedKey) {
const menuData = []
// console.log('routes==>', routes)
for (let item of routes) {
if (item.name && !item.hideInMenu) {
this.openKeysMap[item.path] = parentKeys
this.selectedKeysMap[item.path] = [selectedKey || item.path]
const newItem = { ...item }
delete newItem.children
if (item.children && !item.hideChildrenInMenu) {
newItem.children = this.getMenuData(item.children, [...parentKeys, item.path])
} else {
this.getMenuData(
item.children,
selectedKey ? parentKeys : [...parentKeys, item.path],
selectedKey || item.path
)
}
menuData.push(newItem)
} else if (!item.hideInMenu && !item.hideChildrenInMenu && item.children) {
menuData.push(...this.getMenuData(item.children, [...parentKeys, item.path]))
}
}
// console.log('parentKeys==>', parentKeys)
// console.log('selectedKey==>', selectedKey)
// console.log('menuData==>', menuData)
return menuData;
},
handleMenuClick(item) {
console.log(11,item)
this.$router.push({ path: item.path, query: $route.query })
}
}
}
</script>
\ No newline at end of file \ No newline at end of file
<template functional>
<a-sub-menu :key="props.menuInfo.path">
<span slot="title">
<a-icon v-if="props.menuInfo.meta.icon" :type="props.menuInfo.meta.icon" />
<span>{{ props.menuInfo.meta.title }}</span>
</span>
<template v-for="item in props.menuInfo.children">
<a-menu-item v-if="!item.children" :key="item.path" @click="()=>parent.$router.push({ path: item.path, query: parent.$route.query })">
<a-icon v-if="item.meta.icon" :type="item.meta.icon" />
<span>{{ item.meta.title }}</span>
</a-menu-item>
<sub-menu v-else :key="item.path" :menu-info="item" />
</template>
</a-sub-menu>
</template>
<script>
export default {
props: ['menuInfo']
}
</script>
\ No newline at end of file \ No newline at end of file
<template>
<a-layout style="height:100vh">
<a-layout-header class="nav-header">
<Header />
</a-layout-header>
<a-layout>
<SiderMenu />
<a-layout style="padding: 0 24px 24px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item v-for="(item,key) in breadList" :key="key">{{item}}</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content :style="{ background: '#fff', margin: 0, minHeight: '280px' }">
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</template>
<script>
import Header from './components/Header'
import SiderMenu from './components/SiderMenu'
import breadTextConfig from '@/utils/breadcrumb'
export default {
name: 'DefaultLayout',
components: {
Header,
SiderMenu
},
watch: {
'$route.path': function (val) {
this.getBreadCrumb(val)
}
},
data() {
return {
breadList: []
};
},
mounted() {
const currentPath = this.$route.path
this.getBreadCrumb(currentPath)
// console.log('breadList', this.breadList)
},
methods: {
getBreadCrumb(currentPath) {
for (let i in breadTextConfig) {
if (i == currentPath) {
this.breadList = breadTextConfig[i]
}
}
}
}
};
</script>
<style>
.nav-header {
padding: 0 !important;
background: #fff !important;
}
.left-sider {
width: 200px;
}
</style>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/utils/AntdUi'
import Axios from '@/utils/Axios'
import '@/assets/css/index.less'
Vue.config.productionTip = false
Vue.use({
install(vue) {
Object.assign(vue.prototype, {
$http: Axios,
$store: store
})
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
import DefaultLayout from '@/layout/defaultLayout'
import portalRouter from './modules/portal'
import formRouter from './modules/form'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(VueRouter)
/**
* hideInMenu:true 控制一级菜单不显示的标识
* hideChildrenInMenu: true 控制子菜单不显示的标识
*
* meta: {
* icon: 'form' 控制导航前面 是否显示图标
* title: '表单' 显示菜单名称
* }
*/
// 不变常态路由
const constantRoutes = [
{
path: '/login',
hideInMenu: true,
component: { render: h => h("router-view") }, // 这步操作 可以少创建一个router-view的页面
redirect: '/login',
children: [
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/login'), // 登录
}
]
},
{
path: '*',
hideInMenu: true,
hidden: true,
component: DefaultLayout,
children: [{
path: '404',
name: '404',
component: () => import(/* webpackChunkName: "404" */ '@/views/404') // 用户管理
}]
}
]
// 动态路由 可根据数据变更 且 导出 动态路由
export const asyncRoutes = [
{
path: '/',
component: DefaultLayout,
redirect: '/dashboard/home',
children: [
{
path: '/dashboard',
name: 'dashboard',
exact: true,
meta: {
icon: 'dashboard',
title: '仪表盘'
},
component: { render: h => h("router-view") },
children: [
{
path: '/dashboard/home',
name: 'home',
exact: true,
meta: {
title: '首页'
},
component: () => import(/* webpackChunkName: "home" */ '@/views/dashboard/home.vue'), // 登录
}
]
},
portalRouter,
formRouter
]
}
]
// 所有路由汇总
const routes = [].concat(asyncRoutes, constantRoutes)
// 初始化路由
const router = new VueRouter({
base: process.env.BASE_URL,
routes
})
// 前置路由
router.beforeEach((to, from, next) => {
if (to.path !== from.path) {
NProgress.start()
}
next()
})
// 后置路由
router.afterEach(() => {
NProgress.done()
})
// 导出路由
export default router
const formRouter = {
path: '/form',
name: 'form',
exact: true,
meta: {
icon: 'form',
title: '表单'
},
component: { render: h => h("router-view") },
children: [
{
path: '/form/basicForm',
exact: true,
name: 'basicForm',
meta: {
title: '基础表单'
},
component: () => import(/* webpackChunkName: "basicForm" */ '@/views/form/basicForm') // 基础表单
},
{
path: '/form/stepForm',
exact: true,
name: 'stepForm',
meta: {
title: '步骤表单'
},
component: () => import(/* webpackChunkName: "stepForm" */ '@/views/form/stepForm') // 步骤表单
},
]
}
export default formRouter;
\ No newline at end of file \ No newline at end of file
const portalRouter = {
path: '/portal',
name: 'portal',
exact: true,
meta: {
icon: 'profile',
title: '门户管理'
},
component: { render: h => h("router-view") },
children: [
{
path: '/portal/carouselManage',
name: 'carouselManage',
exact: true,
meta: {
title: '轮播图管理'
},
component: () => import(/* webpackChunkName: "carouselManage" */ '@/views/portalManage/carouselManage/index.vue'), // 轮播图管理
},
{
path: '/portal/scrollBarManage',
name: 'scrollBarManage',
exact: true,
meta: {
title: '滚动条管理'
},
component: () => import(/* webpackChunkName: "scrollBarManage" */ '@/views/portalManage/scrollBarManage/index.vue'), // 滚动条管理
}
]
}
export default portalRouter;
\ No newline at end of file \ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import portal from './modules/portal'
// vuex 数据存储 进行本地存储操作
const vuexLocal = new VuexPersistence({
storage: window.localStorage,
modules: ["portal"]
})
Vue.use(Vuex)
const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
modules: {
portal
}
})
export default store
export default {
namespaced: true,
state: {
},
mutations: {
},
actions: {
},
modules: {
}
}
import Vue from "vue";
import {
Affix,
AutoComplete,
Alert,
BackTop,
Badge,
Breadcrumb,
Button,
Calendar,
Card,
Checkbox,
Col,
DatePicker,
Divider,
Dropdown,
Form,
FormModel,
Icon,
Input,
InputNumber,
Layout,
List,
LocaleProvider,
Menu,
Mentions,
Modal,
Pagination,
Popconfirm,
Popover,
Progress,
Radio,
Rate,
Row,
Select,
Slider,
Spin,
Statistic,
Steps,
Switch,
Table,
Transfer,
Tree,
TreeSelect,
Tabs,
Tag,
TimePicker,
Timeline,
Tooltip,
Upload,
Drawer,
Skeleton,
message,
ConfigProvider,
Descriptions,
notification,
Cascader,
Result,
Avatar
} from 'ant-design-vue';
const component = [
Affix, AutoComplete, Alert, BackTop, Badge, Breadcrumb, Button, Calendar, Cascader, Card, Checkbox, Col, DatePicker, Divider, Dropdown, Form, FormModel, Icon, Input, InputNumber, Layout, List, LocaleProvider, Menu, Mentions, Modal, Pagination, Popconfirm, Popover, Progress, Radio, Rate, Row, Select, Slider, Spin, Statistic, Steps, Switch, Table, Transfer, Tree, TreeSelect, Tabs, Tag, TimePicker, Timeline, Tooltip, Upload, Drawer, Skeleton, message, ConfigProvider, Descriptions, Result, Avatar
]
component.forEach(item => Vue.use(item));
Object.assign(Vue.prototype, {
$message: message,
$notification: notification,
$info: Modal.info,
$success: Modal.success,
$error: Modal.error,
$warning: Modal.warning,
$confirm: Modal.confirm,
$destroyAll: Modal.destroyAll
})
//公共组件
// import Header from '@/components/Header';
// [
// Header
// ].forEach(item => Vue.component(item.name, item))
\ No newline at end of file \ No newline at end of file
import Cookies from 'js-cookie'
const TokenKey = 'NAFM_TOKEN'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
\ No newline at end of file \ No newline at end of file
import Vue from 'vue';
import Request from './Request'
const Axios = new Request()
Plugin.install = (Vue) => {
Vue.prototype.$http = Axios
}
Object.assign(window, {
$http: Axios
})
Vue.use(Plugin)
export default Axios
\ No newline at end of file \ No newline at end of file
import axios from 'axios'
const APP_ENV = process.env.VUE_APP_NODE_ENV
const APP_API = process.env.VUE_APP_API
const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队(异步任务)。',
204: '删除数据成功。',
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
401: '用户没有权限(令牌、用户名、密码错误)。',
403: '用户得到授权,但是访问是被禁止的。',
404: '发出的请求是不存在的,服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除。',
422: '当创建一个对象时,发生一个验证错误。',
500: '服务器发生错误,请检查服务器。',
502: '网关错误。',
503: '服务不可用,服务器暂时过载或维护。',
504: '网关超时。'
}
const instance = axios.create({
baseURL: APP_ENV === 'development' ? '/api' : APP_API
})
class Request {
constructor(baseURL) {
this.baseURL = baseURL
}
// 检查返回状态
checkStatus(response) {
console.log(2)
const responseData = response.data
const errorText = response && (codeMessage[response.status] || response.statusText)
if (response && (response.stutus === 200 || response.stutus === 304 || response.status === 400)) {
if (responseData.stutus == 0) {
return responseData
}
if (responseData.status === 401 || responseData.status === 402) {
return Promise.reject(errorText)
}
return Promise.reject(responseData)
}
Promise.reject(response)
}
// 拦截器
interceptors(instance, scope) {
// 请求拦截器
instance.interceptors.request.use(config => {
config.url = baseURL
config.scope = scope
return config
}, error => {
return Promise.reject(error)
})
// 相应拦截器
instance.interceptors.response.use(res => {
return res
}, error => {
const { response, message } = error || {}
if (message && message.includes('timeout')) {
return Promise.reject({ statusText: '网络超时,请重新尝试!' })
}
let errorInfo = response
if (!errorInfo) {
try {
const { request: { status, statusText }, config } = JSON.parse(JSON.stringify(error))
errorInfo = {
status,
statusText,
request: { responseURL: config.url }
}
} catch (e) {
errorInfo = error
}
}
return Promise.reject(errorInfo)
})
}
// 设置请求
setRequest(method, url, data, scope, file = false) {
this.interceptors(instance, scope)
const options = { method, url }
let contentType = ''
if (file) {
contentType = 'multipart/form-data'
} else if (method == 'post') {
contentType = 'application/json'
} else {
contentType = 'application/x-www-form-urlencoded; charset=UTF-8'
}
const headers = {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': contentType
}
Object.assign(options, {
headers,
[method == 'post' ? 'data' : 'params']: data
})
return instance(options).then(this.checkStatus).catch(this.error)
}
// get
get(url, data, scope) {
return this.setRequest('get', url, data, scope)
}
// post
post(url, data, scope) {
console.log(1,url)
return this.setRequest('post', url, data, scope)
}
// GET
GET(url, data, scope) {
return this.setRequest('get', url, data, scope).then(this.success)
}
// POST
POST(url, data, scope) {
return this.setRequest('post', url, data, scope).them(this.success)
}
// 错误
error(e) {
return Promise.reject(e)
}
// 成功
success(da) {
return da.data
}
// 文件成功
fileSuccess(data) {
return data
}
}
export default Request;
\ No newline at end of file \ No newline at end of file
const breadTextConfig = {
// dashboard
'/dashboard/home': ['仪表盘', '首页'],
// 门户管理
'/portal/carouselManage': ['门户管理', '轮播图管理'],
'/portal/scrollBarManage': ['门户管理', '滚动条管理'],
// 表单
'/form/basicForm': ['表单', '基础表单'],
'/form/stepForm': ['表单', '步骤表单']
}
export default breadTextConfig
\ No newline at end of file \ No newline at end of file
/**
* 工具类
* import utils from "@/utils";
*/
/**
* table滚动
*/
const tableScroll = (columns, y) => {
let _y = (typeof y == "string" || typeof y == 'number') ? y : document.body.clientHeight - y.getBoundingClientRect().top - 150;
let opt = {
x: (typeof columns == "string" || typeof columns == 'number') ? columns : columns.reduce((c, n) => {
let cn = typeof c == "number" ? c : parseInt(c['width'] || 300);
let nn = parseInt(n['width'] || 300);
return cn + nn;
}),
y: Math.max(_y, 300)
}
// console.log(opt);
return opt
}
// table 表格各项配置
const tableConfig = {
align: 'center', // 表格内容排列方式
ellipsis: true, // 表格内容超出宽度,省略显示
}
// 封装接口返回数据
const handlePromise = (promise) => {
return promise.then(res => {
return Promise.resolve(res)
}).catch(e => {
return Promise.resolve(res)
})
}
export {
tableScroll,
tableConfig,
handlePromise
}
\ No newline at end of file \ No newline at end of file
<template>
<a-result status="404" title="404" sub-title="对不起, 没有找到该页面.">
<template #extra>
<a-button type="primary">返回 首页</a-button>
</template>
</a-result>
</template>
\ No newline at end of file \ No newline at end of file
<template>
<div class="home bounceIn">
欢迎来到 NAFMII 管理后台
</div>
</template>
<style lang="less" scoped>
.home {
height: 100%;
font-size: 40px;
color: #000;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.bounceIn {
animation: bounceIn 1s;
}
</style>
\ No newline at end of file \ No newline at end of file
<template>
<div>
basicForm
</div>
</template>
\ No newline at end of file \ No newline at end of file
<template>
<div>
stepForm
</div>
</template>
\ No newline at end of file \ No newline at end of file
<template>
<div class="login-container">
<a-form :form="form" class="form" @submit="handleSubmit">
<a-form-item class="form-item logo">
logo
</a-form-item>
<a-form-item class="form-item">
<a-input v-decorator="rules.userName" placeholder="请输入用户名">
<a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item class="form-item">
<a-input v-decorator="rules.password" placeholder="请输入密码" type="password">
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item class="form-item">
<a-button type="primary" style="width:100%" html-type="submit">登录</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
userName: '',
password: '',
formLayout: 'horizontal',
form: this.$form.createForm(this, { name: 'coordinated' }),
rules: {
userName: ['userName', { rules: [{ required: true, message: '请输入用户名!' }] }],
password: ['password', { rules: [{ required: true, message: '请输入密码!' }] }],
}
}
},
methods: {
// 登录
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
this.$router.push({ path: '/dashboard/home' })
}
});
}
}
}
</script>
<style lang="less" scoped>
.login-container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
background: #f0f2f5;
width: 100%;
background-image: url("../../assets/images/login-bg.svg");
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
.form {
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.form-item{
width: 30%;
}
.logo{
text-align: center;
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
import { tableConfig } from '@/utils'
const columns = [{
...tableConfig,
title: "序号",
dataIndex: "index",
key: "index",
fixed: "left",
width: '60px',
customRender: (text, record, index) => `${index + 1}`
},
{
...tableConfig,
title: "商品名称",
dataIndex: "productName",
key: "productName",
width: 150,
scopedSlots: {
customRender: "productName"
}
},
{
...tableConfig,
title: "一级分类",
dataIndex: "firstCategoryName",
width: 150,
key: "firstCategoryName"
},
{
...tableConfig,
title: "二级分类",
key: "secondCategoryName",
width: 150,
dataIndex: "secondCategoryName"
},
{
...tableConfig,
title: "所属店铺",
key: "storeName",
width: 150,
dataIndex: "storeName",
},
{
...tableConfig,
title: "审核说明",
dataIndex: "description",
width: 200,
key: "description",
customRender: (text) => text || '--'
},
{
...tableConfig,
title: "使用链接",
key: "link",
width: 200,
dataIndex: "link",
customRender: text => text || '--'
},
{
...tableConfig,
title: "操作",
key: "operation",
fixed: "right",
width: '100px',
scopedSlots: {
customRender: "action"
},
}
]
export default columns
<template>
<a-card title :bordered="false">
<section class="flex-table">
<a-skeleton :loading="loading" avatar active title="搜索">
<a-form-model ref="searchForm" :model="searchForm" :rules="searchRule" layout="inline">
<a-row :gutter="24">
<a-col :span="6">
<a-form-model-item label="商品名称" prop="productName">
<a-input placeholder="请输入" allow-clear v-model.trim="searchForm.productName" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="商品编码" prop="productCode">
<a-input placeholder="请输入" allow-clear v-model.trim="searchForm.productCode" />
</a-form-model-item>
</a-col>
<a-col :span="12" class="right">
<a-form-model-item label class="submit">
<a-button type="primary" @click="searchHandle('searchForm')">查询</a-button>
<a-button class="buttonLeft5" @click="specialResetQuery('searchForm')">重置</a-button>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</a-skeleton>
</section>
<section ref="table">
<a-table rowKey="id" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChangeHandle" :scroll="scroll" :loading="loading">
<span slot="productName" slot-scope="text, record" :title="record.productName">
<a @click="jumpDetail(record)">{{record.productName}}</a>
</span>
<span slot="action" slot-scope="text, record">
<a @click="handleLook(record)">查看</a>
</span>
</a-table>
</section>
</a-card>
</template>
<script>
import tableMixin from '@/components/mixins/tableMixin'
import columns from './column'
export default {
name: 'CarouseManage',
mixins: [tableMixin],
data() {
return {
searchForm: {},
searchRule: {},
selectedRowKeys: [],
selectIds: [],
columns,
tableUrl: ''
}
},
methods: {
// 表格界面初始化渲染
init() {
this.tableListHandle();
},
handleLook(record) {
console.log(record)
}
}
}
</script>
\ No newline at end of file \ No newline at end of file
<template>
<div>
滚动条管理
</div>
</template>
\ No newline at end of file \ No newline at end of file
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const SpritesmithPlugin = require('webpack-spritesmith') // 雪碧图
const environment = process.env.VUE_APP_NODE_ENV // 定义变量 环境
const app_version = process.env.VUE_APP_VERSION // 定义变量 版本号
// cdn
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: [],
js: [
// `https://lib.baomitu.com/vue/2.6.11/vue.min.js`,
// `https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js`,
// `https://lib.baomitu.com/vuex/3.1.2/vuex.min.js`
]
}
}
// 雪碧图的自定义模板
const templateFunction = function (data) {
var shared = '.icon-sprite { display: inline-block; background-image: url(I); background-size: Dpx Hpx; }'
.replace('I', data.sprites[0].image)
.replace('D', data.sprites[0].total_width)
.replace('H', data.sprites[0].total_height)
var perSprite = data.sprites.map(function (sprite) {
return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
.replace('N', sprite.name.replace(/_/g, '-'))
.replace('W', sprite.width)
.replace('H', sprite.height)
.replace('X', sprite.offset_x)
.replace('Y', sprite.offset_y)
}).join('\n')
return shared + '\n' + perSprite
}
module.exports = {
outputDir: "dist",
assetsDir: "assets",
publicPath: "./",
devServer: {
host: '0.0.0.0',
port: "8080",
https: false,
hotOnly: false,
overlay: {
warning: false,
errors: false
},
proxy: {
'/api': {
// 测试环境
target: process.env.VUE_APP_API, // http://192.168.0.114:8000/
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' // 需要rewrite重写的, //
}
}
},
},
pages: {
index: {
entry: "./src/main.js",
template: path.join(__dirname, "public/index.html"),
filename: 'index.html',
title: 'NAFMII-WEB',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
// cdn: environment === 'development' ? cdn.dev : cdn.build
}
},
productionSourceMap: false,
css: {
loaderOptions: {
less: {
javascriptEnabled: true
},
}
},
configureWebpack: config => {
if (environment === "devproduction" || environment === 'test' || environment === "uat" || environment === "pro") {
//开发环境开启压缩
config.plugins.push(new CompressionPlugin({ // Gzip压缩配置
test: /\.js$|\.html$|\.less/, // 匹配文件名
threshold: 0,
deleteOriginalAssets: false // 是否删除原文件
}))
}
return {
externals: {
//moment: "moment",
//axios: "axios"
},
resolve: {
modules: ["node_modules", "spritesmith-generated"],
alias: {
// 别名
'@': path.resolve('src'),
}
},
plugins: [
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, './src/assets/icon'),
glob: '*.png'
},
target: { // 输出雪碧图文件及样式文件,这个是打包后,自动生成的雪碧图和样式
image: path.resolve(__dirname, './src/assets/images/sprite.png'),
css: [
[path.resolve(__dirname, './src/assets/css/sprite.less'), {
// 引用自己的模板
format: 'function_based_template'
}]
]
},
customTemplates: { // 自定义模板入口
function_based_template: templateFunction
},
apiOptions: { // 样式文件中调用雪碧图地址写法
cssImageRef: '../images/sprite.png'
},
spritesmithOptions: { // 让合成的每个图片有一定的距离
padding: 20
}
})
]
}
},
chainWebpack: config => {
// const hashName = `assets/js/[name].[hash:8].${environment}.${app_version}.js`
// config.output.filename(hashName).end()
// config.output.chunkFilename(hashName).end()
const filename = config.output.store.get('filename')
const chunkFilename = config.output.store.get('chunkFilename')
const newfilename = filename.replace('[name]', '[name].[hash:8]')
const newchunkFilename = chunkFilename.replace('[name]', '[name].[hash:8]')
config.output.filename((newfilename)).end()
config.output.chunkFilename(newchunkFilename).end()
},
lintOnSave: false
}
\ No newline at end of file \ No newline at end of file
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!