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

调整menu和返回路由

old
jiangyy 4 years ago
parent
4f5ee33549
commit
65708eb377
3 changed files with 286 additions and 274 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/views/form/index.vue
  2. 530
      src/views/form/preview/ProjectForm.vue
  3. 8
      src/views/form/write/index.vue

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

@ -18,13 +18,16 @@
<el-menu :collapse="isCollapse" <el-menu :collapse="isCollapse"
:default-active="defaultActiveMenu" :default-active="defaultActiveMenu"
class="el-menu-vertical"> class="el-menu-vertical">
<el-menu-item v-for="menuItem in (publishStatus?menuItemList2:menuItemList)" <el-menu-item class="el-menu-item-per"
v-for="menuItem in (publishStatus?menuItemList2:menuItemList)"
:key="menuItem.key" :key="menuItem.key"
:index="menuItem.route" :index="menuItem.route"
@click="menuSelectHandle(menuItem.route,menuItem.key)"> @click="menuSelectHandle(menuItem.route,menuItem.key)">
<i :class="menuItem.icon" /> <i :class="menuItem.icon"
<span slot="title">{{ menuItem.title }}</span> style="margin-top:1px;align-items:center;" />
<span style="white-space:pre-wrap"
slot="title">{{ menuItem.title }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
@ -36,6 +39,7 @@
@click="collapseHandle" /> @click="collapseHandle" />
</div> </div>
<div class="right-content-container"> <div class="right-content-container">
<router-view /> <router-view />
</div> </div>
</div> </div>
@ -105,7 +109,7 @@ export default {
}, },
{ {
key: 'save', key: 'save',
title: '保存', title: '存为模板',
icon: 'el-icon-folder-add' icon: 'el-icon-folder-add'
}, },
{ {
@ -170,7 +174,8 @@ export default {
} else if (key === 'save') { } else if (key === 'save') {
this.saveProjectAsTemplateHandle() this.saveProjectAsTemplateHandle()
} else if (key === 'back') { } else if (key === 'back') {
this.$router.back(-1) // this.$router.back(-1)
this.$router.push('/home')
} else { this.$router.replace({ path: route, query: { key: this.projectKey } }) } } else { this.$router.replace({ path: route, query: { key: this.projectKey } }) }
}, },
@ -253,11 +258,18 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
border-right: solid 1px #e6e6e6; border-right: solid 1px #e6e6e6;
.el-menu-vertical {
margin-top: 20px;
}
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {
width: 100px; width: 100px;
min-height: 400px; min-height: 400px;
} }
.el-menu-item-per {
display: flex;
line-height: 20px;
}
.el-icon-d-arrow-left, .el-icon-d-arrow-left,
.el-icon-d-arrow-right { .el-icon-d-arrow-right {

530
src/views/form/preview/ProjectForm.vue
View File

@ -1,41 +1,35 @@
<template> <template>
<div class="project-form" <div class="project-form"
:style="{backgroundColor:projectTheme.backgroundColor, :style="{backgroundColor:projectTheme.backgroundColor,
background:projectTheme.backgroundImg?'url('+projectTheme.backgroundImg+') no-repeat center':''}" background:projectTheme.backgroundImg?'url('+projectTheme.backgroundImg+') no-repeat center':''}">
> <div class="">
<div class=""> <div :style="{textAlign:projectTheme.logoPosition}">
<div :style="{textAlign:projectTheme.logoPosition}"> <img :src="projectTheme.logoImg"
<img :src="projectTheme.logoImg" class="logo-img">
class="logo-img" </div>
> <el-image v-if="projectTheme.headImgUrl"
</div> :src="projectTheme.headImgUrl"
<el-image v-if="projectTheme.headImgUrl" style="width: 100%;"
:src="projectTheme.headImgUrl" fit="scale-down" />
style="width: 100%;" <h4 v-if="projectTheme.showTitle"
fit="scale-down" class="form-name-text"
/> style="text-align: center;">
<h4 v-if="projectTheme.showTitle" {{ formConf.title }}
class="form-name-text" </h4>
style="text-align: center;" <div v-show="projectTheme.showDescribe"
> class="form-name-text describe-html"
{{ formConf.title }} v-html="formConf.description" />
</h4> <el-divider />
<div v-show="projectTheme.showDescribe" <parser v-if="startParser"
class="form-name-text describe-html" :key="parserKey"
v-html="formConf.description" :form-model="formModel"
/> :label-form-model="labelFormModel"
<el-divider /> :form-conf="formConf"
<parser v-if="startParser" @next="nextPage"
:key="parserKey" @prev="prevPage"
:form-model="formModel" @submit="submitForm" />
:label-form-model="labelFormModel"
:form-conf="formConf"
@next="nextPage"
@prev="prevPage"
@submit="submitForm"
/>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -44,250 +38,250 @@ import { dbDataConvertForItemJson } from '@/utils/convert'
import { getExpression } from '@/utils/expression' import { getExpression } from '@/utils/expression'
import _ from 'lodash' import _ from 'lodash'
window.onload = function() { window.onload = function () {
document.addEventListener('touchstart', function(event) { document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) { if (event.touches.length > 1) {
event.preventDefault() event.preventDefault()
} }
}) })
document.addEventListener('gesturestart', function(event) { document.addEventListener('gesturestart', function (event) {
event.preventDefault() event.preventDefault()
}) })
} }
export default { export default {
components: { components: {
Parser Parser
}, },
props: { props: {
projectConfig: { projectConfig: {
type: Object, type: Object,
return: { return: {
projectKey: '', projectKey: '',
showBtns: true, showBtns: true,
// 项目种类 1 普通 2模板 // 项目种类 1 普通 2模板
projectKind: 1 projectKind: 1
} }
}
},
metaInfo: {
meta: [
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
}
]
},
data () {
return {
logicShowTriggerRule: {},
startParser: false,
formModel: {},
labelFormModel: {},
projectTheme: {
headImgUrl: '',
logoImg: '',
showTitle: true,
showDescribe: true
},
parserKey: +new Date(),
// 每页数据
perPageFields: {},
formConf: {
fields: [],
logicShowRule: {},
projectKey: '',
projectKind: 1,
__methods__: {},
formRef: 'elForm',
formModel: 'formData',
labelFormModel: 'labelFormData',
size: 'small',
labelPosition: 'top',
labelWidth: 100,
formRules: 'rules',
gutter: 15,
disabled: false,
span: 24,
formBtns: true,
resetBtn: false,
submitBtnText: '提交',
submitBtnColor: '#409EFF',
showNumber: false,
unFocusedComponentBorder: true
}
}
},
computed: {},
watch: {},
beforeCreate () {
document.querySelector('body').className = 'project-body'
},
created () {
if (this.projectConfig && this.projectConfig.projectKey) {
this.formConf.projectKey = this.projectConfig.projectKey
if (this.projectConfig.projectKind) {
this.formConf.projectKind = this.projectConfig.projectKind
}
} else if (this.$route.query.key) {
// 不存去路由中尝试获取 iframe
this.formConf.projectKey = this.$route.query.key
if (this.$route.query.kind) {
this.formConf.projectKind = this.$route.query.kind
}
this.formConf.formBtns = true
}
this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
},
async mounted () {
let url = `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/details/${this.formConf.projectKey}?access_key=${this.accessKey}`
if (this.formConf.projectKind == 2) {
url = `${process.env.VUE_APP_API_ROOT_TDUCK}/project/template/details/${this.formConf.projectKey}`
}
let logicItemList = []
// 处理逻辑表单
if (this.formConf.projectKind == 1) {
let res = await this.queryLogicItemList()
logicItemList = res.data
}
let logicItemMap = new Map()
logicItemList.forEach(item => {
logicItemMap.set(item.formItemId, item)
this.logicShowTriggerHandle(item)
})
this.$api.get(url).then(res => {
if (res.data) {
let serialNumber = 1
let fields = res.data.projectItems.map(item => {
let projectItem = dbDataConvertForItemJson(item)
projectItem.serialNumber = serialNumber
projectItem.logicShow = !logicItemMap.get(projectItem.formItemId)
serialNumber++
return projectItem
})
this.pageShowHandle(fields)
if (_.keys(this.perPageFields).length != 0) {
this.formConf.fields = _.get(this.perPageFields, 1)
this.formConf.formBtns = false
} else {
this.formConf.fields = fields
} }
}, if (res.data.project) {
metaInfo: { this.formConf.title = res.data.project.name
meta: [ document.title = res.data.project.name
{ this.formConf.description = res.data.project.describe
name: 'viewport',
content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
}
]
},
data() {
return {
logicShowTriggerRule: {},
startParser: false,
formModel: {},
labelFormModel: {},
projectTheme: {
headImgUrl: '',
logoImg: '',
showTitle: true,
showDescribe: true
},
parserKey: +new Date(),
// 每页数据
perPageFields: {},
formConf: {
fields: [],
logicShowRule: {},
projectKey: '',
projectKind: 1,
__methods__: {},
formRef: 'elForm',
formModel: 'formData',
labelFormModel: 'labelFormData',
size: 'small',
labelPosition: 'top',
labelWidth: 100,
formRules: 'rules',
gutter: 15,
disabled: false,
span: 24,
formBtns: true,
resetBtn: false,
submitBtnText: '提交',
submitBtnColor: '#409EFF',
showNumber: false,
unFocusedComponentBorder: true
}
} }
}, this.formConf.logicShowRule = this.logicShowTriggerRule
computed: {}, // 主题数据
watch: {}, if (res.data.userProjectTheme) {
beforeCreate() { this.projectTheme = res.data.userProjectTheme
document.querySelector('body').className = 'project-body' let { submitBtnText, showNumber, btnsColor } = res.data.userProjectTheme
}, if (submitBtnText) this.formConf.submitBtnText = submitBtnText
created() { if (showNumber) this.formConf.showNumber = showNumber
if (this.projectConfig && this.projectConfig.projectKey) { if (btnsColor) this.formConf.submitBtnColor = btnsColor
this.formConf.projectKey = this.projectConfig.projectKey
if (this.projectConfig.projectKind) {
this.formConf.projectKind = this.projectConfig.projectKind
}
} else if (this.$route.query.key) {
// 不存去路由中尝试获取 iframe
this.formConf.projectKey = this.$route.query.key
if (this.$route.query.kind) {
this.formConf.projectKind = this.$route.query.kind
}
this.formConf.formBtns = true
} }
this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' this.startParser = true
},
async mounted() { }
let url = `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/details/${this.formConf.projectKey}` })
if (this.formConf.projectKind == 2) { },
url = `${process.env.VUE_APP_API_ROOT_TDUCK}/project/template/details/${this.formConf.projectKey}` methods: {
// 分页显示数据处理
pageShowHandle (allFields) {
// 判断是否存在分页
let index = allFields.findIndex(item => {
return item.typeId === 'PAGINATION'
})
if (index < 0) {
return
}
let curr = 1
// 每页字段
let perPageFields = {}
// 分页字段数据
let pageFields = {}
allFields.forEach(item => {
let fields = _.get(perPageFields, curr)
if (item.typeId === 'PAGINATION') {
_.set(pageFields, curr, item)
if (fields) {
item.currPageNum = curr++
}
} else {
if (!fields || fields == undefined) {
fields = new Array()
}
fields.push(item)
_.set(perPageFields, curr, fields)
} }
let logicItemList = [] })
// 处理逻辑表单 let len = _.keys(perPageFields).length
if (this.formConf.projectKind == 1) { // 计算页数 添加分页
let res = await this.queryLogicItemList() _.keys(perPageFields).forEach(key => {
logicItemList = res.data let pageItem = _.get(pageFields, key)
if (pageItem) {
let fields = _.get(perPageFields, key)
pageItem.totalPageNum = len
fields.push(pageItem)
_.set(perPageFields, key, fields)
} }
let logicItemMap = new Map()
logicItemList.forEach(item => {
logicItemMap.set(item.formItemId, item)
this.logicShowTriggerHandle(item)
})
this.$api.get(url).then(res => {
if (res.data) {
let serialNumber = 1
let fields = res.data.projectItems.map(item => {
let projectItem = dbDataConvertForItemJson(item)
projectItem.serialNumber = serialNumber
projectItem.logicShow = !logicItemMap.get(projectItem.formItemId)
serialNumber++
return projectItem
})
this.pageShowHandle(fields)
if (_.keys(this.perPageFields).length != 0) {
this.formConf.fields = _.get(this.perPageFields, 1)
this.formConf.formBtns = false
} else {
this.formConf.fields = fields
}
if (res.data.project) {
this.formConf.title = res.data.project.name
document.title = res.data.project.name
this.formConf.description = res.data.project.describe
}
this.formConf.logicShowRule = this.logicShowTriggerRule
// 主题数据
if (res.data.userProjectTheme) {
this.projectTheme = res.data.userProjectTheme
let { submitBtnText, showNumber, btnsColor } = res.data.userProjectTheme
if (submitBtnText) this.formConf.submitBtnText = submitBtnText
if (showNumber) this.formConf.showNumber = showNumber
if (btnsColor) this.formConf.submitBtnColor = btnsColor
}
this.startParser = true
} })
}) this.perPageFields = perPageFields
}, },
methods: { /**
// 分页显示数据处理 * 处理逻辑显示数据
pageShowHandle(allFields) { */
// 判断是否存在分页 logicShowTriggerHandle (logicItem) {
let index = allFields.findIndex(item => { if (!logicItem) {
return item.typeId === 'PAGINATION' return
}) }
if (index < 0) { // 建立触发关系 该字段值发生变化时 哪些问题需要进行逻辑判断 确定是否显示
return logicItem.conditionList.forEach(item => {
} if (Object.keys(item).length === 0) {
let curr = 1 return
// 每页字段 }
let perPageFields = {} let rules = this.logicShowTriggerRule[item.formItemId]
// 分页字段数据 if (!rules) {
let pageFields = {} rules = new Array()
allFields.forEach(item => {
let fields = _.get(perPageFields, curr)
if (item.typeId === 'PAGINATION') {
_.set(pageFields, curr, item)
if (fields) {
item.currPageNum = curr++
}
} else {
if (!fields || fields == undefined) {
fields = new Array()
}
fields.push(item)
_.set(perPageFields, curr, fields)
}
})
let len = _.keys(perPageFields).length
// 计算页数 添加分页
_.keys(perPageFields).forEach(key => {
let pageItem = _.get(pageFields, key)
if (pageItem) {
let fields = _.get(perPageFields, key)
pageItem.totalPageNum = len
fields.push(pageItem)
_.set(perPageFields, key, fields)
}
})
this.perPageFields = perPageFields
},
/**
* 处理逻辑显示数据
*/
logicShowTriggerHandle(logicItem) {
if (!logicItem) {
return
}
// 建立触发关系 该字段值发生变化时 哪些问题需要进行逻辑判断 确定是否显示
logicItem.conditionList.forEach(item => {
if (Object.keys(item).length === 0) {
return
}
let rules = this.logicShowTriggerRule[item.formItemId]
if (!rules) {
rules = new Array()
}
rules.push({
// 触发的字段
triggerFormItemId: logicItem.formItemId,
logicExpression: getExpression(logicItem.conditionList, logicItem.expression)
})
this.logicShowTriggerRule[item.formItemId] = rules
})
},
// 统一处理axios请求
queryLogicItemList() {
return new Promise((resolve, reject) => {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/logic/list`, { params: { projectKey: this.formConf.projectKey } })
.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
},
prevPage(params) {
this.switchPage(params.page - 1, params)
},
nextPage(params) {
this.switchPage(params.page + 1, params)
},
switchPage(page, params) {
let { labelFormModel, formModel } = params
this.formModel = formModel
this.labelFormModel = labelFormModel
this.formConf.formBtns = _.keys(this.perPageFields).length == page
this.formConf.fields = _.get(this.perPageFields, page)
this.parserKey = +new Date()
},
submitForm(data) {
this.$emit('submit', data)
} }
rules.push({
// 触发的字段
triggerFormItemId: logicItem.formItemId,
logicExpression: getExpression(logicItem.conditionList, logicItem.expression)
})
this.logicShowTriggerRule[item.formItemId] = rules
})
},
// 统一处理axios请求
queryLogicItemList () {
return new Promise((resolve, reject) => {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/logic/list`, { params: { projectKey: this.formConf.projectKey } })
.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
},
prevPage (params) {
this.switchPage(params.page - 1, params)
},
nextPage (params) {
this.switchPage(params.page + 1, params)
},
switchPage (page, params) {
let { labelFormModel, formModel } = params
this.formModel = formModel
this.labelFormModel = labelFormModel
this.formConf.formBtns = _.keys(this.perPageFields).length == page
this.formConf.fields = _.get(this.perPageFields, page)
this.parserKey = +new Date()
},
submitForm (data) {
this.$emit('submit', data)
} }
}
} }
</script> </script>

8
src/views/form/write/index.vue
View File

@ -15,6 +15,7 @@
<div v-if="writeStatus==1"> <div v-if="writeStatus==1">
<project-form v-if="projectConfig.projectKey" <project-form v-if="projectConfig.projectKey"
:project-config="projectConfig" :project-config="projectConfig"
:access-key="accessKey"
@submit="submitForm" /> @submit="submitForm" />
</div> </div>
<div v-if="writeStatus==2" <div v-if="writeStatus==2"
@ -83,6 +84,7 @@ export default {
orgName: '',//人员所属组织名【组织-组织，组织-部门，组织-网格】 orgName: '',//人员所属组织名【组织-组织，组织-部门，组织-网格】
orgType: '',//人员所属类型(组织:agency;部门:dept;网格:grid) orgType: '',//人员所属类型(组织:agency;部门:dept;网格:grid)
realName: '',//填写人姓名 realName: '',//填写人姓名
accessKey: ''
} }
}, },
metaInfo: { metaInfo: {
@ -99,6 +101,9 @@ export default {
this.orgName = this.$route.query.orgName this.orgName = this.$route.query.orgName
this.orgType = this.$route.query.orgType this.orgType = this.$route.query.orgType
this.realName = this.$route.query.realName this.realName = this.$route.query.realName
this.accessKey = this.$route.query.accessKey
// const token = this.$route.query.token
// this.$store.dispatch('user/setTokens', token)
let key = this.$route.query.key || this.$route.params.key let key = this.$route.query.key || this.$route.params.key
this.projectConfig.projectKey = key this.projectConfig.projectKey = key
@ -278,7 +283,7 @@ export default {
submitForm (data) { submitForm (data) {
// 完成时间 // 完成时间
let inActiveTime = document.getElementById('inActiveTime').innerText let inActiveTime = document.getElementById('inActiveTime').innerText
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/create`, { this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/create?access_key=${this.accessKey}`, {
'completeTime': inActiveTime, 'completeTime': inActiveTime,
'projectKey': this.projectConfig.projectKey, 'projectKey': this.projectConfig.projectKey,
'submitOs': ua.os.name, 'submitOs': ua.os.name,
@ -293,6 +298,7 @@ export default {
'orgName': this.orgName,//人员所属组织名【组织-组织，组织-部门，组织-网格】 'orgName': this.orgName,//人员所属组织名【组织-组织，组织-部门，组织-网格】
'orgType': this.orgType,//人员所属类型(组织:agency;部门:dept;网格:grid) 'orgType': this.orgType,//人员所属类型(组织:agency;部门:dept;网格:grid)
'realName': this.realName,//填写人姓名 'realName': this.realName,//填写人姓名
//'accessKey':this.accessKey
}).then(() => { }).then(() => {
this.writeStatus = 2 this.writeStatus = 2
if (this.userProjectSetting.submitJumpUrl) { if (this.userProjectSetting.submitJumpUrl) {

Write Preview
Loading…
Cancel
Save