jiazhizhong/crmeb_java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我们发布啦

Browse Source
This commit is contained in:
张乐
2020-08-13 16:12:57 +08:00
parent a3e1c38d27
commit c0cec49f41
1885 changed files with 376936 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
admin/src/App.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>

123
admin/src/api/article.js Normal file
View File

@@ -0,0 +1,123 @@
import request from '@/utils/request'
/**
* 绑定产品
* @param pram
*/
export function bindProduct(pram) {
const data = {
id: pram.id,
productId: pram.productId
}
return request({
url: '/admin/article/bind/product',
method: 'POST',
params: data
})
}
/**
* 删除文章
* @param id
* @constructor
*/
export function DelArticle(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/article/delete',
method: 'GET',
params: data
})
}
/**
* 文章详情
* @param id
* @constructor
*/
export function InfoArticle(id) {
const data = {
id: id
}
return request({
url: '/admin/article/info',
method: 'get',
params: data
})
}
/**
* 文章列表
* @param pram
* @constructor
*/
export function ListArticle(pram) {
const data = {
keywords: pram.keywords,
cid: pram.cid,
page: pram.page,
limit: pram.limit
}
return request({
url: '/admin/article/list',
method: 'GET',
params: data
})
}
/**
* 新增文章
* @param pram
* @constructor
*/
export function AddArticle(pram) {
const data = {
author: pram.author,
cid: pram.cid,
content: pram.content,
imageInput: pram.imageInput,
isBanner: pram.isBanner,
isHot: pram.isHot,
shareSynopsis: pram.shareSynopsis,
shareTitle: pram.shareTitle,
sort: pram.sort,
synopsis: pram.synopsis,
title: pram.title,
url: pram.url
}
return request({
url: '/admin/article/save',
method: 'post',
params: data
})
}
/**
* 更新文章
* @param pram
* @constructor
*/
export function UpdateArticle(pram) {
const data = {
id: pram.id,
author: pram.author,
cid: pram.cid,
content: pram.content,
imageInput: pram.imageInput,
isBanner: pram.isBanner,
isHot: pram.isHot,
shareSynopsis: pram.shareSynopsis,
shareTitle: pram.shareTitle,
sort: pram.sort,
synopsis: pram.synopsis,
title: pram.title,
url: pram.url
}
return request({
url: '/admin/article/update',
method: 'post',
params: data
})
}

126
admin/src/api/categoryApi.js Normal file
View File

@@ -0,0 +1,126 @@
import request from '@/utils/request'
/**
* 新增分类
* @param pram
*/
export function addCategroy(pram) {
const data = {
extra: pram.extra,
name: pram.name,
pid: pram.pid,
sort: pram.sort,
status: pram.status,
type: pram.type,
url: pram.url
}
return request({
url: '/admin/category/save',
method: 'POST',
params: data
})
}
/**
* 分类详情
* @param pram
*/
export function infoCategroy(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/category/info',
method: 'GET',
params: data
})
}
/**
* 删除分类
* @param pram
*/
export function deleteCategroy(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/category/delete',
method: 'GET',
params: data
})
}
/**
* 分类列表
* @param pram
*/
export function listCategroy(pram) {
const data = {
limit: pram.limit,
name: pram.name,
page: pram.page,
pid: pram.pid,
status: pram.status,
type: pram.type
}
return request({
url: '/admin/category/list',
method: 'GET',
params: data
})
}
/**
* 分类数据tree数据
* @param pram
*/
export function treeCategroy(pram) {
const data = {
type: pram.type,
status: pram.status
}
return request({
url: '/admin/category/list/tree',
method: 'GET',
params: data
})
}
/**
* 更新分类
* @param pram
*/
export function updateCategroy(pram) {
const data = {
extra: pram.extra,
name: pram.name,
pid: pram.pid,
sort: pram.sort,
status: pram.status,
type: pram.type,
url: pram.url,
id: pram.id
}
return request({
url: '/admin/category/update',
method: 'POST',
params: data
})
}
/**
* 根据id集合查询对应分类列表
* @param pram
*/
export function categroyByIds(pram) {
const data = {
ids: pram.ids
}
return request({
url: '/admin/category/list/ids',
method: 'GET',
params: data
})
}

101
admin/src/api/configApi.js Normal file
View File

@@ -0,0 +1,101 @@
import request from '@/utils/request'
// 配置管理
export function configDelete(pram) {
const data = {
id: pram.id
}
return request({
url: 'admin/system/config/delete',
method: 'GET',
params: data
})
}
export function configInfo(pram) {
const data = {
id: pram.id
}
return request({
url: 'admin/system/config/info',
method: 'GET',
params: data
})
}
export function configList(pram) {
const data = {
id: pram.id,
configTabId: pram.configTabId,
desc: pram.desc,
high: pram.high,
info: pram.info,
inputType: pram.inputType,
menuName: pram.menuName,
parameter: pram.parameter,
required: pram.required,
sort: pram.sort,
status: pram.status,
type: pram.type,
updateType: pram.updateType,
value: pram.value,
width: pram.width,
page: pram.page,
limit: pram.limit
}
return request({
url: 'admin/system/config/list',
method: 'POST',
params: data
})
}
export function configSave(pram) {
const data = {
id: pram.id,
configTabId: pram.configTabId,
desc: pram.desc,
high: pram.high,
info: pram.info,
inputType: pram.inputType,
menuName: pram.menuName,
parameter: pram.parameter,
required: pram.required,
sort: pram.sort,
status: pram.status,
type: pram.type,
updateType: pram.updateType,
value: pram.value,
width: pram.width
}
return request({
url: 'admin/system/config/save',
method: 'POST',
params: data
})
}
export function configUpdate(pram) {
const data = {
id: pram.id,
configTabId: pram.configTabId,
desc: pram.desc,
high: pram.high,
info: pram.info,
inputType: pram.inputType,
menuName: pram.menuName,
parameter: pram.parameter,
required: pram.required,
sort: pram.sort,
status: pram.status,
type: pram.type,
updateType: pram.updateType,
value: pram.value,
width: pram.width
}
return request({
url: 'admin/system/config/update',
method: 'POST',
params: data
})
}

95
admin/src/api/configTabApi.js Normal file
View File

@@ -0,0 +1,95 @@
import request from '@/utils/request'
// 配置分类管理
// 注意暂时没用到，使用无限极分类实现
export function configTabDelete(pram) {
const data = {
id: pram.id
}
return request({
url: 'admin/system/config/tab/delete',
method: 'GET',
params: data
})
}
export function configTabInfo(pram) {
const data = {
id: pram.id
}
return request({
url: 'admin/system/config/tab/info',
method: 'GET',
params: data
})
}
export function configTabList(pram) {
const data = {
id: pram.id,
engTitle: pram.engTitle,
icon: pram.icon,
info: pram.info,
title: pram.title,
parameter: pram.parameter,
status: pram.status,
page: pram.page,
limit: pram.limit
}
return request({
url: 'admin/system/config/tab/list',
method: 'POST',
params: data
})
}
export function configSave(pram) {
const data = {
id: pram.id,
configTabId: pram.configTabId,
desc: pram.desc,
high: pram.high,
info: pram.info,
inputType: pram.inputType,
menuName: pram.menuName,
parameter: pram.parameter,
required: pram.required,
sort: pram.sort,
status: pram.status,
type: pram.type,
updateType: pram.updateType,
value: pram.value,
width: pram.width
}
return request({
url: 'admin/system/config/save',
method: 'POST',
params: data
})
}
export function configUpdate(pram) {
const data = {
id: pram.id,
configTabId: pram.configTabId,
desc: pram.desc,
high: pram.high,
info: pram.info,
inputType: pram.inputType,
menuName: pram.menuName,
parameter: pram.parameter,
required: pram.required,
sort: pram.sort,
status: pram.status,
type: pram.type,
updateType: pram.updateType,
value: pram.value,
width: pram.width
}
return request({
url: 'admin/system/config/update',
method: 'POST',
params: data
})
}

81
admin/src/api/dashboard.js Normal file
View File

@@ -0,0 +1,81 @@
import request from '@/utils/request'
// 订单量
export function statisticsOrderApi() {
return request({
url: '/admin/statistics/home/order',
method: 'get'
})
}
// 销售额
export function statisticsSalesApi() {
return request({
url: '/admin/statistics/home/sales',
method: 'get'
})
}
// 新增用户
export function statisticsUserApi() {
return request({
url: '/admin/statistics/home/user',
method: 'get'
})
}
// 用户访问量
export function statisticsViewsApi() {
return request({
url: '/admin/statistics/home/views',
method: 'get'
})
}
// 用户曲线图
export function chartUserApi() {
return request({
url: '/admin/statistics/home/chart/user',
method: 'get'
})
}
// 用户购买统计
export function chartBuyApi() {
return request({
url: '/admin/statistics/home/chart/user/buy',
method: 'get'
})
}
// 订单量趋势 30天
export function chartOrder30Api() {
return request({
url: '/admin/statistics/home/chart/order',
method: 'get'
})
}
// 订单量趋势 月
export function chartOrderMonthApi() {
return request({
url: '/admin/statistics/home/chart/order/month',
method: 'get'
})
}
// 订单量趋势 周
export function chartOrderWeekApi() {
return request({
url: '/admin/statistics/home/chart/order/week',
method: 'get'
})
}
// 订单量趋势 年
export function chartOrderYearApi() {
return request({
url: '/admin/statistics/home/chart/order/year',
method: 'get'
})
}

90
admin/src/api/distribution.js Normal file
View File

@@ -0,0 +1,90 @@
import request from '@/utils/request'
/**
* @description 分销设置 -- 详情
*/
export function configApi() {
return request({
url: '/admin/store/retail/spread/manage/get',
method: 'get'
})
}
/**
* @description 分销设置 -- 表单提交
*/
export function configUpdateApi(params) {
return request({
url: '/admin/marketing/coupon/list',
method: 'get',
params
})
}
/**
* @description 分销设置 -- 表单提交
*/
export function productCheckApi(data) {
return request({
url: '/admin/store/retail/spread/manage/set',
method: 'post',
data
})
}
/**
* @description 分销员 -- 列表
*/
export function promoterListApi(params) {
return request({
url: '/admin/store/retail/list',
method: 'get',
params
})
}
/**
* @description 推广人 -- 列表
*/
export function spreadListApi( params, data) {
return request({
url: '/admin/store/retail/spread/userlist',
method: 'post',
params,
data
})
}
/**
* @description 推广人订单 -- 列表
*/
export function spreadOrderListApi(params, data) {
return request({
url: '/admin/store/retail/spread/orderlist',
method: 'post',
params,
data
})
}
/**
* @description 推广人 -- 清除上级推广人
*/
export function spreadClearApi(id) {
return request({
url: `/admin/store/retail/spread/clean/${id}`,
method: 'get'
})
}
/**
* @description 分销统计
*/
export function spreadStatisticsApi(params) {
return request({
url: `/admin/store/retail/statistics`,
method: 'get',
params
})
}

154
admin/src/api/logistics.js Normal file
View File

@@ -0,0 +1,154 @@
import request from '@/utils/request'
// 城市列表
export function cityList(data) {
return request({
url: '/admin/system/city/list',
method: 'get',
params: { ...data }
})
}
// 城市列表
export function cityListTree() {
return request({
url: '/admin/system/city/list/tree',
method: 'get'
})
}
// 城市修改状态
export function updateStatus(data) {
return request({
url: '/admin/system/city/update/status',
method: 'post',
params: { ...data }
})
}
// 城市修改
export function cityUpdate(data) {
return request({
url: '/admin/system/city/update',
method: 'post',
params: { ...data }
})
}
// 城市详情
export function cityInfo(data) {
return request({
url: '/admin/system/city/info',
method: 'get',
params: { ...data }
})
}
// 物流公司列表
export function expressList(data) {
return request({
url: '/admin/express/list',
method: 'get',
params: { ...data }
})
}
// 物流公司修改状态
export function expressUpdate(data) {
return request({
url: '/admin/express/update',
method: 'post',
params: { ...data }
})
}
// 新增物流公司
export function expressSave(data) {
return request({
url: '/admin/express/save',
method: 'post',
params: { ...data }
})
}
// 删除物流公司
export function expressDelete(data) {
return request({
url: '/admin/express/delete',
method: 'GET',
params: { ...data }
})
}
// 物流运费模板列表
export function shippingTemplatesList(data) {
return request({
url: '/admin/express/shipping/templates/list',
method: 'get',
params: { ...data }
})
}
// 物流运费模板详情
export function templateDetailApi(data) {
return request({
url: '/admin/express/shipping/templates/info',
method: 'get',
params: { ...data }
})
}
// 物流运费模板包邮
export function shippingFree(data) {
return request({
url: '/admin/express/shipping/free/list',
method: 'get',
params: { ...data }
})
}
// 物流运费模板不包邮
export function shippingRegion(data) {
return request({
url: 'admin/express/shipping/region/list',
method: 'get',
params: { ...data }
})
}
// 物流运费模板新增
export function shippingSave(data) {
return request({
url: 'admin/express/shipping/templates/save',
method: 'post',
data: data
})
}
// 物流运费模板更新
export function shippingUpdate(data, id) {
return request({
url: 'admin/express/shipping/templates/update',
method: 'post',
data: data,
params: { ...id }
})
}
// 物流运费模板删除
export function shippingDetete(data) {
return request({
url: 'admin/express/shipping/templates/delete',
method: 'get',
params: data
})
}
// 物流公司详情
export function expressInfo(data) {
return request({
url: 'admin/express/info',
method: 'get',
params: { ...data }
})
}

86
admin/src/api/marketing.js Normal file
View File

@@ -0,0 +1,86 @@
import request from '@/utils/request'
/**
* 优惠券 列表
* @param pram
*/
export function marketingListApi(params) {
return request({
url: '/admin/marketing/coupon/list',
method: 'get',
params
})
}
/**
* 优惠券 详情
* @param pram
*/
export function couponInfoApi(params) {
return request({
url: '/admin/marketing/coupon/info',
method: 'post',
params
})
}
/**
* 优惠券 发送
* @param pram
*/
export function couponUserApi(params) {
return request({
url: '/admin/marketing/coupon/user/receive',
method: 'post',
params
})
}
/**
* 优惠券 发送
* @param pram
*/
export function couponSaveApi(data) {
return request({
url: '/admin/marketing/coupon/save',
method: 'post',
data
})
}
/**
* 优惠券 修改状态
* @param pram
*/
export function couponIssueStatusApi(params) {
return request({
url: '/admin/marketing/coupon/update/status',
method: 'post',
params
})
}
/**
* 会员领取记录 列表
* @param pram
*/
export function couponUserListApi(params) {
return request({
url: '/admin/marketing/coupon/user/list',
method: 'get',
params
})
}
/**
* 积分日志 列表
* @param pram
*/
export function integralListApi(data) {
return request({
url: '/admin/user/bill/list',
method: 'post',
data
})
}

111
admin/src/api/order.js Normal file
View File

@@ -0,0 +1,111 @@
import request from '@/utils/request'
/**
* 订单 列表
* @param pram
*/
export function orderListApi(params) {
return request({
url: '/admin/store/order/list',
method: 'get',
params
})
}
/**
* 订单 删除
* @param pram
*/
export function orderDeleteApi(params) {
return request({
url: '/admin/store/order/delete',
method: 'get',
params
})
}
/**
* 订单 编辑
* @param pram
*/
export function orderUpdateApi(data, params) {
return request({
url: '/admin/store/order/update',
method: 'post',
data,
params
})
}
/**
* 订单 记录
* @param pram
*/
export function orderLogApi(params) {
return request({
url: '/admin/store/order/status/list',
method: 'get',
params
})
}
/**
* 订单 详情
* @param pram
*/
export function orderDetailApi(params) {
return request({
url: '/admin/store/order/info',
method: 'get',
params
})
}
/**
* 订单 备注
* @param pram
*/
export function orderMarkApi(params) {
return request({
url: '/admin/store/order/mark',
method: 'post',
params
})
}
/**
* 订单 发货
* @param pram
*/
export function orderSendApi(params) {
return request({
url: '/admin/store/order/send',
method: 'get',
params
})
}
/**
* 订单 拒绝退款
* @param pram
*/
export function orderRefuseApi(params) {
return request({
url: '/admin/store/order/refund/refuse',
method: 'get',
params
})
}
/**
* 订单 立即退款
* @param pram
*/
export function orderRefundApi(params) {
return request({
url: '/admin/store/order/refund',
method: 'get',
params
})
}

8
admin/src/api/qiniu.js Normal file
View File

@@ -0,0 +1,8 @@
import request from '@/utils/request'
export function getToken() {
return request({
url: '/qiniu/upload/token', // 假地址 自行替换
method: 'get'
})
}

17
admin/src/api/remote-search.js Normal file
View File

@@ -0,0 +1,17 @@
import request from '@/utils/request'
export function searchUser(name) {
return request({
url: '/vue-element-admin/search/user',
method: 'get',
params: { name }
})
}
export function transactionList(query) {
// return request({
// url: '/vue-element-admin/transaction/list',
// method: 'get',
// params: query
// })
}

70
admin/src/api/role.js Normal file
View File

@@ -0,0 +1,70 @@
import request from '@/utils/request'
export function addRole(pram) {
const data = {
level: pram.level,
roleName: pram.roleName,
status: pram.status
}
data.rules = pram.rules.join(',')
return request({
url: '/admin/system/role/save',
method: 'POST',
params: data
})
}
export function delRole(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/role/delete',
method: 'GET',
params: data
})
}
export function getInfo(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/role/info',
method: 'get',
params: data
})
}
export function getRoleList(pram) {
const data = {
createTime: pram.createTime,
updateTime: pram.updateTime,
level: pram.level,
page: pram.page,
limit: pram.limit,
roleName: pram.roleName,
rules: pram.rules,
status: pram.status
}
return request({
url: '/admin/system/role/list',
method: 'get',
params: data
})
}
export function updateRole(pram) {
const data = {
id: pram.id,
level: pram.level,
roleName: pram.roleName,
rules: pram.rules.join(','),
status: pram.status
}
return request({
url: '/admin/system/role/update',
method: 'post',
params: data
})
}

21
admin/src/api/roleApi.js Normal file
View File

@@ -0,0 +1,21 @@
import request from '@/utils/request'
export function getRoleById(pram) {
const data = { id: pram.id }
return request({
url: '/admin/system/role/info',
method: 'GET',
params: data
})
}
/**
* 菜单
* @param pram
*/
export function menuListApi() {
return request({
url: '/admin/system/role/menu',
method: 'GET'
})
}

127
admin/src/api/sms.js Normal file
View File

@@ -0,0 +1,127 @@
import request from '@/utils/request'
/**
* @description 短信发送记录 -- 列表
*/
export function smsLstApi(params) {
return request({
url: '/admin/sms/record/list',
method: 'get',
params
})
}
/**
* @description 短信账户 -- 登录
*/
export function configApi(params) {
return request({
url: '/admin/sms/login',
method: 'get',
params
})
}
/**
* @description 短信账户 -- 获取验证码
*/
export function captchaApi(phone) {
return request({
url: `/admin/sms/sendCodeForRegister/${phone}`,
method: 'get'
})
}
/**
* @description 短信账户 -- 注册
*/
export function registerApi(params) {
return request({
url: '/admin/sms/register',
method: 'post',
params
})
}
/**
* @description 短信账户 -- 是否登录
*/
export function isLoginApi() {
return request({
url: '/admin/sms/islogin',
method: 'get'
})
}
/**
* @description 短信账户 -- 退出登录
*/
export function logoutApi() {
return request({
url: '/admin/sms/logout',
method: 'get'
})
}
/**
* @description 短信账户 -- 剩余条数
*/
export function smsNumberApi() {
return request({
url: '/admin/sms/logout',
method: 'get'
})
}
/**
* @description 短信模板 -- 列表
*/
export function smsTempLstApi(params) {
return request({
url: '/admin/sms/temp/list',
method: 'get',
params
})
}
/**
* @description 短信购买 -- 支付套餐
*/
export function smsPriceApi(params) {
return request({
url: '/admin/sms/pay/list',
method: 'get',
params
})
}
/**
* @description 短信购买 -- 支付码
*/
export function payCodeApi(params) {
return request({
url: '/admin/sms/pay/qrCode',
method: 'get',
params
})
}
/**
* @description 短信模板 -- 添加表单
*/
export function tempCreateApi(params) {
return request({
url: '/admin/sms/temp/apply',
method: 'post',
params
})
}
/**
* @description 短信 -- 用户信息
*/
export function smsInfoApi() {
return request({
url: '/admin/sms/info',
method: 'get'
})
}
/**
* @description 短信 -- 短信提醒开关保存
*/
export function smsSaveApi(params) {
return request({
url: '/admin/sms/config/save',
method: 'post',
params
})
}

243
admin/src/api/store.js Normal file
View File

@@ -0,0 +1,243 @@
import request from '@/utils/request'
/**
* 新增商品
* @param pram
*/
export function productCreateApi(data) {
return request({
url: '/admin/store/product/save',
method: 'POST',
data
})
}
/**
* 编辑商品
* @param pram
*/
export function productUpdateApi(data) {
return request({
url: '/admin/store/product/update',
method: 'POST',
data
})
}
/**
* 商品详情
* @param pram
*/
export function productDetailApi(id) {
return request({
url: `/admin/store/product/info/${id}`,
method: 'GET'
})
}
/**
* 删除商品
* @param pram
*/
export function productDeleteApi(id) {
return request({
url: `/admin/store/product/delete/${id}`,
method: 'get'
})
}
/**
* 商品列表 表头数量
*/
export function productHeadersApi() {
return request({
url: '/admin/store/product/tabs/headers',
method: 'GET'
})
}
/**
* 商品列表
* @param pram
*/
export function productLstApi(params) {
return request({
url: '/admin/store/product/list',
method: 'GET',
params
})
}
/**
* 商品分类
* @param pram
*/
export function categoryApi(params) {
return request({
url: '/admin/category/list/tree',
method: 'GET',
params
})
}
/**
* 商品上架
* @param pram
*/
export function putOnShellApi(id) {
return request({
url: `/admin/store/product/putOnShell/${id}`,
method: 'GET'
})
}
/**
* 商品下架
* @param pram
*/
export function offShellApi(id) {
return request({
url: `/admin/store/product/offShell/${id}`,
method: 'GET'
})
}
/**
* 商品规格 列表
* @param pram
*/
export function templateListApi(params) {
return request({
url: '/admin/store/product/rule/list',
method: 'GET',
params
})
}
/**
* 商品规格 删除
* @param pram
*/
export function attrDeleteApi(id) {
return request({
url: `/admin/store/product/rule/delete/${id}`,
method: 'get'
})
}
/**
* 商品规格 新增
* @param pram
*/
export function attrCreatApi(data) {
return request({
url: '/admin/store/product/rule/save',
method: 'POST',
data
})
}
/**
* 商品规格 编辑
* @param pram
*/
export function attrEditApi(data) {
return request({
url: '/admin/store/product/rule/update',
method: 'POST',
data
})
}
/**
* 商品规格 详情
* @param pram
*/
export function attrInfoApi(id) {
return request({
url: `admin/store/product/rule/info/${id}`,
method: 'GET'
})
}
/**
* 商品评论 列表
* @param pram
*/
export function replyListApi(params) {
return request({
url: '/admin/store/product/reply/list',
method: 'GET',
params
})
}
/**
* 商品评论 新增
* @param pram
*/
export function replyCreatApi(data) {
return request({
url: '/admin/store/product/reply/save',
method: 'POST',
data
})
}
/**
* 商品评论 编辑
* @param pram
*/
export function replyEditApi(data) {
return request({
url: '/admin/store/product/reply/update',
method: 'POST',
data
})
}
/**
* 商品评论 详情
* @param pram
*/
export function replyInfoApi(id) {
return request({
url: `/admin/store/product/reply/info/${id}`,
method: 'GET'
})
}
/**
* 商品评论 删除
* @param pram
*/
export function replyDeleteApi(id) {
return request({
url: `/admin/store/product/reply/delete/${id}`,
method: 'GET'
})
}
/**
* 商品评论 回复
* @param pram
*/
export function replyCommentApi(data) {
console.log(data)
return request({
url: `/admin/store/product/reply/comment`,
method: 'post',
data
})
}
/**
* 商品评论 导出
* @param pram
*/
export function productExportApi(params) {
return request({
url: `/admin/export/excel/product`,
method: 'get',
params
})
}
/**
* 商品复制
* @param pram
*/
export function importProductApi(params) {
return request({
url: `/admin/store/product/importProduct`,
method: 'post',
params
})
}

193
admin/src/api/storePoint.js Normal file
View File

