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

Merge branch 'dev_ljj' of http://git.elinkit.com.cn:7070/r/tduck-front into dev_ljj

old
13176889840 4 years ago
parent
f1abc93ff5 5936614b7e
commit
36ad8388cd
5 changed files with 311 additions and 284 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. 1
      src/api/index.js
  2. 22
      src/components/generator/config.js
  3. 22
      src/views/form/index.vue
  4. 534
      src/views/form/preview/ProjectForm.vue
  5. 16
      src/views/form/write/index.vue

1
src/api/index.js
View File

@ -27,6 +27,7 @@ const api = axios.create({
api.interceptors.request.use( api.interceptors.request.use(
request => { request => {
/** /**
* 全局拦截请求发送前提交的参数 * 全局拦截请求发送前提交的参数
* 以下代码为示例，在登录状态下，分别对 post 和 get 请求加上 token 参数 * 以下代码为示例，在登录状态下，分别对 post 和 get 请求加上 token 参数

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

@ -170,16 +170,18 @@ export const selectComponents = [
changeTag: true, changeTag: true,
document: 'https://element.eleme.cn/#/zh-CN/component/cascader' document: 'https://element.eleme.cn/#/zh-CN/component/cascader'
}, },
options: [{ options: [
id: 1, // {
value: 1, // id: 1,
label: '选项1', // value: 1,
children: [{ // label: '选项1',
id: 2, // children: [{
value: 2, // id: 2,
label: '选项1-1' // value: 2,
}] // label: '选项1-1'
}], // }]
// }
],
placeholder: '请选择', placeholder: '请选择',
style: {width: '100%'}, style: {width: '100%'},
props: { props: {

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 {

534
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,254 @@ 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: { accessKey: {
meta: [ type: String,
{ default: ''
name: 'viewport', }
content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' },
} metaInfo: {
] meta: [
}, {
data() { name: 'viewport',
return { content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
logicShowTriggerRule: {}, }
startParser: false, ]
formModel: {}, },
labelFormModel: {}, data () {
projectTheme: { return {
headImgUrl: '', logicShowTriggerRule: {},
logoImg: '', startParser: false,
showTitle: true, formModel: {},
showDescribe: true labelFormModel: {},
}, projectTheme: {
parserKey: +new Date(), headImgUrl: '',
// 每页数据 logoImg: '',
perPageFields: {}, showTitle: true,
formConf: { showDescribe: true
fields: [], },
logicShowRule: {}, parserKey: +new Date(),
projectKey: '', // 每页数据
projectKind: 1, perPageFields: {},
__methods__: {}, formConf: {
formRef: 'elForm', fields: [],
formModel: 'formData', logicShowRule: {},
labelFormModel: 'labelFormData', projectKey: '',
size: 'small', projectKind: 1,
labelPosition: 'top', __methods__: {},
labelWidth: 100, formRef: 'elForm',
formRules: 'rules', formModel: 'formData',
gutter: 15, labelFormModel: 'labelFormData',
disabled: false, size: 'small',
span: 24, labelPosition: 'top',
formBtns: true, labelWidth: 100,
resetBtn: false, formRules: 'rules',
submitBtnText: '提交', gutter: 15,
submitBtnColor: '#409EFF', disabled: false,
showNumber: false, span: 24,
unFocusedComponentBorder: true 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) {
computed: {}, this.formConf.title = res.data.project.name
watch: {}, document.title = res.data.project.name
beforeCreate() { this.formConf.description = res.data.project.describe
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' this.formConf.logicShowRule = this.logicShowTriggerRule
}, // 主题数据
async mounted() { if (res.data.userProjectTheme) {
let url = `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/details/${this.formConf.projectKey}` this.projectTheme = res.data.userProjectTheme
if (this.formConf.projectKind == 2) { let { submitBtnText, showNumber, btnsColor } = res.data.userProjectTheme
url = `${process.env.VUE_APP_API_ROOT_TDUCK}/project/template/details/${this.formConf.projectKey}` if (submitBtnText) this.formConf.submitBtnText = submitBtnText
if (showNumber) this.formConf.showNumber = showNumber
if (btnsColor) this.formConf.submitBtnColor = btnsColor
} }
let logicItemList = [] this.startParser = true
// 处理逻辑表单
if (this.formConf.projectKind == 1) { }
let res = await this.queryLogicItemList() })
logicItemList = res.data },
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 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)
} }
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>

16
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: {
@ -94,11 +96,20 @@ export default {
] ]
}, },
async created () { async created () {
this.clientType = this.$route.query.clientType this.clientType = this.$route.query.clientType
this.orgId = this.$route.query.orgId this.orgId = this.$route.query.orgId
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
console.log('微信传入token')
const token = this.$route.query.token
if (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
@ -106,7 +117,9 @@ export default {
if (wxCode) { if (wxCode) {
this.wxAuthorizationCode = wxCode this.wxAuthorizationCode = wxCode
await this.getWxAuthorizationUserInfo() await this.getWxAuthorizationUserInfo()
} }
this.getWxAuthorizationUrl() this.getWxAuthorizationUrl()
this.queryProjectSettingStatus() this.queryProjectSettingStatus()
this.queryProjectSetting() this.queryProjectSetting()
@ -278,7 +291,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 +306,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