Commit 38c13bd4 authored by zL's avatar zL

新增一个link类型

parent 179d702c
......@@ -11,10 +11,10 @@
iconweixuanze: TypeNum !== PropertyType.Input,
}"
></i>
输入框
<span class="title">输入框</span>
<input type="text" value disabled="disabled" />
</div>
<div class="optional optional--right" @click="select(PropertyType.Date)">
<div class="optional" @click="select(PropertyType.Date)">
<i
:class="{
iconfont: true,
......@@ -23,30 +23,28 @@
iconweixuanze: TypeNum !== PropertyType.Date,
}"
></i
>日期
<input type="text" class="mr" value disabled="disabled" />
><span class="title">日期</span>
<input type="text" disabled="disabled" />
<div class="data-box">
<i class="iconfont iconxingzhuang"></i>
</div>
</div>
<div class="optional" @click="select(PropertyType.Image)">
<div class="optional" @click="select(PropertyType.Link)">
<i
:class="{
iconfont: true,
'i--check': TypeNum === PropertyType.Image,
iconxingzhuang2: TypeNum === PropertyType.Image,
iconweixuanze: TypeNum !== PropertyType.Image,
'i--check': TypeNum === PropertyType.Link,
iconxingzhuang2: TypeNum === PropertyType.Link,
iconweixuanze: TypeNum !== PropertyType.Link,
}"
></i
>上传图片
<div class="big-box">
<div class="pic-box">+</div>
</div>
></i>
<span class="title">外部链接</span>
<input type="text" value disabled="disabled" />
</div>
<!-- 下拉框 -->
<div
class="optional optional--right"
class="optional"
@click="select(PropertyType.Select)"
>
<i
......@@ -57,7 +55,7 @@
iconweixuanze: TypeNum !== PropertyType.Select,
}"
></i
>下拉框
><span class="title">下拉框</span>
<input type="text" value disabled="disabled" />
<div class="data-box">
<i class="iconfont iconxiangxia"></i>
......@@ -73,7 +71,7 @@
iconweixuanze: TypeNum !== PropertyType.Audio,
}"
></i
>上传音频
><span class="title">上传音频</span>
<div class="big-box">
<div class="pic-box">
<i class="iconfont iconshangchuanwenjianbeifen"></i>
......@@ -82,7 +80,7 @@
</div>
<div
class="optional optional--right"
class="optional"
@click="select(PropertyType.TextArea)"
>
<i
......@@ -93,7 +91,7 @@
iconweixuanze: TypeNum !== PropertyType.TextArea,
}"
></i
>文本域
><span class="title">文本域</span>
<input type="text" value disabled="disabled" />
</div>
<!-- -->
......@@ -106,7 +104,7 @@
iconweixuanze: TypeNum !== PropertyType.File,
}"
></i
>上传PDF
><span class="title">上传PDF</span>
<div class="big-box">
<div class="pic-box">
<i class="iconfont iconshangchuanwenjianbeifen"></i>
......@@ -114,7 +112,7 @@
</div>
</div>
<div class="optional optional--right" @click="select(PropertyType.Video)">
<div class="optional" @click="select(PropertyType.Video)">
<i
:class="{
iconfont: true,
......@@ -123,15 +121,31 @@
iconweixuanze: TypeNum !== PropertyType.Video,
}"
></i
>上传视频
><span class="title">上传视频</span>
<div class="big-box" style="width: 138px !important">
<div class="pic-box" >
<div class="pic-box">
<i class="iconfont iconshangchuanwenjianbeifen"></i>
</div>
</div>
</div>
<div class="optional" @click="select(PropertyType.Editor)">
<div class="optional" @click="select(PropertyType.Image)">
<i
:class="{
iconfont: true,
'i--check': TypeNum === PropertyType.Image,
iconxingzhuang2: TypeNum === PropertyType.Image,
iconweixuanze: TypeNum !== PropertyType.Image,
}"
></i
><span class="title">上传图片</span>
<div class="big-box">
<div class="pic-box">+</div>
</div>
</div>
<div
class="optional"
@click="select(PropertyType.Editor)"
>
<div class="left">
<i
:class="{
......@@ -141,7 +155,7 @@
iconweixuanze: TypeNum !== PropertyType.Editor,
}"
></i
>编辑器
><span class="title">编辑器</span>
</div>
<div class="editor"></div>
</div>
......@@ -214,11 +228,11 @@ input {
font-weight: 400;
text-indent: 12px;
color: #d8d8d8;
margin-left: 16px;
margin-left: 8px;
}
.box {
width: 549px;
height: 478px;
height: 514px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
padding: 0 50px;
......@@ -234,24 +248,24 @@ input {
}
.center {
width: 494px;
height: 276px;
height: 274px;
background: rgba(251, 251, 251, 1);
border: 1px solid rgba(240, 240, 240, 1);
margin: 0 auto;
padding: 18px 28px;
.optional--right {
float: right !important;
margin-right: 13px;
// border: 1px solid #000;
}
.optional {
cursor: pointer;
float: left;
font-size: 12px;
margin-bottom: 16px;
width: 247px;
font-weight: 400;
position: relative;
color: rgba(53, 53, 53, 1);
color: #353535;
.title {
width: 48px;
display: inline-block;
}
.iconweixuanze {
color: #d1d1d1;
}
......@@ -261,20 +275,16 @@ input {
.i--check {
color: #15cbba;
}
.mr {
margin-left: 28px;
}
.data-box {
position: absolute;
top: 8px;
right: 10px;
right: 18px;
i {
color: #d8d8d8;
}
.iconxiangxia {
font-size: 12px;
// transform: scale(0.46);
}
}
.big-box {
......@@ -299,9 +309,9 @@ input {
}
}
.editor {
width: 391px;
width: 135px;
height: 75px;
margin-left: 24px;
margin-left: 8px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
float: left;
......
......@@ -31,7 +31,7 @@
:property="property"
:label="property.label"
/>
<PDF-forms
<pdf-forms
v-else-if="property.type === PropertyType.File"
:property="property"
:disable="isDisabled"
......@@ -48,6 +48,14 @@
v-else-if="property.type === PropertyType.TextArea"
:property="property"
/>
<link-form
v-else-if="property.type === PropertyType.Link"
:property="property"
:label="property.label"
:value="property.value"
@changeValue="changeValue"
:isDisabled="isDisabled"
></link-form>
</div>
</template>
......@@ -64,6 +72,7 @@ import DateForm from "@/components/editTemplate/form/DateForm.vue";
import EditorForm from "@/components/editTemplate/form/EditorForm.vue";
import AudioForm from "@/components/editTemplate/form/AudioForm.vue";
import TextAreaForm from "@/components/editTemplate/form/TextAreaForm.vue";
import LinkForm from "@/components/editTemplate/form/LinkForm.vue";
@Component({
components: {
BaseForm,
......@@ -74,7 +83,8 @@ import TextAreaForm from "@/components/editTemplate/form/TextAreaForm.vue";
PDFForms,
VideoForms,
AudioForm,
TextAreaForm
TextAreaForm,
LinkForm,
},
})
export default class PropertyItem extends Vue {
......
......@@ -20,6 +20,14 @@
<div class="menu-item-example menu-item-example_input"></div>
</set-select-item>
<set-select-item
label="外部链接"
:selected="type === PropertyType.Link"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Link)"
>
<div class="menu-item-example menu-item-example_input"></div>
</set-select-item>
<set-select-item
label="文本域"
:selected="type === PropertyType.TextArea"
:disabled="selectedDisabled"
......
<template>
<div class="base_form">
<div class="label">
<img class="pre-tag" src="../../../assets/images/template/pre-tag.png" />
<div class="label-text" :title="label">{{ label }}</div>
</div>
<div class="input-box">
<input
class="input"
v-if="showInput"
v-model="inputValue"
@input="change"
type="text"
:placeholder="'请输入' + label"
:readonly="isDisabled"
/>
<i v-if="iconDown" class="iconfont iconxiangxia icon_down"></i>
</div>
<slot></slot>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
/**
* 以普通输入框为基础
* @author yuanzeyu
* @date 2019-05-29
* @desc
*/
@Component
export default class BaseForm extends Vue {
@Prop({ type: String, required: true }) label!: string;
@Prop({ type: String, default: `` }) value!: string;
@Prop({ type: String, default: `` }) watchValue!: string; // 用于显示的值
@Prop({ type: Boolean, default: true }) showInput!: boolean;
@Prop() isDisabled!: boolean;
@Prop({ type: Boolean, default: false }) iconDown!: boolean;
public inputValue = ``;
mounted() {
this.inputValue = this.watchValue ? this.watchValue : this.value;
}
@Watch(`watchValue`)
watchValueCb(val: any) {
this.inputValue = this.watchValue;
}
public change() {
this.$nextTick(() => {
this.$emit(`changeValue`, this.inputValue, `value`);
});
}
}
</script>
<style scoped lang="less">
.base_form {
flex-shrink: 0;
padding-left: 18px;
line-height: 65px;
height: 65px;
font-size: 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.label {
display: inline-block;
width: 150px; /* 104 - 18 */
flex-shrink: 0;
height: 44px;
cursor: pointer;
line-height: 44px;
color: #797d84; /* todo ui图颜色不一致 */
font-size: 14px;
font-weight: 300;
position: relative;
}
.label-text {
text-overflow: ellipsis;
white-space: nowrap; /*规定段落中的文本不进行换行 */
overflow: hidden;
}
.icon_down {
position: absolute;
right: 26px;
color: #b8b8b8;
font-size: 12px; /* todo ui图有空白 */
transform: scale(0.67);
cursor: pointer;
}
.input-box {
position: relative;
line-height: 65px;
}
.input {
box-sizing: border-box;
width: 800px;
flex-shrink: 0;
margin-top: 11px;
min-height: 44px;
border-radius: 4px;
border: 1px solid #e8e8e8; /* todo 边框、背景色ui图颜色不一致 */
outline: none;
padding-left: 24px;
font-size: 14px;
font-weight: 300;
&::-webkit-input-placeholder {
color: #bababa;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #bababa;
}
&:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #bababa;
}
}
.pre-tag {
position: absolute;
left: -30px;
top: 14px;
display: none;
}
</style>
......@@ -68,7 +68,7 @@ const configModules = {
},
// hd
"hd_test": {
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9007/',
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
INDEX: {
entry: './src/entry/hd/main.ts',
......
......@@ -17,6 +17,7 @@ export enum PropertyType {
Video = 8, //视频
Audio = 9, // 音频
TextArea = 10, // 多行文本输入
Link = 11 //外部链接
}
//to showstatus
......
......@@ -19,6 +19,9 @@
<div class="info-content" v-if="item2.type === 5">
{{ item2.data.value }}
</div>
<div class="info-content" v-if="item2.type === 11">
<a :href="item2.data.value" target="black"> {{ item2.data.value }}</a>
</div>
<!-- 显示时间 -->
<div class="info-content" v-if="item2.type === 6">
{{ fmtTimeStamp2(item2.data.value) }}
......
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