提交部分代码

src/entry/gs/components/addRootDialog/addRootDialog.vue

+<template>
+  <!-- 添加一级标题输入框 -->
+  <common-dialog id="add_root_dialog" @closePopup="emitClose">
+    <div class="c-dialog">
+      <h2 class="c-dialog-title">添加一级标题</h2>
+      <dialog-input
+        class="l-input t-input"
+        v-model="bindValue"
+        :errorShowing="isErrorShowing"
+        placeholder="输入一级标题名称"
+        :maxlength="limit"
+      />
+      <div class="c-dialog-btn_wrapper">
+        <button class="g-btn_primary c-dialog-btn_cancel" @click="emitClose">
+          取消
+        </button>
+        <button class="g-btn_primary c-dialog-btn_confirm" @click="emitConfirm">
+          确定
+        </button>
+      </div>
+    </div>
+  </common-dialog>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import CommonDialog from "@/components/CommonDialog.vue";
+// import { Limit } from "@/config";
+import DialogInput from "@/components/DialogInput.vue";
+@Component({
+  components: {
+    CommonDialog,
+    DialogInput,
+  },
+})
+export default class AddRootDialog extends Vue {
+  public limit = 10;
+  public bindValue: string = "";
+  public isErrorShowing: boolean = false;
+  public emitConfirm() {
+  
+    if (this.bindValue.length === 0) {
+      this.isErrorShowing = true;
+      return;
+    }
+    this.$emit("confirm", this.bindValue);
+    this.emitClose();
+  }
+  public emitClose() {
+    this.$emit("close");
+  }
+}
+</script>
+<style scoped lang='less'>
+.l-input {
+  margin: 42px 0 47px 0;
+}
+/* 添加模板公用样式 */
+.c-dialog {
+  width: 500px;
+  /* 600 - 100 */
+  padding: 34px 50px 63px 50px;
+}
+
+.c-dialog-title {
+  margin: 0;
+  font-size: 22px;
+  line-height: 30px;
+  color: #000;
+  font-weight: 500;
+}
+
+
+
+.c-dialog-btn_wrapper {
+  text-align: right;
+}
+.g-btn_primary {
+    border: none;
+    background: #0CC399;
+    font-size: 14px;
+    color: #fff;
+    outline: none;
+    cursor: pointer;
+    border-radius: 8px;
+}
+.c-dialog-btn_confirm {
+  width: 120px;
+  height: 40px;
+  border-radius: 4px;
+
+  &:after {
+    clear: both;
+  }
+}
+
+.c-dialog-btn_cancel {
+  margin-right: 22px;
+  /* 28 - (40 - 28) / 2 */
+  color: #5c6476;
+  background: transparent;
+  height: 40px;
+  width: 60px;
+}
+</style>
+

src/entry/gs/components/banner/setBar/setBar.vue

