新增一个link类型

src/components/editTemplate/ModifyPresentation.vue

@@ -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;

src/components/editTemplate/PropertyItem.vue

@@ -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 {

src/components/editTemplate/SetBar.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"

src/components/editTemplate/form/LinkForm.vue

+
+<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>

src/config/UrlPrefix.js

@@ -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',

src/plugins/types.ts

@@ -17,6 +17,7 @@ export enum PropertyType {
   Video = 8, //视频
   Audio = 9, // 音频
   TextArea = 10, // 多行文本输入
+  Link = 11 //外部链接
 }
 
 //to showstatus 

src/views/template/readOnly.vue

@@ -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) }}