@@ -0,0 +1,193 @@
import request from '@/utils/request'
/**
* 提货点分页列表
* @param pram
*/
export function storeListApi(data) {
return request({
url: '/admin/system/store/list',
method: 'get',
params: data
})
}
/**
* 提货点数量
* @param pram
*/
export function storeGetCountApi() {
return request({
url: '/admin/system/store/getCount',
method: 'get'
})
}
/**
* 提货点门店状态
* @param pram
*/
export function storeUpdateStatusApi(data) {
return request({
url: '/admin/system/store/update/status',
method: 'get',
params: data
})
}
/**
* 提货点门店刪除
* @param pram
*/
export function storeDeleteApi(data) {
return request({
url: '/admin/system/store/delete',
method: 'get',
params: data
})
}
/**
* 提货点添加
* @param pram
*/
export function storeSaveApi(data) {
return request({
url: '/admin/system/store/save',
method: 'post',
data
})
}
/**
* 提货点详情
* @param pram
*/
export function storeInfoApi(data) {
return request({
url: '/admin/system/store/info',
method: 'get',
params: data
})
}
/**
* 提货点修改
* @param pram
*/
export function storeUpdateApi(data,id) {
// const param = ;
return request({
url: '/admin/system/store/update',
method: 'post',
params: {id: id},
data
})
}
/**
* 核销员分页列表
* @param pram
*/
export function storeStaffListApi(data) {
return request({
url: '/admin/system/store/staff/list',
method: 'get',
params: data
})
}
/**
* 核销员添加
* @param pram
*/
export function storeStaffSaveApi(data) {
return request({
url: '/admin/system/store/staff/save',
method: 'POST',
params: data
})
}
/**
* 核销员删除
* @param pram
*/
export function storeStaffDeleteApi(data) {
return request({
url: '/admin/system/store/staff/delete',
method: 'get',
params: data
})
}
/**
* 核销员编辑
* @param pram
*/
export function storeStaffUpdateApi(data) {
return request({
url: '/admin/system/store/staff/update',
method: 'POST',
params: data
})
}
/**
* 核销员编辑
* @param pram
*/
export function storeStaffInfoApi(id) {
return request({
url: '/admin/system/store/staff/info',
method: 'get',
params: id
})
}
/**
* 核销员编辑
* @param pram
*/
export function storeStaffUpdateStatusApi(data) {
return request({
url: '/admin/system/store/staff/update/status',
method: 'get',
params: data
})
}
/**
* 核销员编辑
* @param pram
*/
export function userListApi(data) {
return request({
url: '/admin/wechat/user/list',
method: 'get',
params: data
})
}
/**
* 核销订单
* @param pram
*/
export function orderListApi(params) {
return request({
url: '/admin/system/store/order/list',
method: 'post',
params
})
}

59
admin/src/api/system.js Normal file
View File

@@ -0,0 +1,59 @@
import request from '@/utils/request'
/**
* 新增商品
* @param pram
*/
export function productCreateApi(data) {
return request({
url: '/admin/product/save',
method: 'POST',
data
})
}
/**
* @description 附件分类 -- 所有分类
*/
export function formatLstApi(data) {
return request.get({
url: '/admin/product/save',
method: 'POST',
data
})
}
/**
* @description 附件分类 -- 添加分类
*/
export function attachmentCreateApi() {
return request.get(`system/attachment/category/create/form`)
}
/**
* @description 附件分类 -- 编辑分类
*/
export function attachmentUpdateApi(id) {
return request.get(`system/attachment/category/update/form/${id}`)
}
/**
* @description 附件分类 -- 删除分类
*/
export function attachmentDeleteApi(id) {
return request.delete(`system/attachment/category/delete/${id}`)
}
/**
* @description 图片列表
*/
export function attachmentListApi(data) {
return request.get(`system/attachment/lst`, data)
}
/**
* @description 图片列表 -- 删除
*/
export function picDeleteApi(id) {
return request.delete(`system/attachment/delete`, id)
}
/**
* @description 图片列表 -- 修改附件分类
*/
export function categoryApi(ids, attachment_category_id) {
return request.post(`system/attachment/category`, { ids, attachment_category_id })
}

111
admin/src/api/systemConfig.js Normal file
View File

@@ -0,0 +1,111 @@
import request from '@/utils/request'
export function configCheckUnique(pram) {
const data = {
name: pram.name
}
return request({
url: '/admin/system/config/check',
method: 'GET',
params: data
})
}
export function configDelete(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/config/delete',
method: 'GET',
params: data
})
}
export function configInfo(pram) {
const data = {
formId: pram.id
}
return request({
url: '/admin/system/config/info',
method: 'GET',
params: data
})
}
export function configList(pram) {
const data = {
page: pram.page,
limit: pram.limit
}
return request({
url: '/admin/system/config/list',
method: 'GET',
params: data
})
}
export function configSave(pram) {
const data = {
systemConfigRequest: {
desc: pram.desc,
groupId: pram.groupId,
info: pram.info,
name: pram.name,
pid: pram.pid,
status: pram.status,
type: pram.type,
value: pram.value // value 存储表单配置数据，其他的参数来自于父级数据 justForAPI
}
}
return request({
url: '/admin/system/config/save',
method: 'POST',
params: data
})
}
export function configSaveForm(pram) {
return request({
url: '/admin/system/config/save/form',
method: 'POST',
data: pram
})
}
export function configUpdate(pram) {
const data = {
id: pram.id,
systemConfigRequest: pram.systemConfigRequest
}
return request({
url: '/admin/system/config/update',
method: 'POST',
params: data
})
}
export function configSaveUniq(pram) {
const data = {
key: pram.key,
value: pram.value
}
return request({
url: '/admin/system/config/saveuniq',
method: 'POST',
params: data
})
}
export function configGetUniq(pram) {
const data = {
key: pram.key
}
return request({
url: '/admin/system/config/getuniq',
method: 'GET',
params: data
})
}

53
admin/src/api/systemFormConfig.js Normal file
View File

@@ -0,0 +1,53 @@
import request from '@/utils/request'
export function getFormConfigInfo(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/form/temp/info',
method: 'GET',
params: data
})
}
export function getFormConfigList(pram) {
const data = {
keywords: pram.keywords,
page: pram.page,
limit: pram.limit
}
return request({
url: '/admin/system/form/temp/list',
method: 'GET',
params: data
})
}
export function getFormConfigSave(pram) {
const data = {
content: pram.content,
info: pram.info,
name: pram.name
}
return request({
url: '/admin/system/form/temp/save',
method: 'POST',
data: data
})
}
export function getFormConfigEdit(pram) {
const params = { id: pram.id }
const data = {
content: pram.content,
info: pram.info,
name: pram.name
}
return request({
url: '/admin/system/form/temp/update',
method: 'POST',
params: params,
data: data
})
}

63
admin/src/api/systemGroup.js Normal file
View File

@@ -0,0 +1,63 @@
import request from '@/utils/request'
export function groupDelete(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/group/delete',
method: 'GET',
params: data
})
}
export function groupInfo(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/group/info',
method: 'GET',
params: data
})
}
export function groupList(pram) {
const data = {
keywords: pram.keywords,
page: pram.page,
limit: pram.limit
}
return request({
url: '/admin/system/group/list',
method: 'GET',
params: data
})
}
export function groupSave(pram) {
const data = {
formId: pram.formId,
info: pram.info,
name: pram.name
}
return request({
url: '/admin/system/group/save',
method: 'POST',
params: data
})
}
export function groupEdit(pram) {
const data = {
formId: pram.formId,
info: pram.info,
name: pram.name,
id: pram.id
}
return request({
url: '/admin/system/group/update',
method: 'POST',
params: data
})
}

55
admin/src/api/systemGroupData.js Normal file
View File

@@ -0,0 +1,55 @@
import request from '@/utils/request'
export function groupDataDelete(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/group/data/delete',
method: 'GET',
params: data
})
}
export function groupDataInfo(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/group/data/info',
method: 'GET',
params: data
})
}
export function groupDataList(pram) {
const data = {
gid: pram.gid,
keywords: pram.keywords,
status: pram.status, // 1=开启 2=关闭
page: pram.page,
limit: pram.limit
}
return request({
url: '/admin/system/group/data/list',
method: 'GET',
params: data
})
}
export function groupDataSave(pram) {
return request({
url: '/admin/system/group/data/save',
method: 'POST',
data: pram
})
}
export function groupDataEdit(pram, id) {
return request({
url: '/admin/system/group/data/update',
method: 'POST',
data: pram,
params: { id: id }
})
}

93
admin/src/api/systemSetting.js Normal file
View File

@@ -0,0 +1,93 @@
import request from '@/utils/request'
export function systemConfigCheck(pram) {
const data = {
name: pram.name
}
return request({
url: '/admin/system/config/check',
method: 'GET',
params: data
})
}
export function systemConfigInfo(pram) {
const data = {
formId: pram.id
}
return request({
url: '/admin/system/config/info',
method: 'GET',
params: data
})
}
export function systemConfigSave(pram) {
return request({
url: '/admin/system/config/save/form',
method: 'POST',
data: pram
})
}
/**
* 文件上传
* @param data
*/
export function fileFileApi(data, params) {
return request({
url: '/admin/upload/file',
method: 'POST',
params,
data
})
}
/**
* 图片上传
* @param data
*/
export function fileImageApi(data, params) {
return request({
url: '/admin/wechat/media/upload',
method: 'POST',
params,
data
})
}
/**
* 图片列表
* @param data
*/
export function fileListApi(params) {
return request({
url: '/admin/system/attachment/list',
method: 'get',
params
})
}
/**
* 图片列表 删除图片
* @param data
*/
export function fileDeleteApi(id) {
return request({
url: `/admin/system/attachment/delete/${id}`,
method: 'get'
})
}
/**
* 图片列表 移動分類
* @param data
*/
export function attachmentMoveApi(data) {
return request({
url: `/admin/system/attachment/move`,
method: 'post',
data
})
}

86
admin/src/api/systemadmin.js Normal file
View File

@@ -0,0 +1,86 @@
import request from '@/utils/request'
export function getMenu() {
return request({
url: '/admin/system/role/testMenu',
method: 'GET'
})
}
export function adminDel(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/admin/delete',
method: 'GET',
params: data
})
}
export function adminInfo(pram) {
const data = {
id: pram.id
}
return request({
url: '/admin/system/admin/info',
method: 'GET',
params: data
})
}
export function adminList(pram) {
const data = {
account: pram.account,
addTime: pram.addTime,
isDel: pram.isDel,
lastIp: pram.lastIp,
lastTime: pram.lastTime,
level: pram.level,
loginCount: pram.loginCount,
page: pram.page,
limit: pram.limit,
realName: pram.realName,
roles: pram.roles,
status: pram.status
}
return request({
url: '/admin/system/admin/list',
method: 'GET',
params: data
})
}
export function adminAdd(pram) {
const data = {
account: pram.account,
level: pram.level,
pwd: pram.pwd,
realName: pram.realName,
roles: pram.roles.join(','),
status: pram.status
}
return request({
url: '/admin/system/admin/save',
method: 'POST',
params: data
})
}
export function adminUpdate(pram) {
// const data = {
// account: pram.account,
// level: pram.level,
// pwd: pram.pwd,
// realName: pram.realName,
// roles: pram.roles.join(','),
// status: pram.status,
// id: pram.id,
// isDel: pram.isDel
// }
return request({
url: '/admin/system/admin/update',
method: 'POST',
params: pram
})
}

349
admin/src/api/user.js Normal file
View File

@@ -0,0 +1,349 @@
import request from '@/utils/request'
export function login(data) {
return request({
url: '/admin/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
url: '/admin/getAdminInfoByToken',
method: 'get',
params: { token }
})
}
export function logout() {
return request({
url: '/admin/logout',
method: 'get'
})
}
/**
* 会员管理 列表
* @param pram
*/
export function userListApi(params) {
return request({
url: `/admin/user/list`,
method: 'get',
params
})
}
/**
* 会员管理 修改
* @param pram
*/
export function userUpdateApi(params, data) {
return request({
url: `/admin/user/update`,
method: 'post',
params,
data
})
}
/**
* 会员管理 详情
* @param pram
*/
export function userInfoApi(params) {
return request({
url: `/admin/user/info`,
method: 'get',
params
})
}
/**
* 会员管理 账户详情
* @param pram
*/
export function infobyconditionApi(params) {
return request({
url: `/admin/user/infobycondition`,
method: 'get',
params
})
}
/**
* 会员管理 账户详情top数据
* @param pram
*/
export function topdetailApi(params) {
return request({
url: `/admin/user/topdetail`,
method: 'get',
params
})
}
/**
* 会员管理 批量设置分组
* @param pram
*/
export function groupPiApi(params) {
return request({
url: `/admin/user/group`,
method: 'post',
params
})
}
/**
* 会员管理 批量设置标签
* @param pram
*/
export function tagPiApi(params) {
return request({
url: `/admin/user/tag`,
method: 'post',
params
})
}
/**
* 会员管理 积分余额
* @param pram
*/
export function foundsApi(params) {
return request({
url: `/admin/user/operate/founds`,
method: 'get',
params
})
}
/**
* 会员管理 删除
* @param pram
*/
export function userDeleteApi(params) {
return request({
url: `/admin/user/delete`,
method: 'get',
params
})
}
/**
* 会员等级 列表
* @param pram
*/
export function levelListApi(params) {
return request({
url: `/admin/system/user/level/list`,
method: 'get',
params
})
}
/**
* 会员等级 新增
* @param pram
*/
export function levelSaveApi(data) {
return request({
url: `/admin/system/user/level/save`,
method: 'post',
data
})
}
/**
* 会员等级 编辑
* @param pram
*/
export function levelUpdateApi(params, data) {
return request({
url: `/admin/system/user/level/update`,
method: 'post',
params,
data
})
}
/**
* 会员等级 详情
* @param pram
*/
export function levelInfoApi(params) {
return request({
url: `/admin/system/user/level/info`,
method: 'get',
params
})
}
/**
* 会员等级 删除
* @param pram
*/
export function levelDeleteApi(params) {
return request({
url: `/admin/system/user/level/delete`,
method: 'get',
params
})
}
/**
* 会员等级 是否显示
* @param pram
*/
export function levelUseApi(params) {
return request({
url: `/admin/system/user/level/use`,
method: 'get',
params
})
}
/**
* 会员标签 列表
* @param pram
*/
export function tagListApi(params) {
return request({
url: `/admin/user/tag/list`,
method: 'get',
params
})
}
/**
* 会员标签 新增
* @param pram
*/
export function tagSaveApi(data) {
return request({
url: `/admin/user/tag/save`,
method: 'post',
data
})
}
/**
* 会员标签 编辑
* @param pram
*/
export function tagUpdateApi(params, data) {
return request({
url: `/admin/user/tag/update`,
method: 'post',
params,
data
})
}
/**
* 会员标签 详情
* @param pram
*/
export function tagInfoApi(params) {
return request({
url: `/admin/user/tag/info`,
method: 'get',
params
})
}
/**
* 会员标签 删除
* @param pram
*/
export function tagDeleteApi(params) {
return request({
url: `/admin/user/tag/delete`,
method: 'get',
params
})
}
/**
* 会员分组 列表
* @param pram
*/
export function groupListApi(params) {
return request({
url: `/admin/user/group/list`,
method: 'get',
params
})
}
/**
* 会员分组 新增
* @param pram
*/
export function groupSaveApi(data) {
return request({
url: `/admin/user/group/save`,
method: 'post',
data
})
}
/**
* 会员分组 编辑
* @param pram
*/
export function groupUpdateApi(params, data) {
console.log(params, data)
return request({
url: `/admin/user/group/update`,
method: 'post',
params,
data
})
}
/**
* 会员分组 详情
* @param pram
*/
export function groupInfoApi(params) {
return request({
url: `/admin/user/group/info`,
method: 'get',
params
})
}
/**
* 会员分组 删除
* @param pram
*/
export function groupDeleteApi(params) {
return request({
url: `/admin/user/group/delete`,
method: 'get',
params
})
}
/**
*获取登录页图片
*/
export function getLoginPicApi() {
return request({
url: `/admin/getLoginPic`,
method: 'get'
})
}
/**
* @description 验证码
*/
export function captchaApi() {
return request({
url: `/admin/validate/code/get`,
method: 'get'
})
}

197
admin/src/api/wxApi.js Normal file
View File

@@ -0,0 +1,197 @@
import request from '@/utils/request'
// TODO 微信沟通难度大暂放 呵呵
export function menuCreate(data) {
return request({
url: '/admin/wechat/menu/public/create',
method: 'post',
params: data
})
}
export function menuDelete(data) {
return request({
url: '/admin/wechat/menu/public/delete',
method: 'post',
params: data
})
}
export function menuInfo(pram) {
const data = {
isAsync: pram.isAsync
}
return request({
url: '/admin/wechat/menu/public/get',
method: 'post',
params: data
})
}
/**
* 微信模板消息 列表
* @param pram
*/
export function wechatTemplateListApi(params) {
return request({
url: `/admin/wechat/template/list`,
method: 'get',
params
})
}
/**
* 微信模板消息 新增
* @param pram
*/
export function wechatTemplateSaveApi(data) {
return request({
url: `/admin/wechat/template/save`,
method: 'post',
data
})
}
/**
* 微信模板消息 编辑
* @param pram
*/
export function wechatTemplateUpdateApi(id, data) {
console.log(id)
return request({
url: `/admin/wechat/template/update/${id}`,
method: 'post',
data
})
}
/**
* 微信模板消息 详情
* @param pram
*/
export function wechatTemplateInfoApi(id) {
return request({
url: `/admin/wechat/template/info/${id}`,
method: 'get'
})
}
/**
* 微信模板消息 修改状态
* @param pram
*/
export function wechatTemplateStatusApi(id, params) {
return request({
url: `/admin/wechat/template/update/status/${id}`,
method: 'post',
params
})
}
/**
* 微信模板消息 删除
* @param pram
*/
export function wechatTemplateDeleteApi(id) {
return request({
url: `/admin/wechat/template/delete/${id}`,
method: 'get'
})
}
/**
* 关键字回复 列表
* @param pram
*/
export function replyListApi(params) {
return request({
url: `/admin/wechat/keywords/reply/list`,
method: 'get',
params
})
}
/**
* 关键字回复 新增
* @param pram
*/
export function replySaveApi(data) {
return request({
url: `/admin/wechat/keywords/reply/save`,
method: 'post',
data
})
}
/**
* 关键字回复 编辑
* @param pram
*/
export function replyUpdateApi(params, data) {
return request({
url: `/admin/wechat/keywords/reply/update`,
method: 'post',
params,
data
})
}
/**
* 关键字回复 详情
* @param pram
*/
export function replyInfoApi(params) {
return request({
url: `/admin/wechat/keywords/reply/info`,
method: 'get',
params
})
}
/**
* 关键字回复 删除
* @param pram
*/
export function replyDeleteApi(params) {
return request({
url: `/admin/wechat/keywords/reply/delete`,
method: 'get',
params
})
}
/**
* 关键字查询数据
* @param pram
*/
export function keywordsInfoApi(params) {
return request({
url: `/admin/wechat/keywords/reply/info/keywords`,
method: 'get',
params
})
}
/**
* 微信菜单 获取数据
* @param pram
*/
export function wechatMenuApi(params) {
return request({
url: `/admin/wechat/menu/public/get`,
method: 'get',
params
})
}
/**
* 微信菜单 新增
* @param pram
*/
export function wechatMenuAddApi(data) {
return request({
url: `/admin/wechat/menu/public/create`,
method: 'post',
data
})
}

BIN
admin/src/assets/401_images/401.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
admin/src/assets/404_images/404.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
admin/src/assets/404_images/404_cloud.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
admin/src/assets/custom-theme/fonts/element-icons.ttf Normal file
View File

Binary file not shown.

BIN
admin/src/assets/custom-theme/fonts/element-icons.woff Normal file
View File

Binary file not shown.

1
admin/src/assets/custom-theme/index.css Normal file
View File

File diff suppressed because one or more lines are too long

BIN
admin/src/assets/imgs/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
admin/src/assets/imgs/head.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
admin/src/assets/imgs/mobilefoot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
admin/src/assets/imgs/mobilehead.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
admin/src/assets/imgs/moren.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
admin/src/assets/imgs/no.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

111
admin/src/components/BackToTop/index.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<transition :name="transitionName">
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
</div>
</transition>
</template>
<script>
export default {
name: 'BackToTop',
props: {
visibilityHeight: {
type: Number,
default: 400
},
backPosition: {
type: Number,
default: 0
},
customStyle: {
type: Object,
default: function() {
return {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}
}
},
transitionName: {
type: String,
default: 'fade'
}
},
data() {
return {
visible: false,
interval: null,
isMoving: false
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
if (this.interval) {
clearInterval(this.interval)
}
},
methods: {
handleScroll() {
this.visible = window.pageYOffset > this.visibilityHeight
},
backToTop() {
if (this.isMoving) return
const start = window.pageYOffset
let i = 0
this.isMoving = true
this.interval = setInterval(() => {
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
if (next <= this.backPosition) {
window.scrollTo(0, this.backPosition)
clearInterval(this.interval)
this.isMoving = false
} else {
window.scrollTo(0, next)
}
i++
}, 16.7)
},
easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b
return -c / 2 * (--t * (t - 2) - 1) + b
}
}
}
</script>
<style scoped>
.back-to-ceiling {
position: fixed;
display: inline-block;
text-align: center;
cursor: pointer;
}
.back-to-ceiling:hover {
background: #d5dbe7;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
.back-to-ceiling .Icon {
fill: #9aaabf;
background: none;
}
</style>

82
admin/src/components/Breadcrumb/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
import pathToRegexp from 'path-to-regexp'
export default {
data() {
return {
levelList: null
}
},
watch: {
$route(route) {
// if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) {
return
}
this.getBreadcrumb()
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb() {
// only show routes with meta.title
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
const first = matched[0]
if (!this.isDashboard(first)) {
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},
isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
},
pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route
var toPath = pathToRegexp.compile(path)
return toPath(params)
},
handleLink(item) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect)
return
}
this.$router.push(this.pathCompile(path))
}
}
}
</script>
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 8px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
</style>

203
admin/src/components/Category/edit.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<div>
<el-form ref="editPram" :model="editPram" label-width="130px">
{{biztype}}
<el-form-item
label="分类名称"
prop="name"
:rules="[{ required:true,message:'请输入分类名称',trigger:['blur','change'] }]"
>
<el-input v-model="editPram.name"  maxlength="20" placeholder="分类名称" />
</el-form-item>
<el-form-item label="URL">
<el-input v-model="editPram.url" placeholder="URL" />
</el-form-item>
<el-form-item label="父级" v-if="biztype.value!==3">
<el-cascader v-model="editPram.pid" :options="parentOptions" :props="categoryProps" style="width:100%" />
</el-form-item>
<el-form-item label="菜单图标" v-if="biztype.value===5">
<el-input placeholder="请选择菜单图标" v-model="editPram.extra">
<el-button slot="append" icon="el-icon-circle-plus-outline" @click="addIcon"></el-button>
</el-input>
</el-form-item>
<el-form-item label="分类图标(180*180)" v-if="biztype.value === 1 || biztype.value === 3">
<div class="upLoadPicBox" @click="modalPicTap('1')">
<div v-if="editPram.extra" class="pictrue"><img :src="editPram.extra"></div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
</div>
</div>
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="editPram.sort"/>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="editPram.status" :active-value="true" :inactive-value="false" />
</el-form-item>
<el-form-item label="类型" prop="type" :rules="[{required:true,message:'请选择类型',trigger:['blur']}]">
<el-select v-model="editPram.type" disabled>
<el-option
v-for="item in constants.categoryType"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="扩展字段" v-if="biztype.value !== 1 && biztype.value !== 3 && biztype.value !== 5">
<el-input v-model="editPram.extra" type="textarea" placeholder="扩展字段" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loadingBtn" @click="handlerSubmit('editPram')">确定</el-button>
<el-button @click="close">取消</el-button>
</el-form-item>
</el-form>
<!-- {{// editPram}}-->
<!-- {{prent}}-->
</div>
</template>
<!--创建和编辑公用一个组件-->
<script>
import * as constants from '@/utils/constants.js'
import * as categoryApi from '@/api/categoryApi.js'
import * as selfUtil from '@/utils/ZBKJIutil.js'
export default {
// name: "edit"
props: {
prent: {
type: Object,
required: true
},
isCreate: {
type: Number,
default: 0
},
editData: {
type: Object
},
biztype: {
type: Object,
required: true
},
allTreeList: {
type: Array
}
},
data() {
return {
loadingBtn: false,
constants,
editPram: {
extra: null,
name: null,
pid: null,
sort: 0,
status: true,
type: this.biztype.value,
url: null,
id: 0
},
categoryProps: {
value: 'id',
label: 'name',
children: 'child',
expandTrigger: 'hover',
checkStrictly: true,
emitPath: false
},
parentOptions: []
}
},
mounted() {
this.initEditData()
},
methods: {
// 点击图标
addIcon() {
const _this = this
_this.$modalIcon(function(icon) {
_this.editPram.extra = icon
})
},
// 点击商品图
modalPicTap (tit, num, i) {
const _this = this
const attr = []
this.$modalUpload(function(img) {
if(tit==='1'&& !num){
_this.editPram.extra = img[0].sattDir
}
if(tit==='2'&& !num){
img.map((item) => {
attr.push(item.attachment_src)
_this.formValidate.slider_image.push(item)
});
}
},tit, 'store')
},
close() {
this.$emit('hideEditDialog')
},
initEditData() {
console.log(this.editData)
this.addTreeListLabelForCasCard(this.allTreeList, 'child')
this.parentOptions = this.allTreeList
console.log(this.parentOptions)
if (this.isCreate !== 1) {
const { id } = this.prent
this.editPram.pid = id
} else {
const { extra, name, pid, sort, status, type, id, url } = this.editData
this.editPram.extra = extra
this.editPram.name = name
this.editPram.pid = pid
this.editPram.sort = sort
this.editPram.status = status
this.editPram.type = type
this.editPram.url = url
this.editPram.id = id
console.log(this.editPram.id)
}
},
addTreeListLabelForCasCard(arr, child) {
arr.forEach((o,i) => {
if (o.child && o.child.length) {
o.disabled = true
o.child.forEach((j) => {
j.disabled = true
})
}
})
},
handlerSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (!valid) return
this.handlerSaveOrUpdate(this.isCreate === 0)
})
},
handlerSaveOrUpdate(isSave) {
if (isSave) {
this.editPram.pid = this.prent.id
this.loadingBtn = true
categoryApi.addCategroy(this.editPram).then(data => {
this.$emit('hideEditDialog')
this.$message.success('创建目录成功')
this.loadingBtn = false
})
} else {
this.editPram.pid = Array.isArray(this.editPram.pid) ? this.editPram.pid[0] : this.editPram.pid
this.loadingBtn = true
categoryApi.updateCategroy(this.editPram).then(data => {
this.$emit('hideEditDialog')
this.$message.success('更新目录成功')
this.loadingBtn = false
})
}
}
}
}
</script>
<style scoped>
</style>

