feat:修改icon

public/czt/index.html

@@ -8,6 +8,7 @@
   <link rel="icon" href="./sy/favicon.ico">
   <title>财政厅</title>
   <link rel="stylesheet" href="//at.alicdn.com/t/font_1321935_49vw1tllkgn.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_2442417_7i631it87q2.css">
   <script src="https://cdn.bootcss.com/tinymce/4.7.4/tinymce.min.js"></script>
 </head>
 
@@ -19,4 +20,5 @@
 <script>
 </script>
 
+
 </html>

src/entry/czt/views/template/editTemplate.vue

@@ -53,18 +53,14 @@
         <read-only :displayData="displayData"></read-only>
         <div class="add_template_main">
           <div class="add_template_item">
-            <span class="item_title">存证类型</span>
-            <input id="document" type="radio" name="type" value="文档" v-model="fileType">
-            <label for="document">文档</label>
-            <input id="picture" type="radio" name="type" value="图片" v-model="fileType">
-            <label for="picture">图片</label>
-            <input id="audio" type="radio" name="type" value="音频" v-model="fileType">
-            <label for="audio">音频</label>
-            <input id="video" type="radio" name="type" value="视频" v-model="fileType">
-            <label for="video">视频</label>
+            <span class="item_title needed">存证类型</span>
+            <div class="item_choice" v-for="item in allTypes" :key="item[1]">
+              <input :id="item[1]" type="radio" name="type" :value="item[0]" v-model="fileType">
+              <label :for="item[1]" class="iconfont" :class="fileType === item[0] ? 'iconquedingbeifen' : 'iconbianzubeifen' ">{{ item[0] }}</label>
+            </div>
           </div>
           <div class="add_template_item">
-            <span class="item_title">存证名称</span>
+            <span class="item_title needed">存证名称</span>
             <input type="text" name="name" class="item_input" placeholder="存证名称">
           </div>
           <div class="add_template_item">
@@ -72,7 +68,16 @@
             <input type="text" name="reason" class="item_input" placeholder="存证原因">
           </div>
           <div class="add_template_item">
-            <input type="file">
+            <div class="upload_btn">
+              <i class="iconfont iconshangchuan upload_icon"></i>
+              <p class="upload_title">上传{{ fileType }}</p>
+              <p class="upload_note">注：仅支持20M以下的文件</p>
+              <input type="file"
+                     @click.stop
+                     @change.stop="fileChange"
+                     hidden
+              >
+            </div>
           </div>
           <div class="add_template_item">
             <p id="note"><span class="item_title">支持格式：</span>{{ supprtType }}</p>
@@ -203,7 +208,12 @@ export default class editTemplate extends Vue {
   public MemoryCardType: String = ""; //存证类型
   public supprtType: string = 'wmv'; // 允许上传的文件格式
   public fileType: string = '视频'; // 文件类型
-
+  public allTypes: any = [
+    ['PDF', 'pdf'],
+    ['图片', 'picture'],
+    ['音频', 'audio'],
+    ['视频', 'video']
+  ]; // 所有文件类型
   // 系统模板>建立个人模板or建立存证
   // 个人模板>建立存证or更新模板
   // 建立存证>保存存证or保存模板
@@ -527,7 +537,7 @@ export default class editTemplate extends Vue {
         },
       ],
     };
-    var newDetail = new Array();
+    var newDetail: any[];
     newDetail = formatApiJson(this.rootUnitList);
 
     newDetail.push(newext);
@@ -556,10 +566,6 @@ export default class editTemplate extends Vue {
       this.$router.push("/categoryManage");
     }
   }
