提交 87de109b authored 作者: lihuihui's avatar lihuihui

update

上级 9ef6a5d1
{ {
"name": "project-road-admin", "name": "center-certificate",
"version": "0.0.0", "version": "0.0.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"axios": "^0.23.0", "axios": "^0.23.0",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"html2canvas": "^1.4.1",
"qs": "^6.10.3", "qs": "^6.10.3",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"vue": "^2.6.14", "vue": "^2.6.14",
...@@ -1856,6 +1857,14 @@ ...@@ -1856,6 +1857,14 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true "dev": true
}, },
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/binary-extensions": { "node_modules/binary-extensions": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
...@@ -2147,6 +2156,14 @@ ...@@ -2147,6 +2156,14 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/cssesc": { "node_modules/cssesc": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
...@@ -3729,6 +3746,18 @@ ...@@ -3729,6 +3746,18 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/http-errors": { "node_modules/http-errors": {
"version": "1.7.3", "version": "1.7.3",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
...@@ -5491,6 +5520,14 @@ ...@@ -5491,6 +5520,14 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/text-table": { "node_modules/text-table": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
...@@ -5739,6 +5776,14 @@ ...@@ -5739,6 +5776,14 @@
"node": ">= 0.12.0" "node": ">= 0.12.0"
} }
}, },
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
},
"node_modules/v8-compile-cache": { "node_modules/v8-compile-cache": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
...@@ -7565,6 +7610,11 @@ ...@@ -7565,6 +7610,11 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true "dev": true
}, },
"base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
},
"binary-extensions": { "binary-extensions": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
...@@ -7781,6 +7831,14 @@ ...@@ -7781,6 +7831,14 @@
"which": "^2.0.1" "which": "^2.0.1"
} }
}, },
"css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"requires": {
"utrie": "^1.0.2"
}
},
"cssesc": { "cssesc": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
...@@ -8929,6 +8987,15 @@ ...@@ -8929,6 +8987,15 @@
"integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=", "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
"dev": true "dev": true
}, },
"html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"requires": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
}
},
"http-errors": { "http-errors": {
"version": "1.7.3", "version": "1.7.3",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
...@@ -10281,6 +10348,14 @@ ...@@ -10281,6 +10348,14 @@
} }
} }
}, },
"text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"requires": {
"utrie": "^1.0.2"
}
},
"text-table": { "text-table": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
...@@ -10488,6 +10563,14 @@ ...@@ -10488,6 +10563,14 @@
"unescape": "^1.0.1" "unescape": "^1.0.1"
} }
}, },
"utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"requires": {
"base64-arraybuffer": "^1.0.2"
}
},
"v8-compile-cache": { "v8-compile-cache": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"axios": "^0.23.0", "axios": "^0.23.0",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"html2canvas": "^1.4.1",
"qs": "^6.10.3", "qs": "^6.10.3",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"vue": "^2.6.14", "vue": "^2.6.14",
......
...@@ -88,3 +88,7 @@ textarea:focus { ...@@ -88,3 +88,7 @@ textarea:focus {
:root { :root {
--main-color: rgba(184, 1, 64, 1); --main-color: rgba(184, 1, 64, 1);
} }
.tox-notifications-container{
display: none !important;
}
\ No newline at end of file
差异被折叠。
<template>
<div>
<div class="edit-style-box">
<div class="close-btn" v-if="data.type != -1" @click="handleDelete">
<i class="el-icon-close"></i>
</div>
<div class="title">{{ data.title }}</div>
<div class="f-type">
<template v-if="data.type == 3 || data.type == 0">
<div class="upload-img">
<div class="btn">{{ data.url ? '替换图片' : '上传图片' }}</div>
<UploadImage class="upload" style="width: 50px" v-model="data.url" @input="uploadImg"></UploadImage>
</div>
</template>
<template v-if="data.type == 1">
<div>
<v-editor placeholder="请输入内容" v-model="data.html"></v-editor>
</div>
</template>
</div>
<div class="tool-select">
<div v-for="(item, index) in data.tool" :key="index">
<div class="tool-item" v-if="item.name === 'fontSize'">
<div class="tit">字体大小</div>
<el-select @change="changeStyle" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'fontColor'">
<div class="tit">字体颜色</div>
<el-color-picker @change="changeStyle" v-model="item.value"></el-color-picker>
</div>
<div class="tool-item" v-if="item.name === 'fontLineH'">
<div class="tit">字间距</div>
<el-select v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'fontFamily'">
<div class="tit">字体</div>
<el-select @change="changeStyle" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'borderRadius'">
<div class="tit">圆角</div>
<el-select v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'bgColor'">
<div class="tit">背景颜色</div>
<el-color-picker @change="changeStyle('proportion')" v-model="item.value"></el-color-picker>
</div>
<div class="tool-item" v-if="item.name === 'fontPosition'">
<div class="tit">位置</div>
<el-select v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'width'">
<div class="tit"></div>
<el-input @input="changeStyle" v-model="item.value" placeholder="请输入数字"></el-input>
</div>
<div class="tool-item" v-if="item.name === 'height'">
<div class="tit"></div>
<el-input @input="changeStyle" v-model="item.value" placeholder="请输入数字"></el-input>
</div>
<div class="tool-item" v-if="item.name === 'zIndex'">
<div class="tit">层级</div>
<el-input @input="changeStyle" v-model="item.value" placeholder="请输入数字"></el-input>
</div>
<div class="tool-item" v-if="item.name === 'proportionWidth'">
<div class="tit">宽高比</div>
<el-select @change="changeStyle('proportion')" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'proportionHeight'">
<div class="tit" style="opacity: 0">宽高比</div>
<el-select @change="changeStyle('proportion')" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VEditor from '@/components/tinymce/Index.vue'
import UploadImage from '@/components/upload/UploadImage.vue'
export default {
components: {
UploadImage,
VEditor
},
props: {
data: { type: Object }
},
data() {
return {
// 设置样式
toolList: [],
// 最后返回的数据
returnData: {}
}
},
mounted() {
this.setToolOption()
},
methods: {
// 上传img
uploadImg() {
this.setStyleData()
this.$emit('imgUpload', this.data)
},
// 通过父组件传来的tool添加option
setToolOption() {
if (this.data.tool) {
this.data.tool = this.data.tool.map(item => {
if (item.option) {
const [min, max, count = 1, symbol = ''] = item.option
item.option = this.setOption(min, max, count, symbol)
}
return item
})
console.log(this.data.tool, '123')
}
},
// 重新组合对象变成样式
setStyleData() {
const styleData = [
{ name: 'fontSize', styleName: 'font-size', symbol: 'px' },
{ name: 'fontColor', styleName: 'color' },
{ name: 'fontLineH', styleName: 'line-height', symbol: 'px' },
{ name: 'fontFamily', styleName: 'font-family' },
{ name: 'bgColor', styleName: 'background' },
{ name: 'width', styleName: 'width', symbol: 'px' },
{ name: 'height', styleName: 'height', symbol: 'px' },
{ name: 'zIndex', styleName: 'z-index' }
]
this.data.style = this.data.tool
.reduce((a, b) => {
if (b.name === 'proportionWidth') {
a.push('width: 100%;')
} else if (b.name === 'proportionHeight') {
const certBox = document.getElementById('edit-dom-1')
const [propWidth, propHeight] = this.data.tool
a.push(`height: ${(propHeight.value / propWidth.value) * certBox.offsetWidth}px;`)
} else {
if (b.value !== '') {
const findItem = styleData.find(item => item.name === b.name)
a.push(`${findItem.styleName}: ${b.value}${findItem.symbol ? findItem.symbol : ''};`)
}
}
return a
}, [])
.join()
.replace(/,/g, '')
},
// 设置option值
setOption(min, max, count, symbol, auto) {
const options = auto ? [{ value: 'auto', label: 'auto' }] : []
for (let i = min; i <= max; i += count) {
options.push({ value: `${i}${symbol}`, label: `${i}${symbol}` })
}
return options
},
// 改变值
changeStyle(name) {
this.setStyleData()
this.$emit('data', this.data)
// if (name === 'proportion') {
// console.log(this.returnData)
// }
},
handleDelete() {
this.$emit('delete', this.data)
}
}
}
</script>
<style lang="scss" scoped>
.edit-style-box {
width: 320px;
padding: 22px 23px 0;
background: rgba(248, 248, 248, 0.39);
border-radius: 16px;
margin-bottom: 60px;
position: relative;
.close-btn {
position: absolute;
top: 15px;
right: 15px;
}
&::before {
content: '';
width: 100%;
position: absolute;
bottom: -30px;
left: 0;
border-bottom: 1px solid #e3e3e3;
}
.title {
text-align: center;
font-size: 18px;
font-weight: bold;
line-height: 11px;
color: #333333;
}
.f-type {
padding-top: 21px;
.tit {
font-size: 14px;
line-height: 100%;
color: #333333;
}
.btn {
text-align: center;
line-height: 34px;
background: rgba(184, 1, 64, 1);
border-radius: 6px;
font-size: 14px;
color: #fff;
margin-top: 8px;
border: 1px solid rgba(184, 1, 64, 1);
cursor: pointer;
&.active {
background: rgba(237, 245, 243, 0.39);
border: 1px solid rgba(184, 1, 64, 1);
border-radius: 6px;
color: rgba(184, 1, 64, 1);
}
}
}
.tool-select {
display: flex;
padding-top: 15px;
justify-content: space-between;
flex-wrap: wrap;
.tool-item {
// min-width: 127px;
width: 127px;
margin-bottom: 20px;
// margin-right: 20px;
.tit {
font-size: 14px;
line-height: 100%;
color: #333333;
margin-bottom: 8px;
}
}
::v-deep {
.el-input__inner {
text-align: center;
}
.el-color-picker__trigger {
width: 127px;
.el-color-picker__color {
border-radius: 0;
}
.el-color-picker__icon {
opacity: 0;
}
}
}
}
}
.upload-img {
position: relative;
.btn {
// width: 321px;
height: 40px;
background: rgba(237, 245, 243, 0.39);
border: 1px solid #80d6c4;
border-radius: 8px;
font-size: 14px;
line-height: 40px;
color: #49bba2;
cursor: pointer;
text-align: center;
}
.upload {
position: absolute;
top: 0;
left: 0;
opacity: 0.00001;
::v-deep {
.el-upload {
width: 320px;
height: 40px;
}
}
}
}
</style>
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<aside class="app-aside"> <aside class="app-aside">
<nav class="nav"> <nav class="nav">
<el-menu :default-active="defaultActive" :router="true"> <el-menu :default-active="defaultActive" :router="true">
<template v-for="item in menuList"> <template v-for="(item, index) in menuList">
<el-submenu :index="item.path" :key="item.path" v-if="item.children"> <el-submenu :index="item.path" :key="item.path" v-if="item.children">
<template #title><i :class="item.icon"></i>{{ item.name }}</template> <template #title><i :class="item.icon"></i>{{ item.name }}</template>
<el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.path"> <el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.path">
{{ subitem.name }} {{ subitem.name }}
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
<el-menu-item :index="item.path" :key="item.path" v-else> <el-menu-item :index="item.path" :key="index" v-else>
<i :class="item.icon"></i>{{ item.name }} <i :class="item.icon"></i>{{ item.name }}
</el-menu-item> </el-menu-item>
</template> </template>
...@@ -24,10 +24,10 @@ export default { ...@@ -24,10 +24,10 @@ export default {
data() { data() {
return { return {
menuList: [ menuList: [
{ name: 'Banner管理', path: '/banner/list', icon: 'el-icon-notebook-2' }, { name: '证书模板管理', path: '/template/list', icon: 'el-icon-notebook-2' },
{ name: '功能区管理', path: '/menu/list', icon: 'el-icon-user' }, { name: '动态变量管理', path: '/variable/list', icon: 'el-icon-user' },
{ name: '图文管理', path: '/essay/list', icon: 'el-icon-connection' }, { name: '学员管理', path: '/student/list', icon: 'el-icon-connection' },
{ name: '页面管理', path: '/pages/list', icon: 'el-icon-connection' } { name: '项目管理', path: '/project/list', icon: 'el-icon-connection' }
] ]
} }
}, },
......
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建Banner' : '编辑Banner'">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="width: 40%; margin: 0 auto"
>
<el-form-item label="标题">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="上传banner" prop="banner">
<upload-image v-model="ruleForm.picture"></upload-image>
</el-form-item>
<el-form-item label="是否发布" prop="status">
<el-switch v-model="status"></el-switch>
</el-form-item>
<el-form-item label="关联选择">
<el-button type="primary" @click="drawer = true">点击选择</el-button>
</el-form-item>
<el-form-item>
<div style="padding-top: 20px">
<el-button type="primary" @click="submitForm">确认</el-button>
<el-button @click="drawer = true">取消</el-button>
</div>
</el-form-item>
</el-form>
</app-card>
<el-drawer size="40%" :visible.sync="drawer" :direction="direction">
<div style="padding: 0 20px">
<el-tabs v-model="activeName">
<el-tab-pane label="关联图文" name="1"></el-tab-pane>
<el-tab-pane label="关联页面" name="2"></el-tab-pane>
<el-tab-pane label="跳转链接" name="3"></el-tab-pane>
</el-tabs>
</div>
</el-drawer>
</div>
</template>
<script>
import UploadImage from '@/components/upload/UploadImage.vue'
import { createBanner, getDetails, updateBanner } from '../api'
export default {
components: {
UploadImage
},
data() {
return {
activeName: '1',
status: true,
drawer: false,
direction: 'rtl',
ruleForm: {
title: '',
url: '',
picture: '',
type: '',
status: true,
relations_id: ''
},
rules: {
banner: [{ required: true, message: '请上传banner', trigger: 'blur' }],
status: [{ required: true, message: '', trigger: 'blur' }]
}
}
},
computed: {
id() {
return this.$route.query.id
}
},
methods: {
// 提交
submitForm() {
this.ruleForm.type = this.activeName
this.ruleForm.status = this.status ? 1 : 0
if (this.id) {
updateBanner(this.ruleForm).then(res => {
if (res.code === 0) {
this.$message({
message: '编辑成功',
type: 'success'
})
this.$router.go(-1)
}
})
} else {
createBanner(this.ruleForm).then(res => {
if (res.code === 0) {
this.$message({
message: '提交成功',
type: 'success'
})
this.$router.go(-1)
}
})
}
},
// 获取详情
getDetails() {
getDetails({ id: this.id }).then(res => {
this.status = !!parseInt(res.data.status)
this.ruleForm = res.data
})
}
},
mounted() {
if (this.id) {
this.getDetails()
}
}
}
</script>
<style lang="scss" scoped></style>
import httpRequest from '@/utils/axios'
/**
* 新建图文
*/
export function createEssay(data) {
return httpRequest.post('/api/road/v1/backend/doc/create', data)
}
/**
* 获取应用列表
*/
export function getAppList(params) {
return httpRequest.get('/api/road/v1/backend/doc/list', { params })
}
/**
* 更新图文
*/
export function updateEssay(data) {
return httpRequest.post('/api/road/v1/backend/doc/update', data)
}
/**
* 获取图文详情
*/
export function getDetails(params) {
return httpRequest.get('/api/road/v1/backend/doc/view', { params })
}
/**
* 删除图文
*/
export function deleteEssay(data) {
return httpRequest.post('/api/road/v1/backend/doc/delete', data)
}
// /**
// * 获取应用列表
// */
// export function getAppList(params) {
// return httpRequest.get('/api/register/v1/activity/index', { params })
// }
// /**
// * 新建报名
// */
// export function createRegister(data) {
// return httpRequest.post('/api/register/v1/activity/create', data)
// }
// /**
// * 报名详情
// */
// export function getRegisterDetail(params) {
// return httpRequest.get('/api/register/v1/activity/view', { params })
// }
// /**
// * 更新报名
// */
// export function updateRegister(data) {
// return httpRequest.post('/api/register/v1/activity/update', data)
// }
// /**
// * 删除报名
// */
// export function deleteRegister(data) {
// return httpRequest.post('/api/register/v1/activity/delete', data)
// }
// /**
// * 停止活动
// */
// export function stopRegister(data) {
// return httpRequest.post('/api/register/v1/activity/drop', data)
// }
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建菜单' : '编辑菜单'">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="width: 80%; margin: 0 auto"
>
<el-form-item label="封面图" prop="picture">
<upload-image v-model="ruleForm.picture"></upload-image>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="ruleForm.comment"></el-input>
</el-form-item>
<el-form-item label="跳转链接">
<el-input v-model="ruleForm.url"></el-input>
</el-form-item>
<el-form-item label="摘要">
<el-input v-model="ruleForm.remark"></el-input>
</el-form-item>
<el-form-item label="正文" prop="content">
<v-editor v-model="ruleForm.content"></v-editor>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-switch v-model="status"></el-switch>
</el-form-item>
<el-form-item label="关联选择">
<el-button type="primary" @click="drawer = true">点击选择</el-button>
</el-form-item>
<el-form-item>
<div style="padding-top: 20px; width: 200px; margin: 0 auto">
<el-button type="primary" @click="submitForm">确认</el-button>
<el-button @click="drawer = true">取消</el-button>
</div>
</el-form-item>
</el-form>
</app-card>
<el-drawer size="40%" :visible.sync="drawer" :direction="direction">
<div style="padding: 0 20px">
<el-tabs v-model="activeName">
<el-tab-pane label="关联图文" name="1"></el-tab-pane>
<el-tab-pane label="关联页面" name="2"></el-tab-pane>
<el-tab-pane label="跳转链接" name="3"></el-tab-pane>
</el-tabs>
</div>
</el-drawer>
</div>
</template>
<script>
import VEditor from '@/components/tinymce/Index.vue'
import UploadImage from '@/components/upload/UploadImage.vue'
import { createEssay, getDetails, updateEssay } from '../api'
export default {
components: {
UploadImage,
VEditor
},
data() {
return {
activeName: '1',
status: true,
drawer: false,
direction: 'rtl',
ruleForm: {
title: '',
comment: '',
url: '',
picture: '',
remark: '',
content: '',
status: true,
relations_id_page: '',
relations_id_banner: '',
relations_id_menu: ''
},
rules: {
title: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
picture: [{ required: true, message: '请上传banner', trigger: 'blur' }],
status: [{ required: true, message: '', trigger: 'blur' }],
content: [{ required: true, message: '请输入正文', trigger: 'blur' }]
}
}
},
computed: {
id() {
return this.$route.query.id
}
},
methods: {
// 提交
submitForm() {
this.ruleForm.type = this.activeName
this.ruleForm.status = this.status ? 1 : 0
if (this.id) {
updateEssay(this.ruleForm).then(res => {
if (res.code === 0) {
this.$message({
message: '编辑成功',
type: 'success'
})
this.$router.go(-1)
}
})
} else {
createEssay(this.ruleForm).then(res => {
if (res.code === 0) {
this.$message({
message: '提交成功',
type: 'success'
})
this.$router.go(-1)
}
})
}
},
// 获取详情
getDetails() {
getDetails({ id: this.id }).then(res => {
this.status = !!parseInt(res.data.status)
this.ruleForm = res.data
})
}
},
mounted() {
if (this.id) {
this.getDetails()
}
}
}
</script>
<style lang="scss" scoped></style>
import httpRequest from '@/utils/axios'
/**
* 新建菜单
*/
export function createMenu(data) {
return httpRequest.post('/api/road/v1/backend/menu/create', data)
}
/**
* 获取应用列表
*/
export function getAppList(params) {
return httpRequest.get('/api/road/v1/backend/menu/list', { params })
}
/**
* 更新菜单
*/
export function updateMenu(data) {
return httpRequest.post('/api/road/v1/backend/menu/update', data)
}
/**
* 获取菜单详情
*/
export function getDetails(params) {
return httpRequest.get('/api/road/v1/backend/menu/view', { params })
}
/**
* 删除菜单
*/
export function deleteMenu(data) {
return httpRequest.post('/api/road/v1/backend/menu/delete', data)
}
// /**
// * 获取应用列表
// */
// export function getAppList(params) {
// return httpRequest.get('/api/register/v1/activity/index', { params })
// }
// /**
// * 新建报名
// */
// export function createRegister(data) {
// return httpRequest.post('/api/register/v1/activity/create', data)
// }
// /**
// * 报名详情
// */
// export function getRegisterDetail(params) {
// return httpRequest.get('/api/register/v1/activity/view', { params })
// }
// /**
// * 更新报名
// */
// export function updateRegister(data) {
// return httpRequest.post('/api/register/v1/activity/update', data)
// }
// /**
// * 删除报名
// */
// export function deleteRegister(data) {
// return httpRequest.post('/api/register/v1/activity/delete', data)
// }
// /**
// * 停止活动
// */
// export function stopRegister(data) {
// return httpRequest.post('/api/register/v1/activity/drop', data)
// }
<template>
<div>
<el-form :disabled="!!$route.query.type" ref="form" :rules="rules" :model="data" label-width="100px">
<el-form-item label="按钮文案:" prop="title">
<el-input v-model="data.title"></el-input>
</el-form-item>
<el-form-item label="页面展示:" prop="desc">
<v-editor :disabled="!!$route.query.type" v-model="data.desc"></v-editor>
</el-form-item>
</el-form>
</div>
</template>
<script>
import VEditor from '@/components/tinymce/Index.vue'
export default {
components: { VEditor },
props: {
data: { type: Object, default: () => {} }
},
data() {
return {
form: {
edit: '',
btnText: ''
},
rules: {
title: [{ required: true, message: '请填写按钮文案', trigger: 'change' }],
desc: [{ required: true, message: '请填写页面内容', trigger: 'change' }]
}
}
},
methods: {
submitForm() {
let flag = false
this.$refs.form.validate(valid => {
if (valid) {
flag = true
}
})
return flag
}
},
mounted() {
console.log(this.data, 'display')
}
}
</script>
<style lang="scss">
.tox-notifications-container {
display: none !important;
}
</style>
<template>
<div>
<el-form ref="form" :disabled="!!$route.query.type" :inline="true" :rules="rules" :model="form">
<el-form-item label="页面标题:" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="活动名称:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="人数限制:" prop="max_number">
<el-input v-model="form.max_number"></el-input>
</el-form-item>
<el-form-item label="关联项目:" prop="project_id">
<el-select v-model="form.project_id" placeholder="请选择">
<el-option v-for="item in projectMap" :key="item.key" :label="item.value" :value="item.key"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="活动开始时间:" prop="activity_time">
<el-date-picker
v-model="form.activity_time"
type="datetime"
@change="activityDateChange"
placeholder="选择日期时间"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item label="报名时间:" prop="time">
<el-date-picker
@change="dateChange"
v-model="form.time"
type="datetimerange"
range-separator="至"
start-placeholder="报名开始日期"
end-placeholder="报名结束日期"
>
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
form: { type: Object, default: () => {} }
},
data() {
return {
rules: {
title: { required: true, message: '请填写页面标题', trigger: 'blur' },
name: { required: true, message: '请填写活动标题', trigger: 'blur' },
max_number: [
{ required: true, message: '请填写最大参与人数', trigger: 'blur' },
{
trigger: 'blur',
min: 1,
message: '最大人数限制不能小于1人',
validator(rule, value, callback) {
if (parseInt(Number(value)) && Number(value) >= 1) {
callback()
} else {
callback(new Error('最大人数限制不能小于1人'))
}
}
}
],
project_id: { required: true, message: '请关联项目', trigger: 'change' },
time: { required: true, message: '请选择时间', trigger: 'change' },
activity_time: { required: true, message: '请选择时间', trigger: 'change' }
},
pickerOptions: {
disabledDate(v) {
return v.getTime() < new Date().getTime() - 86400000
}
}
}
},
computed: {
projectMap() {
return this.$store.state.commonMap.project_map || {}
}
},
mounted() {
console.log(this.form)
},
methods: {
submitForm() {
let flag = false
this.$refs.form.validate(valid => {
if (valid) {
flag = true
}
})
return flag
},
// 日期改变的时候。吧日期转成后台需要的格式
dateChange(date) {
this.form.start_time = this.setDate(date[0])
this.form.end_time = this.setDate(date[1])
},
setDate(val) {
const d = new Date(val)
const date = `${d.getFullYear()}-${this.toDo(d.getMonth() + 1)}-${this.toDo(d.getDate())} ${this.toDo(
d.getHours()
)}:${this.toDo(d.getMinutes())}:${this.toDo(d.getSeconds())}`
return date
},
toDo(n) {
return n < 10 ? `0${n}` : n
},
activityDateChange() {
this.form.activity_time = this.setDate(this.form.activity_time)
}
}
}
</script>
<style lang="scss" scoped></style>
import httpRequest from '@/utils/axios'
/**
* 新建页面
*/
export function createPages(data) {
return httpRequest.post('/api/road/v1/backend/page/create', data)
}
/**
* 获取应用列表
*/
export function getAppList(params) {
return httpRequest.get('/api/road/v1/backend/page/list', { params })
}
/**
* 更新页面
*/
export function updatePages(data) {
return httpRequest.post('/api/road/v1/backend/page/update', data)
}
/**
* 获取页面详情
*/
export function getDetails(params) {
return httpRequest.get('/api/road/v1/backend/page/view', { params })
}
/**
* 删除页面
*/
export function deletePages(data) {
return httpRequest.post('/api/road/v1/backend/page/delete', data)
}
// /**
// * 获取应用列表
// */
// export function getAppList(params) {
// return httpRequest.get('/api/register/v1/activity/index', { params })
// }
// /**
// * 新建报名
// */
// export function createRegister(data) {
// return httpRequest.post('/api/register/v1/activity/create', data)
// }
// /**
// * 报名详情
// */
// export function getRegisterDetail(params) {
// return httpRequest.get('/api/register/v1/activity/view', { params })
// }
// /**
// * 更新报名
// */
// export function updateRegister(data) {
// return httpRequest.post('/api/register/v1/activity/update', data)
// }
// /**
// * 删除报名
// */
// export function deleteRegister(data) {
// return httpRequest.post('/api/register/v1/activity/delete', data)
// }
// /**
// * 停止活动
// */
// export function stopRegister(data) {
// return httpRequest.post('/api/register/v1/activity/drop', data)
// }
<template>
<div>
<el-form :disabled="!!$route.query.type" ref="form" :rules="rules" :model="data" label-width="100px">
<el-form-item label="按钮文案:" prop="title">
<el-input v-model="data.title"></el-input>
</el-form-item>
<el-form-item label="页面展示:" prop="desc">
<v-editor :disabled="!!$route.query.type" v-model="data.desc"></v-editor>
</el-form-item>
</el-form>
</div>
</template>
<script>
import VEditor from '@/components/tinymce/Index.vue'
export default {
components: { VEditor },
props: {
data: { type: Object, default: () => {} }
},
data() {
return {
form: {
edit: '',
btnText: ''
},
rules: {
title: [{ required: true, message: '请填写按钮文案', trigger: 'change' }],
desc: [{ required: true, message: '请填写页面内容', trigger: 'change' }]
}
}
},
methods: {
submitForm() {
let flag = false
this.$refs.form.validate(valid => {
if (valid) {
flag = true
}
})
return flag
}
},
mounted() {
console.log(this.data, 'display')
}
}
</script>
<style lang="scss">
.tox-notifications-container {
display: none !important;
}
</style>
<template>
<div>
<el-form ref="form" :disabled="!!$route.query.type" :inline="true" :rules="rules" :model="form">
<el-form-item label="页面标题:" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="活动名称:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="人数限制:" prop="max_number">
<el-input v-model="form.max_number"></el-input>
</el-form-item>
<el-form-item label="关联项目:" prop="project_id">
<el-select v-model="form.project_id" placeholder="请选择">
<el-option v-for="item in projectMap" :key="item.key" :label="item.value" :value="item.key"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="活动开始时间:" prop="activity_time">
<el-date-picker
v-model="form.activity_time"
type="datetime"
@change="activityDateChange"
placeholder="选择日期时间"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item label="报名时间:" prop="time">
<el-date-picker
@change="dateChange"
v-model="form.time"
type="datetimerange"
range-separator="至"
start-placeholder="报名开始日期"
end-placeholder="报名结束日期"
>
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
form: { type: Object, default: () => {} }
},
data() {
return {
rules: {
title: { required: true, message: '请填写页面标题', trigger: 'blur' },
name: { required: true, message: '请填写活动标题', trigger: 'blur' },
max_number: [
{ required: true, message: '请填写最大参与人数', trigger: 'blur' },
{
trigger: 'blur',
min: 1,
message: '最大人数限制不能小于1人',
validator(rule, value, callback) {
if (parseInt(Number(value)) && Number(value) >= 1) {
callback()
} else {
callback(new Error('最大人数限制不能小于1人'))
}
}
}
],
project_id: { required: true, message: '请关联项目', trigger: 'change' },
time: { required: true, message: '请选择时间', trigger: 'change' },
activity_time: { required: true, message: '请选择时间', trigger: 'change' }
},
pickerOptions: {
disabledDate(v) {
return v.getTime() < new Date().getTime() - 86400000
}
}
}
},
computed: {
projectMap() {
return this.$store.state.commonMap.project_map || {}
}
},
mounted() {
console.log(this.form)
},
methods: {
submitForm() {
let flag = false
this.$refs.form.validate(valid => {
if (valid) {
flag = true
}
})
return flag
},
// 日期改变的时候。吧日期转成后台需要的格式
dateChange(date) {
this.form.start_time = this.setDate(date[0])
this.form.end_time = this.setDate(date[1])
},
setDate(val) {
const d = new Date(val)
const date = `${d.getFullYear()}-${this.toDo(d.getMonth() + 1)}-${this.toDo(d.getDate())} ${this.toDo(
d.getHours()
)}:${this.toDo(d.getMinutes())}:${this.toDo(d.getSeconds())}`
return date
},
toDo(n) {
return n < 10 ? `0${n}` : n
},
activityDateChange() {
this.form.activity_time = this.setDate(this.form.activity_time)
}
}
}
</script>
<style lang="scss" scoped></style>
import httpRequest from '@/utils/axios'
/**
* 获取模板列表
*/
export function getTemplateList(params) {
return httpRequest.get('/api/cert/v1/backend/template/list', { params })
}
/**
* 获取学员列表
*/
export function getStudentList(params) {
return httpRequest.get('/api/cert/v1/backend/student/list', { params })
}
/**
* 更新项目
*/
export function updateProject(data) {
return httpRequest.post('/api/cert/v1/backend/project/update', data)
}
/**
* 新建项目
*/
export function createProject(data) {
return httpRequest.post('/api/cert/v1/backend/project/create', data)
}
/**
* 获取应用列表
*/
export function getAppList(params) {
return httpRequest.get('/api/cert/v1/backend/project/list', { params })
}
/**
* 获取项目详情
*/
export function getDetails(params) {
return httpRequest.get('/api/cert/v1/backend/project/view', { params })
}
/**
* 删除项目
*/
export function deleteProject(data) {
return httpRequest.post('/api/cert/v1/backend/project/delete', data)
}
/**
* 办法证书
*/
export function projectPublish(data) {
return httpRequest.post('/api/cert/v1/backend/project/publish', data)
}
...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue' ...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue'
const routes = [ const routes = [
{ {
path: '/banner', path: '/project',
component: AppLayout, component: AppLayout,
children: [ children: [
{ path: 'list', component: () => import('./views/List.vue') }, { path: 'list', component: () => import('./views/List.vue') },
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<div class="line"></div> <div class="line"></div>
<div class="btn-box"> <div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/essay/update' })">新建图文</el-button> <el-button type="primary" @click="$router.push({ path: '/project/update' })">新建项目</el-button>
</div> </div>
<template v-slot:filter-time> <template v-slot:filter-time>
<el-date-picker <el-date-picker
...@@ -28,16 +28,16 @@ ...@@ -28,16 +28,16 @@
</el-select> </el-select>
</template> </template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<el-button type="text" @click="handlePublish(row)">颁发证书</el-button>
<el-button type="text" @click="handleEdit(row)">编辑</el-button> <el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button> <el-button type="text" @click="handleDelete(row)">删除</el-button>
</template> </template>
</app-list> </app-list>
</app-card> </app-card>
</template> </template>
<script> <script>
// 接口 // 接口
import { getAppList, updateEssay, deleteEssay } from '../api' import { getAppList, deleteProject, getTemplateList, projectPublish } from '../api'
export default { export default {
data() { data() {
...@@ -50,7 +50,8 @@ export default { ...@@ -50,7 +50,8 @@ export default {
filterDate: '', filterDate: '',
options: count, options: count,
createdStart: '', createdStart: '',
createdEnd: '' createdEnd: '',
templateList: []
} }
}, },
computed: { computed: {
...@@ -78,16 +79,15 @@ export default { ...@@ -78,16 +79,15 @@ export default {
{ {
type: 'input', type: 'input',
prop: 'title', prop: 'title',
label: '标题:' label: '项目名称:'
}, },
{ {
type: 'select', type: 'select',
prop: 'status', prop: 'template_id',
label: '发布状态:', label: '证书模板:',
options: [ labelKey: 'title',
{ value: '0', label: '未发布' }, valueKey: 'id',
{ value: '1', label: '已发布' } options: this.templateList
]
}, },
{ {
slots: 'filter-time', slots: 'filter-time',
...@@ -96,23 +96,33 @@ export default { ...@@ -96,23 +96,33 @@ export default {
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: 'id', prop: 'id', align: 'center' },
{ label: '封面图', slots: 'picture', align: 'center', width: '170px' }, { label: '项目名称', prop: 'title', align: 'center' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '关联人数', prop: 'students_count', align: 'center' },
{ label: '摘要', prop: 'remark', align: 'center' }, { label: '关联证书模板', prop: 'template_id_name', align: 'center' },
{ label: '备注', prop: 'comment', align: 'center' },
{
label: '发布状态',
slots: 'release-status',
align: 'center'
},
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' } { label: '操作', slots: 'table-x', align: 'center' }
] ]
} }
} }
}, },
methods: { methods: {
// 办法证书
handlePublish(row) {
projectPublish({ id: row.id }).then(res => {
if (res.code === 0) {
this.$message({
message: '颁发成功',
type: 'success'
})
}
})
},
// 证书模板
getTemplateList() {
getTemplateList({ 'per-page': 100 }).then(res => {
this.templateList = res.data.list
})
},
// 时间搜索 // 时间搜索
changeDate() { changeDate() {
if (this.filterDate) { if (this.filterDate) {
...@@ -124,25 +134,11 @@ export default { ...@@ -124,25 +134,11 @@ export default {
// this.$refs.list.refetch(true) // this.$refs.list.refetch(true)
} }
}, },
// 更新发布状态
updateStatus(row) {
const params = row
params.status = row.status ? '1' : '0'
updateEssay(row).then(res => {
if (res.code === 0) {
this.$message({
message: '修改成功',
type: 'success'
})
this.$refs.list.refetch(true)
}
})
},
handleEdit(row) { handleEdit(row) {
this.$router.push({ path: '/essay/update', query: { id: row.id } }) this.$router.push({ path: '/project/update', query: { id: row.id } })
}, },
handleDelete(row) { handleDelete(row) {
deleteEssay({ id: row.id }).then(res => { deleteProject({ id: row.id }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '删除成功', message: '删除成功',
...@@ -152,6 +148,9 @@ export default { ...@@ -152,6 +148,9 @@ export default {
} }
}) })
} }
},
mounted() {
this.getTemplateList()
} }
} }
</script> </script>
......
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建项目' : '编辑项目'">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="110px"
class="demo-ruleForm"
style="width: 80%; margin: 0 auto"
>
<el-form-item label="项目名称" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="关联证书模板" prop="template">
<el-select filterable v-model="ruleForm.template_id" placeholder="请选择">
<el-option v-for="item in templateList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="关联学员">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-button type="primary" @click="drawer = true">选择学员</el-button>
</div>
<app-list v-bind="tableOptions" ref="list">
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</el-card>
</el-form-item>
<el-form-item>
<div style="padding-top: 20px; width: 200px; margin: 0 auto">
<el-button type="primary" @click="submitForm">确认</el-button>
<el-button @click="drawer = true">取消</el-button>
</div>
</el-form-item>
</el-form>
</app-card>
<el-drawer size="80%" :visible.sync="drawer" :direction="direction" :destroy-on-close="true">
<app-list v-if="drawer" @selection-change="selectionChange" v-bind="selectTableOptions" ref="list" style="padding: 0 30px 0">
</app-list>
<div style="padding-left: 30px"><el-button type="primary" @click="drawer = false">确认</el-button></div>
</el-drawer>
</div>
</template>
<script>
import { getDetails, updateProject, getTemplateList, getStudentList, createProject } from '../api'
export default {
components: {},
data() {
return {
drawer: false,
direction: 'rtl',
ruleForm: {
title: '',
template_id: ''
},
rules: {
title: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
template: [{ required: true, message: '请选择证书模板', trigger: 'blur' }]
},
templateList: [],
studentTableOptions: []
}
},
computed: {
id() {
return this.$route.query.id
},
// 列表配置
selectTableOptions() {
return {
limit: 10,
remote: {
httpRequest: getStudentList,
params: this.form,
callback: res => {
// 选中后不在列表展示
const filterData = []
res.forEach(element => {
if (!this.studentTableOptions.find(item => item.id === element.id)) {
filterData.push(element)
}
})
return filterData
}
},
filters: [
{
type: 'input',
label: '姓名:',
props: 'name'
},
{
type: 'input',
label: '手机号:',
props: 'mobile'
}
],
columns: [
{ type: 'selection', prop: 'selection', align: 'center' },
{ label: 'id', prop: 'id', align: 'center' },
{ label: '姓名', prop: 'name', align: 'center' },
{ label: '手机号', prop: 'mobile', align: 'center' },
{ label: '邮箱', prop: 'email', align: 'center' },
{ label: '编号', prop: 'number', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' }
]
}
},
tableOptions() {
return {
columns: [
{ label: 'id', prop: 'id', align: 'center' },
{ label: '姓名', prop: 'name', align: 'center' },
{ label: '手机号', prop: 'mobile', align: 'center' },
{ label: '邮箱', prop: 'email', align: 'center' },
{ label: '编号', prop: 'number', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' }
],
data: this.studentTableOptions
}
}
},
methods: {
// 删除绑定的学员
handleDelete(row) {
const findIndex = this.studentTableOptions.findIndex(item => row.id === item.id)
if (findIndex !== -1) {
this.studentTableOptions.splice(findIndex, 1)
}
},
// 选择学员
selectionChange(selection) {
this.studentTableOptions = selection
},
// 证书模板
getTemplateList() {
getTemplateList({ 'per-page': 100 }).then(res => {
this.templateList = res.data.list
})
},
// 提交
submitForm() {
const params = this.ruleForm
params.students_id = this.studentTableOptions
.reduce((a, b) => {
a.push(b.id)
return a
}, [])
.toString(',')
if (this.id) {
updateProject(this.ruleForm).then(res => {
if (res.code === 0) {
this.$message({
message: '编辑成功',
type: 'success'
})
this.$router.go(-1)
}
})
} else {
createProject(params).then(res => {
if (res.code === 0) {
this.$message({
message: '提交成功',
type: 'success'
})
this.$router.go(-1)
}
})
}
},
// 获取详情
getDetails() {
getDetails({ id: this.id }).then(res => {
this.ruleForm = res.data
this.studentTableOptions = res.data.students.reduce((a, b) => {
a.push(b.student)
return a
}, [])
})
}
},
mounted() {
if (this.id) {
this.getDetails()
}
this.getTemplateList()
}
}
</script>
<style lang="scss" scoped></style>
import httpRequest from '@/utils/axios'
/**
* 新建学员
*/
export function createStudent(data) {
return httpRequest.post('/api/cert/v1/backend/student/create', data)
}
/**
* 获取应用列表
*/
export function getAppList(params) {
return httpRequest.get('/api/cert/v1/backend/student/list', { params })
}
/**
* 导入
*/
export function importPeople(data) {
return httpRequest({
url: '/api/cert/v1/backend/student/import',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
timeout: 900000,
data,
withCredentials: true
})
}
/**
* 更新学员
*/
export function updateStudent(data) {
return httpRequest.post('/api/cert/v1/backend/student/update', data)
}
/**
* 获取详情
*/
export function getDetails(params) {
return httpRequest.get('/api/cert/v1/backend/student/view', { params })
}
/**
* 删除学员
*/
export function deleteStudent(data) {
return httpRequest.post('/api/cert/v1/backend/student/delete', data)
}
/**
* 获取项目列表
*/
export function getProjectList(params) {
return httpRequest.get('/api/cert/v1/backend/project/list', { params })
}
/**
* 获取模板列表
*/
export function getTemplateList(params) {
return httpRequest.get('/api/cert/v1/backend/template/list', { params })
}
<template>
<el-dialog v-bind="$attrs" v-on="$listeners">
<el-form :model="form" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="关联项目">
<el-select @change="$forceUpdate()" filterable multiple v-model="form.projects_id" placeholder="请选择">
<el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-upload
style="text-align: center"
class="file-import"
ref="upload"
action="#"
:auto-upload="false"
:file-list="fileList"
:limit="1"
:before-upload="beforeUpload"
:http-request="fetchFileUpload"
accept=".xls,.xlsx"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
<div style="text-align: center">
<a
href="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/%E4%BA%BA%E5%91%98%E6%A8%A1%E6%9D%BF.xlsx"
download="人员模板.xlsx"
style="color: #c01c40"
>
<i class="el-icon-download"></i>人员模板.xlsx</a
>
</div>
<div style="text-align: center; margin-top: 15px">
<el-button size="mini" @click="cancel">取消</el-button>
<el-button type="primary" size="mini" @click="submitUpload" style="margin-right: 5px"> 确认提交</el-button>
</div>
</el-dialog>
</template>
<script>
import { splitStrLast } from '@/utils/util'
import { importPeople, getProjectList } from '../api'
export default {
data() {
return {
options: [],
form: {
projects_id: []
},
file: '',
activityOption: [],
stepOption: [],
fileList: []
}
},
computed: {},
mounted() {
this.getProjectList()
},
methods: {
// 获取项目列表
getProjectList() {
getProjectList().then(res => {
this.options = res.data.list.filter(item => item.status !== '2')
})
},
beforeUpload(file) {
const suffix = splitStrLast(file.name, '.')
if (!['xlsx', 'xls'].includes(suffix)) {
this.$message.error('只能上传excel文件')
return false
} else {
return true
}
},
fetchFileUpload(data) {
importPeople({
file: data.file,
activity_id: this.form.activity_id,
activity_detail_id: this.form.activity_detail_id
}).then(res => {
if (res.code === 0) {
this.$message.success('导入数据成功')
history.go(0)
}
})
},
submitUpload() {
this.$refs.upload.submit()
},
cancel() {
this.$emit('cancel')
}
}
}
</script>
<style lang="scss" scoped>
.file-import {
::v-deep {
.el-upload-dragger {
width: 260px !important;
}
}
}
</style>
...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue' ...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue'
const routes = [ const routes = [
{ {
path: '/essay', path: '/student',
component: AppLayout, component: AppLayout,
children: [ children: [
{ path: 'list', component: () => import('./views/List.vue') }, { path: 'list', component: () => import('./views/List.vue') },
......
...@@ -3,54 +3,55 @@ ...@@ -3,54 +3,55 @@
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<div class="line"></div> <div class="line"></div>
<div class="btn-box"> <div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/menu/update' })">新建菜单</el-button> <el-button type="primary" @click="$router.push({ path: '/student/update' })">新增学员</el-button>
<el-button type="primary" @click="importDialogVisible = true">批量导入</el-button>
<el-button type="primary" @click="downloadRecords">导出学员</el-button>
</div> </div>
<template v-slot:filter-time> <template v-slot:filter-name>
<el-date-picker <el-input v-model="form.name" placeholder="请输入内容"></el-input>
v-model="filterDate"
@change="changeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</template> </template>
<template v-slot:picture="{ row }"> <template v-slot:filter-mobile>
<div :style="`background-image:url(${row.picture});background-size: cover;width:50px;height:40px;`"></div> <el-input v-model="form.mobile" placeholder="请输入内容"></el-input>
</template> </template>
<template v-slot:release-status="{ row }"> <template v-slot:filter-project>
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch> <el-input v-model="form.project" placeholder="请输入内容"></el-input>
</template> </template>
<template v-slot:sort-select="{ row }"> <template v-slot:filter-template>
<el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)"> <el-input v-model="form.template" placeholder="请输入内容"></el-input>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</template> </template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button> <el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button> <el-button type="text" @click="handleDelete(row)">删除</el-button>
</template> </template>
</app-list> </app-list>
<import-people
@cancel="importDialogVisible = false"
width="400px"
:visible.sync="importDialogVisible"
></import-people>
</app-card> </app-card>
</template> </template>
<script> <script>
import importPeople from '../components/importPeople.vue'
// 接口 // 接口
import { getAppList, updateMenu, deleteMenu } from '../api' import { getAppList, deleteStudent, getTemplateList, getProjectList } from '../api'
export default { export default {
components: {
importPeople
},
data() { data() {
const count = []
for (let i = 0; i < 100; i++) {
count.push({ value: i, options: i })
}
return { return {
value1: '', importDialogVisible: false,
filterDate: '', form: {
options: count, name: '',
createdStart: '', mobile: '',
createdEnd: '' project_id: '',
template_id: ''
},
templateList: [],
projectList: []
} }
}, },
computed: { computed: {
...@@ -60,88 +61,85 @@ export default { ...@@ -60,88 +61,85 @@ export default {
limit: 10, limit: 10,
remote: { remote: {
httpRequest: getAppList, httpRequest: getAppList,
params: { params: this.form
title: '',
status: '',
created_time_start: this.createdStart,
created_time_end: this.createdEnd
},
callback: res => {
res.map(item => {
item.status = !!parseInt(item.status)
return item
})
return res
}
}, },
filters: [ filters: [
{ {
type: 'input', type: 'input',
prop: 'title', slots: 'filter-name',
label: '标题:' label: '姓名:'
},
{
type: 'input',
slots: 'filter-mobile',
label: '手机号:'
}, },
{ {
type: 'select', type: 'select',
prop: 'status', prop: 'project_id',
label: '发布状态:', label: '所属项目:',
options: [ labelKey: 'title',
{ value: '0', label: '未发布' }, valueKey: 'id',
{ value: '1', label: '已发布' } options: this.projectList
]
}, },
{ {
slots: 'filter-time', type: 'select',
label: '创建时间:' prop: 'template_id',
label: '证书模板:',
labelKey: 'title',
valueKey: 'id',
options: this.templateList
} }
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: 'id', prop: 'id', align: 'center' },
{ label: '菜单图标', slots: 'picture', align: 'center', width: '50px' }, { label: '姓名', prop: 'name', align: 'center' },
{ label: '菜单名称', prop: 'title', align: 'center' }, { label: '手机号', prop: 'mobile', align: 'center' },
{ label: '备注', prop: 'comment', align: 'center' }, { label: '邮箱', prop: 'email', align: 'center' },
{ { label: '编号', prop: 'number', align: 'center' },
label: '发布状态',
slots: 'release-status',
align: 'center'
},
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' } { label: '操作', slots: 'table-x', align: 'center' }
] ]
} }
} }
}, },
methods: { methods: {
// 时间搜索 // 项目列表
changeDate() { getProjectList() {
if (this.filterDate) { getProjectList().then(res => {
this.createdStart = this.filterDate[0] this.projectList = res.data.list
this.createdEnd = this.filterDate[1] })
} else {
this.createdStart = ''
this.createdEnd = ''
// this.$refs.list.refetch(true)
}
}, },
// 更新发布状态 // 证书模板
updateStatus(row) { getTemplateList() {
const params = row getTemplateList({ 'per-page': 100 }).then(res => {
params.status = row.status ? '1' : '0' this.templateList = res.data.list
updateMenu(row).then(res => { })
if (res.code === 0) { },
this.$message({ // 导出
message: '修改成功', downloadRecords() {
type: 'success' const formParams = []
}) Object.keys(this.form).forEach(item => {
this.$refs.list.refetch(true) if (this.form[item]) {
formParams.push(`${item}=${this.form[item]}`)
} }
}) })
window.open(
`${window.location.origin}/api/cert/v1/backend/student/download?${formParams.join().replace(/,/g, '&')}`
)
}, },
// 编辑
handleEdit(row) { handleEdit(row) {
this.$router.push({ path: '/menu/update', query: { id: row.id } }) const find = row.projects.find(item => item.status === '3' || item.status === '1')
if (find) {
this.$message(find.status === '1' ? '学员已有生成中证书禁止编辑' : '学员已有证书已生成禁止编辑')
return false
}
this.$router.push({ path: '/student/update', query: { id: row.id } })
}, },
// 删除
handleDelete(row) { handleDelete(row) {
deleteMenu({ id: row.id }).then(res => { deleteStudent({ id: row.id }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '删除成功', message: '删除成功',
...@@ -151,6 +149,10 @@ export default { ...@@ -151,6 +149,10 @@ export default {
} }
}) })
} }
},
mounted() {
this.getTemplateList()
this.getProjectList()
} }
} }
</script> </script>
......
<template> <template>
<div class="create-box"> <div class="create-box">
<app-card :title="!$route.query.id ? '新建菜单' : '编辑菜单'"> <app-card :title="!$route.query.id ? '新建学员' : '编辑学员'">
<el-form <el-form
:model="ruleForm" :model="ruleForm"
:rules="rules" :rules="rules"
...@@ -9,67 +9,92 @@ ...@@ -9,67 +9,92 @@
class="demo-ruleForm" class="demo-ruleForm"
style="width: 40%; margin: 0 auto" style="width: 40%; margin: 0 auto"
> >
<el-form-item label="菜单名称" prop="title"> <el-form-item label="关联项目">
<el-select @change="$forceUpdate()" filterable multiple v-model="ruleForm.projects_id" placeholder="请选择">
<el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="电话号" prop="mobile">
<el-input v-model="ruleForm.mobile"></el-input>
</el-form-item>
<el-form-item label="身份证号">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="单位">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="职位">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="编号">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label="国籍">
<el-input v-model="ruleForm.comment"></el-input> <el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="省份">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="菜单图标" prop="picture"> <el-form-item label="城市">
<upload-image v-model="ruleForm.picture"></upload-image> <el-input v-model="ruleForm.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="是否启用" prop="status"> <el-form-item label="行业">
<el-switch v-model="status"></el-switch> <el-input v-model="ruleForm.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="关联选择"> <el-form-item label="微信">
<el-button type="primary" @click="drawer = true">点击选择</el-button> <el-input v-model="ruleForm.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
<el-button type="primary" @click="submitForm">确认</el-button> <el-button type="primary" @click="submitForm">确认</el-button>
<el-button @click="drawer = true">取消</el-button> <el-button @click="$router.go(-1)">取消</el-button>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</app-card> </app-card>
<el-drawer size="40%" :visible.sync="drawer" :direction="direction">
<div style="padding: 0 20px">
<el-tabs v-model="activeName">
<el-tab-pane label="关联图文" name="1"></el-tab-pane>
<el-tab-pane label="关联页面" name="2"></el-tab-pane>
<el-tab-pane label="跳转链接" name="3"></el-tab-pane>
</el-tabs>
</div>
</el-drawer>
</div> </div>
</template> </template>
<script> <script>
import UploadImage from '@/components/upload/UploadImage.vue' import { createStudent, getDetails, updateStudent, getProjectList } from '../api'
import { createMenu, getDetails, updateMenu } from '../api'
export default { export default {
components: { components: {
UploadImage // UploadImage
}, },
data() { data() {
return { return {
activeName: '1', options: [],
status: true,
drawer: false,
direction: 'rtl',
ruleForm: { ruleForm: {
title: '', projects_id: [],
url: '', name: '',
picture: '', mobile: '',
type: '', id_number: '',
status: true, email: '',
relations_id: '', address: '',
comment: '' company: '',
position: '',
number: '',
country: '',
province: '',
city: '',
industry: '',
wechat: ''
}, },
rules: { rules: {
title: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }], name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
picture: [{ required: true, message: '请上传banner', trigger: 'blur' }], mobile: [{ required: true, message: '请填写电话', trigger: 'blur' }]
status: [{ required: true, message: '', trigger: 'blur' }]
} }
} }
}, },
...@@ -81,10 +106,9 @@ export default { ...@@ -81,10 +106,9 @@ export default {
methods: { methods: {
// 提交 // 提交
submitForm() { submitForm() {
this.ruleForm.type = this.activeName this.ruleForm.projects_id = this.ruleForm.projects_id.toString(',')
this.ruleForm.status = this.status ? 1 : 0
if (this.id) { if (this.id) {
updateMenu(this.ruleForm).then(res => { updateStudent(this.ruleForm).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '编辑成功', message: '编辑成功',
...@@ -94,7 +118,7 @@ export default { ...@@ -94,7 +118,7 @@ export default {
} }
}) })
} else { } else {
createMenu(this.ruleForm).then(res => { createStudent(this.ruleForm).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '提交成功', message: '提交成功',
...@@ -108,8 +132,19 @@ export default { ...@@ -108,8 +132,19 @@ export default {
// 获取详情 // 获取详情
getDetails() { getDetails() {
getDetails({ id: this.id }).then(res => { getDetails({ id: this.id }).then(res => {
this.status = !!parseInt(res.data.status)
this.ruleForm = res.data this.ruleForm = res.data
this.ruleForm.projects_id = res.data.projects.reduce((a, b) => {
if (b.status !== '2') {
a.push(b.project_id)
}
return a
}, [])
})
},
// 获取项目列表
getProjectList() {
getProjectList().then(res => {
this.options = res.data.list.filter(item => item.status !== '2')
}) })
} }
}, },
...@@ -117,6 +152,7 @@ export default { ...@@ -117,6 +152,7 @@ export default {
if (this.id) { if (this.id) {
this.getDetails() this.getDetails()
} }
this.getProjectList()
} }
} }
</script> </script>
......
import httpRequest from '@/utils/axios' import httpRequest from '@/utils/axios'
/** /**
* 新建banner * 获取动态变量列表
*/ */
export function createBanner(data) { export function getParamsList(params) {
return httpRequest.post('/api/road/v1/backend/banner/create', data) return httpRequest.get('/api/cert/v1/backend/param/list', { params })
}
/**
* 创建模板
*/
export function createTemplate(data) {
return httpRequest.post('/api/cert/v1/backend/template/create', data)
} }
/** /**
* 获取应用列表 * 获取应用列表
*/ */
export function getAppList(params) { export function getAppList(params) {
return httpRequest.get('/api/road/v1/backend/banner/list', { params }) return httpRequest.get('/api/cert/v1/backend/template/list', { params })
} }
/** /**
* 更新banner * 获取详情
*/ */
export function updateBanner(data) { export function getDetails(params) {
return httpRequest.post('/api/road/v1/backend/banner/update', data) return httpRequest.get('/api/cert/v1/backend/template/view', { params })
} }
/** /**
* 获取banner详情 * 更新模板
*/ */
export function getDetails(params) { export function updateTemplate(data) {
return httpRequest.get('/api/road/v1/backend/banner/view', { params }) return httpRequest.post('/api/cert/v1/backend/template/update', data)
}
/**
* 更新banner
*/
export function updateBanner(data) {
return httpRequest.post('/api/cert/v1/backend/template/update', data)
} }
/** /**
......
<template>
<div class="edit-cert-box">
<div @click="toImage">111</div>
<div class="tool-left">
<div style="padding-right: 20px; border-right: 1px solid #e3e3e3">
<editStyle @data="changeStyle" :data="certBoxEditStyle"></editStyle>
<template v-for="(item, index) in certElement">
<div v-if="item.show" :key="index" @click="domShow(item.id)">
<editStyle @delete="deleteEdit" @imgUpload="imgUpload" @data="changeStyle" :data="item"></editStyle>
</div>
</template>
</div>
<div class="tool-btn">
<el-button type="primary" @click="dialogVisible = true">添加元素</el-button>
</div>
</div>
<div class="tool-right">
<div :style="certBoxEditStyle.style" id="edit-dom-1" ref="imageTofile">
<template v-for="item in certElement">
<div
:style="item.style"
v-if="item.type == 3 || item.type == 0"
:key="item.id"
:id="item.id"
:class="item.show ? 'edit-img active' : 'edit-img'"
@click="domShow(item.id)"
>
<div v-if="item.url" style="width: 100%; height: 100%">
<div class="pop"></div>
<img style="width: 100%; display: block; height: 100%" :src="item.url" />
</div>
</div>
<div
:style="item.style"
v-if="item.type === 1"
:class="item.show ? 'text active' : 'text'"
:key="item.id"
:id="item.id"
@click="domShow(item.id)"
>
<div class="pop"></div>
<div v-html="item.html"></div>
</div>
</template>
</div>
</div>
<el-dialog title="添加元素" :visible.sync="dialogVisible" width="30%" :destroy-on-close="true">
<div style="display: flex; justify-content: center">
<el-radio-group v-model="selectElement">
<el-radio :label="0">图片</el-radio>
<el-radio :label="1">文字</el-radio>
<el-radio :label="2">动态变量</el-radio>
<el-radio :label="3">背景图片</el-radio>
</el-radio-group>
</div>
<div style="display: flex; justify-content: center; padding: 30px" v-if="selectElement === 2">
<el-select v-model="paramValue" placeholder="请选择">
<el-option v-for="item in paramOptions" :key="item.key" :label="item.key" :value="item.key"> </el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addElement">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
import editStyle from '@/components/base/EditStyle.vue'
import { getParamsList } from '../api'
import drag from '@/utils/drag.js'
import { uploadBlob } from '@/utils/blob'
export default {
components: {
editStyle
},
data() {
return {
htmlUrl: '',
// 动态id
dynamicId: 1,
// 动态变量
paramValue: '',
// 动态变量选项
paramOptions: [],
// 添加dom弹窗
dialogVisible: false,
// 选择添加那个类型的dom
selectElement: 0,
// 证书大小设置
certBoxEditStyle: {
type: '-1',
title: '证书设置',
tool: [
{ name: 'proportionWidth', value: 1, option: [1, 20, 1] },
{ name: 'proportionHeight', value: 1, option: [1, 20, 1] },
{ name: 'bgColor', value: '#ffffff' }
],
style: ''
},
// 所有添加的dom元素
certElement: [],
isShowFlag: true
}
},
computed: {},
mounted() {
document.querySelector('.app-aside').style.display = 'none'
document.onclick = () => {
if (this.certElement.length && this.isShowFlag) {
this.certElement.map(item => {
item.show = false
return item
})
}
}
this.setCertBox()
},
methods: {
// 删除工具
deleteEdit(data) {
const index = this.certElement.findIndex(item => item.id === data.id)
this.certElement.splice(index, 1)
},
// 吧html生成图片
toImage() {
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
useCORS: true
}).then(canvas => {
// const url = canvas.toDataURL('image/png')
// this.htmlUrl = url
canvas.toBlob(function (blob) {
console.log(blob, 'blob')
uploadBlob(blob).then(res => {
console.log(res, '123123')
})
})
})
},
domShow(id) {
this.isShowFlag = false
setTimeout(() => {
this.certElement.map(item => {
item.show = false
return item
})
const index = this.certElement.findIndex(item => item.id === id)
if (this.certElement[index]) {
this.certElement[index].show = true
}
this.isShowFlag = true
}, 100)
},
// 图片上传后
imgUpload(data) {
// 图片上传后开启拖拽
this.dragInit(data.id)
},
// 添加元素
addElement() {
setTimeout(() => {
this.dynamicId++
const certBox = document.getElementById('edit-dom-1')
// 添加图片
if (this.selectElement === 0) {
this.certElement.push({
type: this.selectElement,
title: '上传图片',
tool: [
{ name: 'width', value: certBox.offsetWidth },
{ name: 'height', value: '' },
{ name: 'zIndex', value: '1' }
],
url: '',
show: true,
id: `edit-dom-${this.dynamicId}`
})
this.dialogVisible = false
} else if (this.selectElement === 1) {
this.certElement.push({
title: '文字',
type: this.selectElement,
tool: [{ name: 'zIndex', value: '1' }],
html: '请输入内容',
show: true,
id: `edit-dom-${this.dynamicId}`
})
// 添加成功后添加拖拽
setTimeout(() => {
this.dragInit(`edit-dom-${this.dynamicId}`)
}, 1000)
this.dialogVisible = false
}
}, 100)
},
// 动态变量获取
getParamOptions() {
getParamsList().then(res => {
this.paramOptions = res.data.list
})
},
// 设置证书模型
setCertBox() {
const certBox = document.getElementById('edit-dom-1')
const [propWidth, propHeight] = this.certBoxEditStyle.tool
certBox.style.height = (propHeight.value / propWidth.value) * certBox.offsetWidth + 'px'
},
// 样式改变
changeStyle(data) {
this.$forceUpdate()
},
// 初始化拖拽
dragInit(id) {
const dom = document.getElementById(id)
this.$nextTick(() => {
drag(dom, document.getElementById('#edit-dom-1'), res => {
dom.style.top = res.top
dom.style.left = res.left
const index = this.certElement.findIndex(item => item.id === id)
this.certElement[index].top = res.top
this.certElement[index].left = res.left
})
})
}
}
}
</script>
<style lang="scss" scoped>
.edit-cert-box {
display: flex;
padding-top: 30px;
}
.tool-left {
min-width: 340px;
margin-right: 20px;
.tool-btn {
display: flex;
justify-content: center;
}
}
.tool-right {
flex: 1;
#edit-dom-1 {
position: relative;
border: 1px solid rgb(227, 227, 227);
overflow: hidden;
.text {
position: absolute;
top: 0;
left: 0;
&.active {
.pop {
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px dashed red;
box-sizing: border-box;
}
}
}
.pop {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
}
.edit-img {
position: absolute;
top: 0;
left: 0;
&.active {
.pop {
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px dashed red;
box-sizing: border-box;
}
}
}
.pop {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
}
</style>
...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue' ...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue'
const routes = [ const routes = [
{ {
path: '/menu', path: '/template',
component: AppLayout, component: AppLayout,
children: [ children: [
{ path: 'list', component: () => import('./views/List.vue') }, { path: 'list', component: () => import('./views/List.vue') },
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<div class="line"></div> <div class="line"></div>
<div class="btn-box"> <div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/banner/update' })">新建Banner</el-button> <el-button type="primary" @click="$router.push({ path: '/template/update' })">新建模板</el-button>
</div> </div>
<template v-slot:filter-time> <template v-slot:filter-time>
<el-date-picker <el-date-picker
...@@ -16,17 +16,9 @@ ...@@ -16,17 +16,9 @@
> >
</el-date-picker> </el-date-picker>
</template> </template>
<template v-slot:picture="{ row }">
<div :style="`background-image:url(${row.picture});background-size: cover;width:200px;height:100px;`"></div>
</template>
<template v-slot:release-status="{ row }"> <template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch> <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template> </template>
<template v-slot:sort-select="{ row }">
<el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button> <el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button> <el-button type="text" @click="handleDelete(row)">删除</el-button>
...@@ -89,6 +81,15 @@ export default { ...@@ -89,6 +81,15 @@ export default {
{ value: '1', label: '已发布' } { value: '1', label: '已发布' }
] ]
}, },
{
type: 'select',
prop: 'project',
label: '项目:',
options: [
{ value: '0', label: '未发布' },
{ value: '1', label: '已发布' }
]
},
{ {
slots: 'filter-time', slots: 'filter-time',
label: '创建时间:' label: '创建时间:'
...@@ -96,15 +97,13 @@ export default { ...@@ -96,15 +97,13 @@ export default {
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: 'id', prop: 'id', align: 'center' },
{ label: '标题', prop: 'title', align: 'center' }, { label: '模板标题', prop: 'title', align: 'center' },
{ label: '图片', slots: 'picture', align: 'center', width: '200px' }, // {
{ // label: '是否启用',
label: '发布状态', // slots: 'release-status',
slots: 'release-status', // align: 'center'
align: 'center' // },
},
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' } { label: '操作', slots: 'table-x', align: 'center' }
] ]
} }
...@@ -137,7 +136,7 @@ export default { ...@@ -137,7 +136,7 @@ export default {
}) })
}, },
handleEdit(row) { handleEdit(row) {
this.$router.push({ path: '/banner/update', query: { id: row.id } }) this.$router.push({ path: '/template/update', query: { id: row.id } })
}, },
handleDelete(row) { handleDelete(row) {
deleteBanner({ id: row.id }).then(res => { deleteBanner({ id: row.id }).then(res => {
......
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建模板' : '编辑模板'">
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
</el-steps>
<div class="step-one" v-if="active === 0">
<el-form ref="form" :model="form" style="width: 50%;margin: 0 auto;" label-width="100px">
<el-form-item label="模板名称">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="编号生成规则">
<el-radio-group v-model="form.rule">
<el-radio label="0">规则一</el-radio>
<el-radio label="1">规则二</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="active = 1">下一步</el-button>
<el-button @click="$router.go(-1)">取消</el-button>
</el-form-item>
</el-form>
</div>
<div class="step-two" v-if="active === 1">
<stepTwo @submit="submit" :data="step2Data"></stepTwo>
</div>
</app-card>
</div>
</template>
<script>
import stepTwo from '../components/stepTwo.vue'
import { createTemplate, getDetails, updateTemplate } from '../api'
// import UploadImage from '@/components/upload/UploadImage.vue'
// import { createBanner, getDetails, updateBanner } from '../api'
export default {
components: {
stepTwo
// UploadImage
},
data() {
return {
active: 0,
form: {
title: '',
rule: '0'
},
step2Data: {}
}
},
computed: {
id() {
return this.$route.query.id
}
},
methods: {
submit(data) {
if (this.$route.query.id) {
data.id = this.$route.query.id
updateTemplate(Object.assign(this.form, data)).then(res => {
this.$message({
message: '修改成功',
type: 'success'
})
this.$router.go(-1)
})
} else {
createTemplate(Object.assign(this.form, data)).then(res => {
this.$message({
message: '提交成功',
type: 'success'
})
this.$router.go(-1)
})
}
},
getDetails() {
getDetails({ id: this.id }).then(res => {
const data = res.data
this.form = {
title: data.title,
rule: data.rule
}
this.step2Data = JSON.parse(data.info)
})
}
},
mounted() {
if (this.id) {
this.getDetails()
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<div class="create-box">
<app-card :title="!$route.query.id ? '新建模板' : '编辑模板'">
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
</el-steps>
<div class="step-one" v-if="active === 0">
<el-form ref="form" :model="form" style="width: 50%; margin: 0 auto" label-width="100px">
<el-form-item label="模板名称">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="编号生成规则">
<el-radio-group v-model="form.rule">
<el-radio label="0">规则一</el-radio>
<el-radio label="1">规则二</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="active = 1">下一步</el-button>
<el-button @click="$router.go(-1)">取消</el-button>
</el-form-item>
</el-form>
</div>
<div class="step-two" v-if="active === 1">
<stepTwo @submit="submit" :data="step2Data"></stepTwo>
</div>
</app-card>
</div>
</template>
<script>
import stepTwo from '../components/stepTwo.vue'
import { createTemplate, getDetails, updateTemplate } from '../api'
// import UploadImage from '@/components/upload/UploadImage.vue'
// import { createBanner, getDetails, updateBanner } from '../api'
export default {
components: {
stepTwo
// UploadImage
},
data() {
return {
active: 1,
form: {
title: '',
rule: '0'
},
step2Data: {}
}
},
computed: {
id() {
return this.$route.query.id
}
},
methods: {
submit(data) {
if (this.$route.query.id) {
data.id = this.$route.query.id
updateTemplate(Object.assign(this.form, data)).then(res => {
this.$message({
message: '修改成功',
type: 'success'
})
this.$router.go(-1)
})
} else {
createTemplate(Object.assign(this.form, data)).then(res => {
this.$message({
message: '提交成功',
type: 'success'
})
this.$router.go(-1)
})
}
},
getDetails() {
getDetails({ id: this.id }).then(res => {
const data = res.data
this.form = {
title: data.title,
rule: data.rule
}
this.step2Data = JSON.parse(data.info)
})
}
},
mounted() {
if (this.id) {
this.getDetails()
}
}
}
</script>
<style lang="scss" scoped></style>
import httpRequest from '@/utils/axios'
/**
* 新建变量
*/
export function createVariable(data) {
return httpRequest.post('/api/cert/v1/backend/param/create', data)
}
/**
* 获取应用列表
*/
export function getAppList(params) {
return httpRequest.get('/api/cert/v1/backend/param/list', { params })
}
/**
* 更新
*/
export function updateVariable(data) {
return httpRequest.post('/api/cert/v1/backend/param/update', data)
}
/**
* 删除页面
*/
export function deleteVariable(data) {
return httpRequest.post('/api/cert/v1/backend/param/delete', data)
}
...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue' ...@@ -2,7 +2,7 @@ import AppLayout from '@/components/layout/Index.vue'
const routes = [ const routes = [
{ {
path: '/pages', path: '/variable',
component: AppLayout, component: AppLayout,
children: [ children: [
{ path: 'list', component: () => import('./views/List.vue') }, { path: 'list', component: () => import('./views/List.vue') },
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<div class="line"></div> <div class="line"></div>
<div class="btn-box"> <div class="btn-box">
<el-button type="primary" @click="$router.push({ path: '/pages/update' })">新建页面</el-button> <el-button type="primary" @click="$router.push({ path: '/variable/update' })">新建变量</el-button>
</div> </div>
<template v-slot:filter-time> <template v-slot:filter-time>
<el-date-picker <el-date-picker
...@@ -16,17 +16,6 @@ ...@@ -16,17 +16,6 @@
> >
</el-date-picker> </el-date-picker>
</template> </template>
<template v-slot:picture="{ row }">
<div :style="`background-image:url(${row.picture});background-size: cover;width:50px;height:40px;`"></div>
</template>
<template v-slot:release-status="{ row }">
<el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
</template>
<template v-slot:sort-select="{ row }">
<el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button> <el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button> <el-button type="text" @click="handleDelete(row)">删除</el-button>
...@@ -37,7 +26,7 @@ ...@@ -37,7 +26,7 @@
<script> <script>
// 接口 // 接口
import { getAppList, updatePages, deletePages } from '../api' import { getAppList, deleteVariable } from '../api'
export default { export default {
data() { data() {
...@@ -61,33 +50,16 @@ export default { ...@@ -61,33 +50,16 @@ export default {
remote: { remote: {
httpRequest: getAppList, httpRequest: getAppList,
params: { params: {
title: '', key: '',
status: '',
created_time_start: this.createdStart, created_time_start: this.createdStart,
created_time_end: this.createdEnd created_time_end: this.createdEnd
},
callback: res => {
res.map(item => {
item.status = !!parseInt(item.status)
return item
})
return res
} }
}, },
filters: [ filters: [
{ {
type: 'input', type: 'input',
prop: 'title', prop: 'key',
label: '标题:' label: '变量名称:'
},
{
type: 'select',
prop: 'status',
label: '发布状态:',
options: [
{ value: '0', label: '未发布' },
{ value: '1', label: '已发布' }
]
}, },
{ {
slots: 'filter-time', slots: 'filter-time',
...@@ -96,16 +68,8 @@ export default { ...@@ -96,16 +68,8 @@ export default {
], ],
columns: [ columns: [
{ label: 'id', prop: 'id', align: 'center' }, { label: 'id', prop: 'id', align: 'center' },
{ label: '页面类型', prop: 'type_name', align: 'center' }, { label: '变量名称', prop: 'key', align: 'center' },
{ label: '页面模板', prop: 'layout_name', align: 'center' },
{ label: '标题', prop: 'title', align: 'center' },
{
label: '发布状态',
slots: 'release-status',
align: 'center'
},
{ label: '创建时间', prop: 'created_time', align: 'center' }, { label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '排序', slots: 'sort-select', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center' } { label: '操作', slots: 'table-x', align: 'center' }
] ]
} }
...@@ -120,28 +84,15 @@ export default { ...@@ -120,28 +84,15 @@ export default {
} else { } else {
this.createdStart = '' this.createdStart = ''
this.createdEnd = '' this.createdEnd = ''
// this.$refs.list.refetch(true)
} }
}, },
// 更新发布状态 // 编辑
updateStatus(row) {
const params = row
params.status = row.status ? '1' : '0'
updatePages(row).then(res => {
if (res.code === 0) {
this.$message({
message: '修改成功',
type: 'success'
})
this.$refs.list.refetch(true)
}
})
},
handleEdit(row) { handleEdit(row) {
this.$router.push({ path: '/pages/update', query: { id: row.id } }) this.$router.push({ path: '/variable/update', query: { id: row.id, key: row.key, value: row.value } })
}, },
// 删除
handleDelete(row) { handleDelete(row) {
deletePages({ id: row.id }).then(res => { deleteVariable({ id: row.id }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '删除成功', message: '删除成功',
......
...@@ -8,26 +8,18 @@ ...@@ -8,26 +8,18 @@
class="demo-ruleForm" class="demo-ruleForm"
style="width: 50%; margin: 0 auto" style="width: 50%; margin: 0 auto"
> >
<el-form-item label="页面类型"> <el-form-item label="变量名称:">
<el-radio-group v-model="ruleForm.type"> <el-input v-model="ruleForm.key"></el-input>
<el-radio label="1">首页展示区</el-radio>
<el-radio label="2">二级列表页</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="页面模板"> <el-form-item label="变量字段:">
<el-radio-group v-model="ruleForm.layout"> <el-select v-model="ruleForm.value" placeholder="请选择">
<el-radio label="1">左图又文字</el-radio> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
<el-radio label="2">上图下文</el-radio> </el-select>
<el-radio label="3">文本</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="页面名称" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
<el-button type="primary" @click="submitForm">确认</el-button> <el-button type="primary" @click="submitForm">确认</el-button>
<el-button @click="drawer = true">取消</el-button> <el-button @click="$router.go(-1)">取消</el-button>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -36,15 +28,29 @@ ...@@ -36,15 +28,29 @@
</template> </template>
<script> <script>
import { createPages, getDetails, updatePages } from '../api' import { createVariable, updateVariable } from '../api'
export default { export default {
data() { data() {
return { return {
ruleForm: { ruleForm: {
type: '1', key: '',
layout: '1', value: ''
title: '' },
} options: [
{ label: '姓名', value: 'name' },
{ label: '电话', value: 'mobile' },
{ label: '身份证号码', value: 'id_number' },
{ label: '邮箱', value: 'email' },
{ label: '地址', value: 'address' },
{ label: '单位', value: 'company' },
{ label: '职位', value: 'position' },
{ label: '编号', value: 'number' },
{ label: '国籍', value: 'country' },
{ label: '省份', value: 'province' },
{ label: '城市', value: 'city' },
{ label: '行业', value: 'industry' },
{ label: '微信', value: 'wechat' }
]
} }
}, },
computed: { computed: {
...@@ -56,7 +62,7 @@ export default { ...@@ -56,7 +62,7 @@ export default {
// 提交 // 提交
submitForm() { submitForm() {
if (this.id) { if (this.id) {
updatePages(this.ruleForm).then(res => { updateVariable(this.ruleForm).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '编辑成功', message: '编辑成功',
...@@ -66,7 +72,7 @@ export default { ...@@ -66,7 +72,7 @@ export default {
} }
}) })
} else { } else {
createPages(this.ruleForm).then(res => { createVariable(this.ruleForm).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '提交成功', message: '提交成功',
...@@ -76,18 +82,15 @@ export default { ...@@ -76,18 +82,15 @@ export default {
} }
}) })
} }
},
// 获取详情
getDetails() {
getDetails({ id: this.id }).then(res => {
this.status = !!parseInt(res.data.status)
this.ruleForm = res.data
})
} }
}, },
mounted() { mounted() {
if (this.id) { if (this.id) {
this.getDetails() this.ruleForm = {
id: this.id,
key: this.$route.query.key,
value: this.$route.query.value
}
} }
} }
} }
......
...@@ -3,7 +3,7 @@ import VueRouter from 'vue-router' ...@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [{ path: '*', redirect: '/banner/list' }] const routes = [{ path: '*', redirect: '/template/list' }]
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
......
import { uploadFile, getSignature } from '@/api/base'
import md5 from 'blueimp-md5'
export function uploadBlob(blob) {
const fileName = `${Math.random().toString(36).slice(-8)}.png`
let fileUrl = ''
const key = 'upload/certificate/' + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
return new Promise((resolve, reject) => {
getSignature().then(response => {
const { accessid, policy, signature, host } = response
const data = { key, OSSAccessKeyId: accessid, policy, signature, success_action_status: '200', file: blob }
fileUrl = `${host}/${key}`
uploadFile(data).then(res => {
resolve(fileUrl)
})
})
})
}
export default function dragFun(dragBox, binding, call) {
dragBox.onmousedown = eDown => {
// 算出鼠标相对元素的位置
const disX = eDown.clientX - dragBox.offsetLeft
const disY = eDown.clientY - dragBox.offsetTop
let getPosition = {}
let isMove = false
document.onmousemove = e => {
// 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
const left = e.clientX - disX
const top = e.clientY - disY
// console.log(dragBox, '12312312')
// const right = binding.clientWidth - dragBox.clientWidth
// const bottom = binding.clientHeight - dragBox.clientHeight
// if (left < 0 || top < 0 || right < left || bottom < top) {
// return
// }
dragBox.style.left = left + 'px'
dragBox.style.top = top + 'px'
getPosition = {
top: top,
left: left
}
isMove = true
}
document.onmouseup = () => {
// 鼠标弹起来的时候不再移动
document.onmousemove = null
// 预防鼠标弹起来后还会循环(即预防鼠标放上去的时候还会移动)
document.onmouseup = null
if (isMove) {
isMove = false
call(getPosition)
}
}
}
}
...@@ -14,11 +14,11 @@ export default defineConfig({ ...@@ -14,11 +14,11 @@ export default defineConfig({
cert: fs.readFileSync(path.join(__dirname, './https/dev.ezijing.com.pem')) cert: fs.readFileSync(path.join(__dirname, './https/dev.ezijing.com.pem'))
}, },
proxy: { proxy: {
'/api/road': { '/api/cert': {
target: 'https://project-road-backend-api.ezijing.com', target: 'https://cert-backend-api.ezijing.com',
// target: 'http://localhost-activity-backend.ezijing.com', // target: 'http://localhost-activity-backend.ezijing.com',
changeOrigin: true, changeOrigin: true,
rewrite: path => path.replace(/^\/api\/road/, '') rewrite: path => path.replace(/^\/api\/cert/, '')
}, },
'/api': 'https://project-api.ezijing.com' '/api': 'https://project-api.ezijing.com'
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论