89
admin/src/components/Category/info.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div>
<el-tree :data="ddd" :props="defaultProps" @node-click="handleNodeClick" />
</div>
</template>
<script>
import * as categoryApi from '@/api/categoryApi.js'
export default {
// name: "info"
props: {
id: {
type: Number,
required: true
}
},
data() {
return {
defaultProps: {
children: 'children',
label: 'label'
},
ddd: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
dataList: {// 数据结果
page: 0,
limit: 0,
totalPage: 0,
total: 0,
list: []
}
}
},
mounted() {
this.handlerGetTreeList(this.id)
},
methods: {
handlerGetTreeList(id) {
if (!id) {
this.$message.error('当前数据id不正确')
return
}
categoryApi.treeCategroy({ pid: id }).then(data => {
this.dataList = data
})
},
handleNodeClick(data) {
console.log('data:', data)
}
}
}
</script>
<style scoped>
</style>

276
admin/src/components/Category/list.vue Normal file
View File

@@ -0,0 +1,276 @@
<template>
<div>
<template v-if="selectModel">
<el-tree
node-key="id"
:props="treeProps"
:data="treeList"
show-checkbox
:default-checked-keys="selectModelKeys"
@check="handleSelectionChange"
/>
<!-- {{biztype}}-->
</template>
<template v-else>
<div class="divBox">
<el-card class="box-card">
<div slot="header" class="clearfix">
<div class="container">
{{biztype}}
<el-form inline size="small">
<el-form-item>
<el-select v-model="listPram.status" placeholder="状态" clearable class="selWidth">
<el-option
v-for="item in constants.roleListStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="listPram.name" placeholder="名称" clearable class="selWidth"/>
</el-form-item>
<el-form-item>
<el-button size="mini" @click="handlerGetList">查询</el-button>
</el-form-item>
</el-form>
</div>
<el-button size="mini" type="primary" @click="handleAddMenu({id:0,name:'顶层目录'})">新增{{ biztype.name }}</el-button>
</div>
<el-table
ref="treeList"
:data="treeList"
size="mini"
class="table"
highlight-current-row
row-key="id"
:tree-props="{children: 'child', hasChildren: 'hasChildren'}"
>
<!-- <el-table-column type="selection"-->
<!-- width="55">-->
<!-- </el-table-column>-->
<el-table-column prop="name" label="名称" min-width="200">
<template slot-scope="scope">
{{ scope.row.name }}|{{ scope.row.id }}
</template>
</el-table-column>
<template v-if="!selectModel">
<el-table-column label="类型" min-width="150">
<template slot-scope="scope">
<span>{{ scope.row.type | filterCategroyType | filterEmpty }}</span>
</template>
</el-table-column>
<el-table-column label="分类图标" min-width="80">
<template slot-scope="scope">
<div class="listPic" v-if=" biztype.value === 5 ">
<i :class="'el-icon-' + scope.row.extra" style="font-size: 20px;" />
</div>
<div class="demo-image__preview" v-else>
<el-image
style="width: 36px; height: 36px"
:src="scope.row.extra"
:preview-src-list="[scope.row.extra]"
/>
</div>
</template>
</el-table-column>
<el-table-column label="Url" min-width="250">
<template slot-scope="scope">
<span>{{ scope.row.url }}</span>
</template>
</el-table-column>
<el-table-column label="排序" prop="sort" min-width="150" />
<el-table-column label="启用状态" width="150">
<template slot-scope="scope">
<span>{{ scope.row.status | filterYesOrNo }}</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="200" fixed="right">
{{biztype}}
<template slot-scope="scope">
<el-button
v-if="biztype.value!==3"
type="text"
size="small"
@click="handleAddMenu(scope.row)"
>添加子目录</el-button>
<el-button type="text" size="small" @click="handleEditMenu(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="handleDelMenu(scope.row)">删除</el-button>
</template>
</el-table-column>
</template>
</el-table>
</el-card>
</div>
</template>
<el-dialog
:title="(editDialogConfig.isCreate===0?`创建${biztype.name}`:`编辑${biztype.name}`)"
:visible.sync="editDialogConfig.visible"
destroy-on-close
:close-on-click-modal="false"
>
<edit
v-if="editDialogConfig.visible"
:prent="editDialogConfig.prent"
:is-create="editDialogConfig.isCreate"
:edit-data="editDialogConfig.data"
:biztype="editDialogConfig.biztype"
:all-tree-list="treeList"
@hideEditDialog="hideEditDialog"
/>
</el-dialog>
</div>
</template>
<script>
import * as categoryApi from '@/api/categoryApi.js'
import info from './info'
import edit from './edit'
import * as constants from '@/utils/constants.js'
import * as selfUtil from '@/utils/ZBKJIutil.js'
export default {
// name: "list"
components: { info, edit },
props: {
biztype: { // 类型，1 产品分类，2 附件分类，3 文章分类， 4 设置分类， 5 菜单分类
type: Object,
default: { value: -1 },
validator: (obj) => {
return obj.value > 0
}
},
pid: {
type: Number,
default: 0,
validator: (value) => {
return value >= 0
}
},
selectModel: { // 是否选择模式
type: Boolean,
default: false
},
selectModelKeys: {
type: Array
},
rowSelect: {}
},
data() {
return {
constants,
treeProps: {
label: 'name',
children: 'child',
expandTrigger: 'hover',
checkStrictly: true,
emitPath: false
},
// treeCheckedKeys:[],// 选择模式下的属性结构默认选中
multipleSelection: [],
editDialogConfig: {
visible: false,
isCreate: 0, // 0=创建，1=编辑
prent: {}, // 父级对象
data: {},
biztype: this.biztype // 统一主业务中的目录类型
},
dataList: [],
treeList: [],
listPram: {
pid: this.pid,
type: this.biztype.value,
status: null,
name: null,
page: constants.page.page,
limit: constants.page.limit[1]
},
viewInfoConfig: {
data: null,
visible: false
}
}
},
mounted() {
// if(this.biztype.value === 3){
// this.listPram.pageSize = constants.page.pageSize[4]
// this.handlerGetList()
// }else{
this.handlerGetTreeList()
// }
},
methods: {
handleEditMenu(rowData) {
this.editDialogConfig.isCreate = 1
this.editDialogConfig.data = rowData
console.log(this.editDialogConfig.data)
this.editDialogConfig.prent = rowData
this.editDialogConfig.visible = true
},
handleAddMenu(rowData) {
this.editDialogConfig.isCreate = 0
this.editDialogConfig.prent = rowData
this.editDialogConfig.data = {}
this.editDialogConfig.biztype = this.biztype
this.editDialogConfig.visible = true
},
handleDelMenu(rowData) {
this.$confirm('确定删除当前数据?').then(() => {
categoryApi.deleteCategroy(rowData).then(data => {
this.handlerGetTreeList()
this.$message.success('删除成功')
})
})
},
handlerGetList() {
categoryApi.listCategroy(this.listPram).then(data => {
this.treeList = data.list
})
},
handlerGetTreeList() {
const _pram = { type: this.biztype.value, status: this.selectModel ? 1 : -1 }
this.biztype.value!==3 ? categoryApi.treeCategroy(_pram).then(data => {
this.treeList = this.handleAddArrt(data)
}) : categoryApi.listCategroy({ type: 3, status: '' }).then(data => {
this.treeList = data.list
})
},
handlerGetInfo(id) {
this.viewInfoConfig.data = id
this.viewInfoConfig.visible = true
},
handleNodeClick(data) {
console.log('data:', data)
},
handleAddArrt(treeData) {
// let _result = this.addTreeListLabel(treeData)
const _result = selfUtil.addTreeListLabel(treeData)
return _result
},
hideEditDialog() {
setTimeout(() => {
this.editDialogConfig.prent = {}
this.editDialogConfig.type = 0
this.editDialogConfig.visible = false
this.handlerGetTreeList()
}, 200)
},
handleSelectionChange(d1, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
// this.multipleSelection = checkedKeys.concat(halfCheckedKeys)
this.multipleSelection = checkedKeys
this.$emit('rulesSelect', this.multipleSelection)
}
}
}
</script>
<style scoped>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>

155
admin/src/components/Charts/Keyboard.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xAxisData = []
const data = []
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
this.chart.setOption({
backgroundColor: '#08263a',
grid: {
left: '5%',
right: '5%'
},
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
})
}
}
}
</script>

227
admin/src/components/Charts/LineMarker.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
backgroundColor: '#394056',
title: {
top: 20,
text: 'Requests',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '1%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['CMCC', 'CTCC', 'CUCC'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
top: 100,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
type: 'value',
name: '(%)',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: 'CMCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
name: 'CTCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, {
name: 'CUCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12
}
},
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
}]
})
}
}
}
</script>

271
admin/src/components/Charts/MixChart.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xData = (function() {
const data = []
for (let i = 1; i < 13; i++) {
data.push(i + 'month')
}
return data
}())
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: 'statistics',
x: '20',
top: '20',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff'
}
}
},
grid: {
left: '5%',
right: '5%',
borderWidth: 0,
top: 150,
bottom: 95,
textStyle: {
color: '#fff'
}
},
legend: {
x: '5%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['female', 'male', 'average']
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: 'female',
type: 'bar',
stack: 'total',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
]
},
{
name: 'male',
type: 'bar',
stack: 'total',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220
]
}, {
name: 'average',
type: 'line',
stack: 'total',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(252,230,48,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
}
]
})
}
}
}
</script>

56
admin/src/components/Charts/mixins/resize.js Normal file
View File

@@ -0,0 +1,56 @@
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.initListener()
},
activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener()
}
// when keep-alive chart activated, auto resize
this.resize()
},
beforeDestroy() {
this.destroyListener()
},
deactivated() {
this.destroyListener()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize()
}, 100)
window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const { chart } = this
chart && chart.resize()
}
}
}

61
admin/src/components/DragSelect/index.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
<slot />
</el-select>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'DragSelect',
props: {
value: {
type: Array,
required: true
}
},
computed: {
selectVal: {
get() {
return [...this.value]
},
set(val) {
this.$emit('input', [...val])
}
}
},
mounted() {
this.setSort()
},
methods: {
setSort() {
const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
setData: function(dataTransfer) {
dataTransfer.setData('Text', '')
// to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
},
onEnd: evt => {
const targetRow = this.value.splice(evt.oldIndex, 1)[0]
this.value.splice(evt.newIndex, 0, targetRow)
}
})
}
}
}
</script>
<style scoped>
.drag-select >>> .sortable-ghost {
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
.drag-select >>> .el-tag {
cursor: pointer;
}
</style>

297
admin/src/components/Dropzone/index.vue Normal file
View File

@@ -0,0 +1,297 @@
<template>
<div :id="id" :ref="id" :action="url" class="dropzone">
<input type="file" name="file">
</div>
</template>
<script>
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'
// import { getToken } from 'api/qiniu';
Dropzone.autoDiscover = false
export default {
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
defaultMsg: {
type: String,
default: '上传图片'
},
acceptedFiles: {
type: String,
default: ''
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFilesize: {
type: Number,
default: 2
},
maxFiles: {
type: Number,
default: 3
},
autoProcessQueue: {
type: Boolean,
default: true
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
defaultImg: {
default: '',
type: [String, Array]
},
couldPaste: {
type: Boolean,
default: false
}
},
data() {
return {
dropzone: '',
initOnce: true
}
},
watch: {
defaultImg(val) {
if (val.length === 0) {
this.initOnce = false
return
}
if (!this.initOnce) return
this.initImages(val)
this.initOnce = false
}
},
mounted() {
const element = document.getElementById(this.id)
const vm = this
this.dropzone = new Dropzone(element, {
clickable: this.clickable,
thumbnailWidth: this.thumbnailWidth,
thumbnailHeight: this.thumbnailHeight,
maxFiles: this.maxFiles,
maxFilesize: this.maxFilesize,
dictRemoveFile: 'Remove',
addRemoveLinks: this.showRemoveLink,
acceptedFiles: this.acceptedFiles,
autoProcessQueue: this.autoProcessQueue,
dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
dictMaxFilesExceeded: '只能一个图',
previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div> <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"> <i class="material-icons">done</i> </div> <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
init() {
const val = vm.defaultImg
if (!val) return
if (Array.isArray(val)) {
if (val.length === 0) return
val.map((v, i) => {
const mockFile = { name: 'name' + i, size: 12345, url: v }
this.options.addedfile.call(this, mockFile)
this.options.thumbnail.call(this, mockFile, v)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
vm.initOnce = false
return true
})
} else {
const mockFile = { name: 'name', size: 12345, url: val }
this.options.addedfile.call(this, mockFile)
this.options.thumbnail.call(this, mockFile, val)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
vm.initOnce = false
}
},
accept: (file, done) => {
/* 七牛*/
// const token = this.$store.getters.token;
// getToken(token).then(response => {
// file.token = response.data.qiniu_token;
// file.key = response.data.qiniu_key;
// file.url = response.data.qiniu_url;
// done();
// })
done()
},
sending: (file, xhr, formData) => {
// formData.append('token', file.token);
// formData.append('key', file.key);
vm.initOnce = false
}
})
if (this.couldPaste) {
document.addEventListener('paste', this.pasteImg)
}
this.dropzone.on('success', file => {
vm.$emit('dropzone-success', file, vm.dropzone.element)
})
this.dropzone.on('addedfile', file => {
vm.$emit('dropzone-fileAdded', file)
})
this.dropzone.on('removedfile', file => {
vm.$emit('dropzone-removedFile', file)
})
this.dropzone.on('error', (file, error, xhr) => {
vm.$emit('dropzone-error', file, error, xhr)
})
this.dropzone.on('successmultiple', (file, error, xhr) => {
vm.$emit('dropzone-successmultiple', file, error, xhr)
})
},
destroyed() {
document.removeEventListener('paste', this.pasteImg)
this.dropzone.destroy()
},
methods: {
removeAllFiles() {
this.dropzone.removeAllFiles(true)
},
processQueue() {
this.dropzone.processQueue()
},
pasteImg(event) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items
if (items[0].kind === 'file') {
this.dropzone.addFile(items[0].getAsFile())
}
},
initImages(val) {
if (!val) return
if (Array.isArray(val)) {
val.map((v, i) => {
const mockFile = { name: 'name' + i, size: 12345, url: v }
this.dropzone.options.addedfile.call(this.dropzone, mockFile)
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
return true
})
} else {
const mockFile = { name: 'name', size: 12345, url: val }
this.dropzone.options.addedfile.call(this.dropzone, mockFile)
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
}
}
}
}
</script>
<style scoped>
.dropzone {
border: 2px solid #E5E5E5;
font-family: 'Roboto', sans-serif;
color: #777;
transition: background-color .2s linear;
padding: 5px;
}
.dropzone:hover {
background-color: #F6F6F6;
}
i {
color: #CCC;
}
.dropzone .dz-image img {
width: 100%;
height: 100%;
}
.dropzone input[name='file'] {
display: none;
}
.dropzone .dz-preview .dz-image {
border-radius: 0px;
}
.dropzone .dz-preview:hover .dz-image img {
transform: none;
filter: none;
width: 100%;
height: 100%;
}
.dropzone .dz-preview .dz-details {
bottom: 0px;
top: 0px;
color: white;
background-color: rgba(33, 150, 243, 0.8);
transition: opacity .2s linear;
text-align: left;
}
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
background-color: transparent;
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: none;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
background-color: transparent;
border: none;
}
.dropzone .dz-preview .dz-remove {
position: absolute;
z-index: 30;
color: white;
margin-left: 15px;
padding: 10px;
top: inherit;
bottom: 15px;
border: 2px white solid;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 1.1px;
opacity: 0;
}
.dropzone .dz-preview:hover .dz-remove {
opacity: 1;
}
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
margin-left: -40px;
margin-top: -50px;
}
.dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
color: white;
font-size: 5rem;
}
</style>

78
admin/src/components/ErrorLog/index.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div v-if="errorLogs.length>0">
<el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
<el-button style="padding: 8px 10px;" size="small" type="danger">
<svg-icon icon-class="bug" />
</el-button>
</el-badge>
<el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body>
<div slot="title">
<span style="padding-right: 10px;">Error Log</span>
<el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button>
</div>
<el-table :data="errorLogs" border>
<el-table-column label="Message">
<template slot-scope="{row}">
<div>
<span class="message-title">Msg:</span>
<el-tag type="danger">
{{ row.err.message }}
</el-tag>
</div>
<br>
<div>
<span class="message-title" style="padding-right: 10px;">Info: </span>
<el-tag type="warning">
{{ row.vm.$vnode.tag }} error in {{ row.info }}
</el-tag>
</div>
<br>
<div>
<span class="message-title" style="padding-right: 16px;">Url: </span>
<el-tag type="success">
{{ row.url }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="Stack">
<template slot-scope="scope">
{{ scope.row.err.stack }}
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'ErrorLog',
data() {
return {
dialogTableVisible: false
}
},
computed: {
errorLogs() {
return this.$store.getters.errorLogs
}
},
methods: {
clearAll() {
this.dialogTableVisible = false
this.$store.dispatch('errorLog/clearErrorLog')
}
}
}
</script>
<style scoped>
.message-title {
font-size: 16px;
color: #333;
font-weight: bold;
padding-right: 8px;
}
</style>

73
admin/src/components/FormGenerator/components/SvgIcon/index.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
v-on="$listeners"
/>
<svg
v-else
:class="svgClass"
aria-hidden="true"
v-on="$listeners"
>
<use :xlink:href="iconName" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return `svg-icon ${this.className}`
}
return 'svg-icon'
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>

601
admin/src/components/FormGenerator/components/generator/config.js Normal file
View File

