elink-star
/
tduck-front
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'epmet/dev_ljj' into dev_ljj

old
jianjun 4 years ago
parent
1802a7562a 02c2e136f3
commit
e9778450ef
9 changed files with 935 additions and 906 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/generator/config.js
  2. 38
      src/components/parser/Parser.vue
  3. 2
      src/utils/constants.js
  4. 240
      src/views/account/member.vue
  5. 2
      src/views/form/editor/RightPanel.vue
  6. 4
      src/views/form/index.vue
  7. 7
      src/views/form/publish/index.vue
  8. 2
      src/views/form/setting/index.vue
  9. 248
      src/views/form/theme/index.vue

6
src/components/generator/config.js
View File

@ -514,7 +514,7 @@ export const selectComponents = [
__slot__: {
'list-type': true
},
action: process.env.VUE_APP_API_ROOT + '/project/file/upload/',
action: process.env.VUE_APP_API_ROOT +process.env.VUE_APP_API_ROOT_TDUCK+ '/project/file/upload/',
disabled: false,
accept: '',
name: 'file',
@ -665,7 +665,7 @@ export const assistComponents = [
},
color: '#000000',
style: {width: '100%'},
action: '/project/file/upload/'
action:`${process.env.VUE_APP_API_ROOT_TDUCK}/project/file/upload/`
},
{
typeId: 'SIGN_PAD',
@ -689,7 +689,7 @@ export const assistComponents = [
},
color: '#000000',
style: {width: '100%'},
action: '/project/file/upload/'
action: `${process.env.VUE_APP_API_ROOT_TDUCK}/project/file/upload/`
},
{
typeId: 'PAGINATION',

38
src/components/parser/Parser.vue
View File

@ -183,7 +183,7 @@ function setValue (event, config, scheme) {
if (flag) {
// 防止表单重新渲染 display被刷新
this.logicTriggerItemList.push(r.triggerFormItemId)
console.log(this.logicTriggerItemList)
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = ''
} else {
_.remove(this.logicTriggerItemList, function (n) {
@ -240,7 +240,6 @@ function setOtherValueLabel (event, config) {
// 临时保存其他的选项值
this.$nextTick(() => {
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event)
console.log(this[this.formConf.labelFormModel])
setValueLabel.call(this, value, config.__config__, config)
})
@ -255,23 +254,21 @@ function setOtherValueLabel (event, config) {
* @param scheme
*/
function setValueLabel (event, config, scheme) {
console.log(event)
console.log(config)
console.log(scheme)
// 需要处理的类型 如果是input等则不需要处理
let tagOptionKey = processType[config.tag]
debugger
if (tagOptionKey) {
if (event instanceof Array) {
// 多选 其他自定义输入
if (!event.includes(0) && config.tag != 'el-cascader') {
// 如果多选里没有选择其他，就清掉other
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
// 同时把输入框清空
document.querySelector('.' + config.tag).querySelector('.item-other-input').value = ''
}
// if (!event.includes(0) && config.tag != 'el-cascader') {
// // 如果多选里没有选择其他，就清掉other
// this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
// // 同时把输入框清空
// document.querySelector('.' + config.tag).querySelector('.item-other-input').value = ''
// }
// debugger
if (config.tag === 'el-cascader') {
@ -301,13 +298,13 @@ function setValueLabel (event, config, scheme) {
}
console.log('最终结果')
console.log(this[this.formConf.labelFormModel])
} else {
// 单选 其他自定义输入
if (event == 0) {
console.log(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`])
// 如果选择了其他，把label存在field字段，把输入框内容存在fieldother字段
let item = _.find(_.get(scheme, tagOptionKey), { 'value': event })
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label)
@ -315,10 +312,10 @@ function setValueLabel (event, config, scheme) {
} else {
let item = _.find(_.get(scheme, tagOptionKey), { 'value': event })
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label)
// 如果没有选择其他，就清掉other
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
// 同时把输入框清空
document.querySelector('.' + config.tag).querySelector('.item-other-input').value = '""'
// // 如果没有选择其他，就清掉other
// this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
// // 同时把输入框清空
// document.querySelector('.' + config.tag).querySelector('.item-other-input').value = '""'
}
}
} else if (config.tag === 'el-upload') {
@ -326,6 +323,9 @@ function setValueLabel (event, config, scheme) {
} else {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
}
console.log('最终结果')
console.log(this[this.formConf.labelFormModel])
}
function getCascaderData (array, tagOptionKey, scheme) {

2
src/utils/constants.js
View File

@ -4,7 +4,7 @@ export default {
// 密码正则
passwordReg: /^.{6,}$/,
passwordRegDesc: '密码最少为6位字符',
userUploadUrl: `${process.env.VUE_APP_API_ROOT}/user/file/upload`,
userUploadUrl: `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload`,
// 启用微信功能
// enableWx: process.env.VUE_APP_WX == 'OFF'
enableWx: false

240
src/views/account/member.vue
View File

@ -3,40 +3,52 @@
<el-card class="member-box-card">
<div class="member-info-view">
<p class="title pl-10">个人信息</p>
<div v-if="userInfo" class="account-info-view">
<div v-if="userInfo"
class="account-info-view">
<table>
<tbody>
<tr>
<td width="80" style="text-align: right;">用户名：</td>
<td width="80"
style="text-align: right;">用户名：</td>
<td>
{{ userInfo.name }}
<el-button type="text" @click="editNameDialogVisible=true">
<el-button type="text"
@click="editNameDialogVisible=true">
修改
</el-button>
</td>
</tr>
<tr>
<td width="80" style="text-align: right;">账号邮箱：</td>
<td width="80"
style="text-align: right;">账号邮箱：</td>
<td>
{{ userInfo.email }}
<el-button type="text" @click="emailDialogVisible=true">绑定</el-button>
<el-button type="text"
@click="emailDialogVisible=true">绑定</el-button>
</td>
</tr>
<tr>
<td width="80" style="text-align: right;">密码：</td>
<td width="80"
style="text-align: right;">密码：</td>
<td>
******
<el-button type="text" @click="pwdDialogVisible=true">修改</el-button>
<el-button type="text"
@click="pwdDialogVisible=true">修改</el-button>
</td>
</tr>
<tr>
<td width="80" style="text-align: right;">手机号：</td>
<td width="80"
style="text-align: right;">手机号：</td>
<td>
{{ userInfo.phoneNumber }}
<el-button v-if="userInfo.phoneNumber" type="text" @click="phoneDialogVisible=true">
<el-button v-if="userInfo.phoneNumber"
type="text"
@click="phoneDialogVisible=true">
修改
</el-button>
<el-button v-else type="text" @click="phoneDialogVisible=true">绑定</el-button>
<el-button v-else
type="text"
@click="phoneDialogVisible=true">绑定</el-button>
</td>
</tr>
</tbody>
@ -49,66 +61,70 @@
:url="getUploadUrl()"
:headers="getUploadHeader()"
img-format="png"
@crop-upload-success="cropUploadSuccess"
/>
<el-avatar
style="width: 100px; height: 100px;"
@crop-upload-success="cropUploadSuccess" />
<el-avatar style="width: 100px; height: 100px;"
:src="userInfo.avatar"
@click.native="showUploadAvatar=true"
/>
@click.native="showUploadAvatar=true" />
<div style="margin-left: 10px; margin-top: 5px;">
<el-button @click.native="showUploadAvatar=true">更换头像</el-button>
</div>
</div>
</div>
<p class="title pl-10">第三方账号</p>
<div v-if="userInfo" class="account-info-view">
<div v-if="userInfo"
class="account-info-view">
<div style="margin-left: 30px; display: flex; flex-direction: row;">
<div class="account-icon-view">
<font-icon class="fab fa-weixin icon" :style="{color:userInfo.wxName?'#3F9F3F':''}" />
<font-icon class="fab fa-weixin icon"
:style="{color:userInfo.wxName?'#3F9F3F':''}" />
<span v-if="userInfo.wxName">
{{ userInfo.wxName }}(已绑定)
</span>
<el-button v-else type="text" @click="bindWxHandle">绑定</el-button>
<el-button v-else
type="text"
@click="bindWxHandle">绑定</el-button>
<el-dialog title="微信扫描二维码绑定"
width="400px"
center
:visible.sync="bindWxDialogVisible"
>
<el-image
style="width: 150px; height: 150px; display: block; margin: 0 auto;"
:visible.sync="bindWxDialogVisible">
<el-image style="width: 150px; height: 150px; display: block; margin: 0 auto;"
:src="bindWxQrcode"
fit="fill"
/>
fit="fill" />
</el-dialog>
</div>
<div class="account-icon-view">
<font-icon class="fa fa-qq icon" :style="{color:userInfo.qqName?'#078DF0':''}" />
<font-icon class="fa fa-qq icon"
:style="{color:userInfo.qqName?'#078DF0':''}" />
<span v-if="userInfo.qqName">
{{ userInfo.qqName }}(已绑定)
</span>
<el-button v-else type="text" @click="redirectUrl(qqLoginAuthorizeUrl)">绑定</el-button>
<el-button v-else
type="text"
@click="redirectUrl(qqLoginAuthorizeUrl)">绑定</el-button>
</div>
<div class="account-icon-view">
<font-icon class="fa fa-weibo icon" />
<span v-if="userInfo.wbName">
{{ userInfo.wbName }}(已绑定)
</span>
<el-button v-else type="text">绑定</el-button>
<el-button v-else
type="text">绑定</el-button>
</div>
</div>
</div>
</div>
</el-card>
<div>
<el-dialog
title="修改用户名"
<el-dialog title="修改用户名"
:visible.sync="editNameDialogVisible"
width="450px"
center
>
<el-form ref="updateNameForm" :model="userInfoForm" :rules="userInfoRules" label-width="80px">
<el-form-item label="新用户名" prop="name">
center>
<el-form ref="updateNameForm"
:model="userInfoForm"
:rules="userInfoRules"
label-width="80px">
<el-form-item label="新用户名"
prop="name">
<el-input v-model="userInfoForm.name" />
</el-form-item>
</el-form>
@ -121,85 +137,94 @@
this.updateUserHandle()
}
})
}"
>保存</el-button>
}">保存</el-button>
</span>
</el-dialog>
<el-dialog
title="修改密码"
<el-dialog title="修改密码"
:visible.sync="pwdDialogVisible"
width="450px"
center
>
center>
<el-form ref="updatePassWordForm"
style="width: 300px;"
:model="userPwdForm" :rules="userPwdRules" label-width="120px"
>
<el-form-item label="输入旧密码" prop="oldPassword">
<el-input v-model="userPwdForm.oldPassword" placeholder="请输入旧密码" show-password />
:model="userPwdForm"
:rules="userPwdRules"
label-width="120px">
<el-form-item label="输入旧密码"
prop="oldPassword">
<el-input v-model="userPwdForm.oldPassword"
placeholder="请输入旧密码"
show-password />
</el-form-item>
<el-form-item label="输入新密码" prop="password">
<el-input v-model="userPwdForm.password" placeholder="请输入新密码" show-password />
<el-form-item label="输入新密码"
prop="password">
<el-input v-model="userPwdForm.password"
placeholder="请输入新密码"
show-password />
</el-form-item>
<el-form-item label="重复输入密码" prop="repeatPassword">
<el-input v-model="userPwdForm.repeatPassword" placeholder="请重复输入密码" show-password />
<el-form-item label="重复输入密码"
prop="repeatPassword">
<el-input v-model="userPwdForm.repeatPassword"
placeholder="请重复输入密码"
show-password />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button type="primary"
@click="()=>{this.pwdDialogVisible = false;this.updateUserPwdHandle()}"
>完 成</el-button>
@click="()=>{this.pwdDialogVisible = false;this.updateUserPwdHandle()}">完 成</el-button>
</span>
</el-dialog>
<el-dialog
title="修改邮箱"
<el-dialog title="修改邮箱"
:visible.sync="emailDialogVisible"
width="450px"
center
>
center>
<el-form ref="updateEmailForm"
style="width: 80%;"
:model="userInfoForm" :rules="userInfoRules" label-width="80px"
>
<el-form-item label="邮箱" prop="email">
<el-input v-model="userInfoForm.email" placeholder="请输入邮箱" />
:model="userInfoForm"
:rules="userInfoRules"
label-width="80px">
<el-form-item label="邮箱"
prop="email">
<el-input v-model="userInfoForm.email"
placeholder="请输入邮箱" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button v-prevent-re-click
type="primary"
@click="()=>{this.pwdDialogVisible = false;this.sendUpdateEmail()}"
>发送验证邮件</el-button>
@click="()=>{this.pwdDialogVisible = false;this.sendUpdateEmail()}">发送验证邮件</el-button>
</span>
</el-dialog>
<el-dialog
title="修改手机号"
<el-dialog title="修改手机号"
:visible.sync="phoneDialogVisible"
width="450px"
center
>
center>
<el-form ref="updatePhoneForm"
:model="userInfoForm" :rules="userInfoRules" label-width="120px"
>
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="userInfoForm.phoneNumber" placeholder="请输入手机号" />
:model="userInfoForm"
:rules="userInfoRules"
label-width="120px">
<el-form-item label="手机号"
prop="phoneNumber">
<el-input v-model="userInfoForm.phoneNumber"
placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="输入验证码" prop="code">
<el-input v-model="userInfoForm.code" placeholder="请输入验证码"
style="display: inline-block; width: 60%;"
/>
<el-form-item label="输入验证码"
prop="code">
<el-input v-model="userInfoForm.code"
placeholder="请输入验证码"
style="display: inline-block; width: 60%;" />
<el-button v-prevent-re-click
style="display: inline-block; width: 40%;"
@click.native="sendUpdatePhoneNumber"
>
@click.native="sendUpdatePhoneNumber">
{{ phoneValidateCodeBtnText }}
</el-button>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button type="primary"
@click="()=>{this.phoneDialogVisible = false;this.updateUserPhoneHandle()}"
>完 成</el-button>
@click="()=>{this.phoneDialogVisible = false;this.updateUserPhoneHandle()}">完 成</el-button>
</span>
</el-dialog>
</div>
@ -210,7 +235,7 @@
import myUpload from 'vue-image-crop-upload'
import constants from '@/utils/constants'
import FontIcon from '@/components/FontIcon'
import {getCurrentDomain} from '@/utils'
import { getCurrentDomain } from '@/utils'
export default {
name: 'Member',
@ -218,7 +243,7 @@ export default {
FontIcon,
myUpload
},
data() {
data () {
let validateRePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
@ -233,42 +258,42 @@ export default {
phoneValidateCodeBtnText: '发送验证码',
userInfoRules: {
name: [
{required: true, trigger: 'blur', message: '请输入昵称'}
{ required: true, trigger: 'blur', message: '请输入昵称' }
],
email: [
{required: true, trigger: 'blur', message: '请输入邮箱'},
{ required: true, trigger: 'blur', message: '请输入邮箱' },
{
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
message: '请输入正确的邮箱'
}
],
phoneNumber: [
{required: true, trigger: 'blur', message: '请输入手机号'},
{ required: true, trigger: 'blur', message: '请输入手机号' },
{
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
message: '请输入正确的手机号'
}
], code: [
{required: true, trigger: 'blur', message: '请输入验证码'}
{ required: true, trigger: 'blur', message: '请输入验证码' }
]
},
userPwdRules: {
oldPassword: [
{required: true, trigger: 'blur', message: '请输入旧密码'},
{ required: true, trigger: 'blur', message: '请输入旧密码' },
{
pattern: constants.passwordReg,
message: constants.passwordRegDesc
}
],
password: [
{required: true, trigger: 'blur', message: '请输入新密码'},
{ required: true, trigger: 'blur', message: '请输入新密码' },
{
pattern: constants.passwordReg,
message: constants.passwordRegDesc
}
],
repeatPassword: [
{required: true, trigger: 'blur', validator: validateRePass}
{ required: true, trigger: 'blur', validator: validateRePass }
]
},
bindWxDialogVisible: false,
@ -289,16 +314,16 @@ export default {
bindWxTimer: null
}
},
created() {
created () {
this.queryUserInfo()
this.getQQLoginAuthorizeUrl()
this.getBindWxQrCode()
},
destroyed() {
destroyed () {
clearInterval(this.bindWxTimer)
},
methods: {
queryUserInfo() {
queryUserInfo () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/current/detail`).then(res => {
if (res.data) {
this.userInfo = res.data
@ -308,20 +333,20 @@ export default {
}
})
},
getUploadHeader() {
getUploadHeader () {
return {
'token': this.$store.getters['user/isLogin']
}
},
getUploadUrl() {
return `${process.env.VUE_APP_API_ROOT}/user/file/upload`
getUploadUrl () {
return `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload`
},
getBindWxQrCode() {
getBindWxQrCode () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/bind/wx/qrcode`).then(res => {
this.bindWxQrcode = res.data
})
},
updateUserPwdHandle() {
updateUserPwdHandle () {
this.$refs['updatePassWordForm'].validate(valid => {
if (valid) {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update/password`, this.userPwdForm).then(res => {
@ -336,10 +361,10 @@ export default {
})
},
sendUpdateEmail() {
sendUpdateEmail () {
this.$refs['updateEmailForm'].validateField('email', err => {
if (!err) {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update-email/msg`, {params: {email: this.userInfoForm.email}}).then(res => {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update-email/msg`, { params: { email: this.userInfoForm.email } }).then(res => {
if (res.data) {
this.msgSuccess('发送成功,请去您的邮箱查看')
this.emailDialogVisible = false
@ -348,7 +373,7 @@ export default {
}
})
},
sendUpdatePhoneNumber() {
sendUpdatePhoneNumber () {
this.$refs['updatePhoneForm'].validateField('phoneNumber', err => {
if (!err) {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update-phone/code?phoneNumber=${this.userInfoForm.phoneNumber}`).then(() => {
@ -366,7 +391,7 @@ export default {
}
})
},
updateUserHandle() {
updateUserHandle () {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update`, this.userInfoForm).then(res => {
if (res.data) {
this.msgSuccess('保存成功')
@ -376,16 +401,16 @@ export default {
})
},
// qq登录授权地址
getQQLoginAuthorizeUrl() {
getQQLoginAuthorizeUrl () {
let reUrl = getCurrentDomain() + '/redirect/bindqq'
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/login/qq/authorize/url`, {params: {redirectUri: reUrl}}).then(res => {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/login/qq/authorize/url`, { params: { redirectUri: reUrl } }).then(res => {
this.qqLoginAuthorizeUrl = res.data
})
},
redirectUrl(url) {
redirectUrl (url) {
window.open(url)
},
updateUserPhoneHandle() {
updateUserPhoneHandle () {
this.$refs['updatePhoneForm'].validateField(['phoneNumber', 'code'], err => {
if (!err) {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/update/phone-number`, this.userInfoForm).then(() => {
@ -395,12 +420,12 @@ export default {
}
})
},
bindWxHandle() {
bindWxHandle () {
this.bindWxDialogVisible = true
this.bindWxTimer = setInterval(() => {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/current/detail`).then(res => {
if (res.data) {
let {wxName} = res.data
let { wxName } = res.data
if (wxName) {
this.msgSuccess('绑定成功')
clearInterval(this.bindWxTimer)
@ -411,7 +436,7 @@ export default {
})
}, 5 * 1000)
},
cropUploadSuccess(res) {
cropUploadSuccess (res) {
this.userInfoForm.avatar = res.data
this.updateUserHandle()
}
@ -465,5 +490,4 @@ export default {
.account-avatar-view {
width: 180px;
}
</style>

2
src/views/form/editor/RightPanel.vue
View File

@ -1112,7 +1112,7 @@ export default {
};
},
getUploadUrl () {
return `${process.env.VUE_APP_API_ROOT}/user/file/upload`;
return `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload`;
},
},
watch: {

4
src/views/form/index.vue
View File

@ -18,7 +18,7 @@
<el-menu :collapse="isCollapse"
:default-active="defaultActiveMenu"
class="el-menu-vertical">
<el-menu-item v-for="menuItem in (menuItemList)"
<el-menu-item v-for="menuItem in (publishStatus?menuItemList2:menuItemList)"
:key="menuItem.key"
:index="menuItem.route"
@click="menuSelectHandle(menuItem.route,menuItem.key)">
@ -57,7 +57,7 @@ export default {
components: { PreView },
data () {
return {
publishStatus: false,
publishStatus: true,
previewKey: +new Date(),
previewDialogVisible: false,
defaultActiveMenu: '',

7
src/views/form/publish/index.vue
View File

@ -83,18 +83,18 @@
复制链接
</el-button> -->
</el-col>
<el-col :span="12">
<el-col :span="24">
<el-button type="danger"
@click="stopPublishProject">
停止发布
</el-button>
</el-col>
<el-col :span="12">
<!-- <el-col :span="12">
<el-button type="warning"
@click="toFeedbackPageHandle">
查看反馈
</el-button>
</el-col>
</el-col> -->
</el-row>
</el-col>
</el-row>
@ -233,6 +233,7 @@ export default {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, { 'key': this.projectKey }).then(res => {
if (res.data) {
this.msgSuccess('停止成功')
this.getProjectStatus()
}
})

2
src/views/form/setting/index.vue
View File

@ -666,7 +666,7 @@ export default {
}
},
getUploadUrl () {
return `${process.env.VUE_APP_API_ROOT}/user/file/upload`
return `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload`
},
getUserInfo () {
return JSON.parse(this.$store.getters['user/userInfo'])

248
src/views/form/theme/index.vue
View File

@ -7,14 +7,12 @@
<el-col :span="3">
<span class="theme-prompt-text">风格</span>
</el-col>
<el-col
v-for="item in styleList"
:key="item.key" :span="3"
>
<span
:class="{'style-btn-active':activeStyle==item.key}"
class="style-btn" @click="activeStyleHandle(item)"
>{{ item.label }}</span>
<el-col v-for="item in styleList"
:key="item.key"
:span="3">
<span :class="{'style-btn-active':activeStyle==item.key}"
class="style-btn"
@click="activeStyleHandle(item)">{{ item.label }}</span>
</el-col>
</el-row>
<el-row>
@ -22,119 +20,120 @@
<span class="theme-prompt-text">颜色</span>
</el-col>
<el-col :span="3">
<span
:class="{'style-btn-active':activeColor==''}"
class="style-btn" @click="activeColorHandle('')"
>全部</span>
<span :class="{'style-btn-active':activeColor==''}"
class="style-btn"
@click="activeColorHandle('')">全部</span>
</el-col>
<el-col
v-for="c in colorList"
:key="c" :class="{'style-btn-active':activeColor==c}"
<el-col v-for="c in colorList"
:key="c"
:class="{'style-btn-active':activeColor==c}"
:span="3"
:style="{backgroundColor: c}"
class="color-btn" @click.native="activeColorHandle(c)"
/>
class="color-btn"
@click.native="activeColorHandle(c)" />
</el-row>
<el-row>
<el-col
v-for="t in themeList"
<el-col v-for="t in themeList"
:key="t.id"
:span="8" class="theme-img-view"
@click.native="activeThemeHandle(t)"
>
:span="8"
class="theme-img-view"
@click.native="activeThemeHandle(t)">
<p :class="{'head-list-view-select':activeTheme.id==t.id}">
<el-image
:class="{'head-list-img-active':activeTheme.id==t.id}"
<el-image :class="{'head-list-img-active':activeTheme.id==t.id}"
:src="t.headImgUrl"
class="head-list-img"
fit="cover"
style="width: 100px; height: 100px;"
/>
style="width: 100px; height: 100px;" />
</p>
</el-col>
</el-row>
</el-scrollbar>
</div>
<pre-view :key="projectFormKey" :project-key="projectKey" />
<pre-view :key="projectFormKey"
:project-key="projectKey" />
<div class="right-container">
<p class="right-title">外观设置</p>
<el-row align="middle" class="option-line-view" type="flex">
<el-row align="middle"
class="option-line-view"
type="flex">
<el-col :span="8">
<span class="option-line-title">添加logo</span>
</el-col>
<el-col :offset="8" :span="8">
<el-switch
v-model="showSettings.logoSetting"
/>
<el-col :offset="8"
:span="8">
<el-switch v-model="showSettings.logoSetting" />
</el-col>
</el-row>
<el-row v-if="showSettings.logoSetting" align="middle" type="flex">
<el-row v-if="showSettings.logoSetting"
align="middle"
type="flex">
<el-col :span="6">
<span class="option-line-sub-title">logo设置</span>
</el-col>
<el-col :span="4">
<img
v-if="userProjectTheme.logoImg"
<img v-if="userProjectTheme.logoImg"
:src="userProjectTheme.logoImg"
style="width: 30px; height: 30px;"
>
style="width: 30px; height: 30px;">
</el-col>
<el-col :offset="6" :span="8">
<el-upload
ref="logoUpload"
<el-col :offset="6"
:span="8">
<el-upload ref="logoUpload"
:action="getUploadUrl"
:headers="getUploadHeader"
:on-success="uploadLogoHandle"
:show-file-list="false"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
>
<el-button slot="trigger" size="small" type="text">上传Logo</el-button>
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP">
<el-button slot="trigger"
size="small"
type="text">上传Logo</el-button>
</el-upload>
</el-col>
</el-row>
<el-row v-if="showSettings.logoSetting" align="middle" type="flex">
<el-row v-if="showSettings.logoSetting"
align="middle"
type="flex">
<el-col :span="6">
<span class="option-line-sub-title">logo位置</span>
</el-col>
<el-col :span="18">
<el-radio-group
v-model="userProjectTheme.logoPosition"
size="mini" @change="saveUserTheme"
>
<el-radio-group v-model="userProjectTheme.logoPosition"
size="mini"
@change="saveUserTheme">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="center">居中</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
</el-radio-group>
</el-col>
</el-row>
<el-row align="middle" class="option-line-view" type="flex">
<el-row align="middle"
class="option-line-view"
type="flex">
<el-col :span="8">
<span class="option-line-title">背景设置</span>
</el-col>
<el-col :offset="8" :span="8">
<el-switch
v-model="showSettings.backgroundSetting"
<el-col :offset="8"
:span="8">
<el-switch v-model="showSettings.backgroundSetting"
@change="()=>{
this.userProjectTheme.backgroundImg=''
this.userProjectTheme.backgroundColor=''
this.saveUserTheme()
}"
/>
}" />
</el-col>
</el-row>
<el-row v-if="showSettings.backgroundSetting">
<el-row align="middle" type="flex">
<el-row align="middle"
type="flex">
<el-col :span="8">
<span class="option-line-sub-title">背景类型</span>
</el-col>
<el-col :spvan="18">
<el-radio-group
v-model="showSettings.backgroundType"
size="mini" @change="()=>{
<el-radio-group v-model="showSettings.backgroundType"
size="mini"
@change="()=>{
this.userProjectTheme.backgroundImg=''
this.userProjectTheme.backgroundColor=''
}"
>
}">
<el-radio-button label="color">颜色</el-radio-button>
<el-radio-button label="img">图片</el-radio-button>
</el-radio-group>
@ -142,51 +141,53 @@
</el-row>
</el-row>
<el-row v-if="showSettings.backgroundSetting&&showSettings.backgroundType=='color'">
<el-row align="middle" type="flex">
<el-row align="middle"
type="flex">
<el-col :span="8">
<span class="option-line-sub-title">选择颜色</span>
</el-col>
<el-col :spvan="18">
<el-color-picker
v-model=" userProjectTheme.backgroundColor"
<el-color-picker v-model=" userProjectTheme.backgroundColor"
size="mini"
@change="saveUserTheme"
/>
@change="saveUserTheme" />
</el-col>
</el-row>
</el-row>
<el-row v-if="showSettings.backgroundType=='img'">
<el-row align="middle" type="flex">
<el-row align="middle"
type="flex">
<el-col :span="8">
<span class="option-line-sub-title">选择图片</span>
</el-col>
<el-col :spvan="18">
<el-upload
ref="upload"
<el-upload ref="upload"
:action="getUploadUrl"
:headers="getUploadHeader"
:on-success="uploadBackgroundHandle"
:show-file-list="false"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
class="upload-demo"
>
<el-button slot="trigger" size="small" type="text">上传背景</el-button>
class="upload-demo">
<el-button slot="trigger"
size="small"
type="text">上传背景</el-button>
</el-upload>
</el-col>
</el-row>
</el-row>
<el-row align="middle" class="option-line-view" type="flex">
<el-row align="middle"
class="option-line-view"
type="flex">
<el-col :span="8">
<span class="option-line-title">按钮设置</span>
</el-col>
<el-col :offset="8" :span="8">
<el-switch
v-model="showSettings.btnSetting"
/>
<el-col :offset="8"
:span="8">
<el-switch v-model="showSettings.btnSetting" />
</el-col>
</el-row>
<el-row v-if="showSettings.btnSetting">
<el-row align="middle" type="flex">
<el-row align="middle"
type="flex">
<el-col :span="12">
<span class="option-line-sub-title">按钮提示文字</span>
</el-col>
@ -194,42 +195,45 @@
<el-input v-model="userProjectTheme.submitBtnText"
placeholder="请输入内容"
size="mini"
style="width: 80%;" @change="saveUserTheme"
/>
style="width: 80%;"
@change="saveUserTheme" />
</el-col>
</el-row>
</el-row>
<el-row align="middle" class="option-line-view" type="flex">
<el-row align="middle"
class="option-line-view"
type="flex">
<el-col :span="8">
<span class="option-line-title">显示标题</span>
</el-col>
<el-col :offset="8" :span="8">
<el-switch
v-model="userProjectTheme.showTitle"
@change="saveUserTheme"
/>
<el-col :offset="8"
:span="8">
<el-switch v-model="userProjectTheme.showTitle"
@change="saveUserTheme" />
</el-col>
</el-row>
<el-row align="middle" class="option-line-view" type="flex">
<el-row align="middle"
class="option-line-view"
type="flex">
<el-col :span="8">
<span class="option-line-title">显示描述</span>
</el-col>
<el-col :offset="8" :span="8">
<el-switch
v-model="userProjectTheme.showDescribe"
@change="saveUserTheme"
/>
<el-col :offset="8"
:span="8">
<el-switch v-model="userProjectTheme.showDescribe"
@change="saveUserTheme" />
</el-col>
</el-row>
<el-row align="middle" class="option-line-view" type="flex">
<el-row align="middle"
class="option-line-view"
type="flex">
<el-col :span="8">
<span class="option-line-title">显示序号</span>
</el-col>
<el-col :offset="8" :span="8">
<el-switch
v-model="userProjectTheme.showNumber"
@change="saveUserTheme"
/>
<el-col :offset="8"
:span="8">
<el-switch v-model="userProjectTheme.showNumber"
@change="saveUserTheme" />
</el-col>
</el-row>
</div>
@ -244,7 +248,7 @@ export default {
components: {
PreView
},
data() {
data () {
return {
// 外观设置
showSettings: {
@ -269,16 +273,16 @@ export default {
projectFormKey: +new Date(),
projectKey: '',
styleList: [
{'label': '全部', 'key': ''},
{'label': '节日', 'key': 'festival'},
{'label': '亲子', 'key': 'parent_child'},
{'label': '风景', 'key': 'scenery'},
{'label': '职业', 'key': 'occupation'},
{'label': '校园', 'key': 'school'},
{'label': '商务', 'key': 'commerce'},
{'label': '其他', 'key': 'others'},
{'label': '餐饮', 'key': 'catering'},
{'label': '防疫', 'key': 'fangyi'}
{ 'label': '全部', 'key': '' },
{ 'label': '节日', 'key': 'festival' },
{ 'label': '亲子', 'key': 'parent_child' },
{ 'label': '风景', 'key': 'scenery' },
{ 'label': '职业', 'key': 'occupation' },
{ 'label': '校园', 'key': 'school' },
{ 'label': '商务', 'key': 'commerce' },
{ 'label': '其他', 'key': 'others' },
{ 'label': '餐饮', 'key': 'catering' },
{ 'label': '防疫', 'key': 'fangyi' }
],
colorList: [
'#FF6D56',
@ -297,49 +301,49 @@ export default {
}
},
computed: {
getUploadHeader() {
getUploadHeader () {
return {
'token': this.$store.getters['user/isLogin']
}
},
getUploadUrl() {
return `${process.env.VUE_APP_API_ROOT}/user/file/upload`
getUploadUrl () {
return `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload`
}
},
mounted() {
mounted () {
this.projectKey = this.$route.query.key
this.queryProjectTheme()
this.projectFormKey = +new Date()
this.queryUserProjectTheme()
},
methods: {
uploadBackgroundHandle(response) {
uploadBackgroundHandle (response) {
this.userProjectTheme.backgroundImg = response.data
this.userProjectTheme.backgroundColor = ''
this.saveUserTheme()
},
uploadLogoHandle(response) {
uploadLogoHandle (response) {
this.userProjectTheme.logoImg = response.data
this.saveUserTheme()
},
activeStyleHandle(item) {
activeStyleHandle (item) {
this.activeStyle = item.key
this.queryProjectTheme()
},
saveUserTheme() {
saveUserTheme () {
this.userProjectTheme.projectKey = this.projectKey
this.userProjectTheme.themeId = this.activeTheme ? this.activeTheme.id : ''
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/theme/save`, this.userProjectTheme).then(() => {
this.projectFormKey = +new Date()
})
},
queryUserProjectTheme() {
queryUserProjectTheme () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/theme/${this.projectKey}`).then(res => {
if (!res.data) {
return
}
this.userProjectTheme = res.data
let {themeId, logoImg, backgroundImg, backgroundColor, submitBtnText} = res.data
let { themeId, logoImg, backgroundImg, backgroundColor, submitBtnText } = res.data
this.activeTheme = {
'id': themeId
}
@ -352,7 +356,7 @@ export default {
})
},
activeThemeHandle(item) {
activeThemeHandle (item) {
if (item) {
this.$confirm('切换主题，系统将不会保存您在上一主题所做的修改，请知悉。', '切换主题提醒', {
confirmButtonText: '确定',
@ -366,12 +370,12 @@ export default {
})
}
},
activeColorHandle(item) {
activeColorHandle (item) {
console.log(item)
this.activeColor = item
this.queryProjectTheme()
},
queryProjectTheme() {
queryProjectTheme () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/project/theme/list`, {
params: {
'color': this.activeColor,
@ -467,7 +471,7 @@ export default {
}
.theme-img-view .head-list-view-select ::after {
content: "";
background: url('~@/assets/images/mobile_theme_active.png');
background: url("~@/assets/images/mobile_theme_active.png");
background-size: 18px;
width: 18px;
height: 18px;

Write Preview
Loading…
Cancel
Save