+
+<template>
+  <div class="set_bar">
+    <h2 class="title">修改标题名</h2>
+    <el-input
+      class="edit"
+      v-model="editTitle"
+      placeholder="请输入标题名"
+      :maxlength="titleLength"
+      @input="changeEdit"
+    ></el-input>
+    <h2 class="title">设置表现形式</h2>
+    <ul class="menu">
+      <set-select-item
+        label="输入框"
+        :selected="type === PropertyType.Input"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Input)"
+      >
+        <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"
+        @click.native="handleSelect(PropertyType.TextArea)"
+      >
+        <div class="menu-item-example menu-item-example_input"></div>
+      </set-select-item>
+      <set-select-item
+        label="下拉框"
+        :selected="type === PropertyType.Select"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Select)"
+      >
+        <div class="menu-item-example menu-item-example_select">
+          <span>下拉框</span>
+          <i class="iconfont iconxiangxia"></i>
+        </div>
+      </set-select-item>
+      <set-select-item
+        label="上传图片"
+        :selected="type === PropertyType.Image"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Image)"
+      >
+        <div class="menu-item-example menu-item-example_image">
+          <i class="iconfont iconjiahao"></i>
+        </div>
+      </set-select-item>
+      <set-select-item
+        label="日期"
+        :selected="type === PropertyType.Date"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Date)"
+      >
+        <div class="menu-item-example menu-item-example_date">
+          <i class="iconfont iconxingzhuang"></i>
+        </div>
+      </set-select-item>
+      <set-select-item
+        label="上传PDF"
+        :selected="type === PropertyType.File"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.File)"
+      >
+        <div class="menu-item-example menu-item-example_up">
+          <i class="iconfont iconshangchuanwenjianbeifen"></i>
+        </div>
+      </set-select-item>
+      <set-select-item
+        label="上传视频"
+        :selected="type === PropertyType.Video"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Video)"
+      >
+        <div class="menu-item-example menu-item-example_up">
+          <i class="iconfont iconshangchuanwenjianbeifen"></i>
+        </div>
+      </set-select-item>
+      <set-select-item
+        label="上传语音"
+        :selected="type === PropertyType.Audio"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Audio)"
+      >
+        <div class="menu-item-example menu-item-example_up">
+          <i class="iconfont iconshangchuanwenjianbeifen"></i>
+        </div>
+      </set-select-item>
+      <set-select-item
+        label="编辑器"
+        :selected="type === PropertyType.Editor"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Editor)"
+      >
+        <div class="editor"></div>
+      </set-select-item>
+    </ul>
+    <div class="btn_wrapper">
+      <button
+        class="g-btn_primary"
+        :class="{ 'js-btn_disabled': addDisabled }"
+        @click="emitAddChild"
+      >
+        添加下一级
+      </button>
+      <button
+        class="g-btn_primary"
+        :class="{ 'js-btn_disabled': deleteDisabled }"
+        @click="emitDelete"
+      >
+        删除
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { PropertyType } from "@/plugins/types";
+import SetSelectItem from "@/components/editTemplate/SetSelectItem.vue";
+import { Property, Unit } from "@/plugins/types2";
+@Component({
+  components: {
+    SetSelectItem,
+  },
+})
+export default class SetBar extends Vue {
+  @Prop() public selectTarget!: Unit | Property | null;
+  public PropertyType = PropertyType;
+  public editTitle = ``;
+  public titleLength = 100;
+  public get type() {
+    const target = this.selectTarget;
+
+    if (target) {
+      if (target instanceof Property) {
+        return target.type;
+      }
+    }
+    return PropertyType.Input;
+  }
+
+  @Watch("selectTarget.title")
+  public editTitleChange(val: string) {
+    if (val) {
+      this.editTitle = val;
+    }
+  }
+
+  @Watch("selectTarget.label")
+  public editLabelChange(val: string) {
+    if (val) {
+      this.editTitle = val;
+    }
+  }
+
+  public changeEdit() {
+    this.$nextTick(() => {
+      if (this.selectTarget) {
+        if (this.selectTarget.hasOwnProperty("title"))
+          (this.selectTarget as Unit).title = this.editTitle;
+        if (this.selectTarget.hasOwnProperty("label"))
+          (this.selectTarget as Property).label = this.editTitle;
+      }
+    });
+  }
+
+  public get selectedDisabled() {
+    return !(this.selectTarget && this.selectTarget instanceof Property);
+  }
+
+  public get addDisabled() {
+    const target = this.selectTarget;
+    const isL3 = target && (target as Property).parent;
+    // (target as Property).parent.parent;
+
+    return !(this.selectTarget && !isL3);
+  }
+
+  public get deleteDisabled() {
+    const target = this.selectTarget;
+    return !target || (target instanceof Unit && target.children.length > 0);
+  }
+
+  public handleSelect(val: PropertyType) {
+    if (this.selectedDisabled) return;
+    this.$emit("select-type", val);
+  }
+
+  public emitAddChild() {
+    if (this.addDisabled) {
+      return;
+    }
+    this.$emit("add-child");
+  }
+
+  public emitDelete() {
+    if (this.deleteDisabled) {
+      return;
+    }
+    this.$emit("delete");
+  }
+}
+</script>
+<style scoped lang="less">
+.set_bar {
+  position: relative;
+  height: 100%;
+  padding: 0 5px;
+  background: #fff;
+  border-left: 1px solid #f0f0f0;
+}
+.editor {
+  width: 125px;
+  vertical-align: middle;
+  display: inline-block;
+  background: white;
+  vertical-align: middle;
+  box-sizing: border-box;
+  margin-left: 10px;
+  display: inline-block;
+  height: 35px;
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  color: rgba(53, 53, 53, 0.4);
+  font-size: 12px;
+}
+.edit {
+  width: 220px;
+  margin-left: 19px;
+  margin-top: 19px;
+  /deep/.el-input__inner {
+    height: 30px !important;
+    line-height: 30px !important;
+    font-size: 12px;
+    &::-webkit-input-placeholder {
+      /* WebKit browsers */
+      // color: #999;
+      font-size: 12px;
+    }
+    &::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      // color: #999;
+      font-size: 12px;
+    }
+  }
+}
+.g-btn_primary {
+  border: none;
+  background: #0CC399;
+  font-size: 14px;
+  color: #fff;
+  outline: none;
+  cursor: pointer;
+  border-radius: 8px;
+}
+.title {
+  margin: 0;
+  padding-left: 19px;
+  padding-top: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 44px;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.menu-item {
+  padding-left: 23px;
+  line-height: 35px;
+  font-size: 0;
+  margin-top: 18px; /* todo ui间距不统一,文字非对齐 */
+}
+
+.menu-item-icon_check {
+  vertical-align: middle;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #d1d1d1;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.menu-item_icon_check_active {
+  vertical-align: middle;
+  color: #50b74d;
+  font-size: 17px;
+}
+
+.menu-item-name {
+  vertical-align: middle;
+  display: inline-block;
+  width: 56px;
+  margin-left: 9px;
+  font-size: 14px;
+}
+
+.menu-item-name_active {
+  color: #4fb64c;
+}
+
+.menu-item-example {
+  vertical-align: middle;
+  box-sizing: border-box;
+  margin-left: 10px;
+  display: inline-block;
+  height: 35px;
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  color: rgba(53, 53, 53, 0.4);
+  font-size: 12px;
+}
+
+.menu-item-example_input {
+  width: 125px;
+  padding-left: 13px;
+  height: 25px;
+  background: white;
+  line-height: 25px;
+}
+
+.menu-item-example_select {
+  width: 125px;
+  padding: 0 5px 0 12px;
+  height: 25px;
+  line-height: 25px;
+  background: white;
+  i {
+    float: right;
+    font-size: 12px;
+    transform: scale(0.46);
+  }
+}
+
+.menu-item-example_image {
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  background: white;
+  line-height: 23px;
+  font-size: 12px;
+  i {
+    font-size: 12px;
+  }
+}
+.menu-item-example_up {
+  width: 35px;
+  height: 25px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  text-align: center;
+  line-height: 25px;
+  border: 1px solid rgba(231, 231, 231, 1);
+}
+.menu-item-example_date {
+  width: 125px;
+  padding: 0 8px 0 12px;
+  height: 25px;
+  line-height: 25px;
+  background: white;
+  & i {
+    float: right;
+    font-size: 13px;
+  }
+}
+
+.btn_wrapper {
+  position: absolute;
+  right: 0;
+  bottom: 39px;
+  left: 0;
+  text-align: center;
+
+  & > button {
+    margin-top: 20px;
+    width: 220px;
+    height: 35px;
+  }
+}
+
+.js-btn_disabled {
+  background: #c5cfe8;
+  cursor: not-allowed;
+}
+</style>

src/entry/gs/views/editTemplate/editTemplate.vue

 <template>
   <div class="add_template">
-    <!-- 提示用语 -->
-    <!-- <div class="add-template__confirm" v-if="returnConfirm">
-      <div class="template-confirm__center">
-        <div class="confirm-left">
-          <i class="iconfont icongantanhao-xianxingyuankuang"></i>
-          <p>您还未保存，返回后信息不会保存。</p>
-        </div>
-        <div class="confirm-btn" @click="gogo">继续返回</div>
-      </div>
-      <i class="iconfont iconjiufuqianbaoicon08" @click="backCancel"></i>
-    </div>-->
     <!-- end -->
     <div class="add_template__center">
       <div class="col_left" :class="{ col_left_full: !isShowBar }" @click="onCancelSelected">
@@ -191,21 +180,14 @@
         @cancel="modifyFormsShow = false"
       ></modify-presentation>
     </common-dialog>
-    <!-- <uncertified
-      v-if="showUncertified"
-      @confirm="showUncertified = false"
-      @cancel="UncertifiedConfirm"
-    ></uncertified>-->
+   
     <common-dialog v-if="ClassificationPopups" @closePopup="ClassificationPopups = false" showMask>
       <choose-classification
         @successCallback="successCallback"
         @close="ClassificationPopups = false"
       />
     </common-dialog>
-    <!-- 引导页 -->
-    <!-- <common-dialog close class="dg-guide" v-if="showGuide">
-      <guide @close="showGuide=false" :stepIndex="stepIndex"></guide>
-    </common-dialog>-->
+ 
   </div>
 </template>
 <script lang="ts">
@@ -226,12 +208,12 @@ import ModifyPresentation from "@/components/editTemplate/ModifyPresentation.vue
 import banner from "../../components/banner/banner.vue";
 import TemplatePopup from "@/views/template/TemplatePopup.vue";
 import AddChildDialog from "@/components/editTemplate/AddChildDialog.vue"; //添加下一级
-import AddRootDialog from "@/components/editTemplate/AddRootDialog.vue";
+import AddRootDialog from "../../components/addRootDialog/addRootDialog.vue";
 import ModifyTitle from "@/components/editTemplate/ModifyTitle.vue"; //修改标题
 // 未认证提示组件
 import Uncertified from "@/components/Uncertified.vue";
 import ChooseClassification from "@/components/editTemplate/ChooseClassification.vue";
-// import guide from "@/views/template/AddTemplate/guide.vue";
+
 @Component({
   components: {
     NameEditor,
@@ -1155,7 +1137,7 @@ export default class editTemplate extends Vue {
 .chain-content .part-bottom .chain-btn {
   font-size: 14px;
   color: white;
-  background-color: #3f79fe;
+  background-color: #0CC399;
   border-radius: 4px;
   width: 120px;
   height: 40px;
@@ -1178,65 +1160,6 @@ export default class editTemplate extends Vue {
   &::-webkit-scrollbar {
     display: none;
   }
-  .add-template__confirm {
-    width: 100%;
-    height: 40px;
-    max-height: 40px;
-    flex: 1;
-    background: rgba(250, 118, 67, 0.1);
-    position: relative;
-    text-align: center;
-    .iconjiufuqianbaoicon08 {
-      position: absolute;
-      right: 30px;
-      top: 50%;
-      font-size: 20px;
-      transform: translateY(-50%);
-      cursor: pointer;
-      color: #fa7640;
-    }
-    .template-confirm__center {
-      width: 387px;
-      display: inline-block;
-      line-height: 40px;
-      font-size: 16px;
-      font-family: PingFangSC;
-      font-weight: 400;
-      overflow: hidden;
-      color: rgba(252, 118, 67, 1);
-      .confirm-left {
-        float: left;
-        line-height: 40px;
-        p {
-          display: inline-block;
-          margin: 0;
-          padding: 0;
-          font-size: 16px;
-          vertical-align: top;
-        }
-        i {
-          vertical-align: top;
-          font-size: 20px;
-          margin-right: 6px;
-        }
-      }
-      .confirm-btn {
-        float: right;
-        width: 100px;
-        height: 30px;
-        margin-top: 5px;
-        cursor: pointer;
-        line-height: 30px;
-        text-align: center;
-        background: rgba(250, 118, 64, 1);
-        border-radius: 4px;
-        font-size: 14px;
-        font-family: PingFangSC;
-        font-weight: 400;
-        color: rgba(255, 255, 255, 1);
-      }
-    }
-  }
   .add_template__center {
     display: flex;
     flex: 1;