-  // 展示修改标题弹窗
-  public modifyTitleShow() {
-    this.isModifyTitleShow = true;
-  }
   // 新增增量数据列表的请求
   async expandTheList(hash: string) {
     const res = await this.$ajax({
@@ -682,68 +688,7 @@ export default class editTemplate extends Vue {
   public back() {
     this.$router.go(-1);
   }
-  // 打开一级标题添加
-  public showAddRootDialog() {
-    this.isShowAddRootDialog = true;
-  }
-  // 选中效果去除
-  public handleSelectedProperty(item: Unit | Property) {
-    this.selectedEditItem = item;
-  }
-  // 右侧变更触发
-  public changeType(val: PropertyType) {
-    (this.selectedEditItem as Property).type = val;
-    (this.selectedEditItem as Property).value = "";
-  }
-
-  /**
-   * 点击添加下一级
-   */
-  public showAddChildDialog() {
-    this.isShowAddChildDialog = true;
-  }
-  // 删除子级
-  public deleteItem() {
-    const target = this.selectedEditItem;
-    if (target) {
-      let list = target.parent ? target.parent.children : this.rootUnitList;
-      const index = list.indexOf(target);
-      if (index > -1) {
-        list.splice(index, 1);
-      }
-      //删除干净之后
-      if (list.length == 0) {
-        if (target && target.parent && target.parent.parent) {
-          let justIdx = target.parent.parent.children.indexOf(target.parent);
-          Vue.set(
-            target.parent.parent.children,
-            justIdx,
-            new Property(target.parent.title, "", target.parent.parent)
-          );
-        }
-      }
-    }
-  }
-
-  // 子级添加回调
-  public confirmAddChild(name: string[]) {
-    const target = this.selectedEditItem;
-    if (target) {
-      const newTarget =
-        target instanceof Property
-          ? target.parent.changeChild2Unit(target)
-          : target;
-
-      name.forEach((item) => {
-        newTarget.addInputChildren(item);
-      });
-    }
-  }
 
-  // 一级标题成功之后的回调
-  public addRootUnit(title: string) {
-    this.rootUnitList.push(new Unit(title));
-  }
   // 点击空白部分触发
   public onCancelSelected() {
     // 清空选中数据
@@ -1290,19 +1235,46 @@ export default class editTemplate extends Vue {
   padding-left: 53px;
   font-weight: 300;
   .add_template_item {
-    margin-top: 12px;
-    height: 35px;
+    margin-top: 14px;
     line-height: 35px;
+    position: relative;
     label {
       padding-left: 5px;
       padding-right: 18px;
     }
+    .item_choice {
+      display: inline-block;
+      input {
+        display: none;
+      }
+      label {
+        &:before {
+          font-size: 14px;
+          margin-right: 5px;
+        }
+        &.iconquedingbeifen:before {
+          color: #3e79fe;
+        }
+        &.iconbianzubeifen:before {
+          color: #c4c4c4;
+        }
+      }
+    }
     .item_title {
       line-height: 35px;
       font-size: 14px;
       width: 110px;
       text-indent: 18px;
       display: inline-block;
+      position: relative;
+      &.needed:before {
+        content: '*';
+        color: red;
+        font-size: 20px;
+        position: absolute;
+        left: -10px;
+        top: 2px;
+      }
     }
     .item_input {
       width: 540px;
@@ -1313,6 +1285,40 @@ export default class editTemplate extends Vue {
       text-indent: 25px;
       font-weight: 300;
     }
+    .upload_btn {
+      width: 670px;
+      height: 150px;
+      background-color: #f8f8f8;
+      border: 1px  #ededed dashed;
+      border-radius: 4px;
+      margin-top: 10px;
+      display: inline-block;
+      text-align: center;
+      padding-top: 80px;
+      cursor: pointer;
+      position: relative;
+      .upload_icon {
+        font-size: 40px;
+        color: #3e79fe;
+      }
+      .upload_title {
+        font-weight: normal;
+        line-height: 24px;
+      }
+      .upload_note {
+        font-size: 12px;
+        line-height: 22px;
+      }
+      input[type='file'] {
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-block;
+      }
+    }
   }
 }
 </style>