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
Split 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. 24
      src/utils/db.js
  4. 42
      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;
top: 20px;
height: 100vh;
background-color: rgba(255, 255, 255, 100);
}
.el-menu.el-menu--horizontal {
border-bottom: none;
@ -70,10 +71,13 @@ $lighterBlue: #409eff;
.center-scrollbar {
height: calc(100vh - 42px);
overflow: hidden;
width: 80%;
//border-left: 1px solid #f1e8e8;
//border-right: 1px solid #f1e8e8;
margin: 3px;
margin: 20px auto 0;
//margin-top: 20px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 100);
border: 2px solid rgba(255, 255, 255, 100);
}
.center-board {
@ -105,36 +109,6 @@ $lighterBlue: #409eff;
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 {
padding: 12px 12px 15px 12px;
box-sizing: border-box;
@ -288,6 +262,7 @@ $lighterBlue: #409eff;
border: 1px dashed transparent;
width: 80%;
line-height: 30px;
margin: 0;
}
.form-name-text input {
border: none;

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

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

24
src/utils/db.js
View File

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

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

@ -1,14 +1,6 @@
<template>
<div class="container">
<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-col :offset="1" :span="2">
<el-button size="mini" round @click="$router.back(-1)">
@ -68,7 +60,6 @@
<!-- 清空-->
<!-- </el-button>-->
<!-- </div>-->
<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">
@ -80,15 +71,18 @@
</el-menu>
</el-col>
</el-row>
<el-scrollbar class="center-scrollbar">
<el-row class="center-board-row" :gutter="formConf.gutter">
<el-row type="flex" justify="center" align="middle">
<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-row>
<el-row type="flex" justify="center" align="middle">
<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}}
</p>
</el-col>
@ -175,7 +169,6 @@ import {
import {makeUpJs} from '@/components/generator/js'
import {makeUpCss} from '@/components/generator/css'
import drawingDefalut from '@/components/generator/drawingDefalut'
import logo from '@/assets/logo.png'
import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem'
import {
@ -190,9 +183,9 @@ const emptyActiveData = {
}
let oldActiveId
let tempActiveData
const drawingListInDB = getDrawingList()
const formConfInDB = getFormConf()
const idGlobal = getIdGlobal()
let drawingListInDB
let formConfInDB
let idGlobal = 100
export default {
components: {
@ -206,7 +199,6 @@ export default {
},
data() {
return {
logo,
idGlobal,
formConf,
inputComponents,
@ -225,6 +217,7 @@ export default {
activeData: drawingDefalut[0],
saveDrawingListDebounce: debounce(340, saveDrawingList),
saveIdGlobalDebounce: debounce(340, saveIdGlobal),
projectKey: '',
leftComponents: [
{
title: '输入型组件',
@ -262,31 +255,43 @@ export default {
},
drawingList: {
handler(val) {
this.saveDrawingListDebounce(val)
this.saveDrawingListDebounce(val, this.projectKey)
if (val.length === 0) this.idGlobal = 100
},
deep: true
},
idGlobal: {
handler(val) {
this.saveIdGlobalDebounce(val)
this.saveIdGlobalDebounce(val, this.projectKey)
},
immediate: true
}
},
mounted() {
//项目key
let projectKey = this.$route.query.key
//表单内容 如果表单为空 使用默认表单
drawingListInDB = getDrawingList(projectKey)
if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
this.drawingList = drawingListInDB
} else {
this.drawingList = drawingDefalut
}
this.activeFormItem(this.drawingList[0])
//获取表单配置
formConfInDB = getFormConf(projectKey)
if (formConfInDB) {
this.formConf = formConfInDB
}
//全局组件Id
if (getIdGlobal(projectKey)) {
idGlobal = getIdGlobal(projectKey)
}
loadBeautifier(btf => {
beautifier = btf
})
this.projectKey = projectKey
const clipboard = new ClipboardJS('#copyNode', {
text: trigger => {
const codeStr = this.generateCode()
@ -301,6 +306,7 @@ export default {
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
},
methods: {
activeFormItem(currentItem) {

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

@ -42,7 +42,7 @@
</el-col>
</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 style="flex: 1;">
<i style="font-size: 40px; align-items: center;" class="el-icon-plus" />
@ -82,6 +82,7 @@
</template>
<script>
import {formConf} from '@/components/generator/config'
export default {
name: 'CreateProject',
@ -174,7 +175,8 @@ export default {
]
}
},
computed: {}, methods: {
computed: {},
methods: {
getTemplateOffset(index) {
console.log(index)
// if (index == 5 || (index != 6 && index != 0 && index % 6 === 0)) {
@ -184,6 +186,12 @@ export default {
return 3
}
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