Browse Source

列表和停止发布页面

master
jiangyy 4 years ago
parent
commit
2f49e19732
  1. 1
      src/utils/convert.js
  2. 94
      src/views/form/editor/index.vue
  3. 6
      src/views/form/statistics/list.vue
  4. 4
      src/views/form/statistics/public.vue

1
src/utils/convert.js

@ -16,6 +16,7 @@ import {
* @param item
*/
export function formItemConvertData(item, projectKey) {
let data = {
'itemKey': item.__config__.name,
'moduleType': item.__config__.moduleType,

94
src/views/form/editor/index.vue

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

6
src/views/form/statistics/list.vue

@ -174,8 +174,10 @@ import { getCheckedColumn, saveCheckedColumn } from '@/utils/db'
const fixedDefaultFormColumn = ['serialNumber']
const fixedDefaultLabelFormColumn = { serialNumber: '提交序号' }
//
const fixedDefaultFormTailColumn = ['submitAddress', 'createdTime']
const fixedDefaultLabelFormTailColumn = { submitAddress: '提交地址', createdTime: '提交时间' }
// const fixedDefaultFormTailColumn = ['submitAddress', 'createdTime']
const fixedDefaultFormTailColumn = ['createdTime']
// const fixedDefaultLabelFormTailColumn = { submitAddress: '', createdTime: '' }
const fixedDefaultLabelFormTailColumn = { createdTime: '提交时间' }
export default {
name: 'ProjectStatisticsList',

4
src/views/form/statistics/public.vue

@ -24,8 +24,8 @@
</el-table-column>
<el-table-column label="提交序号"
prop="serialNumber" />
<el-table-column label="提交地址"
prop="submitAddress" />
<!-- <el-table-column label="提交地址"
prop="submitAddress" /> -->
<el-table-column label="提交时间"
prop="createdTime" />
</el-table>

Loading…
Cancel
Save