@@ -0,0 +1,601 @@
import { getToken } from '@/utils/auth'
import SettingMer from '@/utils/settingMer'
// 表单属性【右面板】
export const formConf = {
formRef: 'elForm',
formModel: 'formData',
size: 'medium',
labelPosition: 'right',
labelWidth: 100,
formRules: 'rules',
gutter: 15,
disabled: false,
span: 24,
formBtns: true
}
// 输入型组件 【左面板】
export const inputComponents = [
{
// 组件的自定义配置
__config__: {
label: '单行文本',
labelWidth: null,
showLabel: true,
changeTag: true,
tag: 'el-input',
tagIcon: 'input',
defaultValue: undefined,
required: true,
layout: 'colFormItem',
span: 24,
document: 'https://element.eleme.cn/#/zh-CN/component/input',
// 正则校验规则
regList: []
},
// 组件的插槽属性
__slot__: {
prepend: '',
append: ''
},
// 其余的为可直接写在组件标签上的属性
placeholder: '请输入',
style: { width: '100%' },
clearable: true,
'prefix-icon': '',
'suffix-icon': '',
maxlength: null,
'show-word-limit': false,
readonly: false,
disabled: false
},
{
__config__: {
label: '多行文本',
labelWidth: null,
showLabel: true,
tag: 'el-input',
tagIcon: 'textarea',
defaultValue: undefined,
required: true,
layout: 'colFormItem',
span: 24,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/input'
},
type: 'textarea',
placeholder: '请输入',
autosize: {
minRows: 4,
maxRows: 4
},
style: { width: '100%' },
maxlength: null,
'show-word-limit': false,
readonly: false,
disabled: false
},
{
__config__: {
label: '密码',
showLabel: true,
labelWidth: null,
changeTag: true,
tag: 'el-input',
tagIcon: 'password',
defaultValue: undefined,
layout: 'colFormItem',
span: 24,
required: true,
regList: [],
document: 'https://element.eleme.cn/#/zh-CN/component/input'
},
__slot__: {
prepend: '',
append: ''
},
placeholder: '请输入',
'show-password': true,
style: { width: '100%' },
clearable: true,
'prefix-icon': '',
'suffix-icon': '',
maxlength: null,
'show-word-limit': false,
readonly: false,
disabled: false
},
{
__config__: {
label: '计数器',
showLabel: true,
changeTag: true,
labelWidth: null,
tag: 'el-input-number',
tagIcon: 'number',
defaultValue: undefined,
span: 24,
layout: 'colFormItem',
required: true,
regList: [],
document: 'https://element.eleme.cn/#/zh-CN/component/input-number'
},
placeholder: '',
min: undefined,
max: undefined,
step: 1,
'step-strictly': false,
precision: undefined,
'controls-position': '',
disabled: false
}
// {
// __config__: {
// label: '编辑器',
// showLabel: true,
// changeTag: true,
// labelWidth: null,
// tag: 'tinymce',
// tagIcon: 'rich-text',
// defaultValue: null,
// span: 24,
// layout: 'colFormItem',
// required: true,
// regList: [],
// document: 'http://tinymce.ax-z.cn'
// },
// height: 300, // 编辑器高度
// branding: false // 隐藏右下角品牌烙印
// }
]
// 选择型组件 【左面板】
export const selectComponents = [
{
__config__: {
label: '下拉选择',
showLabel: true,
labelWidth: null,
tag: 'el-select',
tagIcon: 'select',
defaultValue: undefined,
layout: 'colFormItem',
span: 24,
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/select'
},
__slot__: {
options: [{
label: '选项一',
value: 1
}, {
label: '选项二',
value: 2
}]
},
placeholder: '请选择',
style: { width: '100%' },
clearable: true,
disabled: false,
filterable: false,
multiple: false
},
{
__config__: {
label: '级联选择',
showLabel: true,
labelWidth: null,
tag: 'el-cascader',
tagIcon: 'cascader',
layout: 'colFormItem',
defaultValue: [],
dataType: 'dynamic',
span: 24,
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/cascader'
},
options: [{
id: 1,
value: 1,
label: '选项1',
children: [{
id: 2,
value: 2,
label: '选项1-1'
}]
}],
placeholder: '请选择',
style: { width: '100%' },
props: {
props: {
multiple: false,
label: 'label',
value: 'value',
children: 'children'
}
},
'show-all-levels': true,
disabled: false,
clearable: true,
filterable: false,
separator: '/'
},
{
__config__: {
label: '单选框组',
labelWidth: null,
showLabel: true,
tag: 'el-radio-group',
tagIcon: 'radio',
changeTag: true,
defaultValue: undefined,
layout: 'colFormItem',
span: 24,
optionType: 'default',
regList: [],
required: true,
border: false,
document: 'https://element.eleme.cn/#/zh-CN/component/radio'
},
__slot__: {
options: [{
label: '选项一',
value: 1
}, {
label: '选项二',
value: 2
}]
},
style: {},
size: 'medium',
disabled: false
},
{
__config__: {
label: '多选框组',
tag: 'el-checkbox-group',
tagIcon: 'checkbox',
defaultValue: [],
span: 24,
showLabel: true,
labelWidth: null,
layout: 'colFormItem',
optionType: 'default',
required: true,
regList: [],
changeTag: true,
border: false,
document: 'https://element.eleme.cn/#/zh-CN/component/checkbox'
},
__slot__: {
options: [{
label: '选项一',
value: 1
}, {
label: '选项二',
value: 2
}]
},
style: {},
size: 'medium',
min: null,
max: null,
disabled: false
},
{
__config__: {
label: '开关',
tag: 'el-switch',
tagIcon: 'switch',
defaultValue: false,
span: 24,
showLabel: true,
labelWidth: null,
layout: 'colFormItem',
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/switch'
},
style: {},
disabled: false,
'active-text': '',
'inactive-text': '',
'active-color': null,
'inactive-color': null,
'active-value': true,
'inactive-value': false
},
{
__config__: {
label: '滑块',
tag: 'el-slider',
tagIcon: 'slider',
defaultValue: null,
span: 24,
showLabel: true,
layout: 'colFormItem',
labelWidth: null,
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/slider'
},
disabled: false,
min: 0,
max: 100,
step: 1,
'show-stops': false,
range: false
},
{
__config__: {
label: '时间选择',
tag: 'el-time-picker',
tagIcon: 'time',
defaultValue: null,
span: 24,
showLabel: true,
layout: 'colFormItem',
labelWidth: null,
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
},
placeholder: '请选择',
style: { width: '100%' },
disabled: false,
clearable: true,
'picker-options': {
selectableRange: '00:00:00-23:59:59'
},
format: 'HH:mm:ss',
'value-format': 'HH:mm:ss'
},
{
__config__: {
label: '时间范围',
tag: 'el-time-picker',
tagIcon: 'time-range',
span: 24,
showLabel: true,
labelWidth: null,
layout: 'colFormItem',
defaultValue: null,
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
},
style: { width: '100%' },
disabled: false,
clearable: true,
'is-range': true,
'range-separator': '至',
'start-placeholder': '开始时间',
'end-placeholder': '结束时间',
format: 'HH:mm:ss',
'value-format': 'HH:mm:ss'
},
{
__config__: {
label: '日期选择',
tag: 'el-date-picker',
tagIcon: 'date',
defaultValue: null,
showLabel: true,
labelWidth: null,
span: 24,
layout: 'colFormItem',
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
},
placeholder: '请选择',
type: 'date',
style: { width: '100%' },
disabled: false,
clearable: true,
format: 'yyyy-MM-dd',
'value-format': 'yyyy-MM-dd',
readonly: false
},
{
__config__: {
label: '日期范围',
tag: 'el-date-picker',
tagIcon: 'date-range',
defaultValue: null,
span: 24,
showLabel: true,
labelWidth: null,
required: true,
layout: 'colFormItem',
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
},
style: { width: '100%' },
type: 'daterange',
'range-separator': '至',
'start-placeholder': '开始日期',
'end-placeholder': '结束日期',
disabled: false,
clearable: true,
format: 'yyyy-MM-dd',
'value-format': 'yyyy-MM-dd',
readonly: false
},
{
__config__: {
label: '评分',
tag: 'el-rate',
tagIcon: 'rate',
defaultValue: 0,
span: 24,
showLabel: true,
labelWidth: null,
layout: 'colFormItem',
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/rate'
},
style: {},
max: 5,
'allow-half': false,
'show-text': false,
'show-score': false,
disabled: false
},
{
__config__: {
label: '颜色选择',
tag: 'el-color-picker',
tagIcon: 'color',
span: 24,
defaultValue: null,
showLabel: true,
labelWidth: null,
layout: 'colFormItem',
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/color-picker'
},
'show-alpha': false,
'color-format': '',
disabled: false,
size: 'medium'
},
{
__config__: {
label: '上传文件',
tag: 'upload-file',
tagIcon: 'uploadPicture',
layout: 'colFormItem',
defaultValue: null,
showLabel: true,
labelWidth: null,
required: true,
span: 24,
showTip: false,
buttonText: '点击上传',
regList: [],
changeTag: true,
// fileSize: 2,
// sizeUnit: 'MB',
document: 'https://element.eleme.cn/#/zh-CN/component/upload'
},
__slot__: {
'list-type': true
},
// headers: { 'Authori-zation': getToken() },
// data: { model: 'product', pid: 0 },
// action: SettingMer.apiBaseURL + 'admin/upload/image?model=product&pid=0',
// disabled: false,
// accept: '',
name: 'upfile',
// 'auto-upload': false,
// 'list-type': 'text',
// multiple: false
},
{
__config__: {
label: '自定义上传',
tag: 'self-upload',
tagIcon: 'selfUpload',
layout: 'colFormItem',
defaultValue: null,
showLabel: true,
labelWidth: null,
required: true,
span: 24,
showTip: false,
buttonText: '点击上传',
regList: [],
changeTag: true,
fileSize: 2,
sizeUnit: 'MB',
document: 'https://element.eleme.cn/#/zh-CN/component/upload'
},
__slot__: {
'list-type': true
},
action: 'https://jsonplaceholder.typicode.com/posts/',
disabled: true,
accept: '',
name: 'file',
'auto-upload': true,
'list-type': 'text',
multiple: false
},
{
__config__: {
label: '富文本编辑器',
tag: 'ueditor-from',
tagIcon: 'ueditorFrom',
layout: 'colFormItem',
defaultValue: null,
showLabel: true,
labelWidth: null,
required: false,
span: 24,
showTip: false,
regList: [],
changeTag: true,
},
height: 300, // 编辑器高度
name: 'ueditor',
disabled: false
}
]
// 布局型组件 【左面板】
export const layoutComponents = [
{
__config__: {
layout: 'rowFormItem',
tagIcon: 'row',
label: '行容器',
layoutTree: true,
children: [],
document: 'https://element.eleme.cn/#/zh-CN/component/layout'
},
type: 'default',
justify: 'start',
align: 'top'
},
{
__config__: {
label: '按钮',
showLabel: true,
changeTag: true,
labelWidth: null,
tag: 'el-button',
tagIcon: 'button',
defaultValue: undefined,
span: 24,
layout: 'colFormItem',
document: 'https://element.eleme.cn/#/zh-CN/component/button'
},
__slot__: {
default: '主要按钮'
},
type: 'primary',
icon: 'el-icon-search',
round: false,
size: 'medium',
plain: false,
circle: false,
disabled: false
}
]

18
admin/src/components/FormGenerator/components/generator/css.js Normal file
View File

@@ -0,0 +1,18 @@
const styles = {
'el-rate': '.el-rate{display: inline-block; vertical-align: text-top;}',
'el-upload': '.el-upload__tip{line-height: 1.2;}'
}
function addCss(cssList, el) {
const css = styles[el.__config__.tag]
css && cssList.indexOf(css) === -1 && cssList.push(css)
if (el.__config__.children) {
el.__config__.children.forEach(el2 => addCss(cssList, el2))
}
}
export function makeUpCss(conf) {
const cssList = []
conf.fields.forEach(el => addCss(cssList, el))
return cssList.join('\n')
}

37
admin/src/components/FormGenerator/components/generator/drawingDefalut.js Normal file
View File

@@ -0,0 +1,37 @@
export default [
{
__config__: {
label: '单行文本',
labelWidth: null,
showLabel: true,
changeTag: true,
tag: 'el-input',
tagIcon: 'input',
defaultValue: undefined,
required: true,
layout: 'colFormItem',
span: 24,
document: 'https://element.eleme.cn/#/zh-CN/component/input',
// 正则校验规则
regList: [{
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
message: '手机号格式错误'
}]
},
// 组件的插槽属性
__slot__: {
prepend: '',
append: ''
},
__vModel__: 'mobile',
placeholder: '请输入手机号',
style: { width: '100%' },
clearable: true,
'prefix-icon': 'el-icon-mobile',
'suffix-icon': '',
maxlength: 11,
'show-word-limit': true,
readonly: false,
disabled: false
}
]

427
admin/src/components/FormGenerator/components/generator/html.js Normal file
View File

