Skip to content

A
attendance-performance-platform
Commit 7b9d8ba8 authored by 廖旭伟's avatar 廖旭伟
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents fe436011 b80d34a3
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 15 deletions
attendance-performance-manager-ui/admin/src/views/feedback/addQuestion/list.vue
View file @ 7b9d8ba8
<template>
<div class="page">
<div class="top">
<el-button class="backBtn" @click="$router.back()">返回上一级</el-button>
<el-button class="backBtn" size="small" @click="$router.back()">返回上一级</el-button>
<el-tabs v-model="tabs">
<el-tab-pane label="设计问卷" name="1">
<fc-designer style="height: 75vh;" ref="designer" />
<div class="tool">
<!--功能按钮-->
<fc-designer style="height: 79vh;" ref="designer">
<template slot="handle">
<ElButton icon="el-icon-upload" type="success" size="small" @click="showDrawer" round>移动端预览
</ElButton>
</template>
</fc-designer>
<!-- <div class="tool">
<el-row>
<el-button icon="el-icon-download" type="primary" size="small" @click="getFormJson()"
round>生成表单JSON</el-button>
<el-button icon="el-icon-download" type="success" size="small" @click="getFormOption()"
round>生成表单配置</el-button>
<el-button icon="el-icon-upload" type="success" size="small" @click="drawer = true"
round>预览</el-button>
<el-button icon="el-icon-upload" type="primary" size="small" @click="showDrawer"
round>移动端预览</el-button>
</el-row>
</div>
</div> -->
<el-drawer title="预览" :visible.sync="drawer" :with-header="false">
<el-drawer :visible.sync="drawer" :with-header="false">
<div class="showPhone">
<div>预览</div>
<div class="phone">
<div class="phoneContent">
<form-create :rule="Frule" :option="Fopthion" @submit="onSubmit">
</form-create>
</div>
</div>
</div>
</el-drawer>
</el-tab-pane>
......@@ -29,35 +38,159 @@
</template>
<script>
import formCreate from "@form-create/element-ui";
export default {
data() {
return {
tabs: '1',
drawer: false,
drawer: 0,
Frule: '',
Fopthion: '',
}
},
mounted() {
//配置表单基础样式以及按钮展示
const option = {
"form": {
"labelPosition": "top",
"size": "mini",
"labelWidth": "20%",
"hideRequiredAsterisk": false,
"showMessage": true,
"inlineMessage": false
},
"submitBtn": true,
"resetBtn": false,
}
this.$refs.designer.setOption(option)
//移除组件大类
this.$refs.designer.removeMenu('layout',)
//移除对应组件
this.$refs.designer.removeMenuItem('el-transfer')
this.$refs.designer.removeMenuItem('el-alert')
this.$refs.designer.removeMenuItem("colorPicker")
this.$refs.designer.removeMenuItem("cascader")
this.$refs.designer.removeMenuItem("rate")
this.$refs.designer.removeMenuItem("slider")
this.$refs.designer.removeMenuItem("datePicker")
this.$refs.designer.removeMenuItem("timePicker")
this.$refs.designer.removeMenuItem("switch")
this.$refs.designer.removeMenuItem("tree")
//配置组件生成规则---直接配置显示在页面上
// const rule = [{ "type": "input", "field": "int", "title": "输入框", "info": "", "_fc_drag_tag": "input", "hidden": false, "display": true }]
// this.$refs.designer.setRule(rule)
},
methods: {
//预览生成按钮的输出
onSubmit(formData) {
console.log(formData)
},
//展示移动端效果
showDrawer() {
this.drawer = 1
this.Frule = formCreate.parseJson(this.getFormJson())
this.Fopthion = formCreate.parseJson(this.getFormOption())
},
getFormJson() {
//FcDesigner 生成的`JSON`
const FcDesignerRule = this.$refs.designer.getRule();
console.log(FcDesignerRule)
return JSON.stringify(FcDesignerRule)
},
getFormOption() {
//FcDesigner 生成的`options`
const FcDesignerOptions = this.$refs.designer.getOption();
console.log(FcDesignerOptions)
return JSON.stringify(FcDesignerOptions)
}
}
}
</script>
<style lang="less" scoped>
.showPhone{
border: 1px solid;
/deep/._fc-l-title {
text-align: center;
margin-bottom: 10px;
}
/deep/._fc-l-item {
width: 100%;
border: 1px solid #1a7af8;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
height: 40px;
margin-bottom: 10px;
border-radius: 4px;
._fc-l-icon {
width: 40%;
text-align: right;
color: #1a7af8;
}
._fc-l-name {
width: 50%;
text-align: left;
color: #1a7af8;
}
}
/deep/._fc-l-item:hover ._fc-l-name {
color: #FFF;
}
/deep/._fc-l-item:hover ._fc-l-icon {
color: #FFF;
}
.showPhone {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.phone {
width: 378px;
height: 770px;
background: url('../../../assets/images/phone.png') no-repeat;
position: relative;
.phoneContent {
// border: 1px solid;
position: absolute;
top: 95px;
left: 25px;
width: 86.5%;
height: 75%;
box-sizing: border-box;
padding: 20px;
overflow-y: scroll;
overflow-x: hidden;
}
/* 侧边滚动条 */
.phoneContent::-webkit-scrollbar {
width: 3px;
}
/* 滚动条上的滚动滑块 */
.phoneContent::-webkit-scrollbar-thumb {
background: #CCCCCC;
border-radius: 4px;
}
/* 滚动条轨道 */
.phoneContent::-webkit-scrollbar-track {
background: #EEEEEE;
border-radius: 4px;
}
}
}
.backBtn {
position: absolute;
right: 20px;
......@@ -102,4 +235,21 @@ export default {
background: #EEEEEE;
border-radius: 4px;
}
/* 侧边滚动条 */
/deep/._fc-m-drag::-webkit-scrollbar {
width: 3px;
}
/* 滚动条上的滚动滑块 */
/deep/._fc-m-drag::-webkit-scrollbar-thumb {
background: #CCCCCC;
border-radius: 4px;
}
/* 滚动条轨道 */
/deep/._fc-m-drag::-webkit-scrollbar-track {
background: #EEEEEE;
border-radius: 4px;
}
</style>
\ No newline at end of file
attendance-performance-manager-ui/admin/src/views/feedback/list.vue
View file @ 7b9d8ba8
<template>
<div class="page">
<LayoutTable :data="tableData" notDel notSearch :config="tableConfig">
<LayoutTable :data="tableData" :config="tableConfig">
</LayoutTable>
......@@ -52,6 +52,9 @@ export default {
toView(row) {
this.$refs.drawerform.view(row);
},
goPage(path) {
this.$router.push(path)
}
},
data() {
......@@ -104,7 +107,7 @@ export default {
width: 240,
formatter: row => {
return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.goPage} onDel={this.toDel} />
);
}
}
......
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