Browse Source

fix: 简单调整一下问卷编辑页面头部样式

old
PBK-Bin 4 years ago
parent
commit
242de2c684
  1. 39
      src/views/form/editor/RightPanel.vue
  2. 37
      src/views/form/editor/index.vue
  3. 30
      src/views/form/index.vue

39
src/views/form/editor/RightPanel.vue

@ -933,12 +933,12 @@
> >
<el-switch v-model="activeData['step-strictly']" /> <el-switch v-model="activeData['step-strictly']" />
</el-form-item> </el-form-item>
<!-- <el-form-item--> <!-- <el-form-item-->
<!-- v-if="activeData.__config__.tag === 'el-cascader'"--> <!-- v-if="activeData.__config__.tag === 'el-cascader'"-->
<!-- label="任选层级"--> <!-- label="任选层级"-->
<!-- >--> <!-- >-->
<!-- <el-switch v-model="activeData.props.props.checkStrictly" />--> <!-- <el-switch v-model="activeData.props.props.checkStrictly" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item <el-form-item
v-if="activeData.__config__.tag === 'el-cascader'" v-if="activeData.__config__.tag === 'el-cascader'"
label="是否多选" label="是否多选"
@ -990,12 +990,12 @@
> >
<el-switch v-model="activeData.readonly" /> <el-switch v-model="activeData.readonly" />
</el-form-item> </el-form-item>
<!-- <el-form-item--> <!-- <el-form-item-->
<!-- v-if="activeData.disabled !== undefined"--> <!-- v-if="activeData.disabled !== undefined"-->
<!-- label="是否禁用"--> <!-- label="是否禁用"-->
<!-- >--> <!-- >-->
<!-- <el-switch v-model="activeData.disabled" />--> <!-- <el-switch v-model="activeData.disabled" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item <el-form-item
v-if="activeData.__config__.tag === 'el-select'" v-if="activeData.__config__.tag === 'el-select'"
label="能否搜索" label="能否搜索"
@ -1404,9 +1404,16 @@ export default {
addSelectItem() { addSelectItem() {
let lastItem = _.last(this.activeData.__slot__.options); let lastItem = _.last(this.activeData.__slot__.options);
this.activeData.__slot__.options.push({ this.activeData.__slot__.options.push({
label: '', label: "",
value: lastItem ? lastItem.value === 0 ? _.max(_.values(this.activeData.__slot__.options.map(item => value: lastItem
item.value))) + 1 : lastItem.value + 1 : 1 ? lastItem.value === 0
? _.max(
_.values(
this.activeData.__slot__.options.map((item) => item.value)
)
) + 1
: lastItem.value + 1
: 1,
}); });
}, },
async blukAddSelectItems() { async blukAddSelectItems() {
@ -1617,7 +1624,7 @@ export default {
.right-board { .right-board {
width: 350px; width: 350px;
position: absolute; position: absolute;
right: 17px; right: 0px;
top: 0; top: 0;
padding-top: 3px; padding-top: 3px;
background-color: #fff; background-color: #fff;

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

@ -37,7 +37,7 @@
<el-scrollbar class="center-scrollbar"> <el-scrollbar class="center-scrollbar">
<el-row v-if="formConf" :gutter="formConf.gutter" class="center-board-row"> <el-row v-if="formConf" :gutter="formConf.gutter" class="center-board-row">
<el-row align="middle" justify="center" type="flex"> <el-row align="middle" justify="center" type="flex">
<el-col :span="20" class="text-center"> <el-col class="form-head-title">
<h4 class="form-name-text" contenteditable="true" <h4 class="form-name-text" contenteditable="true"
@blur="(event)=>{ @blur="(event)=>{
this.formConf.title=event.target.innerText; this.formConf.title=event.target.innerText;
@ -48,7 +48,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row align="middle" justify="center" type="flex"> <el-row align="middle" justify="center" type="flex">
<el-col :span="23"> <el-col class="form-head-desc">
<Tinymce v-if="editDescription" v-model="formConf.description" <Tinymce v-if="editDescription" v-model="formConf.description"
placeholder="请输入表单描述" placeholder="请输入表单描述"
@blur="editDescription=false" @input="saveProjectInfo" @blur="editDescription=false" @input="saveProjectInfo"
@ -64,7 +64,7 @@
<!-- </p>--> <!-- </p>-->
</el-col> </el-col>
</el-row> </el-row>
<el-divider /> <el-divider class="form-head-divider" />
<el-form <el-form
:disabled="formConf.disabled" :disabled="formConf.disabled"
:label-position="formConf.labelPosition" :label-position="formConf.labelPosition"
@ -421,8 +421,33 @@ export default {
@import '@/assets/styles/form/index'; @import '@/assets/styles/form/index';
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.form-name-text:hover{
border: 1px dashed #7b7b7b; .center-board {
min-height: 100px;
.center-board-row {
margin-right: 10px;
}
.form-head-title {
padding: 0 10px;
text-align: center;
.form-name-text:hover{
border: 1px dashed #7b7b7b;
min-height: 100px;
}
}
.form-head-desc {
padding: 0 10px;
}
.form-head-divider {
margin-right: 10px;
margin-left: 10px;
width: auto;
}
} }
</style> </style>

30
src/views/form/index.vue

@ -1,23 +1,16 @@
<template> <template>
<div class="form-index-container"> <div class="form-index-container">
<el-card class="header-container"> <el-card class="header-container">
<el-row align="middle" type="flex"> <el-row align="middle" type="flex" :gutter="5">
<el-col :span="2"> <i class="el-icon-back" @click="$router.back(-1)" />
<i class="el-icon-back" @click="$router.back(-1)" /> <img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})">
</el-col> <el-col />
<el-col :span="3" :xs="6"> <el-button type="primary" icon="el-icon-view" @click="previewDialogVisible=true">
<img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})"> 预览
</el-col> </el-button>
<el-col :span="1" :xs="3"> <el-button type="success" icon="el-icon-folder-add" @click="saveProjectAsTemplateHandle">
<el-button icon="el-icon-view" type="primary" @click="openPreviewHandle"> 保存为模板
预览 </el-button>
</el-button>
</el-col>
<el-col :span="2" :xs="3">
<el-button icon="el-icon-folder-add" type="success" @click="saveProjectAsTemplateHandle">
保存为模板
</el-button>
</el-col>
</el-row> </el-row>
</el-card> </el-card>
<div class="main-container"> <div class="main-container">
@ -139,13 +132,14 @@ export default {
.header-container { .header-container {
width: 100%; width: 100%;
height: 50px; height: 50px;
padding: 0 20px;
.el-icon-back { .el-icon-back {
font-size: 22px; font-size: 22px;
font-weight: 550; font-weight: 550;
cursor: pointer; cursor: pointer;
color: #000; color: #000;
margin-left: 40px; margin-right: 75px;
&:hover { &:hover {
color: rgb(32, 160, 255); color: rgb(32, 160, 255);

Loading…
Cancel
Save