@@ -0,0 +1,427 @@
/* eslint-disable max-len */
import ruleTrigger from './ruleTrigger'
import { getToken } from '@/utils/auth'
let confGlobal
let someSpanIsNot24
export function dialogWrapper(str) {
return `<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Titile">
${str}
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</el-dialog>`
}
export function vueTemplate(str) {
return `<template>
<div>
${str}
</div>
</template>`
}
export function vueScript(str) {
return `<script>
${str}
</script>`
}
export function cssStyle(cssStr) {
return `<style>
${cssStr}
</style>`
}
function buildFormTemplate(scheme, child, type) {
let labelPosition = ''
if (scheme.labelPosition !== 'right') {
labelPosition = `label-position="${scheme.labelPosition}"`
}
const disabled = scheme.disabled ? `:disabled="${scheme.disabled}"` : ''
let str = `<el-form ref="${scheme.formRef}" :model="${scheme.formModel}" :rules="${scheme.formRules}" size="${scheme.size}" ${disabled} label-width="${scheme.labelWidth}px" ${labelPosition}>
${child}
${buildFromBtns(scheme, type)}
</el-form>`
if (someSpanIsNot24) {
str = `<el-row :gutter="${scheme.gutter}">
${str}
</el-row>`
}
return str
}
function buildFromBtns(scheme, type) {
let str = ''
if (scheme.formBtns && type === 'file') {
str = `<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>`
if (someSpanIsNot24) {
str = `<el-col :span="24">
${str}
</el-col>`
}
}
return str
}
// span不为24的用el-col包裹
function colWrapper(scheme, str) {
if (someSpanIsNot24 || scheme.__config__.span !== 24) {
return `<el-col :span="${scheme.__config__.span}">
${str}
</el-col>`
}
return str
}
const layouts = {
colFormItem(scheme) {
const config = scheme.__config__
let labelWidth = ''
let label = `label="${config.label}"`
if (config.labelWidth && config.labelWidth !== confGlobal.labelWidth) {
labelWidth = `label-width="${config.labelWidth}px"`
}
if (config.showLabel === false) {
labelWidth = 'label-width="0"'
label = ''
}
const required = !ruleTrigger[config.tag] && config.required ? 'required' : ''
const tagDom = tags[config.tag] ? tags[config.tag](scheme) : null
let str = `<el-form-item ${labelWidth} ${label} prop="${scheme.__vModel__}" ${required}>
${tagDom}
</el-form-item>`
str = colWrapper(scheme, str)
return str
},
rowFormItem(scheme) {
const config = scheme.__config__
const type = scheme.type === 'default' ? '' : `type="${scheme.type}"`
const justify = scheme.type === 'default' ? '' : `justify="${scheme.justify}"`
const align = scheme.type === 'default' ? '' : `align="${scheme.align}"`
const gutter = scheme.gutter ? `:gutter="${scheme.gutter}"` : ''
const children = config.children.map(el => layouts[el.__config__.layout](el))
let str = `<el-row ${type} ${justify} ${align} ${gutter}>
${children.join('\n')}
</el-row>`
str = colWrapper(scheme, str)
return str
}
}
const tags = {
'el-button': el => {
const {
tag, disabled
} = attrBuilder(el)
const type = el.type ? `type="${el.type}"` : ''
const icon = el.icon ? `icon="${el.icon}"` : ''
const round = el.round ? 'round' : ''
const size = el.size ? `size="${el.size}"` : ''
const plain = el.plain ? 'plain' : ''
const circle = el.circle ? 'circle' : ''
let child = buildElButtonChild(el)
if (child) child = `\n${child}\n` // 换行
return `<${tag} ${type} ${icon} ${round} ${size} ${plain} ${disabled} ${circle}>${child}</${tag}>`
},
'el-input': el => {
const {
tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el)
const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : ''
const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : ''
const readonly = el.readonly ? 'readonly' : ''
const prefixIcon = el['prefix-icon'] ? `prefix-icon='${el['prefix-icon']}'` : ''
const suffixIcon = el['suffix-icon'] ? `suffix-icon='${el['suffix-icon']}'` : ''
const showPassword = el['show-password'] ? 'show-password' : ''
const type = el.type ? `type="${el.type}"` : ''
const autosize = el.autosize && el.autosize.minRows
? `:autosize="{minRows: ${el.autosize.minRows}, maxRows: ${el.autosize.maxRows}}"`
: ''
let child = buildElInputChild(el)
if (child) child = `\n${child}\n` // 换行
return `<${tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}</${tag}>`
},
'el-input-number': el => {
const {
tag, disabled, vModel, placeholder
} = attrBuilder(el)
const controlsPosition = el['controls-position'] ? `controls-position=${el['controls-position']}` : ''
const min = el.min ? `:min='${el.min}'` : ''
const max = el.max ? `:max='${el.max}'` : ''
const step = el.step ? `:step='${el.step}'` : ''
const stepStrictly = el['step-strictly'] ? 'step-strictly' : ''
const precision = el.precision ? `:precision='${el.precision}'` : ''
return `<${tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}></${tag}>`
},
'el-select': el => {
const {
tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el)
const filterable = el.filterable ? 'filterable' : ''
const multiple = el.multiple ? 'multiple' : ''
let child = buildElSelectChild(el)
if (child) child = `\n${child}\n` // 换行
return `<${tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}</${tag}>`
},
'el-radio-group': el => {
const { tag, disabled, vModel } = attrBuilder(el)
const size = `size="${el.size}"`
let child = buildElRadioGroupChild(el)
if (child) child = `\n${child}\n` // 换行
return `<${tag} ${vModel} ${size} ${disabled}>${child}</${tag}>`
},
'el-checkbox-group': el => {
const { tag, disabled, vModel } = attrBuilder(el)
const size = `size="${el.size}"`
const min = el.min ? `:min="${el.min}"` : ''
const max = el.max ? `:max="${el.max}"` : ''
let child = buildElCheckboxGroupChild(el)
if (child) child = `\n${child}\n` // 换行
return `<${tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}</${tag}>`
},
'el-switch': el => {
const { tag, disabled, vModel } = attrBuilder(el)
const activeText = el['active-text'] ? `active-text="${el['active-text']}"` : ''
const inactiveText = el['inactive-text'] ? `inactive-text="${el['inactive-text']}"` : ''
const activeColor = el['active-color'] ? `active-color="${el['active-color']}"` : ''
const inactiveColor = el['inactive-color'] ? `inactive-color="${el['inactive-color']}"` : ''
const activeValue = el['active-value'] !== true ? `:active-value='${JSON.stringify(el['active-value'])}'` : ''
const inactiveValue = el['inactive-value'] !== false ? `:inactive-value='${JSON.stringify(el['inactive-value'])}'` : ''
return `<${tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}></${tag}>`
},
'el-cascader': el => {
const {
tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el)
const options = el.options ? `:options="${el.__vModel__}Options"` : ''
const props = el.props ? `:props="${el.__vModel__}Props"` : ''
const showAllLevels = el['show-all-levels'] ? '' : ':show-all-levels="false"'
const filterable = el.filterable ? 'filterable' : ''
const separator = el.separator === '/' ? '' : `separator="${el.separator}"`
return `<${tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}></${tag}>`
},
'el-slider': el => {
const { tag, disabled, vModel } = attrBuilder(el)
const min = el.min ? `:min='${el.min}'` : ''
const max = el.max ? `:max='${el.max}'` : ''
const step = el.step ? `:step='${el.step}'` : ''
const range = el.range ? 'range' : ''
const showStops = el['show-stops'] ? `:show-stops="${el['show-stops']}"` : ''
return `<${tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}></${tag}>`
},
'el-time-picker': el => {
const {
tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el)
const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : ''
const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : ''
const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : ''
const isRange = el['is-range'] ? 'is-range' : ''
const format = el.format ? `format="${el.format}"` : ''
const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : ''
const pickerOptions = el['picker-options'] ? `:picker-options='${JSON.stringify(el['picker-options'])}'` : ''
return `<${tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}></${tag}>`
},
'el-date-picker': el => {
const {
tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el)
const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : ''
const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : ''
const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : ''
const format = el.format ? `format="${el.format}"` : ''
const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : ''
const type = el.type === 'date' ? '' : `type="${el.type}"`
const readonly = el.readonly ? 'readonly' : ''
return `<${tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}></${tag}>`
},
'el-rate': el => {
const { tag, disabled, vModel } = attrBuilder(el)
const max = el.max ? `:max='${el.max}'` : ''
const allowHalf = el['allow-half'] ? 'allow-half' : ''
const showText = el['show-text'] ? 'show-text' : ''
const showScore = el['show-score'] ? 'show-score' : ''
return `<${tag} ${vModel} ${max} ${allowHalf} ${showText} ${showScore} ${disabled}></${tag}>`
},
'el-color-picker': el => {
const { tag, disabled, vModel } = attrBuilder(el)
const size = `size="${el.size}"`
const showAlpha = el['show-alpha'] ? 'show-alpha' : ''
const colorFormat = el['color-format'] ? `color-format="${el['color-format']}"` : ''
return `<${tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}></${tag}>`
},
'el-upload': el => {
const { tag } = el.__config__
const disabled = el.disabled ? ':disabled=\'true\'' : ''
const action = el.action ? `:action="${el.__vModel__}Action"` : ''
const multiple = el.multiple ? 'multiple' : ''
const listType = el['list-type'] !== 'text' ? `list-type="${el['list-type']}"` : ''
const accept = el.accept ? `accept="${el.accept}"` : ''
const name = el.name !== 'file' ? `name="${el.name}"` : ''
const autoUpload = el['auto-upload'] === false ? ':auto-upload="false"' : ''
const beforeUpload = `:before-upload="${el.__vModel__}BeforeUpload"`
const fileList = `:file-list="${el.__vModel__}fileList"`
const ref = `ref="${el.__vModel__}"`
const headers = { 'Authori-zation': getToken() }
const data = el.data ? 'data' : ''
let child = buildElUploadChild(el)
if (child) child = `\n${child}\n` // 换行
return `<${tag} ${headers} ${data} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}</${tag}>`
},
'self-upload': el => {
const { tag, vModel } = attrBuilder(el)
const height = el.height ? `:height="${el.height}"` : ''
const multiple = el.multiple ? 'multiple' : ''
const branding = el.branding ? `:branding="${el.branding}"` : ''
return `<${tag} ${vModel} ${height} ${branding} ${multiple}></${tag}>`
},
'ueditor-from': el => {
const { tag, vModel } = attrBuilder(el)
const height = el.height ? `:height="${el.height}"` : ''
return `<${tag} ${vModel}${height} >`
},
'upload-file': el => {
const { tag, vModel } = attrBuilder(el)
const height = el.height ? `:height="${el.height}"` : ''
return `<${tag} ${vModel}${height} >`
},
tinymce: el => {
const { tag, vModel } = attrBuilder(el)
const branding = el.branding ? `:branding="${el.branding}"` : ''
return `<${tag} ${vModel} ${branding}></${tag}>`
}
}
function attrBuilder(el) {
return {
tag: el.__config__.tag,
vModel: `v-model="${confGlobal.formModel}.${el.__vModel__}"`,
clearable: el.clearable ? 'clearable' : '',
placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : '',
width: el.style && el.style.width ? ':style="{width: \'100%\'}"' : '',
disabled: el.disabled ? ':disabled=\'true\'' : ''
}
}
// el-buttin 子级
function buildElButtonChild(scheme) {
const children = []
const slot = scheme.__slot__ || {}
if (slot.default) {
children.push(slot.default)
}
return children.join('\n')
}
// el-input 子级
function buildElInputChild(scheme) {
const children = []
const slot = scheme.__slot__
if (slot && slot.prepend) {
children.push(`<template slot="prepend">${slot.prepend}</template>`)
}
if (slot && slot.append) {
children.push(`<template slot="append">${slot.append}</template>`)
}
return children.join('\n')
}
// el-select 子级
function buildElSelectChild(scheme) {
const children = []
const slot = scheme.__slot__
if (slot && slot.options && slot.options.length) {
children.push(`<el-option v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>`)
}
return children.join('\n')
}
// el-radio-group 子级
function buildElRadioGroupChild(scheme) {
const children = []
const slot = scheme.__slot__
const config = scheme.__config__
if (slot && slot.options && slot.options.length) {
const tag = config.optionType === 'button' ? 'el-radio-button' : 'el-radio'
const border = config.border ? 'border' : ''
children.push(`<${tag} v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
}
return children.join('\n')
}
// el-checkbox-group 子级
function buildElCheckboxGroupChild(scheme) {
const children = []
const slot = scheme.__slot__
const config = scheme.__config__
if (slot && slot.options && slot.options.length) {
const tag = config.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox'
const border = config.border ? 'border' : ''
children.push(`<${tag} v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
}
return children.join('\n')
}
// el-upload 子级
function buildElUploadChild(scheme) {
const list = []
const config = scheme.__config__
if (scheme['list-type'] === 'picture-card') list.push('<i class="el-icon-plus"></i>')
else list.push(`<el-button size="small" type="primary" icon="el-icon-upload">${config.buttonText}</el-button>`)
if (config.showTip) list.push(`<div slot="tip" class="el-upload__tip">只能上传不超过 ${config.fileSize}${config.sizeUnit} 的${scheme.accept}文件</div>`)
return list.join('\n')
}
// el-upload 子级
// function buildSelfUploadChild(scheme) {
// const list = []
// const config = scheme.__config__
// if (scheme['list-type'] === 'picture-card') list.push('<i class="el-icon-plus"></i>')
// else list.push(`<el-button size="small" type="primary" icon="el-icon-upload">${config.buttonText}</el-button>`)
// if (config.showTip) list.push(`<div slot="tip" class="el-upload__tip">只能上传不超过 ${config.fileSize}${config.sizeUnit} 的${scheme.accept}文件</div>`)
// return list.join('\n')
// }
/**
* 组装html代码。【入口函数】
* @param {Object} formConfig 整个表单配置
* @param {String} type 生成类型，文件或弹窗等
*/
export function makeUpHtml(formConfig, type) {
const htmlList = []
confGlobal = formConfig
// 判断布局是否都沾满了24个栅格，以备后续简化代码结构
someSpanIsNot24 = formConfig.fields.some(item => item.__config__.span !== 24)
// 遍历渲染每个组件成html
formConfig.fields.forEach(el => {
htmlList.push(layouts[el.__config__.layout](el))
})
const htmlStr = htmlList.join('\n')
// 将组件代码放进form标签
let temp = buildFormTemplate(formConfig, htmlStr, type)
// dialog标签包裹代码
if (type === 'dialog') {
temp = dialogWrapper(temp)
}
confGlobal = null
return temp
}

254
admin/src/components/FormGenerator/components/generator/js.js Normal file
View File

@@ -0,0 +1,254 @@
import { isArray } from 'util'
import { exportDefault, titleCase } from '@/utils/index'
import ruleTrigger from './ruleTrigger'
const units = {
KB: '1024',
MB: '1024 / 1024',
GB: '1024 / 1024 / 1024'
}
let confGlobal
const inheritAttrs = {
file: '',
dialog: 'inheritAttrs: false,'
}
/**
* 组装js 【入口函数】
* @param {Object} formConfig 整个表单配置
* @param {String} type 生成类型，文件或弹窗等
*/
export function makeUpJs(formConfig, type) {
confGlobal = formConfig = JSON.parse(JSON.stringify(formConfig))
const dataList = []
const ruleList = []
const optionsList = []
const propsList = []
const methodList = mixinMethod(type)
const uploadVarList = []
formConfig.fields.forEach(el => {
buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
})
const script = buildexport(
formConfig,
type,
dataList.join('\n'),
ruleList.join('\n'),
optionsList.join('\n'),
uploadVarList.join('\n'),
propsList.join('\n'),
methodList.join('\n')
)
confGlobal = null
return script
}
// 构建组件属性
function buildAttributes(scheme, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) {
const config = scheme.__config__
const slot = scheme.__slot__
buildData(scheme, dataList)
buildRules(scheme, ruleList)
// 特殊处理options属性
if (scheme.options || (slot && slot.options && slot.options.length)) {
buildOptions(scheme, optionsList)
if (config.dataType === 'dynamic') {
const model = `${scheme.__vModel__}Options`
const options = titleCase(model)
buildOptionMethod(`get${options}`, model, methodList)
}
}
// 处理props
if (scheme.props && scheme.props.props) {
buildProps(scheme, propsList)
}
// 处理el-upload的action
if (scheme.action && config.tag === 'el-upload') {
uploadVarList.push(
`${scheme.__vModel__}Action: '${scheme.action}',
${scheme.__vModel__}fileList: [],`
)
methodList.push(buildBeforeUpload(scheme))
// 非自动上传时，生成手动上传的函数
if (!scheme['auto-upload']) {
methodList.push(buildSubmitUpload(scheme))
}
}
// 构建子级组件属性
if (config.children) {
config.children.forEach(item => {
buildAttributes(item, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
})
}
}
// 混入处理函数
function mixinMethod(type) {
const list = []; const
minxins = {
file: confGlobal.formBtns ? {
submitForm: `submitForm() {
this.$refs['${confGlobal.formRef}'].validate(valid => {
if(!valid) return
// TODO 提交表单
})
},`,
resetForm: `resetForm() {
this.$refs['${confGlobal.formRef}'].resetFields()
},`
} : null,
dialog: {
onOpen: 'onOpen() {},',
onClose: `onClose() {
this.$refs['${confGlobal.formRef}'].resetFields()
},`,
close: `close() {
this.$emit('update:visible', false)
},`,
handelConfirm: `handelConfirm() {
this.$refs['${confGlobal.formRef}'].validate(valid => {
if(!valid) return
this.close()
})
},`
}
}
const methods = minxins[type]
if (methods) {
Object.keys(methods).forEach(key => {
list.push(methods[key])
})
}
return list
}
// 构建data
function buildData(scheme, dataList) {
const config = scheme.__config__
if (scheme.__vModel__ === undefined) return
const defaultValue = JSON.stringify(config.defaultValue)
dataList.push(`${scheme.__vModel__}: ${defaultValue},`)
}
// 构建校验规则
function buildRules(scheme, ruleList) {
const config = scheme.__config__
if (scheme.__vModel__ === undefined) return
const rules = []
if (ruleTrigger[config.tag]) {
if (config.required) {
const type = isArray(config.defaultValue) ? 'type: \'array\',' : ''
let message = isArray(config.defaultValue) ? `请至少选择一个${config.label}` : scheme.placeholder
if (message === undefined) message = `${config.label}不能为空`
rules.push(`{ required: true, ${type} message: '${message}', trigger: '${ruleTrigger[config.tag]}' }`)
}
if (config.regList && isArray(config.regList)) {
config.regList.forEach(item => {
if (item.pattern) {
rules.push(
`{ pattern: ${eval(item.pattern)}, message: '${item.message}', trigger: '${ruleTrigger[config.tag]}' }`
)
}
})
}
ruleList.push(`${scheme.__vModel__}: [${rules.join(',')}],`)
}
}
// 构建options
function buildOptions(scheme, optionsList) {
if (scheme.__vModel__ === undefined) return
// el-cascader直接有options属性，其他组件都是定义在slot中，所以有两处判断
let { options } = scheme
if (!options) options = scheme.__slot__.options
if (scheme.__config__.dataType === 'dynamic') { options = [] }
const str = `${scheme.__vModel__}Options: ${JSON.stringify(options)},`
optionsList.push(str)
}
function buildProps(scheme, propsList) {
const str = `${scheme.__vModel__}Props: ${JSON.stringify(scheme.props.props)},`
propsList.push(str)
}
// el-upload的BeforeUpload
function buildBeforeUpload(scheme) {
console.log(scheme)
const config = scheme.__config__
const unitNum = units[config.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const
returnList = []
if (config.fileSize) {
rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${config.fileSize}
if(!isRightSize){
this.$message.error('文件大小超过 ${config.fileSize}${config.sizeUnit}')
}`
returnList.push('isRightSize')
}
if (scheme.accept) {
acceptCode = `let isAccept = new RegExp('${scheme.accept}').test(file.type)
if(!isAccept){
this.$message.error('应该选择${scheme.accept}类型的文件')
}`
returnList.push('isAccept')
}
const str = `${scheme.__vModel__}BeforeUpload(file) {
${rightSizeCode}
${acceptCode}
return ${returnList.join('&&')}
},`
return returnList.length ? str : ''
}
// el-upload的submit
function buildSubmitUpload(scheme) {
const str = `submitUpload() {
this.$refs['${scheme.__vModel__}'].submit()
},`
return str
}
function buildOptionMethod(methodName, model, methodList) {
const str = `${methodName}() {
// TODO 发起请求获取数据
this.${model}
},`
methodList.push(str)
}
// js整体拼接
function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods) {
const str = `${exportDefault}{
${inheritAttrs[type]}
components: {},
props: [],
data () {
return {
${conf.formModel}: {
${data}
},
${conf.formRules}: {
${rules}
},
${uploadVar}
${selectOptions}
${props}
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {
${methods}
}
}`
return str
}

17
admin/src/components/FormGenerator/components/generator/ruleTrigger.js Normal file
View File

@@ -0,0 +1,17 @@
/**
* 用于生成表单校验，指定正则规则的触发方式。
* 未在此处声明无触发方式的组件将不生成rule！！
*/
export default {
'el-input': 'blur',
'el-input-number': 'blur',
'el-select': 'change',
'el-radio-group': 'change',
'el-checkbox-group': 'change',
'el-cascader': 'change',
'el-time-picker': 'change',
'el-date-picker': 'change',
'el-rate': 'change',
tinymce: 'blur'
}

196
admin/src/components/FormGenerator/components/parser/Parser.vue Normal file
View File

@@ -0,0 +1,196 @@
<script>
import render from '@/components/FormGenerator/components/render/render.js'
const ruleTrigger = {
'el-input': 'blur',
'el-input-number': 'blur',
'el-select': 'change',
'el-radio-group': 'change',
'el-checkbox-group': 'change',
'el-cascader': 'change',
'el-time-picker': 'change',
'el-date-picker': 'change',
'el-rate': 'change'
}
function renderFrom(h) {
const { formConfCopy } = this
return (
<el-row gutter={formConfCopy.gutter}>
<el-form
size={formConfCopy.size}
label-position={formConfCopy.labelPosition}
disabled={formConfCopy.disabled}
label-width={`${formConfCopy.labelWidth}px`}
ref={formConfCopy.formRef}
// model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664
props={{ model: this[formConfCopy.formModel] }}
rules={this[formConfCopy.formRules]}
>
{renderFormItem.call(this, h, formConfCopy.fields)}
{formConfCopy.formBtns && formBtns.call(this, h)}
</el-form>
</el-row>
)
}
function formBtns(h) {
return <el-col>
<el-form-item size='mini'>
<el-button type='primary' onClick={this.submitForm}>提交</el-button>
<el-button onClick={this.resetForm}>重置</el-button>
</el-form-item>
</el-col>
}
function renderFormItem(h, elementList) {
return elementList.map(scheme => {
const config = scheme.__config__
const layout = layouts[config.layout]
if (layout) {
return layout.call(this, h, scheme)
}
throw new Error(`没有与${config.layout}匹配的layout`)
})
}
function renderChildren(h, scheme) {
const config = scheme.__config__
if (!Array.isArray(config.children)) return null
return renderFormItem.call(this, h, config.children)
}
function setValue(event, config, scheme) {
this.$set(config, 'defaultValue', event)
this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
}
function buildListeners(scheme) {
const config = scheme.__config__
const methods = this.formConf.__methods__ || {}
const listeners = {}
// 给__methods__中的方法绑定this和event
Object.keys(methods).forEach(key => {
listeners[key] = event => methods[key].call(this, event)
})
// 响应 render.js 中的 vModel $emit('input', val)
listeners.input = event => setValue.call(this, event, config, scheme)
return listeners
}
const layouts = {
colFormItem(h, scheme) {
const config = scheme.__config__
const listeners = buildListeners.call(this, scheme)
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
if (config.showLabel === false) labelWidth = '0'
return (
<el-col span={config.span}>
<el-form-item label-width={labelWidth} prop={scheme.__vModel__}
label={config.showLabel ? config.label : ''}>
<render conf={scheme} {...{ on: listeners }} />
</el-form-item>
</el-col>
)
},
rowFormItem(h, scheme) {
let child = renderChildren.apply(this, arguments)
if (scheme.type === 'flex') {
child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
{child}
</el-row>
}
return (
<el-col span={scheme.span}>
<el-row gutter={scheme.gutter}>
{child}
</el-row>
</el-col>
)
}
}
export default {
components: {
render
},
props: {
formConf: {
type: Object,
required: true
},
formEditData: {
type: Object
},
isEdit: {
type: Boolean,
default: false
}
},
data() {
if (this.isEdit) { // 初始化待编辑数据
this.formConf.fields.forEach(conf => {
conf.__config__.defaultValue = this.formEditData[conf.__vModel__]
})
}
const data = {
formConfCopy: JSON.parse(JSON.stringify(this.formConf)),
[this.formConf.formModel]: {},
[this.formConf.formRules]: {}
}
this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel])
this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules])
return data
},
methods: {
initFormData(componentList, formData) {
componentList.forEach(cur => {
const config = cur.__config__
if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue
if (config.children) this.initFormData(config.children, formData)
})
},
buildRules(componentList, rules) {
componentList.forEach(cur => {
const config = cur.__config__
if (Array.isArray(config.regList)) {
if (config.required) {
const required = { required: config.required, message: cur.placeholder }
if (Array.isArray(config.defaultValue)) {
required.type = 'array'
required.message = `请至少选择一个${config.label}`
}
required.message === undefined && (required.message = `${config.label}不能为空`)
config.regList.push(required)
}
rules[cur.__vModel__] = config.regList.map(item => {
item.pattern && (item.pattern = eval(item.pattern))
item.trigger = ruleTrigger && ruleTrigger[config.tag]
return item
})
}
if (config.children) this.buildRules(config.children, rules)
})
},
resetForm() {
this.formConfCopy = JSON.parse(JSON.stringify(this.formConf))
this.$refs[this.formConf.formRef].resetFields()
},
submitForm() {
this.$refs[this.formConf.formRef].validate(valid => {
if (!valid) return false
// 触发sumit事件
this.$emit('submit', this[this.formConf.formModel])
return true
})
}
},
render(h) {
return renderFrom.call(this, h)
}
}
</script>

17
admin/src/components/FormGenerator/components/parser/README.md Normal file
View File

@@ -0,0 +1,17 @@
## form-generator JSON 解析器
>用于将form-generator导出的JSON解析成一个表单。
### 安装组件
```
npm i form-gen-parser
```
或者
```
yarn add form-gen-parser
```
### 使用示例
> [查看在线示例](https://mrhj.gitee.io/form-generator/#/parser)
示例代码:
> [src\components\parser\example\Index.vue](https://github.com/JakHuang/form-generator/blob/dev/src/components/parser/example/Index.vue)

64
admin/src/components/FormGenerator/components/parser/ZBParser.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div>
<parser
v-if="formConf.fields.length > 0"
:is-edit="isCreate === 1"
:form-conf="formConf"
:form-edit-data="editData"
@submit="handlerSubmit"
/>
<!-- editData:{{ editData }}-->
<!-- formConf:{{ formConf }}-->
<!-- isCreate:{{ isCreate }}-->
</div>
</template>
<script>
/**
* 注意：和Parser唯一的区别就是这里仅仅传入表单配置id即可自动加载已配置的表单
* 数据后渲染表单，
* 其他业务和Parser保持一致
*/
import * as systemFormConfigApi from '@/api/systemFormConfig.js'
import parser from '@/components/FormGenerator/components/parser/Parser'
export default {
// name: "ZBParser"
components: { parser },
props: {
formId: {
type: Number,
required: true
},
isCreate: {
type: Number,
default: 0 // 0=create 1=edit
},
editData: {
type: Object
}
},
data() {
return {
formConf: { fields: [] }
}
},
mounted() {
this.handlerGetFormConfig(this.formId)
},
methods: {
handlerGetFormConfig(formId) { // 获取表单配置后生成table列
const _pram = { id: formId }
systemFormConfigApi.getFormConfigInfo(_pram).then(data => {
this.formConf = JSON.parse(data.content)
})
},
handlerSubmit(formValue) {
this.$emit('submit', formValue)
}
}
}
</script>
<style scoped>
</style>

264
admin/src/components/FormGenerator/components/parser/example/Index.vue Normal file
View File

@@ -0,0 +1,264 @@
<template>
<div class="test-form">
<parser :form-conf="formConf" @submit="sumbitForm1" />
<parser :key="key2" :form-conf="formConf" @submit="sumbitForm2" />
<el-button @click="change">
change
</el-button>
</div>
</template>
<script>
import Parser from '../Parser'
// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'
export default {
components: {
Parser
},
props: {},
data() {
return {
key2: +new Date(),
formConf: {
fields: [
{
__config__: {
label: '单行文本',
labelWidth: null,
showLabel: true,
changeTag: true,
tag: 'el-input',
tagIcon: 'input',
required: true,
layout: 'colFormItem',
span: 24,
document: 'https://element.eleme.cn/#/zh-CN/component/input',
regList: [
{
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
message: '手机号格式错误'
}
]
},
__slot__: {
prepend: '',
append: ''
},
__vModel__: 'mobile',
placeholder: '请输入手机号',
style: {
width: '100%'
},
clearable: true,
'prefix-icon': 'el-icon-mobile',
'suffix-icon': '',
maxlength: 11,
'show-word-limit': true,
readonly: false,
disabled: false
},
{
__config__: {
label: '日期范围',
tag: 'el-date-picker',
tagIcon: 'date-range',
defaultValue: null,
span: 24,
showLabel: true,
labelWidth: null,
required: true,
layout: 'colFormItem',
regList: [],
changeTag: true,
document:
'https://element.eleme.cn/#/zh-CN/component/date-picker',
formId: 101,
renderKey: 1585980082729
},
style: {
width: '100%'
},
type: 'daterange',
'range-separator': '至',
'start-placeholder': '开始日期',
'end-placeholder': '结束日期',
disabled: false,
clearable: true,
format: 'yyyy-MM-dd',
'value-format': 'yyyy-MM-dd',
readonly: false,
__vModel__: 'field101'
},
{
__config__: {
layout: 'rowFormItem',
tagIcon: 'row',
label: '行容器',
layoutTree: true,
children: [
{
__config__: {
label: '评分',
tag: 'el-rate',
tagIcon: 'rate',
defaultValue: 0,
span: 24,
showLabel: true,
labelWidth: null,
layout: 'colFormItem',
required: true,
regList: [],
changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/rate',
formId: 102,
renderKey: 1586839671259
},
style: {},
max: 5,
'allow-half': false,
'show-text': false,
'show-score': false,
disabled: false,
__vModel__: 'field102'
}
],
document: 'https://element.eleme.cn/#/zh-CN/component/layout',
formId: 101,
span: 24,
renderKey: 1586839668999,
componentName: 'row101',
gutter: 15
},
type: 'default',
justify: 'start',
align: 'top'
}
],
formRef: 'elForm',
formModel: 'formData',
size: 'small',
labelPosition: 'right',
labelWidth: 100,
formRules: 'rules',
gutter: 15,
disabled: false,
span: 24,
formBtns: true,
unFocusedComponentBorder: false
},
formConf2: {
fields: [
{
__config__: {
label: '单行文本',
labelWidth: null,
showLabel: true,
changeTag: true,
tag: 'el-input',
tagIcon: 'input',
required: true,
layout: 'colFormItem',
span: 24,
document: 'https://element.eleme.cn/#/zh-CN/component/input',
regList: [
{
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
message: '手机号格式错误'
}
]
},
__slot__: {
prepend: '',
append: ''
},
__vModel__: 'mobile',
placeholder: '请输入手机号',
style: {
width: '100%'
},
clearable: true,
'prefix-icon': 'el-icon-mobile',
'suffix-icon': '',
maxlength: 11,
'show-word-limit': true,
readonly: false,
disabled: false
},
{
__config__: {
label: '日期范围',
tag: 'el-date-picker',
tagIcon: 'date-range',
defaultValue: null,
span: 24,
showLabel: true,
labelWidth: null,
required: true,
layout: 'colFormItem',
regList: [],
changeTag: true,
document:
'https://element.eleme.cn/#/zh-CN/component/date-picker',
formId: 101,
renderKey: 1585980082729
},
style: {
width: '100%'
},
type: 'daterange',
'range-separator': '至',
'start-placeholder': '开始日期',
'end-placeholder': '结束日期',
disabled: false,
clearable: true,
format: 'yyyy-MM-dd',
'value-format': 'yyyy-MM-dd',
readonly: false,
__vModel__: 'field101'
}
],
formRef: 'elForm',
formModel: 'formData',
size: 'small',
labelPosition: 'right',
labelWidth: 100,
formRules: 'rules',
gutter: 15,
disabled: false,
span: 24,
formBtns: true,
unFocusedComponentBorder: false
}
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
change() {
this.key2 = +new Date()
const t = this.formConf
this.formConf = this.formConf2
this.formConf2 = t
},
sumbitForm1(data) {
console.log('sumbitForm1提交数据：', data)
},
sumbitForm2(data) {
console.log('sumbitForm2提交数据：', data)
}
}
}
</script>
<style lang="scss" scoped>
.test-form {
margin: 15px auto;
width: 800px;
padding: 15px;
}
</style>

3
admin/src/components/FormGenerator/components/parser/index.js Normal file
View File

@@ -0,0 +1,3 @@
import Parser from './Parser'
export default Parser

25
admin/src/components/FormGenerator/components/parser/package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "form-gen-parser",
"version": "1.0.3",
"description": "表单json解析器",
"main": "lib/form-gen-parser.umd.js",
"directories": {
"example": "example"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/JakHuang/form-generator.git"
},
"dependencies": {
"form-gen-render": "^1.0.0"
},
"author": "jakHuang",
"license": "MIT",
"bugs": {
"url": "https://github.com/JakHuang/form-generator/issues"
},
"homepage": "https://github.com/JakHuang/form-generator#readme"
}

19
admin/src/components/FormGenerator/components/render/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "form-gen-render",
"version": "1.0.4",
"description": "表单核心render",
"main": "lib/form-gen-render.umd.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/JakHuang/form-generator.git"
},
"author": "jakhuang",
"license": "MIT",
"bugs": {
"url": "https://github.com/JakHuang/form-generator/issues"
},
"homepage": "https://github.com/JakHuang/form-generator#readme"
}

59
admin/src/components/FormGenerator/components/render/render.js Normal file
View File

@@ -0,0 +1,59 @@
function vModel(self, dataObject, defaultValue) {
dataObject.props.value = defaultValue
dataObject.on.input = val => {
self.$emit('input', val)
}
}
const componentChild = {}
/**
* 将./slots中的文件挂载到对象componentChild上
* 文件名为key，对应JSON配置中的__config__.tag
* 文件内容为value，解析JSON配置中的__slot__
*/
const slotsFiles = require.context('./slots', true, /\.js$/)
const keys = slotsFiles.keys() || []
keys.forEach(key => {
const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = slotsFiles(key).default
componentChild[tag] = value
})
export default {
render(h) {
const dataObject = {
attrs: {},
props: {},
on: {},
style: {}
}
const confClone = JSON.parse(JSON.stringify(this.conf))
const children = []
const childObjs = componentChild[confClone.__config__.tag]
if (childObjs) {
Object.keys(childObjs).forEach(key => {
const childFunc = childObjs[key]
if (confClone.__slot__ && confClone.__slot__[key]) {
children.push(childFunc(h, confClone, key))
}
})
}
Object.keys(confClone).forEach(key => {
const val = confClone[key]
if (key === '__vModel__') {
vModel(this, dataObject, confClone.__config__.defaultValue)
} else if (dataObject[key]) {
dataObject[key] = { ...dataObject[key], ...val }
} else {
dataObject.attrs[key] = val
}
})
delete dataObject.attrs.__config__
delete dataObject.attrs.__slot__
return h(this.conf.__config__.tag, dataObject, children)
},
props: ['conf']
}

5
admin/src/components/FormGenerator/components/render/slots/el-button.js Normal file
View File

@@ -0,0 +1,5 @@
export default {
default(h, conf, key) {
return conf.__slot__[key]
}
}

13
admin/src/components/FormGenerator/components/render/slots/el-checkbox-group.js Normal file
View File

@@ -0,0 +1,13 @@
export default {
options(h, conf, key) {
const list = []
conf.__slot__.options.forEach(item => {
if (conf.__config__.optionType === 'button') {
list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
} else {
list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>)
}
})
return list
}
}

8
admin/src/components/FormGenerator/components/render/slots/el-input.js Normal file
View File

@@ -0,0 +1,8 @@
export default {
prepend(h, conf, key) {
return <template slot='prepend'>{conf.__slot__[key]}</template>
},
append(h, conf, key) {
return <template slot='append'>{conf.__slot__[key]}</template>
}
}

13
admin/src/components/FormGenerator/components/render/slots/el-radio-group.js Normal file
View File

@@ -0,0 +1,13 @@
export default {
options(h, conf, key) {
const list = []
conf.__slot__.options.forEach(item => {
if (conf.__config__.optionType === 'button') {
list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>)
} else {
list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>)
}
})
return list
}
}

9
admin/src/components/FormGenerator/components/render/slots/el-select.js Normal file
View File

@@ -0,0 +1,9 @@
export default {
options(h, conf, key) {
const list = []
conf.__slot__.options.forEach(item => {
list.push(<el-option label={item.label} value={item.value} disabled={item.disabled}></el-option>)
})
return list
}
}

17
admin/src/components/FormGenerator/components/render/slots/el-upload.js Normal file
View File

@@ -0,0 +1,17 @@
export default {
'list-type': (h, conf, key) => {
const list = []
const config = conf.__config__
if (conf['list-type'] === 'picture-card') {
list.push(<i class='el-icon-plus'></i>)
} else {
list.push(<el-button size='small' type='primary' icon='el-icon-upload'>{config.buttonText}</el-button>)
}
if (config.showTip) {
list.push(
<div slot='tip' class='el-upload__tip'>只能上传不超过 {config.fileSize}{config.sizeUnit} 的{conf.accept}文件</div>
)
}
return list
}
}

8
admin/src/components/FormGenerator/components/tinymce/config.js Normal file
View File

@@ -0,0 +1,8 @@
/* eslint-disable max-len */
export const plugins = [
'advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table wxTemplate textpattern visualblocks visualchars wordcount'
]
export const toolbar = [
'code searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
]

93
admin/src/components/FormGenerator/components/tinymce/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<textarea :id="tinymceId" class="textarea" />
</template>
<script>
import loadTinymce from '@/components/FormGenerator/utils/loadTinymce'
import { plugins, toolbar } from './config'
import { debounce } from 'throttle-debounce'
let num = 1
export default {
props: {
id: {
type: String,
default: () => {
num === 10000 && (num = 1)
return `tinymce${+new Date()}${num++}`
}
},
value: {
type: [String, Number, Boolean],
default: ''
}
},
data() {
return {
tinymceId: this.id
}
},
mounted() {
loadTinymce(tinymce => {
import('./zh_CN').then(() => {
tinymce.init({
selector: `#${this.tinymceId}`,
language: 'zh_CN',
menubar: 'file edit insert view format table',
plugins,
toolbar,
height: this.$attrs.height || 300,
branding: this.$attrs.branding || false,
object_resizing: false,
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
default_link_target: '_blank',
link_title: false,
nonbreaking_force_tab: true,
init_instance_callback: editor => {
if (this.value) editor.setContent(this.value)
this.vModel(editor)
}
})
})
})
},
destroyed() {
this.destroyTinymce()
},
methods: {
vModel(editor) {
// 控制连续写入时setContent的触发频率
const debounceSetContent = debounce(250, editor.setContent)
this.$watch('value', (val, prevVal) => {
if (editor && val !== prevVal && val !== editor.getContent()) {
if (typeof val !== 'string') val = val.toString()
debounceSetContent.call(editor, val)
}
})
editor.on('change keyup undo redo', () => {
this.$emit('input', editor.getContent())
})
},
destroyTinymce() {
if (!window.tinymce) return
const tinymce = window.tinymce.get(this.tinymceId)
if (tinymce) {
tinymce.destroy()
}
}
}
}
</script>
<style lang="scss" scoped>
.textarea{
visibility: hidden;
}
</style>

420
admin/src/components/FormGenerator/components/tinymce/zh_CN.js Normal file
View File

@@ -0,0 +1,420 @@
/* eslint-disable */
tinymce.addI18n('zh_CN',{
"Redo": "\u91cd\u505a",
"Undo": "\u64a4\u9500",
"Cut": "\u526a\u5207",
"Copy": "\u590d\u5236",
"Paste": "\u7c98\u8d34",
"Select all": "\u5168\u9009",
"New document": "\u65b0\u6587\u4ef6",
"Ok": "\u786e\u5b9a",
"Cancel": "\u53d6\u6d88",
"Visual aids": "\u7f51\u683c\u7ebf",
"Bold": "\u7c97\u4f53",
"Italic": "\u659c\u4f53",
"Underline": "\u4e0b\u5212\u7ebf",
"Strikethrough": "\u5220\u9664\u7ebf",
"Superscript": "\u4e0a\u6807",
"Subscript": "\u4e0b\u6807",
"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
"Justify": "\u4e24\u7aef\u5bf9\u9f50",
"Bullet list": "\u9879\u76ee\u7b26\u53f7",
"Numbered list": "\u7f16\u53f7\u5217\u8868",
"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
"Close": "\u5173\u95ed",
"Formats": "\u683c\u5f0f",
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
"Headers": "\u6807\u9898",
"Header 1": "\u6807\u98981",
"Header 2": "\u6807\u98982",
"Header 3": "\u6807\u98983",
"Header 4": "\u6807\u98984",
"Header 5": "\u6807\u98985",
"Header 6": "\u6807\u98986",
"Headings": "\u6807\u9898",
"Heading 1": "\u6807\u98981",
"Heading 2": "\u6807\u98982",
"Heading 3": "\u6807\u98983",
"Heading 4": "\u6807\u98984",
"Heading 5": "\u6807\u98985",
"Heading 6": "\u6807\u98986",
"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
"Div": "Div",
"Pre": "Pre",
"Code": "\u4ee3\u7801",
"Paragraph": "\u6bb5\u843d",
"Blockquote": "\u5f15\u6587\u533a\u5757",
"Inline": "\u6587\u672c",
"Blocks": "\u57fa\u5757",
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
"Fonts": "\u5b57\u4f53",
"Font Sizes": "\u5b57\u53f7",
"Class": "\u7c7b\u578b",
"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
"OR": "\u6216",
"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
"Upload": "\u4e0a\u4f20",
"Block": "\u5757",
"Align": "\u5bf9\u9f50",
"Default": "\u9ed8\u8ba4",
"Circle": "\u7a7a\u5fc3\u5706",
"Disc": "\u5b9e\u5fc3\u5706",
"Square": "\u65b9\u5757",
"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
"Anchor...": "\u951a\u70b9...",
"Name": "\u540d\u79f0",
"Id": "\u6807\u8bc6\u7b26",
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
"Special character...": "\u7279\u6b8a\u5b57\u7b26...",
"Source code": "\u6e90\u4ee3\u7801",
"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
"Language": "\u8bed\u8a00",
"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
"Color Picker": "\u9009\u8272\u5668",
"R": "R",
"G": "G",
"B": "B",
"Left to right": "\u4ece\u5de6\u5230\u53f3",
"Right to left": "\u4ece\u53f3\u5230\u5de6",
"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
"Title": "\u6807\u9898",
"Keywords": "\u5173\u952e\u8bcd",
"Description": "\u63cf\u8ff0",
"Robots": "\u673a\u5668\u4eba",
"Author": "\u4f5c\u8005",
"Encoding": "\u7f16\u7801",
"Fullscreen": "\u5168\u5c4f",
"Action": "\u64cd\u4f5c",
"Shortcut": "\u5feb\u6377\u952e",
"Help": "\u5e2e\u52a9",
"Address": "\u5730\u5740",
"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
"Plugins": "\u63d2\u4ef6",
"Handy Shortcuts": "\u5feb\u6377\u952e",
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
"Image description": "\u56fe\u7247\u63cf\u8ff0",
"Source": "\u5730\u5740",
"Dimensions": "\u5927\u5c0f",
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
"General": "\u666e\u901a",
"Advanced": "\u9ad8\u7ea7",
"Style": "\u6837\u5f0f",
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
"Border": "\u8fb9\u6846",
"Insert image": "\u63d2\u5165\u56fe\u7247",
"Image...": "\u56fe\u7247...",
"Image list": "\u56fe\u7247\u5217\u8868",
"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
"Edit image": "\u7f16\u8f91\u56fe\u7247",
"Image options": "\u56fe\u7247\u9009\u9879",
"Zoom in": "\u653e\u5927",
"Zoom out": "\u7f29\u5c0f",
"Crop": "\u88c1\u526a",
"Resize": "\u8c03\u6574\u5927\u5c0f",
"Orientation": "\u65b9\u5411",
"Brightness": "\u4eae\u5ea6",
"Sharpen": "\u9510\u5316",
"Contrast": "\u5bf9\u6bd4\u5ea6",
"Color levels": "\u989c\u8272\u5c42\u6b21",
"Gamma": "\u4f3d\u9a6c\u503c",
"Invert": "\u53cd\u8f6c",
"Apply": "\u5e94\u7528",
"Back": "\u540e\u9000",
"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
"Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
"Text to display": "\u663e\u793a\u6587\u5b57",
"Url": "\u5730\u5740",
"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
"Current window": "\u5f53\u524d\u7a97\u53e3",
"None": "\u65e0",
"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
"Remove link": "\u5220\u9664\u94fe\u63a5",
"Anchors": "\u951a\u70b9",
"Link...": "\u94fe\u63a5...",
"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
"Link list": "\u94fe\u63a5\u5217\u8868",
"Insert video": "\u63d2\u5165\u89c6\u9891",
"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
"Alternative source": "\u955c\u50cf",
"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
"Embed": "\u5185\u5d4c",
"Media...": "\u591a\u5a92\u4f53...",
"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
"Page break": "\u5206\u9875\u7b26",
"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
"Preview": "\u9884\u89c8",
"Print...": "\u6253\u5370...",
"Save": "\u4fdd\u5b58",
"Find": "\u67e5\u627e",
"Replace with": "\u66ff\u6362\u4e3a",
"Replace": "\u66ff\u6362",
"Replace all": "\u5168\u90e8\u66ff\u6362",
"Previous": "\u4e0a\u4e00\u4e2a",
"Next": "\u4e0b\u4e00\u4e2a",
"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
"Find whole words only": "\u5168\u5b57\u5339\u914d",
"Spell check": "\u62fc\u5199\u68c0\u67e5",
"Ignore": "\u5ffd\u7565",
"Ignore all": "\u5168\u90e8\u5ffd\u7565",
"Finish": "\u5b8c\u6210",
"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
"Insert table": "\u63d2\u5165\u8868\u683c",
"Table properties": "\u8868\u683c\u5c5e\u6027",
"Delete table": "\u5220\u9664\u8868\u683c",
"Cell": "\u5355\u5143\u683c",
"Row": "\u884c",
"Column": "\u5217",
"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
"Delete row": "\u5220\u9664\u884c",
"Row properties": "\u884c\u5c5e\u6027",
"Cut row": "\u526a\u5207\u884c",
"Copy row": "\u590d\u5236\u884c",
"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
"Delete column": "\u5220\u9664\u5217",
"Cols": "\u5217",
"Rows": "\u884c",
"Width": "\u5bbd",
"Height": "\u9ad8",
"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
"Show caption": "\u663e\u793a\u6807\u9898",
"Left": "\u5de6\u5bf9\u9f50",
"Center": "\u5c45\u4e2d",
"Right": "\u53f3\u5bf9\u9f50",
"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
"Scope": "\u8303\u56f4",
"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
"H Align": "\u6c34\u5e73\u5bf9\u9f50",
"V Align": "\u5782\u76f4\u5bf9\u9f50",
"Top": "\u9876\u90e8\u5bf9\u9f50",
"Middle": "\u5782\u76f4\u5c45\u4e2d",
"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
"Header cell": "\u8868\u5934\u5355\u5143\u683c",
"Row group": "\u884c\u7ec4",
"Column group": "\u5217\u7ec4",
"Row type": "\u884c\u7c7b\u578b",
"Header": "\u8868\u5934",
"Body": "\u8868\u4f53",
"Footer": "\u8868\u5c3e",
"Border color": "\u8fb9\u6846\u989c\u8272",
"Insert template...": "\u63d2\u5165\u6a21\u677f...",
"Templates": "\u6a21\u677f",
"Template": "\u6a21\u677f",
"Text color": "\u6587\u5b57\u989c\u8272",
"Background color": "\u80cc\u666f\u8272",
"Custom...": "\u81ea\u5b9a\u4e49...",
"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
"No color": "\u65e0",
"Remove color": "\u79fb\u9664\u989c\u8272",
"Table of Contents": "\u5185\u5bb9\u5217\u8868",
"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
"Word count": "\u5b57\u6570",
"Count": "\u8ba1\u6570",
"Document": "\u6587\u6863",
"Selection": "\u9009\u62e9",
"Words": "\u5355\u8bcd",
"Words: {0}": "\u5b57\u6570\uff1a{0}",
"{0} words": "{0} \u5b57",
"File": "\u6587\u4ef6",
"Edit": "\u7f16\u8f91",
"Insert": "\u63d2\u5165",
"View": "\u89c6\u56fe",
"Format": "\u683c\u5f0f",
"Table": "\u8868\u683c",
"Tools": "\u5de5\u5177",
"Powered by {0}": "\u7531{0}\u9a71\u52a8",
"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
"Image title": "\u56fe\u7247\u6807\u9898",
"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
"Border style": "\u8fb9\u6846\u6837\u5f0f",
"Error": "\u9519\u8bef",
"Warn": "\u8b66\u544a",
"Valid": "\u6709\u6548",
"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
"System Font": "\u7cfb\u7edf\u5b57\u4f53",
"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
"example": "\u793a\u4f8b",
"Search": "\u641c\u7d22",
"All": "\u5168\u90e8",
"Currency": "\u8d27\u5e01",
"Text": "\u6587\u5b57",
"Quotations": "\u5f15\u7528",
"Mathematical": "\u6570\u5b66",
"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
"Symbols": "\u7b26\u53f7",
"Arrows": "\u7bad\u5934",
"User Defined": "\u81ea\u5b9a\u4e49",
"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
"currency sign": "\u8d27\u5e01\u7b26\u53f7",
"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
"colon sign": "\u5192\u53f7",
"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
"lira sign": "\u91cc\u62c9\u7b26\u53f7",
"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
"naira sign": "\u5948\u62c9\u7b26\u53f7",
"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
"won sign": "\u97e9\u5143\u7b26\u53f7",
"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
"austral sign": "\u6fb3\u5143\u7b26\u53f7",
"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
"cedi sign": "\u585e\u5730\u7b26\u53f7",
"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
"spesmilo sign": "spesmilo\u7b26\u53f7",
"tenge sign": "\u575a\u6208\u7b26\u53f7",
"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
"ruble sign": "\u5362\u5e03\u7b26\u53f7",
"yen character": "\u65e5\u5143\u5b57\u6837",
"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
"People": "\u4eba\u7c7b",
"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
"Activity": "\u6d3b\u52a8",
"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
"Objects": "\u7269\u4ef6",
"Flags": "\u65d7\u5e1c",
"Characters": "\u5b57\u7b26",
"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
"{0} characters": "{0} \u4e2a\u5b57\u7b26",
"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
"Update": "\u66f4\u65b0",
"Color swatch": "\u989c\u8272\u6837\u672c",
"Turquoise": "\u9752\u7eff\u8272",
"Green": "\u7eff\u8272",
"Blue": "\u84dd\u8272",
"Purple": "\u7d2b\u8272",
"Navy Blue": "\u6d77\u519b\u84dd",
"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
"Dark Green": "\u6df1\u7eff\u8272",
"Medium Blue": "\u4e2d\u84dd\u8272",
"Medium Purple": "\u4e2d\u7d2b\u8272",
"Midnight Blue": "\u6df1\u84dd\u8272",
"Yellow": "\u9ec4\u8272",
"Orange": "\u6a59\u8272",
"Red": "\u7ea2\u8272",
"Light Gray": "\u6d45\u7070\u8272",
"Gray": "\u7070\u8272",
"Dark Yellow": "\u6697\u9ec4\u8272",
"Dark Orange": "\u6df1\u6a59\u8272",
"Dark Red": "\u6df1\u7ea2\u8272",
"Medium Gray": "\u4e2d\u7070\u8272",
"Dark Gray": "\u6df1\u7070\u8272",
"Light Green": "\u6d45\u7eff\u8272",
"Light Yellow": "\u6d45\u9ec4\u8272",
"Light Red": "\u6d45\u7ea2\u8272",
"Light Purple": "\u6d45\u7d2b\u8272",
"Light Blue": "\u6d45\u84dd\u8272",
"Dark Purple": "\u6df1\u7d2b\u8272",
"Dark Blue": "\u6df1\u84dd\u8272",
"Black": "\u9ed1\u8272",
"White": "\u767d\u8272",
"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
"history": "\u5386\u53f2",
"styles": "\u6837\u5f0f",
"formatting": "\u683c\u5f0f\u5316",
"alignment": "\u5bf9\u9f50",
"indentation": "\u7f29\u8fdb",
"permanent pen": "\u8bb0\u53f7\u7b14",
"comments": "\u5907\u6ce8",
"Format Painter": "\u683c\u5f0f\u5237",
"Insert\/edit iframe": "\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6",
"Capitalization": "\u5927\u5199",
"lowercase": "\u5c0f\u5199",
"UPPERCASE": "\u5927\u5199",
"Title Case": "\u9996\u5b57\u6bcd\u5927\u5199",
"Permanent Pen Properties": "\u6c38\u4e45\u7b14\u5c5e\u6027",
"Permanent pen properties...": "\u6c38\u4e45\u7b14\u5c5e\u6027...",
"Font": "\u5b57\u4f53",
"Size": "\u5b57\u53f7",
"More...": "\u66f4\u591a...",
"Spellcheck Language": "\u62fc\u5199\u68c0\u67e5\u8bed\u8a00",
"Select...": "\u9009\u62e9...",
"Preferences": "\u9996\u9009\u9879",
"Yes": "\u662f",
"No": "\u5426",
"Keyboard Navigation": "\u952e\u76d8\u6307\u5f15",
"Version": "\u7248\u672c",
"Anchor": "\u951a\u70b9",
"Special character": "\u7279\u6b8a\u7b26\u53f7",
"Code sample": "\u4ee3\u7801\u793a\u4f8b",
"Color": "\u989c\u8272",
"Emoticons": "\u8868\u60c5",
"Document properties": "\u6587\u6863\u5c5e\u6027",
"Image": "\u56fe\u7247",
"Insert link": "\u63d2\u5165\u94fe\u63a5",
"Target": "\u6253\u5f00\u65b9\u5f0f",
"Link": "\u94fe\u63a5",
"Poster": "\u5c01\u9762",
"Media": "\u5a92\u4f53",
"Print": "\u6253\u5370",
"Prev": "\u4e0a\u4e00\u4e2a",
"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
"Whole words": "\u5168\u5b57\u5339\u914d",
"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
"Caption": "\u6807\u9898",
"Insert template": "\u63d2\u5165\u6a21\u677f"
});

110
admin/src/components/FormGenerator/index/CodeTypeDialog.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div>
<el-dialog
v-bind="$attrs"
width="500px"
:close-on-click-modal="false"
:modal-append-to-body="false"
v-on="$listeners"
@open="onOpen"
@close="onClose"
>
<el-row :gutter="15">
<el-form
ref="elForm"
:model="formData"
:rules="rules"
size="medium"
label-width="100px"
>
<el-col :span="24">
<el-form-item label="生成类型" prop="type">
<el-radio-group v-model="formData.type">
<el-radio-button
v-for="(item, index) in typeOptions"
:key="index"
:label="item.value"
:disabled="item.disabled"
>
{{ item.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="showFileName" label="文件名" prop="fileName">
<el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer">
<el-button @click="close">
取消
</el-button>
<el-button type="primary" @click="handelConfirm">
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: ['showFileName'],
data() {
return {
formData: {
fileName: undefined,
type: 'file'
},
rules: {
fileName: [{
required: true,
message: '请输入文件名',
trigger: 'blur'
}],
type: [{
required: true,
message: '生成类型不能为空',
trigger: 'change'
}]
},
typeOptions: [{
label: '页面',
value: 'file'
}, {
label: '弹窗',
value: 'dialog'
}]
}
},
computed: {
},
watch: {},
mounted() {},
methods: {
onOpen() {
if (this.showFileName) {
this.formData.fileName = `${+new Date()}.vue`
}
},
onClose() {
},
close(e) {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs.elForm.validate(valid => {
if (!valid) return
this.$emit('confirm', { ...this.formData })
this.close()
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

106
admin/src/components/FormGenerator/index/DraggableItem.vue Normal file
View File

@@ -0,0 +1,106 @@
<script>
import draggable from 'vuedraggable'
import render from '@/components/FormGenerator/components/render/render'
const components = {
itemBtns(h, element, index, parent) {
const { copyItem, deleteItem } = this.$listeners
return [
<span class='drawing-item-copy' title='复制' onClick={event => {
copyItem(element, parent); event.stopPropagation()
}}>
<i class='el-icon-copy-document' />
</span>,
<span class='drawing-item-delete' title='删除' onClick={event => {
deleteItem(index, parent); event.stopPropagation()
}}>
<i class='el-icon-delete' />
</span>
]
}
}
const layouts = {
colFormItem(h, element, index, parent) {
const { activeItem } = this.$listeners
const config = element.__config__
let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
if (config.showLabel === false) labelWidth = '0'
return (
<el-col span={config.span} class={className}
nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
<el-form-item label-width={labelWidth}
label={config.showLabel ? config.label : ''} required={config.required}>
<render key={config.renderKey} conf={element} onInput={ event => {
this.$set(config, 'defaultValue', event)
}} />
</el-form-item>
{components.itemBtns.apply(this, arguments)}
</el-col>
)
},
rowFormItem(h, element, index, parent) {
const { activeItem } = this.$listeners
const className = this.activeId === element.__config__.formId
? 'drawing-row-item active-from-item'
: 'drawing-row-item'
let child = renderChildren.apply(this, arguments)
if (element.type === 'flex') {
child = <el-row type={element.type} justify={element.justify} align={element.align}>
{child}
</el-row>
}
return (
<el-col span={element.__config__.span}>
<el-row gutter={element.__config__.gutter} class={className}
nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
<span class='component-name'>{element.__config__.componentName}</span>
<draggable list={element.__config__.children} animation={340} group='componentsGroup' class='drag-wrapper'>
{child}
</draggable>
{components.itemBtns.apply(this, arguments)}
</el-row>
</el-col>
)
}
}
function renderChildren(h, element, index, parent) {
const config = element.__config__
if (!Array.isArray(config.children)) return null
return config.children.map((el, i) => {
const layout = layouts[el.__config__.layout]
if (layout) {
return layout.call(this, h, el, i, config.children)
}
return layoutIsNotFound.call(this)
})
}
function layoutIsNotFound() {
throw new Error(`没有与${this.element.__config__.layout}匹配的layout`)
}
export default {
components: {
render,
draggable
},
props: [
'element',
'index',
'drawingList',
'activeId',
'formConf'
],
render(h) {
const layout = layouts[this.element.__config__.layout]
if (layout) {
return layout.call(this, h, this.element, this.index, this.drawingList)
}
return layoutIsNotFound.call(this)
}
}
</script>

333
admin/src/components/FormGenerator/index/FormDrawer.vue Normal file
View File

@@ -0,0 +1,333 @@
<template>
<div>
<el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
<div style="height:100%">
<el-row style="height:100%;overflow:auto">
<el-col :md="24" :lg="12" class="left-editor">
<div class="setting" title="资源引用" @click="showResource">
<el-badge :is-dot="!!resources.length" class="item">
<i class="el-icon-setting" />
</el-badge>
</div>
<el-tabs v-model="activeTab" type="card" class="editor-tabs">
<el-tab-pane name="html">
<span slot="label">
<i v-if="activeTab==='html'" class="el-icon-edit" />
<i v-else class="el-icon-document" />
template
</span>
</el-tab-pane>
<el-tab-pane name="js">
<span slot="label">
<i v-if="activeTab==='js'" class="el-icon-edit" />
<i v-else class="el-icon-document" />
script
</span>
</el-tab-pane>
<el-tab-pane name="css">
<span slot="label">
<i v-if="activeTab==='css'" class="el-icon-edit" />
<i v-else class="el-icon-document" />
css
</span>
</el-tab-pane>
</el-tabs>
<div v-show="activeTab==='html'" id="editorHtml" class="tab-editor" />
<div v-show="activeTab==='js'" id="editorJs" class="tab-editor" />
<div v-show="activeTab==='css'" id="editorCss" class="tab-editor" />
</el-col>
<el-col :md="24" :lg="12" class="right-preview">
<div class="action-bar" :style="{'text-align': 'left'}">
<span class="bar-btn" @click="runCode">
<i class="el-icon-refresh" />
刷新
</span>
<span class="bar-btn" @click="exportFile">
<i class="el-icon-download" />
导出vue文件
</span>
<span ref="copyBtn" class="bar-btn copy-btn">
<i class="el-icon-document-copy" />
复制代码
</span>
<span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
<i class="el-icon-circle-close" />
关闭
</span>
</div>
<iframe
v-show="isIframeLoaded"
ref="previewPage"
class="result-wrapper"
frameborder="0"
src="preview.html"
@load="iframeLoad"
/>
<div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
</el-col>
</el-row>
</div>
</el-drawer>
<resource-dialog
:visible.sync="resourceVisible"
:origin-resource="resources"
@save="setResource"
/>
</div>
</template>
<script>
import { parse } from '@babel/parser'
import ClipboardJS from 'clipboard'
import { saveAs } from 'file-saver'
import {
makeUpHtml, vueTemplate, vueScript, cssStyle
} from '@/components/FormGenerator/components/generator/html'
import { makeUpJs } from '@/components/FormGenerator/components/generator/js'
import { makeUpCss } from '@/components/FormGenerator/components/generator/css'
import { exportDefault, beautifierConf, titleCase } from '../utils/index'
import ResourceDialog from './ResourceDialog'
import loadMonaco from '../utils/loadMonaco'
import loadBeautifier from '../utils/loadBeautifier'
const editorObj = {
html: null,
js: null,
css: null
}
const mode = {
html: 'html',
js: 'javascript',
css: 'css'
}
let beautifier
let monaco
export default {
components: { ResourceDialog },
props: ['formData', 'generateConf'],
data() {
return {
activeTab: 'html',
htmlCode: '',
jsCode: '',
cssCode: '',
codeFrame: '',
isIframeLoaded: false,
isInitcode: false, // 保证open后两个异步只执行一次runcode
isRefreshCode: false, // 每次打开都需要重新刷新代码
resourceVisible: false,
scripts: [],
links: [],
monaco: null
}
},
computed: {
resources() {
return this.scripts.concat(this.links)
}
},
watch: {},
created() {
},
mounted() {
window.addEventListener('keydown', this.preventDefaultSave)
const clipboard = new ClipboardJS('.copy-btn', {
text: trigger => {
const codeStr = this.generateCode()
this.$notify({
title: '成功',
message: '代码已复制到剪切板，可粘贴。',
type: 'success'
})
return codeStr
}
})
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
},
beforeDestroy() {
window.removeEventListener('keydown', this.preventDefaultSave)
},
methods: {
preventDefaultSave(e) {
if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
}
},
onOpen() {
const { type } = this.generateConf
this.htmlCode = makeUpHtml(this.formData, type)
this.jsCode = makeUpJs(this.formData, type)
this.cssCode = makeUpCss(this.formData)
loadBeautifier(btf => {
beautifier = btf
this.htmlCode = beautifier.html(this.htmlCode, beautifierConf.html)
this.jsCode = beautifier.js(this.jsCode, beautifierConf.js)
this.cssCode = beautifier.css(this.cssCode, beautifierConf.html)
loadMonaco(val => {
monaco = val
this.setEditorValue('editorHtml', 'html', this.htmlCode)
this.setEditorValue('editorJs', 'js', this.jsCode)
this.setEditorValue('editorCss', 'css', this.cssCode)
if (!this.isInitcode) {
this.isRefreshCode = true
this.isIframeLoaded && (this.isInitcode = true) && this.runCode()
}
})
})
},
onClose() {
this.isInitcode = false
this.isRefreshCode = false
this.isIframeLoaded = false
},
iframeLoad() {
if (!this.isInitcode) {
this.isIframeLoaded = true
this.isRefreshCode && (this.isInitcode = true) && this.runCode()
}
},
setEditorValue(id, type, codeStr) {
if (editorObj[type]) {
editorObj[type].setValue(codeStr)
} else {
editorObj[type] = monaco.editor.create(document.getElementById(id), {
value: codeStr,
theme: 'vs-dark',
language: mode[type],
automaticLayout: true
})
}
// ctrl + s 刷新
editorObj[type].onKeyDown(e => {
if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
this.runCode()
}
})
},
runCode() {
const jsCodeStr = editorObj.js.getValue()
try {
const ast = parse(jsCodeStr, { sourceType: 'module' })
const astBody = ast.program.body
if (astBody.length > 1) {
this.$confirm(
'js格式不能识别，仅支持修改export default的对象内容',
'提示',
{
type: 'warning'
}
)
return
}
if (astBody[0].type === 'ExportDefaultDeclaration') {
const postData = {
type: 'refreshFrame',
data: {
generateConf: this.generateConf,
html: editorObj.html.getValue(),
js: jsCodeStr.replace(exportDefault, ''),
css: editorObj.css.getValue(),
scripts: this.scripts,
links: this.links
}
}
this.$refs.previewPage.contentWindow.postMessage(
postData,
location.origin
)
} else {
this.$message.error('请使用export default')
}
} catch (err) {
this.$message.error(`js错误：${err}`)
console.error(err)
}
},
generateCode() {
const html = vueTemplate(editorObj.html.getValue())
const script = vueScript(editorObj.js.getValue())
const css = cssStyle(editorObj.css.getValue())
return beautifier.html(html + script + css, beautifierConf.html)
},
exportFile() {
this.$prompt('文件名:', '导出文件', {
inputValue: `${+new Date()}.vue`,
closeOnClickModal: false,
inputPlaceholder: '请输入文件名'
}).then(({ value }) => {
if (!value) value = `${+new Date()}.vue`
const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
saveAs(blob, value)
})
},
showResource() {
this.resourceVisible = true
},
setResource(arr) {
const scripts = []; const
links = []
if (Array.isArray(arr)) {
arr.forEach(item => {
if (item.endsWith('.css')) {
links.push(item)
} else {
scripts.push(item)
}
})
this.scripts = scripts
this.links = links
} else {
this.scripts = []
this.links = []
}
}
}
}
</script>
<style lang="scss" scoped>
@import '../styles/mixin';
.tab-editor {
position: absolute;
top: 33px;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
}
.left-editor {
position: relative;
height: 100%;
background: #1e1e1e;
overflow: hidden;
}
.setting{
position: absolute;
right: 15px;
top: 3px;
color: #a9f122;
font-size: 18px;
cursor: pointer;
z-index: 1;
}
.right-preview {
height: 100%;
.result-wrapper {
height: calc(100vh - 33px);
width: 100%;
overflow: auto;
padding: 12px;
box-sizing: border-box;
}
}
@include action-bar;
::v-deep .el-drawer__header {
display: none;
}
</style>

495
admin/src/components/FormGenerator/index/Home.vue Normal file
View File

@@ -0,0 +1,495 @@
<template>
<div class="container-FromGen">
<div class="left-board">
<div class="logo-wrapper">
<div class="logo">
<span>CRMEB</span>
<!-- <img :src="logo" alt="logo"> Form Generator
<a class="github" href="https://github.com/JakHuang/form-generator" target="_blank">
<img src="https://github.githubassets.com/pinned-octocat.svg" alt>
</a> -->
</div>
</div>
<el-scrollbar class="left-scrollbar">
<div class="components-list">
<div v-for="(item, listIndex) in leftComponents" :key="listIndex">
<div class="components-title">
<svg-icon icon-class="component" />
{{ item.title }}
</div>
<draggable
class="components-draggable"
:list="item.list"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
>
<div
v-for="(element, index) in item.list"
:key="index"
class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
<svg-icon :icon-class="element.__config__.tagIcon" />
{{ element.__config__.label }}
</div>
</div>
</draggable>
</div>
</div>
</el-scrollbar>
</div>
<div class="center-board">
<div class="action-bar">
<!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
<!-- 运行-->
<!-- </el-button>-->
<!-- <el-button icon="el-icon-view" type="text" @click="showJson">-->
<!-- 查看json-->
<!-- </el-button>-->
<!-- <el-button icon="el-icon-download" type="text" @click="download">-->
<!-- 导出vue文件-->
<!-- </el-button>-->
<!-- <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">-->
<!-- 复制代码-->
<!-- </el-button>-->
<!-- <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">-->
<!-- 清空-->
<!-- </el-button>-->
<el-form ref="selfForm" inline :model="selfForm">
<el-form-item
label="名称"
prop="name"
:rules="[{ required:true, message:'请填写名称', trigger:['blur','change'] }]"
>
<el-input v-model="selfForm.name" placeholder="名称" />
</el-form-item>
<el-form-item
label="描述"
prop="info"
:rules="[{ required:true, message:'请填写描述', trigger:['blur','change'] }]"
>
<el-input v-model="selfForm.info" placeholder="描述" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handlerSaveJSON('selfForm')">保存</el-button>
</el-form-item>
</el-form>
</div>
<el-scrollbar class="center-scrollbar">
<el-row class="center-board-row" :gutter="formConf.gutter">
<el-form
:size="formConf.size"
:label-position="formConf.labelPosition"
:disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'"
>
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
<draggable-item
v-for="(element, index) in drawingList"
:key="element.renderKey"
:drawing-list="drawingList"
:element="element"
:index="index"
:active-id="activeId"
:form-conf="formConf"
@activeItem="activeFormItem"
@copyItem="drawingItemCopy"
@deleteItem="drawingItemDelete"
/>
</draggable>
<div v-show="!drawingList.length" class="empty-info">
从左侧拖入或点选组件进行表单设计
</div>
</el-form>
</el-row>
</el-scrollbar>
</div>
<right-panel
:active-data="activeData"
:form-conf="formConf"
:show-field="!!drawingList.length"
@tag-change="tagChange"
/>
<form-drawer
:visible.sync="drawerVisible"
:form-data="formData"
size="100%"
:generate-conf="generateConf"
/>
<json-drawer
size="60%"
:visible.sync="jsonDrawerVisible"
:json-str="JSON.stringify(formData)"
@refresh="refreshJson"
/>
<code-type-dialog
:visible.sync="dialogVisible"
title="选择生成类型"
:show-file-name="showFileName"
@confirm="generate"
/>
<input id="copyNode" type="hidden">
</div>
</template>
<script>
import draggable from 'vuedraggable'
import { debounce } from 'throttle-debounce'
import { saveAs } from 'file-saver'
import ClipboardJS from 'clipboard'
import render from '@/components/FormGenerator/components/render/render'
import FormDrawer from './FormDrawer'
import JsonDrawer from './JsonDrawer'
import RightPanel from './RightPanel'
import {
inputComponents, selectComponents, layoutComponents, formConf
} from '@/components/FormGenerator/components/generator/config'
import {
exportDefault, beautifierConf, isNumberStr, titleCase
} from '../utils/index'
import {
makeUpHtml, vueTemplate, vueScript, cssStyle
} from '@/components/FormGenerator/components/generator/html'
import { makeUpJs } from '@/components/FormGenerator/components/generator/js'
import { makeUpCss } from '@/components/FormGenerator/components/generator/css'
import drawingDefalut from '@/components/FormGenerator/components/generator/drawingDefalut'
// import logo from '@/assets/logo.png'
import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem'
import {
getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf, getFormConfSelf
} from '../utils/db'
import loadBeautifier from '../utils/loadBeautifier'
let beautifier
const emptyActiveData = { style: {}, autosize: {}}
let oldActiveId
let tempActiveData
const drawingListInDB = getDrawingList()
const formConfInDB = getFormConf()
const idGlobal = getIdGlobal()
export default {
components: {
draggable,
render,
FormDrawer,
JsonDrawer,
RightPanel,
CodeTypeDialog,
DraggableItem
},
props: {
editData: {
type: Object,
default: {}
},
isCreate: {
type: Number,
default: 0 // 0=创建，1=编辑
}
},
data() {
return {
// logo,
idGlobal,
formConf,
inputComponents,
selectComponents,
layoutComponents,
labelWidth: 100,
drawingList: drawingDefalut,
drawingData: {},
activeId: drawingDefalut[0].formId,
drawerVisible: false,
formData: {},
dialogVisible: false,
jsonDrawerVisible: false,
generateConf: null,
showFileName: false,
activeData: drawingDefalut[0],
saveDrawingListDebounce: debounce(340, saveDrawingList),
saveIdGlobalDebounce: debounce(340, saveIdGlobal),
leftComponents: [
{
title: '输入型组件',
list: inputComponents
},
{
title: '选择型组件',
list: selectComponents
},
{
title: '布局型组件',
list: layoutComponents
}
],
selfForm: {
name: null,
info: null,
id: null
}
}
},
computed: {
},
watch: {
// eslint-disable-next-line func-names
'activeData.__config__.label': function(val, oldVal) {
if (
this.activeData.placeholder === undefined ||
!this.activeData.__config__.tag ||
oldActiveId !== this.activeId
) {
return
}
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
},
activeId: {
handler(val) {
oldActiveId = val
},
immediate: true
},
drawingList: {
handler(val) {
this.saveDrawingListDebounce(val)
if (val.length === 0) this.idGlobal = 100
},
deep: true
},
idGlobal: {
handler(val) {
this.saveIdGlobalDebounce(val)
},
immediate: true
}
},
mounted() {
if (this.editData.content) {
let { id, name, info, content } = this.editData
this.selfForm.name = name
this.selfForm.id = id
this.selfForm.info = info
content = JSON.parse(content)
this.drawingList = content.fields
const _content = JSON.parse(JSON.stringify(content))
delete _content.fields
this.formConf = _content
}
// if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
// this.drawingList = drawingListInDB
// } else {
// this.drawingList = drawingDefalut
// }
this.activeFormItem(this.drawingList[0])
// if (formConfInDB) {
// this.formConf = formConfInDB
// }
loadBeautifier(btf => {
beautifier = btf
})
const clipboard = new ClipboardJS('#copyNode', {
text: trigger => {
const codeStr = this.generateCode()
this.$notify({
title: '成功',
message: '代码已复制到剪切板，可粘贴。',
type: 'success'
})
return codeStr
}
})
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
},
methods: {
activeFormItem(element) {
this.activeData = element
this.activeId = element.__config__.formId
},
onEnd(obj) {
if (obj.from !== obj.to) {
this.activeData = tempActiveData
this.activeId = this.idGlobal
}
},
addComponent(item) {
const clone = this.cloneComponent(item)
this.drawingList.push(clone)
this.activeFormItem(clone)
console.log(this.drawingList)
},
cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin))
const config = clone.__config__
config.formId = ++this.idGlobal
config.span = this.formConf.span
config.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
if (config.layout === 'colFormItem') {
clone.__vModel__ = `field${this.idGlobal}`
clone.placeholder !== undefined && (clone.placeholder += config.label)
} else if (config.layout === 'rowFormItem') {
config.componentName = `row${this.idGlobal}`
config.gutter = this.formConf.gutter
}
tempActiveData = clone
return tempActiveData
},
AssembleFormData() {
this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf
}
},
generate(data) {
const func = this[`exec${titleCase(this.operationType)}`]
this.generateConf = data
func && func(data)
},
execRun(data) {
this.AssembleFormData()
this.drawerVisible = true
},
execDownload(data) {
const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
saveAs(blob, data.fileName)
},
execCopy(data) {
document.getElementById('copyNode').click()
},
empty() {
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
() => {
this.drawingList = []
this.idGlobal = 100
}
)
},
drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item))
clone = this.createIdAndKey(clone)
parent.push(clone)
this.activeFormItem(clone)
},
createIdAndKey(item) {
const config = item.__config__
config.formId = ++this.idGlobal
config.renderKey = +new Date()
if (config.layout === 'colFormItem') {
item.__vModel__ = `field${this.idGlobal}`
} else if (config.layout === 'rowFormItem') {
config.componentName = `row${this.idGlobal}`
}
if (Array.isArray(config.children)) {
config.children = config.children.map(childItem => this.createIdAndKey(childItem))
}
return item
},
drawingItemDelete(index, parent) {
parent.splice(index, 1)
this.$nextTick(() => {
const len = this.drawingList.length
if (len) {
this.activeFormItem(this.drawingList[len - 1])
}
})
},
generateCode() {
const { type } = this.generateConf
this.AssembleFormData()
const script = vueScript(makeUpJs(this.formData, type))
const html = vueTemplate(makeUpHtml(this.formData, type))
const css = cssStyle(makeUpCss(this.formData))
return beautifier.html(html + script + css, beautifierConf.html)
},
showJson() {
this.AssembleFormData()
this.jsonDrawerVisible = true
},
handlerSaveJSON(form) {
// this.AssembleFormData()
// loadBeautifier(btf => {
// beautifier = btf
// let jsonStr = JSON.stringify(this.formData)
// this.beautifierJson = beautifier.js(jsonStr, beautifierConf.js)
//
// })
this.$refs[form].validate(result => {
if (!result) return
const formConfig = getFormConfSelf()
if (formConfig.fields.length === 0) {
this.$message.error('表单配置数据不能为空')
return
}
this.selfForm.content = JSON.stringify(formConfig)
this.$emit('getFormConfigDataResult', this.selfForm)
})
},
download() {
this.dialogVisible = true
this.showFileName = true
this.operationType = 'download'
},
run() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'run'
},
copy() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'copy'
},
tagChange(newTag) {
newTag = this.cloneComponent(newTag)
const config = newTag.__config__
newTag.__vModel__ = this.activeData.__vModel__
config.formId = this.activeId
config.span = this.activeData.__config__.span
this.activeData.__config__.tag = config.tag
this.activeData.__config__.tagIcon = config.tagIcon
this.activeData.__config__.document = config.document
if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
config.defaultValue = this.activeData.__config__.defaultValue
}
Object.keys(newTag).forEach(key => {
if (this.activeData[key] !== undefined) {
newTag[key] = this.activeData[key]
}
})
this.activeData = newTag
this.updateDrawingList(newTag, this.drawingList)
},
updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.__config__.formId === this.activeId)
if (index > -1) {
list.splice(index, 1, newTag)
} else {
list.forEach(item => {
if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
})
}
},
refreshJson(data) {
this.drawingList = JSON.parse(JSON.stringify(data.fields))
delete data.fields
this.formConf = data
}
}
}
</script>
<style lang='scss'>
@import '../styles/home';
</style>

123
admin/src/components/FormGenerator/index/IconsDialog.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<div class="icon-dialog">
<el-dialog
v-bind="$attrs"
width="980px"
:modal-append-to-body="false"
v-on="$listeners"
@open="onOpen"
@close="onClose"
>
<div slot="title">
选择图标
<el-input
v-model="key"
size="mini"
:style="{width: '260px'}"
placeholder="请输入图标名称"
prefix-icon="el-icon-search"
clearable
/>
</div>
<ul class="icon-ul">
<li
v-for="icon in iconList"
:key="icon"
:class="active===icon?'active-item':''"
@click="onSelect(icon)"
>
<i :class="icon" />
<div>{{ icon }}</div>
</li>
</ul>
</el-dialog>
</div>
</template>
<script>
import iconList from '../utils/icon.json'
const originList = iconList.map(name => `el-icon-${name}`)
export default {
inheritAttrs: false,
props: ['current'],
data() {
return {
iconList: originList,
active: null,
key: ''
}
},
watch: {
key(val) {
if (val) {
this.iconList = originList.filter(name => name.indexOf(val) > -1)
} else {
this.iconList = originList
}
}
},
methods: {
onOpen() {
this.active = this.current
this.key = ''
},
onClose() {},
onSelect(icon) {
this.active = icon
this.$emit('select', icon)
this.$emit('update:visible', false)
}
}
}
</script>
<style lang="scss" scoped>
.icon-ul {
margin: 0;
padding: 0;
font-size: 0;
li {
list-style-type: none;
text-align: center;
font-size: 14px;
display: inline-block;
width: 16.66%;
box-sizing: border-box;
height: 108px;
padding: 15px 6px 6px 6px;
cursor: pointer;
overflow: hidden;
&:hover {
background: #f2f2f2;
}
&.active-item{
background: #e1f3fb;
color: #7a6df0
}
> i {
font-size: 30px;
line-height: 50px;
}
}
}
.icon-dialog {
::v-deep .el-dialog {
border-radius: 8px;
margin-bottom: 0;
margin-top: 4vh !important;
display: flex;
flex-direction: column;
max-height: 92vh;
overflow: hidden;
box-sizing: border-box;
.el-dialog__header {
padding-top: 14px;
}
.el-dialog__body {
margin: 0 20px 20px 20px;
padding: 0;
overflow: auto;
}
}
}
</style>

158
admin/src/components/FormGenerator/index/JsonDrawer.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<div>
<el-drawer v-bind="$attrs" append-to-body v-on="$listeners" @opened="onOpen" @close="onClose">
<div class="action-bar" :style="{'text-align': 'left'}">
<span class="bar-btn" @click="refresh">
<i class="el-icon-refresh" />
刷新
</span>
<span ref="copyBtn" class="bar-btn copy-json-btn">
<i class="el-icon-document-copy" />
复制JSON
</span>
<span class="bar-btn" @click="exportJsonFile">
<i class="el-icon-download" />
导出JSON文件
</span>
<span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
<i class="el-icon-circle-close" />
关闭
</span>
</div>
<div id="editorJson" class="json-editor" />
</el-drawer>
</div>
</template>
<script>
import { beautifierConf } from '../utils/index'
import ClipboardJS from 'clipboard'
import { saveAs } from 'file-saver'
import loadMonaco from '../utils/loadMonaco'
import loadBeautifier from '../utils/loadBeautifier'
// import * as monaco from "monaco-editor";
let beautifier
let monaco
export default {
components: {},
props: {
jsonStr: {
type: String,
required: true,
beautifier: null,
jsonEditor: null
}
},
data() {
return {}
},
computed: {},
watch: {},
created() {},
mounted() {
window.addEventListener('keydown', this.preventDefaultSave)
const clipboard = new ClipboardJS('.copy-json-btn', {
text: trigger => {
this.$notify({
title: '成功',
message: '代码已复制到剪切板，可粘贴。',
type: 'success'
})
return this.beautifierJson
}
})
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
},
beforeDestroy() {
window.removeEventListener('keydown', this.preventDefaultSave)
},
methods: {
preventDefaultSave(e) {
if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
}
},
onOpen() {
loadBeautifier(btf => {
beautifier = btf
this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js)
loadMonaco(val => {
monaco = val
this.setEditorValue('editorJson', this.beautifierJson)
})
})
// monaco.editor.create(document.getElementById("editorJson"), {
// value: [
// "function x() {",
// '\tconsole.log("Hello world!");',
// "}"].join(
// "\n"
// ),
// language: "javascript",
// theme: 'vs-dark',
// automaticLayout: true
// });
},
onClose() {},
setEditorValue(id, codeStr) {
if (this.jsonEditor) {
this.jsonEditor.setValue(codeStr)
} else {
this.jsonEditor = monaco.editor.create(document.getElementById(id), {
value: codeStr,
theme: 'vs-dark',
language: 'json',
automaticLayout: true
})
// ctrl + s 刷新
this.jsonEditor.onKeyDown(e => {
if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
this.refresh()
}
})
}
},
exportJsonFile() {
this.$prompt('文件名:', '导出文件', {
inputValue: `${+new Date()}.json`,
closeOnClickModal: false,
inputPlaceholder: '请输入文件名'
}).then(({ value }) => {
if (!value) value = `${+new Date()}.json`
const codeStr = this.jsonEditor.getValue()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
saveAs(blob, value)
})
},
refresh() {
try {
this.$emit('refresh', JSON.parse(this.jsonEditor.getValue()))
} catch (error) {
this.$notify({
title: '错误',
message: 'JSON格式错误，请检查',
type: 'error'
})
}
}
}
}
</script>
<style lang="scss" scoped>
@import '../styles/mixin';
::v-deep .el-drawer__header {
display: none;
}
@include action-bar;
.json-editor{
height: calc(100vh - 33px);
}
</style>

114
admin/src/components/FormGenerator/index/ResourceDialog.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div>
<el-dialog
v-bind="$attrs"
title="外部资源引用"
width="600px"
:close-on-click-modal="false"
v-on="$listeners"
@open="onOpen"
@close="onClose"
>
<el-input
v-for="(item, index) in resources"
:key="index"
v-model="resources[index]"
class="url-item"
placeholder="请输入 css 或 js 资源路径"
prefix-icon="el-icon-link"
clearable
>
<el-button
slot="append"
icon="el-icon-delete"
@click="deleteOne(index)"
/>
</el-input>
<el-button-group class="add-item">
<el-button
plain
@click="addOne('https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js')"
>
jQuery1.8.3
</el-button>
<el-button
plain
@click="addOne('https://unpkg.com/http-vue-loader')"
>
http-vue-loader
</el-button>
<el-button
icon="el-icon-circle-plus-outline"
plain
@click="addOne('')"
>
添加其他
</el-button>
</el-button-group>
<div slot="footer">
<el-button @click="close">
取消
</el-button>
<el-button
type="primary"
@click="handelConfirm"
>
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
components: {},
inheritAttrs: false,
props: ['originResource'],
data() {
return {
resources: null
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
onOpen() {
this.resources = this.originResource.length ? JSON.parse(JSON.stringify(this.originResource)) : ['']
},
onClose() {
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
const results = this.resources.filter(item => !!item) || []
this.$emit('save', results)
this.close()
if (results.length) {
this.resources = results
}
},
deleteOne(index) {
this.resources.splice(index, 1)
},
addOne(url) {
if (this.resources.indexOf(url) > -1) {
this.$message('资源已存在')
} else {
this.resources.push(url)
}
}
}
}
</script>
<style lang="scss" scoped>
.add-item{
margin-top: 8px;
}
.url-item{
margin-bottom: 12px;
}
</style>

1014
admin/src/components/FormGenerator/index/RightPanel.vue Normal file
View File

File diff suppressed because it is too large Load Diff

158
admin/src/components/FormGenerator/index/TreeNodeDialog.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<div>
<el-dialog
v-bind="$attrs"
:close-on-click-modal="false"
:modal-append-to-body="false"
v-on="$listeners"
@open="onOpen"
@close="onClose"
>
<el-row :gutter="0">
<el-form
ref="elForm"
:model="formData"
:rules="rules"
size="small"
label-width="100px"
>
<el-col :span="24">
<el-form-item
label="选项名"
prop="label"
>
<el-input
v-model="formData.label"
placeholder="请输入选项名"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item
label="选项值"
prop="value"
>
<el-input
v-model="formData.value"
placeholder="请输入选项值"
clearable
>
<el-select
slot="append"
v-model="dataType"
:style="{width: '100px'}"
>
<el-option
v-for="(item, index) in dataTypeOptions"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
/>
</el-select>
</el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer">
<el-button
type="primary"
@click="handelConfirm"
>
确定
</el-button>
<el-button @click="close">
取消
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { isNumberStr } from '../utils/index'
import { getTreeNodeId, saveTreeNodeId } from '../utils/db'
const id = getTreeNodeId()
export default {
components: {},
inheritAttrs: false,
props: [],
data() {
return {
id,
formData: {
label: undefined,
value: undefined
},
rules: {
label: [
{
required: true,
message: '请输入选项名',
trigger: 'blur'
}
],
value: [
{
required: true,
message: '请输入选项值',
trigger: 'blur'
}
]
},
dataType: 'string',
dataTypeOptions: [
{
label: '字符串',
value: 'string'
},
{
label: '数字',
value: 'number'
}
]
}
},
computed: {},
watch: {
// eslint-disable-next-line func-names
'formData.value': function(val) {
this.dataType = isNumberStr(val) ? 'number' : 'string'
},
id(val) {
saveTreeNodeId(val)
}
},
created() {},
mounted() {},
methods: {
onOpen() {
this.formData = {
label: undefined,
value: undefined
}
},
onClose() {},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs.elForm.validate(valid => {
if (!valid) return
if (this.dataType === 'number') {
this.formData.value = parseFloat(this.formData.value)
}
this.formData.id = this.id++
this.$emit('commit', this.formData)
this.close()
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

22
admin/src/components/FormGenerator/index/index.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div>
<router-view />
</div>
</template>
<script>
export default {
mounted() {
// 取消开始的loading动画
const preLoader = document.querySelector('#pre-loader')
preLoader.style.display = 'none'
// fix: firefox 下 拖拽 会新打卡一个选项卡
// https://github.com/JakHuang/form-generator/issues/15
document.body.ondrop = event => {
event.preventDefault()
event.stopPropagation()
}
}
}
</script>

59
admin/src/components/FormGenerator/preview/main.js Normal file
View File

@@ -0,0 +1,59 @@
import Vue from 'vue'
import { loadScriptQueue } from '@/utils/loadScript'
import Tinymce from '@/components/tinymce'
Vue.component('tinymce', Tinymce)
const $previewApp = document.getElementById('previewApp')
const childAttrs = {
file: '',
dialog: ' width="600px" class="dialog-width" v-if="visible" :visible.sync="visible" :modal-append-to-body="false" '
}
window.addEventListener('message', init, false)
function buildLinks(links) {
let strs = ''
links.forEach(url => {
strs += `<link href="${url}" rel="stylesheet">`
})
return strs
}
function init(event) {
if (event.data.type === 'refreshFrame') {
const code = event.data.data
const attrs = childAttrs[code.generateConf.type]
let links = ''
if (Array.isArray(code.links) && code.links.length > 0) {
links = buildLinks(code.links)
}
$previewApp.innerHTML = `${links}<style>${code.css}</style><div id="app"></div>`
if (Array.isArray(code.scripts) && code.scripts.length > 0) {
loadScriptQueue(code.scripts, () => {
newVue(attrs, code.js, code.html)
})
} else {
newVue(attrs, code.js, code.html)
}
}
}
function newVue(attrs, main, html) {
main = eval(`(${main})`)
main.template = `<div>${html}</div>`
new Vue({
components: {
child: main
},
data() {
return {
visible: true
}
},
template: `<div><child ${attrs}/></div>`
}).$mount('#app')
}

271
admin/src/components/FormGenerator/styles/home.scss Normal file
View File

@@ -0,0 +1,271 @@
$selectedColor: #f6f7ff;
$lighterBlue: #409EFF;
.container-FromGen {
position: relative;
width: 100%;
height: 100%;
}
.components-list {
padding: 8px;
box-sizing: border-box;
height: 100%;
.components-item {
display: inline-block;
width: 48%;
margin: 1%;
transition: transform 0ms !important;
}
}
.components-draggable{
padding-bottom: 20px;
}
.components-title{
font-size: 14px;
color: #222;
margin: 6px 2px;
.svg-icon{
color: #666;
font-size: 18px;
}
}
.components-body {
padding: 8px 10px;
background: $selectedColor;
font-size: 12px;
cursor: move;
border: 1px dashed $selectedColor;
border-radius: 3px;
.svg-icon{
color: #777;
font-size: 15px;
}
&:hover {
border: 1px dashed #787be8;
color: #787be8;
.svg-icon {
color: #787be8;
}
}
}
.left-board {
width: 260px;
position: absolute;
left: 0;
top: 0;
height: 100vh;
}
.left-scrollbar{
height: calc(100vh - 42px);
overflow: hidden;
}
.center-scrollbar {
height: calc(100vh - 42px);
overflow: hidden;
border-left: 1px solid #f1e8e8;
border-right: 1px solid #f1e8e8;
box-sizing: border-box;
}
.center-board {
height: 100vh;
width: auto;
margin: 0 350px 0 260px;
box-sizing: border-box;
}
.empty-info{
position: absolute;
top: 46%;
left: 0;
right: 0;
text-align: center;
font-size: 18px;
color: #ccb1ea;
letter-spacing: 4px;
}
.action-bar{
position: relative;
height: 42px;
text-align: right;
padding: 0 15px;
box-sizing: border-box;;
border: 1px solid #f1e8e8;
border-top: none;
border-left: none;
.delete-btn{
color: #F56C6C;
}
}
.logo-wrapper{
position: relative;
height: 42px;
background: #fff;
border-bottom: 1px solid #f1e8e8;
box-sizing: border-box;
}
.logo{
position: absolute;
left: 12px;
top: 6px;
line-height: 30px;
color: #00afff;
font-weight: 600;
font-size: 17px;
white-space: nowrap;
> img{
width: 30px;
height: 30px;
vertical-align: top;
}
.github{
display: inline-block;
vertical-align: sub;
margin-left: 15px;
> img{
height: 22px;
}
}
}
.center-board-row {
padding: 12px 12px 15px 12px;
box-sizing: border-box;
& > .el-form {
// 69 = 12+15+42
height: calc(100vh - 69px);
}
}
.drawing-board {
height: 100%;
position: relative;
.components-body {
padding: 0;
margin: 0;
font-size: 0;
}
.sortable-ghost {
position: relative;
display: block;
overflow: hidden;
&::before {
content: " ";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: rgb(89, 89, 223);
z-index: 2;
}
}
.components-item.sortable-ghost {
width: 100%;
height: 60px;
background-color: $selectedColor;
}
.active-from-item {
& > .el-form-item{
background: $selectedColor;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
display: initial;
}
& > .component-name{
color: $lighterBlue;
}
}
.el-form-item{
margin-bottom: 15px;
}
}
.drawing-item{
position: relative;
cursor: move;
&.unfocus-bordered:not(.active-from-item) > div:first-child {
border: 1px dashed #ccc;
}
.el-form-item{
padding: 12px 10px;
}
}
.drawing-row-item{
position: relative;
cursor: move;
box-sizing: border-box;
border: 1px dashed #ccc;
border-radius: 3px;
padding: 0 2px;
margin-bottom: 15px;
.drawing-row-item {
margin-bottom: 2px;
}
.el-col{
margin-top: 22px;
}
.el-form-item{
margin-bottom: 0;
}
.drag-wrapper{
min-height: 80px;
}
&.active-from-item{
border: 1px dashed $lighterBlue;
}
.component-name{
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: #bbb;
display: inline-block;
padding: 0 6px;
}
}
.drawing-item, .drawing-row-item{
&:hover {
& > .el-form-item{
background: $selectedColor;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
display: initial;
}
}
& > .drawing-item-copy, & > .drawing-item-delete{
display: none;
position: absolute;
top: -10px;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 50%;
font-size: 12px;
border: 1px solid;
cursor: pointer;
z-index: 1;
}
& > .drawing-item-copy{
right: 56px;
border-color: $lighterBlue;
color: $lighterBlue;
background: #fff;
&:hover{
background: $lighterBlue;
color: #fff;
}
}
& > .drawing-item-delete{
right: 24px;
border-color: #F56C6C;
color: #F56C6C;
background: #fff;
&:hover{
background: #F56C6C;
color: #fff;
}
}
}

137
admin/src/components/FormGenerator/styles/index.scss Normal file
View File

@@ -0,0 +1,137 @@
$editorTabsborderColor: #121315;
body, html{
margin: 0;
padding: 0;
background: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
input, textarea{
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
.editor-tabs{
background: $editorTabsborderColor;
.el-tabs__header{
margin: 0;
border-bottom-color: $editorTabsborderColor;
.el-tabs__nav{
border-color: $editorTabsborderColor;
}
}
.el-tabs__item{
height: 32px;
line-height: 32px;
color: #888a8e;
border-left: 1px solid $editorTabsborderColor!important;
background: #363636;
margin-right: 5px;
user-select: none;
}
.el-tabs__item.is-active{
background: #1e1e1e;
border-bottom-color: #1e1e1e!important;
color: #fff;
}
.el-icon-edit{
color: #f1fa8c;
}
.el-icon-document{
color: #a95812;
}
}
// home
.right-scrollbar {
.el-scrollbar__view {
padding: 12px 18px 15px 15px;
}
}
.el-scrollbar__wrap {
box-sizing: border-box;
overflow-x: hidden !important;
margin-bottom: 0 !important;
}
.center-tabs{
.el-tabs__header{
margin-bottom: 0!important;
}
.el-tabs__item{
width: 50%;
text-align: center;
}
.el-tabs__nav{
width: 100%;
}
}
.reg-item{
padding: 12px 6px;
background: #f8f8f8;
position: relative;
border-radius: 4px;
.close-btn{
position: absolute;
right: -6px;
top: -6px;
display: block;
width: 16px;
height: 16px;
line-height: 16px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
color: #fff;
text-align: center;
z-index: 1;
cursor: pointer;
font-size: 12px;
&:hover{
background: rgba(210, 23, 23, 0.5)
}
}
& + .reg-item{
margin-top: 18px;
}
}
.action-bar{
& .el-button+.el-button {
margin-left: 15px;
}
& i {
font-size: 20px;
vertical-align: middle;
position: relative;
top: -1px;
}
}
.custom-tree-node{
width: 100%;
font-size: 14px;
.node-operation{
float: right;
}
i[class*="el-icon"] + i[class*="el-icon"]{
margin-left: 6px;
}
.el-icon-plus{
color: #409EFF;
}
.el-icon-delete{
color: #157a0c;
}
}
.el-scrollbar__view{
overflow-x: hidden;
}
.el-rate{
display: inline-block;
vertical-align: text-top;
}
.el-upload__tip{
line-height: 1.2;
}

33
admin/src/components/FormGenerator/styles/mixin.scss Normal file
View File

@@ -0,0 +1,33 @@
@mixin action-bar {
.action-bar {
height: 33px;
background: #f2fafb;
padding: 0 15px;
box-sizing: border-box;
.bar-btn {
display: inline-block;
padding: 0 6px;
line-height: 32px;
color: #8285f5;
cursor: pointer;
font-size: 14px;
user-select: none;
& i {
font-size: 20px;
}
&:hover {
color: #4348d4;
}
}
.bar-btn + .bar-btn {
margin-left: 8px;
}
.delete-btn {
color: #f56c6c;
&:hover {
color: #ea0b30;
}
}
}
}

67
admin/src/components/FormGenerator/utils/db.js Normal file
View File

@@ -0,0 +1,67 @@
const DRAWING_ITEMS = 'drawingItems'
const DRAWING_ITEMS_VERSION = '1.1'
const DRAWING_ITEMS_VERSION_KEY = 'DRAWING_ITEMS_VERSION'
const DRAWING_ID = 'idGlobal'
const TREE_NODE_ID = 'treeNodeId'
const FORM_CONF = 'formConf'
export function getDrawingList() {
// 加入缓存版本的概念，保证缓存数据与程序匹配
const version = localStorage.getItem(DRAWING_ITEMS_VERSION_KEY)
if (version !== DRAWING_ITEMS_VERSION) {
localStorage.setItem(DRAWING_ITEMS_VERSION_KEY, DRAWING_ITEMS_VERSION)
saveDrawingList([])
return null
}
const str = localStorage.getItem(DRAWING_ITEMS)
if (str) return JSON.parse(str)
return null
}
export function saveDrawingList(list) {
localStorage.setItem(DRAWING_ITEMS, JSON.stringify(list))
}
export function getIdGlobal() {
const str = localStorage.getItem(DRAWING_ID)
if (str) return parseInt(str, 10)
return 100
}
export function saveIdGlobal(id) {
localStorage.setItem(DRAWING_ID, `${id}`)
}
export function getTreeNodeId() {
const str = localStorage.getItem(TREE_NODE_ID)
if (str) return parseInt(str, 10)
return 100
}
export function saveTreeNodeId(id) {
localStorage.setItem(TREE_NODE_ID, `${id}`)
}
export function getFormConf() {
const str = localStorage.getItem(FORM_CONF)
if (str) return JSON.parse(str)
return null
}
export function saveFormConf(obj) {
localStorage.setItem(FORM_CONF, JSON.stringify(obj))
}
/**
* 根据自己的需求获取配置的表单信息
*/
export function getFormConfSelf() {
let formConfig = localStorage.getItem(FORM_CONF)
formConfig = JSON.parse(formConfig)
let formItemConfig = localStorage.getItem(DRAWING_ITEMS)
if (!formConfig && !formItemConfig) return 'Error'
formItemConfig = JSON.parse(formItemConfig)
formConfig.fields = formItemConfig
return formConfig
}

1
admin/src/components/FormGenerator/utils/icon.json Normal file
View File

@@ -0,0 +1 @@
["platform-eleme","eleme","delete-solid","delete","s-tools","setting","user-solid","user","phone","phone-outline","more","more-outline","star-on","star-off","s-goods","goods","warning","warning-outline","question","info","remove","circle-plus","success","error","zoom-in","zoom-out","remove-outline","circle-plus-outline","circle-check","circle-close","s-help","help","minus","plus","check","close","picture","picture-outline","picture-outline-round","upload","upload2","download","camera-solid","camera","video-camera-solid","video-camera","message-solid","bell","s-cooperation","s-order","s-platform","s-fold","s-unfold","s-operation","s-promotion","s-home","s-release","s-ticket","s-management","s-open","s-shop","s-marketing","s-flag","s-comment","s-finance","s-claim","s-custom","s-opportunity","s-data","s-check","s-grid","menu","share","d-caret","caret-left","caret-right","caret-bottom","caret-top","bottom-left","bottom-right","back","right","bottom","top","top-left","top-right","arrow-left","arrow-right","arrow-down","arrow-up","d-arrow-left","d-arrow-right","video-pause","video-play","refresh","refresh-right","refresh-left","finished","sort","sort-up","sort-down","rank","loading","view","c-scale-to-original","date","edit","edit-outline","folder","folder-opened","folder-add","folder-remove","folder-delete","folder-checked","tickets","document-remove","document-delete","document-copy","document-checked","document","document-add","printer","paperclip","takeaway-box","search","monitor","attract","mobile","scissors","umbrella","headset","brush","mouse","coordinate","magic-stick","reading","data-line","data-board","pie-chart","data-analysis","collection-tag","film","suitcase","suitcase-1","receiving","collection","files","notebook-1","notebook-2","toilet-paper","office-building","school","table-lamp","house","no-smoking","smoking","shopping-cart-full","shopping-cart-1","shopping-cart-2","shopping-bag-1","shopping-bag-2","sold-out","sell","present","box","bank-card","money","coin","wallet","discount","price-tag","news","guide","male","female","thumb","cpu","link","connection","open","turn-off","set-up","chat-round","chat-line-round","chat-square","chat-dot-round","chat-dot-square","chat-line-square","message","postcard","position","turn-off-microphone","microphone","close-notification","bangzhu","time","odometer","crop","aim","switch-button","full-screen","copy-document","mic","stopwatch","medal-1","medal","trophy","trophy-1","first-aid-kit","discover","place","location","location-outline","location-information","add-location","delete-location","map-location","alarm-clock","timer","watch-1","watch","lock","unlock","key","service","mobile-phone","bicycle","truck","ship","basketball","football","soccer","baseball","wind-power","light-rain","lightning","heavy-rain","sunrise","sunrise-1","sunset","sunny","cloudy","partly-cloudy","cloudy-and-sunny","moon","moon-night","dish","dish-1","food","chicken","fork-spoon","knife-fork","burger","tableware","sugar","dessert","ice-cream","hot-water","water-cup","coffee-cup","cold-drink","goblet","goblet-full","goblet-square","goblet-square-full","refrigerator","grape","watermelon","cherry","apple","pear","orange","coffee","ice-tea","ice-drink","milk-tea","potato-strips","lollipop","ice-cream-square","ice-cream-round"]

102
admin/src/components/FormGenerator/utils/index.js Normal file
View File

@@ -0,0 +1,102 @@
/**
* num 小于0，左缩进num*2个空格； 大于0，右缩进num*2个空格。
* @param {string} str 代码
* @param {number} num 缩进次数
* @param {number} len 【可选】缩进单位，空格数
*/
export function indent(str, num, len = 2) {
if (num === 0) return str
const isLeft = num < 0; const result = []; let reg; let
spaces = ''
if (isLeft) {
num *= -1
reg = new RegExp(`(^\\s{0,${num * len}})`, 'g')
} else {
for (let i = 0; i < num * len; i++) spaces += ' '
}
str.split('\n').forEach(line => {
line = isLeft ? line.replace(reg, '') : spaces + line
result.push(line)
})
return result.join('\n')
}
// 首字母大小
export function titleCase(str) {
return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
}
// 下划转驼峰
export function camelCase(str) {
return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase())
}
export function isNumberStr(str) {
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
}
export const exportDefault = 'export default '
export const beautifierConf = {
html: {
indent_size: '2',
indent_char: ' ',
max_preserve_newlines: '-1',
preserve_newlines: false,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: 'separate',
brace_style: 'end-expand',
space_before_conditional: true,
unescape_strings: false,
jslint_happy: false,
end_with_newline: true,
wrap_line_length: '110',
indent_inner_html: true,
comma_first: false,
e4x: true,
indent_empty_lines: true
},
js: {
indent_size: '2',
indent_char: ' ',
max_preserve_newlines: '-1',
preserve_newlines: false,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: 'normal',
brace_style: 'end-expand',
space_before_conditional: true,
unescape_strings: false,
jslint_happy: true,
end_with_newline: true,
wrap_line_length: '110',
indent_inner_html: true,
comma_first: false,
e4x: true,
indent_empty_lines: true
}
}
function stringify(obj) {
return JSON.stringify(obj, (key, val) => {
if (typeof val === 'function') {
return `${val}`
}
return val
})
}
function parse(str) {
JSON.parse(str, (k, v) => {
if (v.indexOf && v.indexOf('function') > -1) {
return eval(`(${v})`)
}
return v
})
}
export function jsonClone(obj) {
return parse(stringify(obj))
}

26
admin/src/components/FormGenerator/utils/loadBeautifier.js Normal file
View File

@@ -0,0 +1,26 @@
import loadScript from './loadScript'
import ELEMENT from 'element-ui'
let beautifierObj
export default function loadBeautifier(cb) {
if (beautifierObj) {
cb(beautifierObj)
return
}
const loading = ELEMENT.Loading.service({
fullscreen: true,
lock: true,
text: '格式化资源加载中...',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.5)'
})
loadScript('https://cdn.bootcss.com/js-beautify/1.10.2/beautifier.min.js', () => {
loading.close()
// eslint-disable-next-line no-undef
beautifierObj = beautifier
cb(beautifierObj)
})
}

42
admin/src/components/FormGenerator/utils/loadMonaco.js Normal file
View File

@@ -0,0 +1,42 @@
import { loadScriptQueue } from './loadScript'
import ELEMENT from 'element-ui'
// monaco-editor单例
let monacoEidtor
/**
* 动态加载monaco-editor cdn资源
* @param {Function} cb 回调，必填
*/
export default function loadMonaco(cb) {
if (monacoEidtor) {
cb(monacoEidtor)
return
}
const vs = 'https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs'
// 使用element ui实现加载提示
const loading = ELEMENT.Loading.service({
fullscreen: true,
lock: true,
text: '编辑器资源初始化中...',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.5)'
})
!window.require && (window.require = {})
!window.require.paths && (window.require.paths = {})
window.require.paths.vs = vs
loadScriptQueue([
`${vs}/loader.js`,
`${vs}/editor/editor.main.nls.js`,
`${vs}/editor/editor.main.js`
], () => {
loading.close()
// eslint-disable-next-line no-undef
monacoEidtor = monaco
cb(monacoEidtor)
})
}

60
admin/src/components/FormGenerator/utils/loadScript.js Normal file
View File

@@ -0,0 +1,60 @@
const callbacks = {}
/**
* 加载一个远程脚本
* @param {String} src 一个远程脚本
* @param {Function} callback 回调
*/
function loadScript(src, callback) {
const existingScript = document.getElementById(src)
const cb = callback || (() => {})
if (!existingScript) {
callbacks[src] = []
const $script = document.createElement('script')
$script.src = src
$script.id = src
$script.async = 1
document.body.appendChild($script)
const onEnd = 'onload' in $script ? stdOnEnd.bind($script) : ieOnEnd.bind($script)
onEnd($script)
}
callbacks[src].push(cb)
function stdOnEnd(script) {
script.onload = () => {
this.onerror = this.onload = null
callbacks[src].forEach(item => {
item(null, script)
})
delete callbacks[src]
}
script.onerror = () => {
this.onerror = this.onload = null
cb(new Error(`Failed to load ${src}`), script)
}
}
function ieOnEnd(script) {
script.onreadystatechange = () => {
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
this.onreadystatechange = null
callbacks[src].forEach(item => {
item(null, script)
})
delete callbacks[src]
}
}
}
/**
* 顺序加载一组远程脚本
* @param {Array} list 一组远程脚本
* @param {Function} cb 回调
*/
export function loadScriptQueue(list, cb) {
const first = list.shift()
list.length ? loadScript(first, () => loadScriptQueue(list, cb)) : loadScript(first, cb)
}
export default loadScript

26
admin/src/components/FormGenerator/utils/loadTinymce.js Normal file
View File

@@ -0,0 +1,26 @@
import loadScript from './loadScript'
import ELEMENT from 'element-ui'
let tinymceObj
export default function loadTinymce(cb) {
if (tinymceObj) {
cb(tinymceObj)
return
}
const loading = ELEMENT.Loading.service({
fullscreen: true,
lock: true,
text: '富文本资源加载中...',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.5)'
})
loadScript('https://cdn.bootcdn.net/ajax/libs/tinymce/5.2.2/tinymce.min.js', () => {
loading.close()
// eslint-disable-next-line no-undef
tinymceObj = tinymce
cb(tinymceObj)
})
}

44
admin/src/components/Hamburger/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div style="padding: 0 15px;" @click="toggleClick">
<svg
:class="{'is-active':isActive}"
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div>
</template>
<script>
export default {
name: 'Hamburger',
props: {
isActive: {
type: Boolean,
default: false
}
},
methods: {
toggleClick() {
this.$emit('toggleClick')
}
}
}
</script>
<style scoped>
.hamburger {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
.hamburger.is-active {
transform: rotate(180deg);
}
</style>

183
admin/src/components/HeaderSearch/index.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<div :class="{'show':show}" class="header-search">
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
<el-select
ref="headerSearchSelect"
v-model="search"
:remote-method="querySearch"
filterable
default-first-option
remote
placeholder="Search"
class="header-search-select"
@change="change"
>
<el-option v-for="item in options" :key="item.url" :value="item" :label="item.name.join(' > ')" />
</el-select>
</div>
</template>
<script>
// fuse is a lightweight fuzzy-search module
// make search results more in line with expectations
import Fuse from 'fuse.js'
import path from 'path'
import { mapGetters } from 'vuex'
export default {
name: 'HeaderSearch',
data() {
return {
search: '',
options: [],
searchPool: [],
show: false,
fuse: undefined
}
},
computed: {
...mapGetters([
'permission_routes'
]),
// routes() {
// return this.$store.getters.permission_routes
// }
},
watch: {
routes(n) {
this.searchPool = this.generateRoutes(this.permission_routes)
},
searchPool(list) {
this.initFuse(list)
},
show(value) {
if (value) {
document.body.addEventListener('click', this.close)
} else {
document.body.removeEventListener('click', this.close)
}
}
},
mounted() {
this.searchPool = this.generateRoutes(this.permission_routes)
},
methods: {
click() {
this.show = !this.show
if (this.show) {
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
}
},
close() {
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
this.options = []
this.show = false
},
change(val) {
this.$router.push(val.path)
this.search = ''
this.options = []
this.$nextTick(() => {
this.show = false
})
},
initFuse(list) {
this.fuse = new Fuse(list, {
shouldSort: true,
threshold: 0.4,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [{
name: 'name',
weight: 0.7
}, {
name: 'url',
weight: 0.3
}]
})
},
// Filter out the routes that can be displayed in the sidebar
// And generate the internationalized title
generateRoutes(routes, basePath = '/', prefixTitle = []) {
let res = []
for (const router of routes) {
// skip hidden router
if (router.hidden) { continue }
const data = {
path: path.resolve(basePath, router.url),
name: [...prefixTitle],
children: router.child || []
}
if (router.name) {
data.name = [...data.name, router.name]
if (router.redirect !== 'noRedirect') {
// only push the routes with title
// special case: need to exclude parent router without redirect
res.push(data)
}
}
// recursive child routes
if (router.child) {
const tempRoutes = this.generateRoutes(router.child, data.url, data.name)
if (tempRoutes.length >= 1) {
res = [...res, ...tempRoutes]
}
}
}
return res
},
querySearch(query) {
if (query !== '') {
this.options = this.fuse.search(query)
} else {
this.options = []
}
}
}
}
</script>
<style lang="scss" scoped>
.header-search {
font-size: 0 !important;
.search-icon {
cursor: pointer;
font-size: 18px;
vertical-align: middle;
}
.header-search-select {
font-size: 18px;
transition: width 0.2s;
width: 0;
overflow: hidden;
background: transparent;
border-radius: 0;
display: inline-block;
vertical-align: middle;
/deep/ .el-input__inner {
border-radius: 0;
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
border-bottom: 1px solid #d9d9d9;
vertical-align: middle;
}
}
&.show {
.header-search-select {
width: 210px;
margin-left: 10px;
}
}
}
</style>

1778
admin/src/components/ImageCropper/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

19
admin/src/components/ImageCropper/utils/data2blob.js Normal file
View File

@@ -0,0 +1,19 @@
/**
* database64文件格式转换为2进制
*
* @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
* @param {[String]} mime [description]
* @return {[blob]} [description]
*/
export default function(data, mime) {
data = data.split(',')[1]
data = window.atob(data)
var ia = new Uint8Array(data.length)
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i)
}
// canvas.toDataURL 返回的默认格式就是 image/png
return new Blob([ia], {
type: mime
})
}

39
admin/src/components/ImageCropper/utils/effectRipple.js Normal file
View File

@@ -0,0 +1,39 @@
/**
* 点击波纹效果
*
* @param {[event]} e [description]
* @param {[Object]} arg_opts [description]
* @return {[bollean]} [description]
*/
export default function(e, arg_opts) {
var opts = Object.assign({
ele: e.target, // 波纹作用元素
type: 'hit', // hit点击位置扩散center中心点扩展
bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
}, arg_opts)
var target = opts.ele
if (target) {
var rect = target.getBoundingClientRect()
var ripple = target.querySelector('.e-ripple')
if (!ripple) {
ripple = document.createElement('span')
ripple.className = 'e-ripple'
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
target.appendChild(ripple)
} else {
ripple.className = 'e-ripple'
}
switch (opts.type) {
case 'center':
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
break
default:
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
}
ripple.style.backgroundColor = opts.bgc
ripple.className = 'e-ripple z-active'
return false
}
}

Some files were not shown because too many files have changed in this diff Show More