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

dd

master
13176889840 4 years ago
parent
6a71f717eb 94f56ad967
commit
c48a156482
2 changed files with 401 additions and 387 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. 2
      src/api/index.js
  2. 96
      src/views/form/editor/index.vue

2
src/api/index.js
View File

@ -34,7 +34,7 @@ api.interceptors.request.use(
*/ */
if (store.getters['user/isLogin']) { if (store.getters['user/isLogin']) {
request.headers.token = store.state.user.token request.headers.token = store.state.user.token
// request.headers.token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJhcHAiOiJnb3YiLCJjbGllbnQiOiJ3ZWIiLCJleHAiOjE2MzMwNTM0NTYsInVzZXJJZCI6Ijg0ODg3ZDQzMjEzN2EzMGI3YWJhYWM1MDY5ODZkNDYxIiwiaWF0IjoxNjMyNDQ4NjU2fQ.xc2Dz5yPaNLCJsQCZnBYKgTTb88PhBZ1E5g3NaqImhHOwOE4R_OAexct7FdSs6oh3Eqzf4Bw9e7mWHkAoFeroQ' // request.headers.token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJhcHAiOiJnb3YiLCJjbGllbnQiOiJ3ZWIiLCJleHAiOjE2NDk0OTQwMzQsInVzZXJJZCI6ImViY2VmN2MxYzYzYTg3YTIyNmU1OWYxZTAxNDlkMzMxIiwiaWF0IjoxNjQ4ODg5MjM0fQ.Zque4dkZDdqhqzUktp3kJ2I3FlH7q2c8ePbMCwqglVuAnfqozxnqRlXIHJF9RDVA1mSayPaZqYEeia5zztciFQ'
// request.headers.Authorization = store.state.user.token // request.headers.Authorization = store.state.user.token
} }
signRequest(request) signRequest(request)

96
src/views/form/editor/index.vue
View File

@ -4,7 +4,8 @@
<el-scrollbar class="left-scrollbar"> <el-scrollbar class="left-scrollbar">
<div class="components-list"> <div class="components-list">
<div v-for="(item, listIndex) in leftComponents" <div v-for="(item, listIndex) in leftComponents"
:key="listIndex"> :key="listIndex"
>
<div class="components-title"> <div class="components-title">
<svg-icon name="component" /> <svg-icon name="component" />
{{ item.title }} {{ item.title }}
@ -15,11 +16,13 @@
:sort="false" :sort="false"
class="components-draggable" class="components-draggable"
draggable=".components-item" draggable=".components-item"
@end="onEnd"> @end="onEnd"
>
<div v-for="(element, index) in item.list" <div v-for="(element, index) in item.list"
:key="index" :key="index"
class="components-item" class="components-item"
@click="addComponent(element)"> @click="addComponent(element)"
>
<div class="components-body"> <div class="components-body">
<svg-icon :name="element.__config__.tagIcon" /> <svg-icon :name="element.__config__.tagIcon" />
{{ element.__config__.label }} {{ element.__config__.label }}
@ -34,33 +37,39 @@
<el-scrollbar class="center-scrollbar"> <el-scrollbar class="center-scrollbar">
<el-row v-if="formConf" <el-row v-if="formConf"
:gutter="formConf.gutter" :gutter="formConf.gutter"
class="center-board-row"> class="center-board-row"
>
<el-row align="middle" <el-row align="middle"
justify="center" justify="center"
type="flex"> type="flex"
>
<el-col class="form-head-title"> <el-col class="form-head-title">
<h4 class="form-name-text" <h4 class="form-name-text"
contenteditable="true" contenteditable="true"
@blur="(event)=>{ @blur="(event)=>{
this.formConf.title=event.target.innerText; this.formConf.title=event.target.innerText;
this.saveProjectInfo()}"> this.saveProjectInfo()}"
>
{{ formConf.title }} {{ formConf.title }}
</h4> </h4>
</el-col> </el-col>
</el-row> </el-row>
<el-row align="middle" <el-row align="middle"
justify="center" justify="center"
type="flex"> type="flex"
>
<el-col class="form-head-desc"> <el-col class="form-head-desc">
<Tinymce v-if="editDescription" <Tinymce v-if="editDescription"
v-model="formConf.description" v-model="formConf.description"
placeholder="请输入表单描述" placeholder="请输入表单描述"
@blur="editDescription=false" @blur="editDescription=false"
@input="saveProjectInfo" /> @input="saveProjectInfo"
/>
<div v-else <div v-else
class="form-name-text" class="form-name-text"
@click="editDescription=true" @click="editDescription=true"
v-html="formConf.description" /> v-html="formConf.description"
/>
<!-- <p class="form-name-text" contenteditable="true"--> <!-- <p class="form-name-text" contenteditable="true"-->
<!-- @blur="(event)=>{--> <!-- @blur="(event)=>{-->
<!-- formConf.description=event.target.innerText;--> <!-- formConf.description=event.target.innerText;-->
@ -73,12 +82,14 @@
<el-form :disabled="formConf.disabled" <el-form :disabled="formConf.disabled"
:label-position="formConf.labelPosition" :label-position="formConf.labelPosition"
:label-width="formConf.labelWidth + 'px'" :label-width="formConf.labelWidth + 'px'"
:size="formConf.size"> :size="formConf.size"
>
<draggable :animation="340" <draggable :animation="340"
:list="drawingList" :list="drawingList"
class="drawing-board" class="drawing-board"
group="componentsGroup" group="componentsGroup"
@end="onItemEnd"> @end="onItemEnd"
>
<draggable-item v-for="(item, index) in drawingList" <draggable-item v-for="(item, index) in drawingList"
:key="item.renderKey" :key="item.renderKey"
:active-id="activeId" :active-id="activeId"
@ -89,12 +100,15 @@
@activeItem="activeFormItem" @activeItem="activeFormItem"
@changeLabel="changeLabel" @changeLabel="changeLabel"
@copyItem="drawingItemCopy" @copyItem="drawingItemCopy"
@deleteItem="drawingItemDelete" /> @deleteItem="drawingItemDelete"
/>
</draggable> </draggable>
<div v-show="!drawingList.length" <div v-show="!drawingList.length"
class="empty-info"> class="empty-info"
>
<img style="width: 20%" <img style="width: 20%"
src="@/assets/images/form-bg.png"> src="@/assets/images/form-bg.png"
>
<p>从左侧拖入或点选组件进行表单设计</p> <p>从左侧拖入或点选组件进行表单设计</p>
</div> </div>
</el-form> </el-form>
@ -106,7 +120,8 @@
:form-conf="formConf" :form-conf="formConf"
:show-field="!!drawingList.length" :show-field="!!drawingList.length"
@tag-change="tagChange" @tag-change="tagChange"
@data-change="updateProjectItemInfo" /> @data-change="updateProjectItemInfo"
/>
</div> </div>
</template> </template>
@ -139,7 +154,7 @@ export default {
RightPanel, RightPanel,
DraggableItem DraggableItem
}, },
data () { data() {
return { return {
idGlobal, idGlobal,
formConf: null, formConf: null,
@ -185,7 +200,7 @@ export default {
computed: {}, computed: {},
watch: { watch: {
// eslint-disable-next-line func-names // eslint-disable-next-line func-names
'activeData.__config__.label': function (val, oldVal) { 'activeData.__config__.label': function(val, oldVal) {
if ( if (
this.activeData.placeholder === undefined this.activeData.placeholder === undefined
|| !this.activeData.__config__.tag || !this.activeData.__config__.tag
@ -196,20 +211,20 @@ export default {
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
}, },
activeId: { activeId: {
handler (val) { handler(val) {
oldActiveId = val oldActiveId = val
}, },
immediate: true immediate: true
}, },
drawingList: { drawingList: {
handler (val) { handler(val) {
this.saveDrawingListDebounce(val, this.projectKey) this.saveDrawingListDebounce(val, this.projectKey)
if (val.length === 0) this.idGlobal = 100 if (val.length === 0) this.idGlobal = 100
}, },
deep: true deep: true
}, },
idGlobal: { idGlobal: {
handler (val) { handler(val) {
if (val) { if (val) {
this.saveIdGlobalDebounce(val, this.projectKey) this.saveIdGlobalDebounce(val, this.projectKey)
} }
@ -217,7 +232,7 @@ export default {
immediate: true immediate: true
} }
}, },
mounted () { mounted() {
// 复制对象 避免修改改变原始对象 // 复制对象 避免修改改变原始对象
this.formConf = JSON.parse(JSON.stringify(formConf)) this.formConf = JSON.parse(JSON.stringify(formConf))
@ -238,7 +253,7 @@ export default {
}) })
}, },
methods: { methods: {
saveProjectInfo: debounce(430, true, function () { saveProjectInfo: debounce(430, true, function() {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/update`, { this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/update`, {
'key': this.projectKey, 'key': this.projectKey,
'name': this.formConf.title, 'name': this.formConf.title,
@ -247,22 +262,21 @@ export default {
}) })
}), }),
updateProjectItemInfo (val) { updateProjectItemInfo(val) {
let data = formItemConvertData(val, this.projectKey) let data = formItemConvertData(val, this.projectKey)
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/update`, data).then(() => { this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/update`, data).then(() => {
}) })
}, },
deleteProjectItemInfo (val) { deleteProjectItemInfo(val) {
let data = formItemConvertData(val, this.projectKey) let data = formItemConvertData(val, this.projectKey)
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/delete`, data).then(() => { this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/delete`, data).then(() => {
}) })
}, },
async saveProjectItemInfo (item) { async saveProjectItemInfo(item) {
let isSuccess = false let isSuccess = false
let params = formItemConvertData(item, this.projectKey) let params = formItemConvertData(item, this.projectKey)
console.log(params)
let pItem = item let pItem = item
await this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/create`, params).then(res => { await this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/create`, params).then(res => {
pItem.sort = res.data.sort pItem.sort = res.data.sort
@ -274,7 +288,7 @@ export default {
} }
return isSuccess return isSuccess
}, },
updatePaginationList () { updatePaginationList() {
// 页总数 // 页总数
const length = this.drawingList.filter(item => item.typeId === 'PAGINATION').length const length = this.drawingList.filter(item => item.typeId === 'PAGINATION').length
let curr = 1 let curr = 1
@ -286,22 +300,22 @@ export default {
} }
}) })
}, },
queryProjectItems () { queryProjectItems() {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/list`, { params: { key: this.projectKey } }).then(res => { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/list`, { params: { key: this.projectKey } }).then(res => {
this.drawingList = res.data.map(item => dbDataConvertForItemJson(item)) this.drawingList = res.data.map(item => dbDataConvertForItemJson(item))
// 更新分页 // 更新分页
this.updatePaginationList() this.updatePaginationList()
}) })
}, },
activeFormItem (currentItem) { activeFormItem(currentItem) {
this.activeData = currentItem this.activeData = currentItem
this.activeId = currentItem.__config__.formId this.activeId = currentItem.__config__.formId
}, },
changeLabel (currentItem, value) { changeLabel(currentItem, value) {
console.log(currentItem) console.log(currentItem)
console.log(value) console.log(value)
}, },
onEnd (obj) { onEnd(obj) {
if (obj.from !== obj.to) { if (obj.from !== obj.to) {
this.activeData = tempActiveData this.activeData = tempActiveData
this.activeId = this.idGlobal this.activeId = this.idGlobal
@ -310,7 +324,7 @@ export default {
}) })
} }
}, },
onItemEnd (obj) { onItemEnd(obj) {
let params = { 'projectKey': this.projectKey } let params = { 'projectKey': this.projectKey }
if (this.drawingList[obj.newIndex - 1]) { if (this.drawingList[obj.newIndex - 1]) {
let sort1 = this.drawingList[obj.newIndex - 1].sort let sort1 = this.drawingList[obj.newIndex - 1].sort
@ -327,22 +341,22 @@ export default {
}) })
} }
}, },
addComponent (item) { addComponent(item) {
const clone = this.cloneComponent(item) const clone = this.cloneComponent(item)
this.saveProjectItemInfo(clone) this.saveProjectItemInfo(clone)
this.drawingList.push(clone) this.drawingList.push(clone)
this.activeFormItem(clone) this.activeFormItem(clone)
}, },
cloneComponent (origin) { cloneComponent(origin) {
const clone = deepClone(origin) const clone = deepClone(origin)
const config = clone.__config__ const config = clone.__config__
config.span = this.formConf.span // 生成代码时，会根据span做精简判断 config.span = this.formConf.span // 生成代码时，会根据span做精简判断
this.createIdAndKey(clone) this.createIdAndKey(clone)
clone.placeholder !== undefined && (clone.placeholder += config.label) clone.placeholder !== undefined && (clone.placeholder)
tempActiveData = clone tempActiveData = clone
return tempActiveData return tempActiveData
}, },
createIdAndKey (item) { createIdAndKey(item) {
const config = item.__config__ const config = item.__config__
config.formId = ++this.idGlobal config.formId = ++this.idGlobal
config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件 config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
@ -358,7 +372,7 @@ export default {
} }
return item return item
}, },
empty () { empty() {
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }) this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' })
.then( .then(
() => { () => {
@ -367,14 +381,14 @@ export default {
} }
) )
}, },
drawingItemCopy (item, list) { drawingItemCopy(item, list) {
let clone = deepClone(item) let clone = deepClone(item)
clone = this.createIdAndKey(clone) clone = this.createIdAndKey(clone)
list.push(clone) list.push(clone)
this.activeFormItem(clone) this.activeFormItem(clone)
this.saveProjectItemInfo(clone) this.saveProjectItemInfo(clone)
}, },
drawingItemDelete (index, list) { drawingItemDelete(index, list) {
let item = list[index] let item = list[index]
list.splice(index, 1) list.splice(index, 1)
this.$nextTick(() => { this.$nextTick(() => {
@ -385,7 +399,7 @@ export default {
}) })
this.deleteProjectItemInfo(item) this.deleteProjectItemInfo(item)
}, },
tagChange (newTag) { tagChange(newTag) {
newTag = this.cloneComponent(newTag) newTag = this.cloneComponent(newTag)
const config = newTag.__config__ const config = newTag.__config__
newTag.__vModel__ = this.activeData.__vModel__ newTag.__vModel__ = this.activeData.__vModel__
@ -409,7 +423,7 @@ export default {
this.updateProjectItemInfo(newTag) this.updateProjectItemInfo(newTag)
this.updateDrawingList(newTag, this.drawingList) this.updateDrawingList(newTag, this.drawingList)
}, },
updateDrawingList (newTag, list) { updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.__config__.formId === this.activeId) const index = list.findIndex(item => item.__config__.formId === this.activeId)
if (index > -1) { if (index > -1) {
list.splice(index, 1, newTag) list.splice(index, 1, newTag)

Write Preview
Loading…
Cancel
Save