Skip to content

A
attendance-performance-platform
Commit 38fba130 authored by 王启林's avatar 王启林
Browse files
Options

表单页面调整

parent 0786c9be
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 11 deletions
attendance-performance-manager-ui/admin/src/views/feedback/addQuestion/list.vue
View file @ 38fba130
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<el-tab-pane label="设计问卷" name="1"> <el-tab-pane label="设计问卷" name="1">
<fc-designer style="height: 79vh;" ref="designer"> <fc-designer style="height: 79vh;" ref="designer">
<template slot="handle"> <template slot="handle">
<ElButton icon="el-icon-upload" type="success" size="small" @click="showDrawer" round>移动端预览 <ElButton style="margin-left: 10px;" icon="el-icon-upload" type="primary" size="small"
@click="issueBtn" round>问卷发布
</ElButton>
<ElButton icon="el-icon-view" type="success" size="small" @click="showDrawer" round>H5预览
</ElButton> </ElButton>
</template> </template>
</fc-designer> </fc-designer>
...@@ -31,6 +34,30 @@ ...@@ -31,6 +34,30 @@
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
<el-dialog title="问卷发布" :visible.sync="issueDialog" width="30%" top="25vh">
<el-form :model="issueForm">
<el-form-item label="问卷封面：" label-width="125px">
<div style="display: flex;align-items: center;">
<img style="width:80px; height: 50px; margin-right: 10px;cursor: pointer;"
v-for="i in issueForm.cover" :src="i" alt="">
</div>
<!-- <el-input v-model="issueForm.cover" autocomplete="off"></el-input> -->
</el-form-item>
<el-form-item label="反馈期限：" label-width="125px">
<el-date-picker v-model="issueForm.time" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="邀请人员：" label-width="125px">
<el-button type="success" size="small">选择人员</el-button>
</el-form-item>
<div style="text-align: center;">
<el-button size="small" @click="issueDialog = false">取消</el-button>
<el-button type="primary" size="small" @click="issueFormBtn">发布</el-button>
</div>
</el-form>
</el-dialog>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -43,8 +70,15 @@ export default { ...@@ -43,8 +70,15 @@ export default {
return { return {
tabs: '1', tabs: '1',
drawer: 0, drawer: 0,
Frule: '', Frule: [],
Fopthion: '', Fopthion: '',
issueDialog: false,
issueForm: {
cover: [
'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26101.svg',
'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26102.svg'
]
},
} }
}, },
mounted() { mounted() {
...@@ -75,11 +109,31 @@ export default { ...@@ -75,11 +109,31 @@ export default {
this.$refs.designer.removeMenuItem("timePicker") this.$refs.designer.removeMenuItem("timePicker")
this.$refs.designer.removeMenuItem("switch") this.$refs.designer.removeMenuItem("switch")
this.$refs.designer.removeMenuItem("tree") this.$refs.designer.removeMenuItem("tree")
this.$refs.designer.removeMenuItem("inputNumber")
this.$refs.designer.removeMenuItem("select")
this.$refs.designer.removeMenuItem("fc-editor")
this.$refs.designer.removeMenuItem("el-button")
this.$refs.designer.removeMenuItem("el-divider")
//配置组件生成规则---直接配置显示在页面上 //配置组件生成规则---直接配置显示在页面上
// const rule = [{ "type": "input", "field": "int", "title": "输入框", "info": "", "_fc_drag_tag": "input", "hidden": false, "display": true }] // const rule = [{ "type": "input", "field": "int", "title": "输入框", "info": "", "_fc_drag_tag": "input", "hidden": false, "display": true }]
// this.$refs.designer.setRule(rule) // this.$refs.designer.setRule(rule)
}, },
methods: { methods: {
//问卷发布
issueBtn() {
this.Frule = formCreate.parseJson(this.getFormJson())
this.Fopthion = formCreate.parseJson(this.getFormOption())
console.log(this.Frule)
//判断是否配置了表单
if (this.Frule.length > 0) {
this.issueDialog = true
} else {
this.$message({
message: '请配置表单后发布',
type: 'warning'
});
}
},
//预览生成按钮的输出 //预览生成按钮的输出
onSubmit(formData) { onSubmit(formData) {
console.log(formData) console.log(formData)
...@@ -101,12 +155,20 @@ export default { ...@@ -101,12 +155,20 @@ export default {
const FcDesignerOptions = this.$refs.designer.getOption(); const FcDesignerOptions = this.$refs.designer.getOption();
console.log(FcDesignerOptions) console.log(FcDesignerOptions)
return JSON.stringify(FcDesignerOptions) return JSON.stringify(FcDesignerOptions)
},
issueFormBtn() {
console.log(this.issueForm)
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/._fc-m-tools {
flex-direction: row-reverse;
justify-content: flex-start;
}
/deep/._fc-l-title { /deep/._fc-l-title {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
......
attendance-performance-manager-ui/admin/src/views/feedback/questionnaire/list.vue
View file @ 38fba130
...@@ -18,22 +18,65 @@ ...@@ -18,22 +18,65 @@
</div> </div>
<div class="content"> <div class="content">
<div class="cLeft"></div> <div class="cLeft">
<div class="title">
全部数据（220）
<span style="font-weight: 400; font-size: 16px;margin-left: 20px;">已反馈（1）</span>
<span style="font-weight: 400; font-size: 16px;margin-left: 20px;">未反馈（219）</span>
</div>
<el-button class="m15" type="primary" size="small">导出数据</el-button>
<div class="lBox m15">
<div class="treeS">
<el-tree :data="treeData" :props="defaultProps" @node-click="treeSub"></el-tree>
</div>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
</div>
<div class="cRight"> <div class="cRight">
<div class="title"> <div class="title">
题型数据分析 题型数据分析
</div> </div>
<div class="box"> <div class="scroll">
<div style="display: flex;align-items: center;"> <div class="box" v-for="i in 2">
<el-tag type="primary" effect="plain">单项选择</el-tag> <div style="display: flex;align-items: center;">
<div style="margin-left: 10px;">1.你是男性还是女性</div> <el-tag type="primary" effect="plain">单项选择</el-tag>
<div style="margin-left: 10px;">1.你是男性还是女性</div>
</div>
<div class="m15"
style="display: flex;align-items: center;justify-content: space-around; width: 40%;">
<div style="text-align: center;">
<el-progress type="circle" :percentage="45" show-text width="75">男</el-progress>
<div>男</div>
</div>
<div style="text-align: center;">
<el-progress type="circle" :percentage="45" show-text width="75">男</el-progress>
<div>女</div>
</div>
</div>
</div> </div>
<div> <div class="box m15" v-for="i in 4">
<el-progress type="circle" :percentage="45">男</el-progress> <div style="display: flex;align-items: center;">
<el-progress type="circle" :percentage="55">女</el-progress> <el-tag type="primary" effect="plain">单项选择</el-tag>
<div style="margin-left: 10px;">1.你是男性还是女性</div>
</div>
<el-button class="m15" type="primary" size="small"
@click="drawerAnswer = 1">查看详情答案</el-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -51,6 +94,22 @@ ...@@ -51,6 +94,22 @@
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
<el-drawer :visible.sync="drawerAnswer" title="反馈详情" size="40%">
<div class="answerBox">
<div class="aTop">
问题：你的具体想法？
</div>
<el-table class="m15" :data="tableData" border style="width: 100%;">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</el-drawer>
</div> </div>
</template> </template>
...@@ -63,6 +122,63 @@ export default { ...@@ -63,6 +122,63 @@ export default {
drawer: false, drawer: false,
Frule: '', Frule: '',
Fopthion: '', Fopthion: '',
drawerAnswer: false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
treeData: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
} }
}, },
mounted() { mounted() {
...@@ -158,11 +274,32 @@ export default { ...@@ -158,11 +274,32 @@ export default {
"resetBtn": false "resetBtn": false
} }
},
methods: {
treeSub(data) {
console.log(data)
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.treeS {
width: 20%;
margin-left: 10px;
}
/deep/.el-tree {
background-color: transparent;
}
.m15 {
margin-top: 15px;
}
.font { .font {
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
...@@ -240,6 +377,21 @@ export default { ...@@ -240,6 +377,21 @@ export default {
} }
} }
.answerBox {
padding: 0 20px;
box-sizing: border-box;
.aTop {
border-left: 4px solid #3377ff;
background-color: #eff4ff;
color: #3377ff;
line-height: 70px;
padding-left: 20px;
box-sizing: border-box;
font-weight: bold;
}
}
.content { .content {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -252,6 +404,15 @@ export default { ...@@ -252,6 +404,15 @@ export default {
height: 100%; height: 100%;
border-radius: 4px; border-radius: 4px;
width: 49%; width: 49%;
box-sizing: border-box;
padding: 20px;
.lBox {
display: flex;
// align-items: center
justify-content: space-between;
}
} }
.cRight { .cRight {
...@@ -261,6 +422,32 @@ export default { ...@@ -261,6 +422,32 @@ export default {
width: 49%; width: 49%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
.scroll {
height: 93%;
overflow-y: auto;
overflow-x: hidden;
// border: 1px solid;
}
/* 侧边滚动条 */
.scroll::-webkit-scrollbar {
width: 3px;
}
/* 滚动条上的滚动滑块 */
.scroll::-webkit-scrollbar-thumb {
background: #CCCCCC;
border-radius: 4px;
}
/* 滚动条轨道 */
.scroll::-webkit-scrollbar-track {
background: #EEEEEE;
border-radius: 4px;
}
} }
.title { .title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment