Commit 0b61c502 authored by 张冬's avatar 张冬

第一次

parents
> 1%
last 2 versions
not ie <= 8
.DS_Store
node_modules
/dist
example.html
favicon.ico
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
{
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 140
}
\ No newline at end of file
MIT License
Copyright (c) 2016-2019 vue-manage-system
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
# vue-manage-system
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/releases">
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a>
<a href="https://lin-xin.gitee.io/example/work/#/donate">
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a>
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
> React + Ant Design 的版本正在开发中,仓库地址:[react-manage-system](https://github.com/lin-xin/react-manage-system)
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
## 项目截图
### 登录
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
### 默认皮肤
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
### 浅绿色皮肤
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
## 赞赏
请作者喝杯咖啡吧!(微信号:linxin_20)
![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg)
## 特别鸣谢
- [实验楼](https://www.shiyanlou.com?source=vue-manage-system)
## 前言
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 vue.js,使用 vue-cli3 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。
## 功能
- [x] Element UI
- [x] 登录/注销
- [x] Dashboard
- [x] 表格
- [x] Tab 选项卡
- [x] 表单
- [x] 图表 :bar_chart:
- [x] 富文本编辑器
- [x] markdown 编辑器
- [x] 图片拖拽/裁剪上传
- [x] 支持切换主题色 :sparkles:
- [x] 列表拖拽排序
- [x] 权限测试
- [x] 404 / 403
- [x] 三级菜单
- [x] 自定义图标
- [x] 可拖拽弹窗
- [x] 国际化
## 安装步骤
```
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
cd vue-manage-system // 进入模板目录
npm install // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn
// 开启服务器,浏览器访问 http://localhost:8080
npm run serve
// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build
```
## 组件使用说明与演示
### vue-schart
vue.js 封装 sChart.js 的图表组件。访问地址:[vue-schart](https://github.com/linxin/vue-schart)
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
```html
<template>
<div>
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
</div>
</template>
<script>
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data() {
return {
options: {
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
}
};
},
components: {
Schart
}
};
</script>
<style>
.wrapper {
width: 7rem;
height: 5rem;
}
</style>
```
## 其他注意事项
### 一、如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢?
举个栗子,我不想用 Vue-Quill-Editor 这个组件,那我需要分四步走。
第一步:删除该组件的路由,在目录 src/router/index.js 中,找到引入改组件的路由,删除下面这段代码。
```JavaScript
{
// 富文本编辑器组件
path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
},
```
第二步:删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
第三步:删除该页面的入口。在目录 src/components/common/Sidebar.vue 中,找到该入口,删除下面这段代码。
```js
{
index: 'editor',
title: '富文本编辑器'
},
```
第四步:卸载该组件。执行以下命令:
npm un vue-quill-editor -S
完成。
### 二、如何切换主题色呢?
第一步:打开 src/main.js 文件,找到引入 element 样式的地方,换成浅绿色主题。
```javascript
import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import './assets/css/theme-green/index.css'; // 浅绿色主题
```
第二步:打开 src/App.vue 文件,找到 style 标签引入样式的地方,切换成浅绿色主题。
```javascript
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css"; /*深色主题*/
/*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/
```
第三步:打开 src/components/common/Sidebar.vue 文件,找到 el-menu 标签,把 background-color/text-color/active-text-color 属性去掉即可。
## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
# vue-manage-system
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/releases">
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a>
<a href="https://lin-xin.gitee.io/example/work/#/donate">
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a>
The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/)
## Donation
![WeChat](https://lin-xin.gitee.io/images/weixin.jpg)
## Preface
The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
## Function
- [x] Element-UI
- [x] Login/Logout
- [x] Dashboard
- [x] Table
- [x] Tabs
- [x] From
- [x] Chart :bar_chart:
- [x] Editor
- [x] Markdown
- [x] Upload pictures by clipping or dragging
- [x] Support manual switch themes :sparkles:
- [x] List drag sort
- [x] Permission
- [x] 404 / 403
- [x] Three level menu
- [x] Custom icon
## Installation steps
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
cd vue-manage-system // Enter template directory
npm install // Installation dependency
## Local development
// Open server and access http://localhost:8080 in browser
npm run serve
## Constructing production
// Constructing project
npm run build
## Component description and presentation
### vue-schart
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
```html
<template>
<div>
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
</div>
</template>
<script>
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data() {
return {
options: {
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
}
};
},
components: {
Schart
}
};
</script>
<style>
.wrapper {
width: 7rem;
height: 5rem;
}
</style>
```
### element-ui
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
### Vue-Quill-Editor
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
### mavonEditor
A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor)
### vue-cropperjs
A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
## Notice
### 一、If I don't want to use some components, how can I delete it?
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps.
The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below.
```JavaScript
{
path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
},
```
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file.
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
```js
{
index: 'editor',
title: '富文本编辑器'
},
```
Finally, uninstall this component.
npm un vue-quill-editor -S
Complete!
### 二、How to switch themes?
The first step to enter 'src/main.js' and change into green theme.
```javascript
import 'element-ui/lib/theme-default/index.css'; // default theme
// import '../static/css/theme-green/index.css'; // green theme
```
The second step to enter 'src/App.vue' and change into green theme.
```javascript
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
```
Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。
## Screenshot
### Default theme
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
### Green theme
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
module.exports = {
presets: [
'@vue/app'
]
}
This diff is collapsed.
{
"name": "vue-manage-system",
"version": "4.2.0",
"private": true,
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@xkeshi/vue-qrcode": "github:xkeshi/vue-qrcode",
"ali-oss": "^6.10.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"element-ui": "^2.11.0",
"mavon-editor": "^2.6.17",
"vue": "^2.6.10",
"vue-clipboard2": "^0.3.1",
"vue-cropperjs": "^3.0.0",
"vue-i18n": "^8.10.0",
"vue-qr": "^2.2.1",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.3",
"vue-schart": "^2.0.0",
"vuedraggable": "^2.17.0",
"vuex": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-service": "^3.9.0",
"vue-template-compiler": "^2.6.10"
}
}
module.exports = {
plugins: {
autoprefixer: {}
}
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
<title>vue-manage-system</title>
</head>
<body>
<noscript>
<strong>We're sorry but vms 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>
\ No newline at end of file
This diff is collapsed.
.controlName{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
float: left;
margin-bottom: 20px;
color: #777;
width: 170px;
height: 96px;
background-color: #ffffff;
box-shadow: 0px 11px 31px 1px
rgba(11, 133, 254, 0.07);
border-radius: 4px;
}
.interval{
width:96%;
margin: 0 2%;
padding: 0 2%;
background: #ffffff;
float: left;
/* overflow-y: auto;
overflow-x: hidden; */
}
.controlImgName{
width: 33px;
/* float: left; */
height: 33px;
position: relative;
}
.controlImgName img{
width: 33px;
height:33px;
position: absolute;
top: 0;
left: 0;
margin-bottom: 10px;
}
.controlRealName{
float: left;
font-size: 16px;
color: #606266;
opacity: 0.7;
}
.controlName:hover{
color:#0377ed;
cursor: pointer;
border: 1px solid #0377ed;
}
/* .mainbackground{
} */
.questionnaireTitle{
text-align: center;
font-size: 20px;
color: #606266;
font-weight: bold;
}
.questionnaireSubject{
width:100%;
padding: 0px 10px;
float: left;
position: relative;
height: 90%;
overflow: auto;
margin-top: 30px;
}
.questionnaireItemHead{
width: 90%;
float: left;
line-height: 40px;
height: 44px;
margin-left: 5%;
margin-bottom: 10px;
}
.questionnaireItemName{
float: left;
width: 60%;
font-size: 13px;
color: #909399;
opacity: 0.7;
}
.questionnaireItemGroupButton{
float: right;
}
.questionnaireItemGroupButton button{
margin-left: 5px;
width: 98px;
height: 36px;
}
.questionnaireItemContent{
width: 90%;
float: left;
margin-left: 5%;
margin-bottom: 20px;
}
.checkMargin{
margin-top: 7px;
}
.selectInputDiv{
display:none;
border: 1px solid #ccc;
width: 92%;
padding: 4px 6px;
box-shadow: 1px 1px 0px 0px #ccc;
position: absolute;
z-index: 10000;
background: #fff;
overflow:auto;
}
.selectInputDiv p{
margin-bottom: 0px;
padding: 0.5rem 0;
}
.selectInputDiv p:hover{
background: #0377ed;
color:#fff;
}
.full{
width: 20%;
float: left;
display: flex;
}
.z_photo {
padding: 5px;
border: 1px dashed #E7E6E6;
margin-right: 20px;
}
.z_file {
width: 120px;
height: 120px;
margin: 0 auto;
position: relative;
}
.add-img{
display: block;
width: 120px;
height: 120px;
}
.imgFile{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}
.imgExplain{
font-size:12px;
color:#888;
float:left;
margin-left: 5%;
}
.errerClass {
display: none;
float: left;
font-size: 14px;
color: #ff0000;
}
.message{
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
.message .input {
width: 70%;
float: left;
}
.message .liulan {
width: 30%;
height: 38px;
padding: 4px 6px;
background: url(../images/file.png)left center no-repeat;
text-indent: 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 3px;
}
.message .files {
position: absolute;
left: 0px;
top: 0px;
cursor: pointer;
filter: Alpha(opacity=0);
opacity: 0;
display: none;
}
.fileTips {
float: left;
}
.fileTips p {
color: #888!important;
font-size: 12px!important;
margin: 0px!important;
}
.questionnaireAttribute{
display: none;
width: 96%;
margin: 0 2%;
padding: 0 2%;
float: left;
position: relative;
}
.textRegularCustom{
display: none;
}
.placeLocationTop{
border-top:1px solid #22aaff;
}
.placeLocationBottom{
border-bottom:1px solid #22aaff;
}
.questionnaireItem{
width:100%;
}
.required{
float:left;
color:#f00;
}
.requiredHiddle{
display: none;
}
.previewMain{
position: absolute;
width: 800px;
height: 800px;
display: none;
margin: 0 auto;
border: 1px solid #000;
background: #fff;
top: 20px;
left: 0;
right: 0;
bottom: 0;
}
.errorMain{
line-height: 40px;
height: 40px;
overflow: hidden;
color: #f00;
width: 100%;
}
.hidMargin{
margin-bottom:0px!important;
}
.z_fileImgDel{
position: absolute;
top:10px;
right:10px;
z-index:101
}
.messagedel{
position: absolute;
z-index: 101;
width: 120px;
height: 100%;
text-align: center;
line-height: 38px;
background: #000;
opacity: 0.5;
color: #fff;
display: none;
right: 30%;
}
input[type='date']::-webkit-inner-spin-button {
display:none;
}
input[type='number']::-webkit-inner-spin-button {
display:none;
}
.flex{
display: flex;
justify-content: center;
}
.r-item {
width: 405px;
background-color: #ffffff;
box-shadow: 0px 11px 31px 1px
rgba(11, 133, 254, 0.07),
0px 7px 21px 0px
rgba(11, 133, 254, 0.08);
border-radius: 4px;
box-sizing: border-box;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 10px;
}
.r-item .form-control{
width: 80% !important;
}
.r-item>label{
font-size: 13px;
color: #909399;
opacity: 0.7;
}
.flex-center{
display: flex;
justify-content: center;
align-items: center;
margin-top:20px
}
.flex-center>p{
margin:0
}
/* input[type="radio"] :checked+ label::before {
background-color: #000;
} */
/* input[type='radio']{
display:none;
}
input[type='radio'] + label:before{
content: "";
display: inline-block;
width: 0.6px;
height: 0.6;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #61A5FF;
}
input[type='radio']:checked+label:before{
background-color: #61A5FF;
color: #fff;
} */
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<script>
var a="33333";
a.replace("33333","")
console.log(a);
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<!-- <script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script> -->
<script src="../js/bootstrap.js"></script>
<script src="../js/index.js"></script>
<script src="../js/preview.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/index.css">
<style>
.selectMould{
width:500px;
position: absolute;
top:30%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body style="height: 100%;position: fixed;width: 100%;">
<div class="selectMould">
<p>选择模版</p>
</div>
<div id="app">
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/common.js"></script>
<script src="../js/index.js"></script>
<script src="../js/preview.js"></script>
<script>
function Initialization(name) {
//先清除对应div中的html代码
$(name).empty();
var main = '<div class="container-fluid" style="background:#edededa1;padding-top:10px;display:none"><div class="row">';
main += leftToolbar();
main += centerMain("调查问卷");
main += rightAttribute();
main += '</div></div><div class="dragControl"></div>';
main += '<div class="previewMain"></div>';
//添加基本的界面布局
$(name).append(main);
$(".interval").css("height", document.body.offsetHeight + "px");//初始化高度,跟浏览器可视高度一致
}
$(function () {
Initialization("#app");
})
</script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body style="height: 100%;position: fixed;width: 100%;">
<div id="app"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/common.js"></script>
<script src="../js/preview.js"></script>
<script>
function Initialization(name) {
//先清除对应div中的html代码
$(name).empty();
var main = '<div class="container-fluid" style="background:#edededa1;"><div class="row">';
main += leftToolbar();
main += centerMain("调查问卷");
main += rightAttribute();
main += '</div></div><div class="dragControl"></div>';
main += '<div class="previewMain"></div>';
//添加基本的界面布局
$(name).append(main);
$(".interval").css("height",document.body.offsetHeight+"px");//初始化高度,跟浏览器可视高度一致
}
$(function () {
Initialization("#app");
})
</script>
<script src="../js/index1.js"></script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/index.css">
<style>
.row{
display: flex;
justify-content: center;
}
.previewMain{
height: 900px;
}
.alert{
display: none;
z-index:9
}
</style>
</head>
<body style="height: 100%;width: 100%;">
<div class="alert alert-danger">
<strong>错误</strong> 未按规定填写表单。
</div>
<div id="app">
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/common.js"></script>
<script src="../js/preview.js"></script>
<script src="../js/index2.js"></script>
<script>
function Initialization(name) {
//先清除对应div中的html代码
$(name).empty();
var main = '<div class="container-fluid" style="background:#edededa1;"><div class="row">';
// main += leftToolbar();
main += centerMain("提交调查问卷");
// main += rightAttribute();
main += '</div></div><div class="dragControl"></div>';
main += '<div class="previewMain"></div>';
//添加基本的界面布局
$(name).append(main);
$(".interval").css("height",document.body.offsetHeight+"px");//初始化高度,跟浏览器可视高度一致
}
$(function () {
Initialization("#app");
})
</script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/index.css">
<style>
.row{
display: flex;
justify-content: center;
}
.previewMain{
/* height: 900px; */
border: none;
}
.alert{
display: none;
z-index:9
}
.questionnaireSubject{
overflow:hidden;
margin-top: 0;
}
.btnOk{
display: none;
}
</style>
</head>
<body style="height: 100%;width: 100%;">
<div class="alert alert-danger">
<strong>错误</strong> 未按规定填写表单。
</div>
<div id="app">
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/common.js"></script>
<script src="../js/preview.js"></script>
<script>
function Initialization(name) {
//先清除对应div中的html代码
$(name).empty();
var main = '<div class="container-fluid" style="background:#edededa1;"><div class="row">';
// main += leftToolbar();
main += centerMain("提交调查问卷");
// main += rightAttribute();
main += '</div></div><div class="dragControl"></div>';
main += '<div class="previewMain"></div>';
//添加基本的界面布局
$(name).append(main);
$(".interval").css("height",document.body.offsetHeight+"px");//初始化高度,跟浏览器可视高度一致
}
$(function () {
Initialization("#app");
})
</script>
<script src="../js/index3.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
{
"list": [{
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"date": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png"
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"date": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png"
},
{
"id": 3,
"name": "王五",
"money": 789,
"address": "湖南省长沙市",
"state": "失败",
"date": "2019-11-11",
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
},
{
"id": 4,
"name": "赵六",
"money": 1011,
"address": "福建省厦门市鼓浪屿",
"state": "成功",
"date": "2019-10-20",
"thumb": "https://lin-xin.gitee.io/images/post/notice.png"
}
],
"pageTotal": 4
}
\ No newline at end of file
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
@import './common/common.css';
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css"; /*深色主题*/
/*@import "./assets/css/theme-green/color-green.css"; 浅绿色主题*/
</style>
\ No newline at end of file
// 引入ali-oss
let OSS = require('ali-oss')
/**
* [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。
* [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。
* [bucket] {String}:通过控制台或PutBucket创建的bucket。
* [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。
*/
let client = new OSS({
region: 'oss-cn-beijing',
//云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。
accessKeyId: 'LTAI4GG1zbSAQrjAvWL8bJKX',
accessKeySecret: '06yXwRMA5ppeTb0hI29lG3jQqwr4A8',
bucket: 'hsz1997'
})
/**
* 上传文件,大小不能超过5GB
* @param {string} ObjName OSS的储存路径和文件名字
* @param {string} fileUrl 本地文件
*
* @retruns Promise
*/
export const put = async(ObjName, fileUrl) => {
try {
let result = await client.put(`/test/String/${ObjName}`, fileUrl)
// AAA为文件夹, ObjName为文件名字,可以只写名字,就直接储存在 bucket 的根路径
return result
} catch (e) {
console.log(e)
}
}
export const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return `${+new Date()}_${rx()}${rx()}`
}
This diff is collapsed.
import request from '@/utils/request'
export function policy() {
return request({
url: 'get',
method: 'get'
})
}
This diff is collapsed.
This diff is collapsed.
[class*=" el-icon-lx"], [class^=el-icon-lx] {
font-family: lx-iconfont!important;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment