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

表单完善

old
wangqing 5 years ago
parent
fa4b44748d
commit
420d80ba35
5 changed files with 100 additions and 111 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. 37
      src/assets/styles/home.scss
  2. 2
      src/components/generator/config.js
  3. 58
      src/utils/db.js
  4. 102
      src/views/form/index.vue
  5. 12
      src/views/project/create.vue

37
src/assets/styles/home.scss
View File

@ -53,6 +53,7 @@ $lighterBlue: #409eff;
left: 0; left: 0;
top: 20px; top: 20px;
height: 100vh; height: 100vh;
background-color: rgba(255, 255, 255, 100);
} }
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
border-bottom: none; border-bottom: none;
@ -70,10 +71,13 @@ $lighterBlue: #409eff;
.center-scrollbar { .center-scrollbar {
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
width: 80%;
//border-left: 1px solid #f1e8e8; //border-left: 1px solid #f1e8e8;
//border-right: 1px solid #f1e8e8; //border-right: 1px solid #f1e8e8;
margin: 3px; margin: 20px auto 0;
//margin-top: 20px;
box-sizing: border-box; box-sizing: border-box;
background-color: rgba(255, 255, 255, 100);
border: 2px solid rgba(255, 255, 255, 100); border: 2px solid rgba(255, 255, 255, 100);
} }
.center-board { .center-board {
@ -105,36 +109,6 @@ $lighterBlue: #409eff;
color: #f56c6c; color: #f56c6c;
} }
} }
.logo-wrapper {
position: relative;
height: 42px;
background: #fff;
border-bottom: 1px solid #f1e8e8;
box-sizing: border-box;
}
.logo {
position: absolute;
left: 12px;
top: 6px;
line-height: 30px;
color: #00afff;
font-weight: 600;
font-size: 17px;
white-space: nowrap;
> img {
width: 30px;
height: 30px;
vertical-align: top;
}
.github {
display: inline-block;
vertical-align: sub;
margin-left: 15px;
> img {
height: 22px;
}
}
}
.center-board-row { .center-board-row {
padding: 12px 12px 15px 12px; padding: 12px 12px 15px 12px;
box-sizing: border-box; box-sizing: border-box;
@ -288,6 +262,7 @@ $lighterBlue: #409eff;
border: 1px dashed transparent; border: 1px dashed transparent;
width: 80%; width: 80%;
line-height: 30px; line-height: 30px;
margin: 0;
} }
.form-name-text input { .form-name-text input {
border: none; border: none;

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

@ -6,7 +6,7 @@ export const formConf = {
labelPosition: 'top', labelPosition: 'top',
labelWidth: 100, labelWidth: 100,
formRules: 'rules', formRules: 'rules',
gutter: 15, gutter: 20,
disabled: false, disabled: false,
span: 24, span: 24,
title: '问卷名称', title: '问卷名称',

58
src/utils/db.js
View File

@ -5,50 +5,50 @@ const DRAWING_ID = 'idGlobal'
const TREE_NODE_ID = 'treeNodeId' const TREE_NODE_ID = 'treeNodeId'
const FORM_CONF = 'formConf' const FORM_CONF = 'formConf'
export function getDrawingList() { export function getDrawingList(key) {
// 加入缓存版本的概念，保证缓存数据与程序匹配 // 加入缓存版本的概念，保证缓存数据与程序匹配
const version = localStorage.getItem(DRAWING_ITEMS_VERSION_KEY) const version = localStorage.getItem(DRAWING_ITEMS_VERSION_KEY)
if (version !== DRAWING_ITEMS_VERSION) { if (version !== DRAWING_ITEMS_VERSION) {
localStorage.setItem(DRAWING_ITEMS_VERSION_KEY, DRAWING_ITEMS_VERSION) localStorage.setItem(DRAWING_ITEMS_VERSION_KEY, DRAWING_ITEMS_VERSION)
saveDrawingList([]) saveDrawingList([])
return null
}
const str = localStorage.getItem(`${DRAWING_ITEMS}:${key}`)
if (str) return JSON.parse(str)
return null return null
}
const str = localStorage.getItem(DRAWING_ITEMS)
if (str) return JSON.parse(str)
return null
} }
export function saveDrawingList(list) { export function saveDrawingList(list, key) {
localStorage.setItem(DRAWING_ITEMS, JSON.stringify(list)) if (key) localStorage.setItem(`${DRAWING_ITEMS}:${key}`, JSON.stringify(list))
} }
export function getIdGlobal() { export function getIdGlobal(key) {
const str = localStorage.getItem(DRAWING_ID) const str = localStorage.getItem(`${DRAWING_ID}:${key}`)
if (str) return parseInt(str, 10) if (str) return parseInt(str, 10)
return 100 return 100
} }
export function saveIdGlobal(id) { export function saveIdGlobal(id, key) {
localStorage.setItem(DRAWING_ID, `${id}`) if (key) localStorage.setItem(`${DRAWING_ID}:${key}`, `${id}`)
} }
export function getTreeNodeId() { export function getTreeNodeId() {
const str = localStorage.getItem(TREE_NODE_ID) const str = localStorage.getItem(TREE_NODE_ID)
if (str) return parseInt(str, 10) if (str) return parseInt(str, 10)
return 100 return 100
} }
export function saveTreeNodeId(id) { export function saveTreeNodeId(id) {
localStorage.setItem(TREE_NODE_ID, `${id}`) localStorage.setItem(TREE_NODE_ID, `${id}`)
} }
export function getFormConf() { export function getFormConf(key) {
const str = localStorage.getItem(FORM_CONF) const str = localStorage.getItem(`${FORM_CONF}:${key}` + key)
if (str) return JSON.parse(str) if (str) return JSON.parse(str)
return null return null
} }
export function saveFormConf(obj) { export function saveFormConf(obj, key) {
localStorage.setItem(FORM_CONF, JSON.stringify(obj)) if (key) localStorage.setItem(`${FORM_CONF}:${key}`, JSON.stringify(obj))
} }

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

@ -1,18 +1,10 @@
<template> <template>
<div class="container"> <div class="container">
<div class="left-board" > <div class="left-board">
<!-- <div class="logo-wrapper">-->
<!-- <div class="logo">-->
<!-- <img :src="logo" alt="logo"> Form Generator-->
<!-- <a class="github" href="https://github.com/JakHuang/form-generator" target="_blank">-->
<!-- <img src="https://github.githubassets.com/pinned-octocat.svg" alt>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<el-row> <el-row>
<el-col :offset="1" :span="2"> <el-col :offset="1" :span="2">
<el-button size="mini" round @click="$router.back(-1)"> <el-button size="mini" round @click="$router.back(-1)">
<i class="el-icon-arrow-left" /> <i class="el-icon-arrow-left"/>
返回 返回
</el-button> </el-button>
</el-col> </el-col>
@ -51,44 +43,46 @@
</div> </div>
<div class="center-board"> <div class="center-board">
<!-- <div class="action-bar">--> <!-- <div class="action-bar">-->
<!-- <el-button icon="el-icon-video-play" type="text" @click="run">--> <!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
<!-- 运行--> <!-- 运行-->
<!-- </el-button>--> <!-- </el-button>-->
<!-- <el-button icon="el-icon-view" type="text" @click="showJson">--> <!-- <el-button icon="el-icon-view" type="text" @click="showJson">-->
<!-- 查看json--> <!-- 查看json-->
<!-- </el-button>--> <!-- </el-button>-->
<!-- <el-button icon="el-icon-download" type="text" @click="download">--> <!-- <el-button icon="el-icon-download" type="text" @click="download">-->
<!-- 导出vue文件--> <!-- 导出vue文件-->
<!-- </el-button>--> <!-- </el-button>-->
<!-- <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">--> <!-- <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">-->
<!-- 复制代码--> <!-- 复制代码-->
<!-- </el-button>--> <!-- </el-button>-->
<!-- <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">--> <!-- <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">-->
<!-- 清空--> <!-- 清空-->
<!-- </el-button>--> <!-- </el-button>-->
<!-- </div>--> <!-- </div>-->
<el-row type="flex" align="middle" justify="justify">
<el-col :span="18" :offset="6">
<el-menu default-active="1" style="background-color: transparent" mode="horizontal">
<el-menu-item index="1">编辑</el-menu-item>
<el-menu-item index="2">外观</el-menu-item>
<el-menu-item index="3">设置</el-menu-item>
<el-menu-item index="4">发布</el-menu-item>
<el-menu-item index="5">统计</el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-scrollbar class="center-scrollbar"> <el-scrollbar class="center-scrollbar">
<el-row type="flex" align="middle" justify="justify">
<el-col :span="18" :offset="6">
<el-menu default-active="1" style="background-color: transparent" mode="horizontal">
<el-menu-item index="1">编辑</el-menu-item>
<el-menu-item index="2">外观</el-menu-item>
<el-menu-item index="3">设置</el-menu-item>
<el-menu-item index="4">发布</el-menu-item>
<el-menu-item index="5">统计</el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-row class="center-board-row" :gutter="formConf.gutter"> <el-row class="center-board-row" :gutter="formConf.gutter">
<el-row type="flex" justify="center" align="middle"> <el-row type="flex" justify="center" align="middle">
<el-col :span="20" style="text-align: center"> <el-col :span="20" style="text-align: center">
<h4 class="form-name-text" contenteditable="true" @input="(event)=>{formConf.title=event.target.innerText}">{{formConf.title}}</h4> <h4 class="form-name-text" contenteditable="true"
@input="(event)=>{formConf.title=event.target.innerText}">{{formConf.title}}</h4>
</el-col> </el-col>
</el-row> </el-row>
<el-row type="flex" justify="center" align="middle"> <el-row type="flex" justify="center" align="middle">
<el-col :span="20" style="text-align: center"> <el-col :span="20" style="text-align: center">
<p class="form-name-text" contenteditable="true" @input="(event)=>{formConf.description=event.target.innerText}"> <p class="form-name-text" contenteditable="true"
@input="(event)=>{formConf.description=event.target.innerText}">
{{formConf.description}} {{formConf.description}}
</p> </p>
</el-col> </el-col>
@ -175,7 +169,6 @@ import {
import {makeUpJs} from '@/components/generator/js' import {makeUpJs} from '@/components/generator/js'
import {makeUpCss} from '@/components/generator/css' import {makeUpCss} from '@/components/generator/css'
import drawingDefalut from '@/components/generator/drawingDefalut' import drawingDefalut from '@/components/generator/drawingDefalut'
import logo from '@/assets/logo.png'
import CodeTypeDialog from './CodeTypeDialog' import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem' import DraggableItem from './DraggableItem'
import { import {
@ -190,9 +183,9 @@ const emptyActiveData = {
} }
let oldActiveId let oldActiveId
let tempActiveData let tempActiveData
const drawingListInDB = getDrawingList() let drawingListInDB
const formConfInDB = getFormConf() let formConfInDB
const idGlobal = getIdGlobal() let idGlobal = 100
export default { export default {
components: { components: {
@ -206,7 +199,6 @@ export default {
}, },
data() { data() {
return { return {
logo,
idGlobal, idGlobal,
formConf, formConf,
inputComponents, inputComponents,
@ -225,6 +217,7 @@ export default {
activeData: drawingDefalut[0], activeData: drawingDefalut[0],
saveDrawingListDebounce: debounce(340, saveDrawingList), saveDrawingListDebounce: debounce(340, saveDrawingList),
saveIdGlobalDebounce: debounce(340, saveIdGlobal), saveIdGlobalDebounce: debounce(340, saveIdGlobal),
projectKey: '',
leftComponents: [ leftComponents: [
{ {
title: '输入型组件', title: '输入型组件',
@ -262,31 +255,43 @@ export default {
}, },
drawingList: { drawingList: {
handler(val) { handler(val) {
this.saveDrawingListDebounce(val) 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) {
this.saveIdGlobalDebounce(val) this.saveIdGlobalDebounce(val, this.projectKey)
}, },
immediate: true immediate: true
} }
}, },
mounted() { mounted() {
//项目key
let projectKey = this.$route.query.key
//表单内容 如果表单为空 使用默认表单
drawingListInDB = getDrawingList(projectKey)
if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) { if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
this.drawingList = drawingListInDB this.drawingList = drawingListInDB
} else { } else {
this.drawingList = drawingDefalut this.drawingList = drawingDefalut
} }
this.activeFormItem(this.drawingList[0]) this.activeFormItem(this.drawingList[0])
//获取表单配置
formConfInDB = getFormConf(projectKey)
if (formConfInDB) { if (formConfInDB) {
this.formConf = formConfInDB this.formConf = formConfInDB
} }
//全局组件Id
if (getIdGlobal(projectKey)) {
idGlobal = getIdGlobal(projectKey)
}
loadBeautifier(btf => { loadBeautifier(btf => {
beautifier = btf beautifier = btf
}) })
this.projectKey = projectKey
const clipboard = new ClipboardJS('#copyNode', { const clipboard = new ClipboardJS('#copyNode', {
text: trigger => { text: trigger => {
const codeStr = this.generateCode() const codeStr = this.generateCode()
@ -301,6 +306,7 @@ export default {
clipboard.on('error', e => { clipboard.on('error', e => {
this.$message.error('代码复制失败') this.$message.error('代码复制失败')
}) })
}, },
methods: { methods: {
activeFormItem(currentItem) { activeFormItem(currentItem) {
@ -462,7 +468,7 @@ export default {
} }
</script> </script>
<style lang='scss' > <style lang='scss'>
@import '@/assets/styles/home'; @import '@/assets/styles/home';
@import '@/assets/styles/index'; @import '@/assets/styles/index';
</style> </style>

12
src/views/project/create.vue
View File

@ -42,7 +42,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :offset="3" :span="3" @click.native="$router.push({path:'/project/form'})"> <el-col :offset="3" :span="3" @click.native="createBlankTemplate">
<div class="project-template-view" style="display: flex; align-items: center;"> <div class="project-template-view" style="display: flex; align-items: center;">
<div style="flex: 1;"> <div style="flex: 1;">
<i style="font-size: 40px; align-items: center;" class="el-icon-plus" /> <i style="font-size: 40px; align-items: center;" class="el-icon-plus" />
@ -82,6 +82,7 @@
</template> </template>
<script> <script>
import {formConf} from '@/components/generator/config'
export default { export default {
name: 'CreateProject', name: 'CreateProject',
@ -174,7 +175,8 @@ export default {
] ]
} }
}, },
computed: {}, methods: { computed: {},
methods: {
getTemplateOffset(index) { getTemplateOffset(index) {
console.log(index) console.log(index)
// if (index == 5 || (index != 6 && index != 0 && index % 6 === 0)) { // if (index == 5 || (index != 6 && index != 0 && index % 6 === 0)) {
@ -184,6 +186,12 @@ export default {
return 3 return 3
} }
return 0 return 0
},
createBlankTemplate() {
this.$api.post('/project/create', {'describe': formConf.description, 'name': formConf.title}).then(res => {
console.log(res)
this.$router.push({path: '/project/form', query: {key: res.data}})
})
} }
} }
} }

Write Preview
Loading…
Cancel
Save