Skip to content

C
center-certificate
提交 41564afc authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 9bdb11c5
隐藏空白字符变更
内嵌 并排
正在显示 包含 276 行增加 和 517 行删除
src/assets/css/base.css
浏览文件 @ 41564afc
...@@ -95,3 +95,6 @@ textarea:focus { ...@@ -95,3 +95,6 @@ textarea:focus {
color: rgba(0,0,0,1); color: rgba(0,0,0,1);
line-height: 100%; line-height: 100%;
} }
.tox-notifications-container{
display: none;
}
src/components/base/EditStyle copy.vue deleted 100644 → 0
浏览文件 @ 9bdb11c5
<template>
<div class="edit-style-box">
<div class="title">{{ title }}</div>
<div class="f-type">
<template v-if="type == 1">
<el-input
type="textarea"
style="margin-top: 15px"
v-model="returnData.textValue"
placeholder="请输入"
@input="changeText"
></el-input>
</template>
<template v-if="type == 3 || type == 0">
<div class="upload-img">
<div class="btn">上传图片</div>
<UploadImage class="upload" style="width: 50px" v-model="imageUrl" @input="uploadImg"></UploadImage>
</div>
</template>
</div>
<div class="tool-select">
<div v-for="(item, index) in toolList" :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" 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-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 === 'height'">
<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 === 'zIndex'">
<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>
</div>
</div>
</template>
<script>
import UploadImage from '@/components/upload/UploadImage.vue'
export default {
components: {
UploadImage
},
props: {
type: { type: Number },
// 工具框大标题
title: { type: String },
// 工具框小标题
subTitle: { type: String },
// 共有多少个工具
tool: { type: Array },
// 一组数据的话工具框的下标
toolIndex: { type: Number, default: 0 },
// 输入框最多输入的长度
valueMaxLength: { type: Number, default: 10 },
// 回显的数据
echoData: {
type: Object,
default: () => {
return {}
}
},
id: { type: String },
dataFlag: { type: String },
textValue: { type: String }
},
data() {
return {
// 设置样式
toolList: [],
// 最后返回的数据
returnData: {
textValue: ''
},
// 图片的url
imageUrl: ''
}
},
mounted() {
if (this.textValue !== undefined) {
this.returnData.textValue = this.textValue
// this.$forceUpdate()
}
this.setToolData()
},
methods: {
// 文字输入
changeText() {
this.setStyleData()
const data = Object.assign({ originalData: this.toolList }, this.returnData)
data.toolIndex = this.toolIndex
data.id = this.id
data.type = this.type
this.$emit('changeText', data)
},
// 上传img
uploadImg() {
this.setStyleData()
const data = Object.assign({ originalData: this.toolList }, this.returnData)
data.toolIndex = this.toolIndex
data.id = this.id
data.url = this.imageUrl
data.type = this.type
this.$emit('imgUpload', data)
},
// 通过父组件传来的tool重组数据渲染
setToolData() {
const data = [
{
name: 'fontSize',
styleName: 'font-size',
value: '12px',
option: this.setOption(12, 30, 2, 'px')
},
{
name: 'fontColor',
styleName: 'color',
value: '#000000'
},
{
name: 'fontLineH',
styleName: 'line-height',
value: '12px',
option: this.setOption(12, 50, 1, 'px')
},
{
name: 'fontFamily',
styleName: 'font-family',
value: 'fangsong',
option: [{ value: 'fangsong', label: 'fangsong' }]
},
{
name: 'borderRadius',
styleName: 'border-radius',
value: '15px',
option: this.setOption(1, 15, 1, 'px')
},
{
name: 'bgColor',
styleName: 'background',
value: '#000000'
},
{
name: 'fontPosition',
styleName: 'padding',
value: '5px 20px',
option: [
{ value: '5px 20px', label: '居中' },
{ value: '5px 20px 5px 0', label: '居左' },
{ value: '5px 0 5px 20px', label: '居右' }
]
},
{
name: 'width',
styleName: 'width',
value: '500px',
option: this.setOption(0, 800, 1, 'px', 'auto')
},
{
name: 'height',
styleName: 'height',
value: '300px',
option: this.setOption(0, 1000, 1, 'px', 'auto')
},
{
name: 'zIndex',
styleName: 'z-index',
value: '1',
option: this.setOption(0, 50, 1)
}
]
this.toolList = this.tool.reduce((a, b) => {
const item = data.find(i => i.name === b.name)
item && a.push(Object.assign(item, b))
return a
}, [])
},
// 重新组合对象变成父组件需要的
setStyleData() {
this.returnData.style = this.toolList
.reduce((a, b) => {
a.push(`${b.styleName}: ${b.value};`)
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() {
this.setStyleData()
const data = Object.assign({ originalData: this.toolList }, this.returnData)
data.toolIndex = this.toolIndex
data.id = this.id
data.type = this.type
this.$emit('data', data)
}
},
computed: {
toolListWat() {
return this.toolList // 深拷贝需要监听的对象数据
},
returnDataWat() {
return this.returnData // 深拷贝需要监听的对象数据
}
}
}
</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;
&::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>
src/components/base/EditStyle.vue
浏览文件 @ 41564afc
<template> <template>
<div> <div>
<div class="edit-style-box"> <div :class="data.type != '1' ? 'active edit-style-box' : '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"> <div class="f-type">
<template v-if="data.type == 3 || data.type == 0"> <template v-if="data.type == 3 || data.type == 0">
<div class="upload-img"> <div class="upload-img">
...@@ -18,7 +14,7 @@ ...@@ -18,7 +14,7 @@
</div> </div>
</template> </template>
</div> </div>
<div class="tool-select"> <div :class="data.type == '1' ? 'active tool-select' : 'tool-select'">
<div v-for="(item, index) in data.tool" :key="index"> <div v-for="(item, index) in data.tool" :key="index">
<div class="tool-item" v-if="item.name === 'fontSize'"> <div class="tool-item" v-if="item.name === 'fontSize'">
<div class="tit">字体大小</div> <div class="tit">字体大小</div>
...@@ -218,35 +214,50 @@ export default { ...@@ -218,35 +214,50 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tool-title {
width: 320px;
display: flex;
justify-content: space-between;
align-items: center;
.icons {
display: flex;
i {
color: #2c2c2c;
margin-left: 13px;
}
}
}
.edit-style-box { .edit-style-box {
&.active {
padding: 5px 23px 0;
border: 1px solid #eef0f2;
}
width: 320px; width: 320px;
padding: 22px 23px 0; margin-top: 10px;
background: rgba(248, 248, 248, 0.39); // margin-bottom: 24px;
border-radius: 16px;
margin-bottom: 60px;
position: relative; position: relative;
.close-btn { .close-btn {
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; right: 15px;
} }
&::before { // &::before {
content: ''; // content: '';
width: 100%; // width: 100%;
position: absolute; // position: absolute;
bottom: -30px; // bottom: -30px;
left: 0; // left: 0;
border-bottom: 1px solid #e3e3e3; // border-bottom: 1px solid #e3e3e3;
} // }
.title { .title {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 11px; // line-height: 11px;
color: #333333; color: #333333;
} }
.f-type { .f-type {
padding-top: 21px; // padding-top: 21px;
.tit { .tit {
font-size: 14px; font-size: 14px;
line-height: 100%; line-height: 100%;
...@@ -255,18 +266,18 @@ export default { ...@@ -255,18 +266,18 @@ export default {
.btn { .btn {
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
background: #1655B2; background: #1655b2;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
margin-top: 8px; margin-top: 8px;
border: 1px solid #1655B2; border: 1px solid #1655b2;
cursor: pointer; cursor: pointer;
&.active { &.active {
background: rgba(237, 245, 243, 0.39); background: rgba(237, 245, 243, 0.39);
border: 1px solid #1655B2; border: 1px solid #1655b2;
border-radius: 6px; border-radius: 6px;
color: #1655B2; color: #1655b2;
} }
} }
} }
...@@ -275,6 +286,11 @@ export default { ...@@ -275,6 +286,11 @@ export default {
padding-top: 15px; padding-top: 15px;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
&.active{
border: 1px solid #ccc;
border-top: 0;
padding: 20px 23px 0;
}
.tool-item { .tool-item {
// min-width: 127px; // min-width: 127px;
width: 127px; width: 127px;
......
src/modules/student/views/Update.vue
浏览文件 @ 41564afc
...@@ -16,40 +16,37 @@ ...@@ -16,40 +16,37 @@
<el-input v-model="ruleForm.mobile"></el-input> <el-input v-model="ruleForm.mobile"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="身份证号"> <el-form-item label="身份证号">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.id_number"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮箱"> <el-form-item label="邮箱">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.email"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地址"> <el-form-item label="地址">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.address"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="单位"> <el-form-item label="单位">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.company"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="职位"> <el-form-item label="职位">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.position"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="编号"> <el-form-item label="编号">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.number"></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="国籍"> <el-form-item label="国籍">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.country"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="省份"> <el-form-item label="省份">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.province"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="城市"> <el-form-item label="城市">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.city"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="行业"> <el-form-item label="行业">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.industry"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="微信"> <el-form-item label="微信">
<el-input v-model="ruleForm.title"></el-input> <el-input v-model="ruleForm.wechat"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="关联项目"> <el-form-item label="关联项目">
<el-select @change="$forceUpdate()" filterable multiple v-model="ruleForm.projects_id" placeholder="请选择"> <el-select @change="$forceUpdate()" filterable multiple v-model="ruleForm.projects_id" placeholder="请选择">
......
src/modules/template/api.js
浏览文件 @ 41564afc
...@@ -36,55 +36,22 @@ export function updateTemplate(data) { ...@@ -36,55 +36,22 @@ export function updateTemplate(data) {
} }
/** /**
* 更新banner * 更新模板
*/ */
export function updateBanner(data) { export function updateBanner(data) {
return httpRequest.post('/api/cert/v1/backend/template/update', data) return httpRequest.post('/api/cert/v1/backend/template/update', data)
} }
/** /**
* 删除banner * 删除模板
*/ */
export function deleteBanner(data) { export function deleteTemplate(data) {
return httpRequest.post('/api/road/v1/backend/banner/delete', data) return httpRequest.post('/api/cert/v1/backend/template/delete', data)
} }
// /** /**
// * 获取应用列表 * 获取项目列表
// */ */
// export function getAppList(params) { export function getProjectList(params) {
// return httpRequest.get('/api/register/v1/activity/index', { params }) return httpRequest.get('/api/cert/v1/backend/project/list', { 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)
// }
src/modules/template/components/stepTwo.vue
浏览文件 @ 41564afc
...@@ -2,16 +2,30 @@ ...@@ -2,16 +2,30 @@
<div class="edit-cert-box"> <div class="edit-cert-box">
<!-- <div @click="toImage">111</div> --> <!-- <div @click="toImage">111</div> -->
<div class="tool-left"> <div class="tool-left">
<div style="padding-right: 20px; border-right: 1px solid #e3e3e3"> <div>
<div class="tool-title">
<div class="title">{{ certBoxEditStyle.title }}</div>
</div>
<editStyle @data="changeStyle" :data="certBoxEditStyle"></editStyle> <editStyle @data="changeStyle" :data="certBoxEditStyle"></editStyle>
<template v-for="(item, index) in certElement"> <div v-for="(item, index) in certElement" :key="index" style="margin-top: 20px">
<div v-if="item.show" :key="index" @click="domShow(item.id)"> <div class="tool-title" @click="domShow(item.id)">
<div class="title">
{{ item.title }}<span> (层级{{ index + 1 }})</span>
</div>
<div class="icons">
<i class="el-icon-delete-solid" @click="deleteEdit(item)"></i>
<i class="el-icon-arrow-down" v-if="item.show"></i>
<i class="el-icon-arrow-right" v-else></i>
</div>
</div>
<div v-if="item.show">
<editStyle @delete="deleteEdit" @imgUpload="imgUpload" @data="changeStyle" :data="item"></editStyle> <editStyle @delete="deleteEdit" @imgUpload="imgUpload" @data="changeStyle" :data="item"></editStyle>
</div> </div>
</template> </div>
</div> </div>
<div class="tool-btn"> <div class="tool-btn" @click="dialogVisible = true">
<el-button type="primary" @click="dialogVisible = true">添加元素</el-button> <i class="el-icon-plus"></i>
<div class="txt">添加元素</div>
</div> </div>
</div> </div>
<div class="tool-right"> <div class="tool-right">
...@@ -111,7 +125,7 @@ export default { ...@@ -111,7 +125,7 @@ export default {
type: '-1', type: '-1',
title: '证书设置', title: '证书设置',
tool: [ tool: [
{ name: 'proportionWidth', value: 1, option: [1, 20, 1] }, { name: 'proportionWidth', value: 2, option: [1, 20, 1] },
{ name: 'proportionHeight', value: 1, option: [1, 20, 1] } { name: 'proportionHeight', value: 1, option: [1, 20, 1] }
], ],
style: '' style: ''
...@@ -125,27 +139,26 @@ export default { ...@@ -125,27 +139,26 @@ export default {
}, },
computed: {}, computed: {},
mounted() { mounted() {
console.log(this.data, '123')
if (this.$route.query.id) { if (this.$route.query.id) {
this.certElement = this.data.certElement this.certElement = this.data.certElement
this.$nextTick(() => { this.$nextTick(() => {
this.certElement.forEach(item => { this.certElement.forEach(item => {
console.log(item, 'itemtiem')
this.dragInit(item.id, item) this.dragInit(item.id, item)
}) })
}) })
this.dynamicId = this.certElement.length + 1
this.certBoxEditStyle = this.data.certBoxEditStyle this.certBoxEditStyle = this.data.certBoxEditStyle
} }
document.onclick = () => {
if (this.certElement.length && this.isShowFlag) {
this.certElement.map(item => {
item.show = false
return item
})
}
}
this.setCertBox() this.setCertBox()
this.getParamOptions() this.getParamOptions()
// document.onclick = () => {
// if (this.certElement.length && this.isShowFlag) {
// this.certElement.map(item => {
// item.show = false
// return item
// })
// }
// }
}, },
methods: { methods: {
// 提交 // 提交
...@@ -250,16 +263,13 @@ export default { ...@@ -250,16 +263,13 @@ export default {
}) })
}, },
domShow(id) { domShow(id) {
this.isShowFlag = false
setTimeout(() => { setTimeout(() => {
this.certElement.map(item => { this.certElement.map(item => {
item.show = false if (this.isShowFlag) {
item.id === id ? (item.show = !item.show) : (item.show = false)
}
return item return item
}) })
const index = this.certElement.findIndex(item => item.id === id)
if (this.certElement[index]) {
this.certElement[index].show = true
}
this.isShowFlag = true this.isShowFlag = true
}, 100) }, 100)
}, },
...@@ -270,6 +280,10 @@ export default { ...@@ -270,6 +280,10 @@ export default {
}, },
// 添加元素 // 添加元素
addElement() { addElement() {
this.certElement.map(item => {
item.show = false
return item
})
setTimeout(() => { setTimeout(() => {
this.dynamicId++ this.dynamicId++
const certBox = document.getElementById('edit-dom-1') const certBox = document.getElementById('edit-dom-1')
...@@ -277,11 +291,11 @@ export default { ...@@ -277,11 +291,11 @@ export default {
if (this.selectElement === 0) { if (this.selectElement === 0) {
this.certElement.push({ this.certElement.push({
type: this.selectElement, type: this.selectElement,
title: '上传图片', title: '图片',
tool: [ tool: [
{ name: 'width', value: certBox.offsetWidth }, { name: 'width', value: certBox.offsetWidth },
{ name: 'height', value: '' }, { name: 'height', value: '' },
{ name: 'zIndex', value: '1' } { name: 'zIndex', value: this.certElement.length + 1 + '' }
], ],
url: '', url: '',
show: true, show: true,
...@@ -292,7 +306,20 @@ export default { ...@@ -292,7 +306,20 @@ export default {
this.certElement.push({ this.certElement.push({
title: '文字', title: '文字',
type: this.selectElement, type: this.selectElement,
tool: [{ name: 'zIndex', value: '1' }], tool: [
{ name: 'zIndex', value: this.certElement.length + 1 + '' },
{
name: 'fontFamily',
value: 'songti',
optionDiv: [
{ label: '宋体', value: 'songti' },
{ label: '黑体', value: 'heiti' },
{ label: '楷体', value: 'kaiti' },
{ label: '行楷', value: 'hangkai' }
]
},
{ name: 'fontColor', value: '#000000' }
],
html: '请输入内容', html: '请输入内容',
show: true, show: true,
id: `edit-dom-${this.dynamicId}` id: `edit-dom-${this.dynamicId}`
...@@ -356,7 +383,7 @@ export default { ...@@ -356,7 +383,7 @@ export default {
}, },
{ name: 'width', value: '100' }, { name: 'width', value: '100' },
{ name: 'height', value: '100' }, { name: 'height', value: '100' },
{ name: 'zIndex', value: '1' } { name: 'zIndex', value: this.certElement.length + 1 + '' }
], ],
show: true, show: true,
id: `edit-dom-${this.dynamicId}` id: `edit-dom-${this.dynamicId}`
...@@ -388,13 +415,17 @@ export default { ...@@ -388,13 +415,17 @@ export default {
// 初始化拖拽 // 初始化拖拽
dragInit(id, item) { dragInit(id, item) {
const dom = document.getElementById(id) const dom = document.getElementById(id)
console.log(id, 'dom')
if (item) { if (item) {
dom.style.top = item.top + 'px' || 0 dom.style.top = item.top + 'px' || 0
dom.style.left = item.left + 'px' || 0 dom.style.left = item.left + 'px' || 0
} }
this.$nextTick(() => { this.$nextTick(() => {
drag(dom, document.getElementById('#edit-dom-1'), res => { drag(dom, document.getElementById('#edit-dom-1'), res => {
console.log(id, '123')
const d = this.certElement.find(i => i.id === id).show
if (d) {
this.isShowFlag = false
}
dom.style.top = res.top dom.style.top = res.top
dom.style.left = res.left dom.style.left = res.left
const index = this.certElement.findIndex(item => item.id === id) const index = this.certElement.findIndex(item => item.id === id)
...@@ -408,13 +439,35 @@ export default { ...@@ -408,13 +439,35 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tool-title {
width: 320px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
.title {
font-size: 14px;
color: #000000;
span {
color: #777484;
font-size: 14px;
}
}
.icons {
display: flex;
i {
color: #2c2c2c;
margin-left: 13px;
}
}
}
.edit-cert-box { .edit-cert-box {
display: flex; display: flex;
padding-top: 30px; padding-top: 30px;
} }
.tool-left { .tool-left {
min-width: 340px; min-width: 340px;
margin-right: 20px; // margin-right: 20px;
.tool-btn { .tool-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -436,6 +489,7 @@ export default { ...@@ -436,6 +489,7 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
font-family: 'songti'; font-family: 'songti';
z-index: 1;
&.active { &.active {
.pop { .pop {
&::after { &::after {
...@@ -446,7 +500,7 @@ export default { ...@@ -446,7 +500,7 @@ export default {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: 3px dashed red; border: 3px dashed #004992;
box-sizing: border-box; box-sizing: border-box;
} }
} }
...@@ -457,6 +511,7 @@ export default { ...@@ -457,6 +511,7 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1;
} }
} }
.text2 { .text2 {
...@@ -469,6 +524,7 @@ export default { ...@@ -469,6 +524,7 @@ export default {
font-size: 16px; font-size: 16px;
color: #000; color: #000;
line-height: 20px; line-height: 20px;
z-index: 1;
&.active { &.active {
.pop { .pop {
&::after { &::after {
...@@ -479,7 +535,7 @@ export default { ...@@ -479,7 +535,7 @@ export default {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: 3px dashed red; border: 1px dashed #004992;
box-sizing: border-box; box-sizing: border-box;
} }
} }
...@@ -490,6 +546,7 @@ export default { ...@@ -490,6 +546,7 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1;
} }
} }
} }
...@@ -508,7 +565,7 @@ export default { ...@@ -508,7 +565,7 @@ export default {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: 3px dashed red; border: 1px dashed #004992;
box-sizing: border-box; box-sizing: border-box;
} }
} }
...@@ -538,4 +595,23 @@ export default { ...@@ -538,4 +595,23 @@ export default {
font-family: 'heiti'; font-family: 'heiti';
src: url('@/assets/font/No.164-ShangShouJianZhengTi-2.ttf'); src: url('@/assets/font/No.164-ShangShouJianZhengTi-2.ttf');
} }
.tool-btn {
display: flex;
width: 112px;
height: 32px;
border: 1px solid #124ca2;
justify-content: center;
align-items: center;
cursor: pointer;
margin-top: 20px;
i {
font-size: 14px;
color: #124ca2;
margin-right: 5px;
}
.txt {
font-size: 14px;
color: #124ca2;
}
}
</style> </style>
src/modules/template/views/List.vue
浏览文件 @ 41564afc
...@@ -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: '/template/update' })">新建模板</el-button> <el-button type="primary" @click="dialogVisible = true">新建模板</el-button>
</div> </div>
<template v-slot:filter-time> <template v-slot:filter-time>
<el-date-picker <el-date-picker
...@@ -28,12 +28,36 @@ ...@@ -28,12 +28,36 @@
<div class="img-view" v-if="imgViewShow" @click="imgViewShow = false"> <div class="img-view" v-if="imgViewShow" @click="imgViewShow = false">
<img :src="imgView" alt="" /> <img :src="imgView" alt="" />
</div> </div>
<el-dialog title="添加证书模板" :visible.sync="dialogVisible" width="600px">
<el-form
:rules="rules"
ref="form"
:model="form"
label-width="110px"
class="demo-ruleForm"
style="width: 80%; margin: 0 auto"
>
<el-form-item label="模板名称" prop="title">
<el-input v-model="form.title" placeholder="请填写模板名称"></el-input>
</el-form-item>
<el-form-item label="编号生成规则" prop="rule">
<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>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="uploadTemplate">确 定</el-button>
</span>
</el-dialog>
</app-card> </app-card>
</template> </template>
<script> <script>
// 接口 // 接口
import { getAppList, updateBanner, deleteBanner, getDetails } from '../api' import { getAppList, updateBanner, deleteTemplate, getDetails, getProjectList } from '../api'
export default { export default {
data() { data() {
...@@ -42,13 +66,23 @@ export default { ...@@ -42,13 +66,23 @@ export default {
count.push({ value: i, options: i }) count.push({ value: i, options: i })
} }
return { return {
form: {
title: '',
rule: '0'
},
dialogVisible: false,
imgViewShow: false, imgViewShow: false,
imgView: '', imgView: '',
value1: '', value1: '',
filterDate: '', filterDate: '',
options: count, options: count,
createdStart: '', createdStart: '',
createdEnd: '' createdEnd: '',
projectList: [],
rules: {
title: [{ required: true, message: '请填模板名称', trigger: 'blur' }],
rule: [{ required: true, message: '请选择', trigger: 'blur' }]
}
} }
}, },
computed: { computed: {
...@@ -89,12 +123,11 @@ export default { ...@@ -89,12 +123,11 @@ export default {
}, },
{ {
type: 'select', type: 'select',
prop: 'project', prop: 'project_id',
label: '项目:', label: '所属项目:',
options: [ labelKey: 'title',
{ value: '0', label: '未发布' }, valueKey: 'id',
{ value: '1', label: '已发布' } options: this.projectList
]
}, },
{ {
slots: 'filter-time', slots: 'filter-time',
...@@ -112,6 +145,19 @@ export default { ...@@ -112,6 +145,19 @@ export default {
} }
}, },
methods: { methods: {
uploadTemplate() {
if (this.form.title === '') return
this.$router.push({
path: '/template/update',
query: this.form
})
},
// 项目列表
getProjectList() {
getProjectList().then(res => {
this.projectList = res.data.list
})
},
// 时间搜索 // 时间搜索
changeDate() { changeDate() {
if (this.filterDate) { if (this.filterDate) {
...@@ -141,7 +187,7 @@ export default { ...@@ -141,7 +187,7 @@ export default {
this.$router.push({ path: '/template/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 => { deleteTemplate({ id: row.id }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '删除成功', message: '删除成功',
...@@ -157,11 +203,14 @@ export default { ...@@ -157,11 +203,14 @@ export default {
this.imgViewShow = true this.imgViewShow = true
}) })
} }
},
mounted() {
this.getProjectList()
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.register-box { .register-box {
.el-form-item { .el-form-item {
margin-right: 20px !important; margin-right: 20px !important;
...@@ -193,4 +242,11 @@ export default { ...@@ -193,4 +242,11 @@ export default {
width: 50%; width: 50%;
} }
} }
::v-deep {
.el-dialog__body {
border-top: 1px solid #f0f0f0 !important;
border-bottom: 1px solid #f0f0f0 !important;
margin: 10px 0;
}
}
</style> </style>
src/modules/template/views/Update.vue
浏览文件 @ 41564afc
<template> <template>
<div class="create-box"> <div class="create-box">
<app-card :title="!$route.query.id ? '新建模板' : '编辑模板'"> <app-card :title="!$route.query.id ? '新建模板' : '编辑模板'">
<el-steps :active="active" finish-status="success"> <!-- <el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step> <el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step> <el-step title="步骤 2"></el-step>
</el-steps> </el-steps>
...@@ -21,10 +21,15 @@ ...@@ -21,10 +21,15 @@
<el-button @click="$router.go(-1)">取消</el-button> <el-button @click="$router.go(-1)">取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div> -->
<div class="step-two" v-if="active === 1"> <template v-if="$route.query.id">
<stepTwo @submit="submit" v-if="Object.keys(step2Data).length" :data="step2Data"></stepTwo>
</template>
<template v-else>
<stepTwo @submit="submit" :data="step2Data"></stepTwo> <stepTwo @submit="submit" :data="step2Data"></stepTwo>
</div> </template>
<!-- <div class="step-two" v-if="active === 1">
</div> -->
</app-card> </app-card>
</div> </div>
</template> </template>
...@@ -56,23 +61,39 @@ export default { ...@@ -56,23 +61,39 @@ export default {
}, },
methods: { methods: {
submit(data) { submit(data) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
if (this.$route.query.id) { if (this.$route.query.id) {
data.id = this.$route.query.id data.id = this.$route.query.id
updateTemplate(Object.assign(this.form, data)).then(res => { updateTemplate(Object.assign(this.form, data))
this.$message({ .then(res => {
message: '修改成功', this.$message({
type: 'success' message: '修改成功',
type: 'success'
})
this.$router.go(-1)
loading.close()
})
.catch(() => {
loading.close()
}) })
this.$router.go(-1)
})
} else { } else {
createTemplate(Object.assign(this.form, data)).then(res => { createTemplate(Object.assign({ title: this.$route.query.title, rule: this.$route.query.rule }, data))
this.$message({ .then(res => {
message: '提交成功', this.$message({
type: 'success' message: '提交成功',
type: 'success'
})
this.$router.go(-1)
loading.close()
})
.catch(() => {
loading.close()
}) })
this.$router.go(-1)
})
} }
}, },
getDetails() { getDetails() {
......
src/modules/variable/views/List.vue
浏览文件 @ 41564afc
...@@ -38,12 +38,6 @@ ...@@ -38,12 +38,6 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item>
<div style="padding-top: 20px">
<el-button type="primary" @click="submitForm">确认</el-button>
<el-button @click="$router.go(-1)">取消</el-button>
</div>
</el-form-item> -->
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论