feat: date-range

components/date-range.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="date-range">
+    <el-date-picker v-model="value[0]" value-format="yyyy-MM-dd" type="date" placeholder="起始日期"></el-date-picker>
+    <span class="to">至</span>
+    <el-date-picker v-model="value[1]" value-format="yyyy-MM-dd" type="date" placeholder="至今"></el-date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: ["value"],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {
+    console.log(this.value, this.change);
+  },
+  methods: {
+    handleDeleteFile() {
+      this.$emit("change", "");
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.date-range {
+  position: relative;
+  display: flex;
+  line-height: 40px;
+  background: #fff;
+  .to {
+    margin: 0 10px;
+  }
+  .el-date-editor {
+    width: 150px;
+  }
+}
+</style>

components/date.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="uploader">
-    <el-upload
-      class="avatar-uploader"
-      action="#"
-      :show-file-list="false"
-      :multiple="false"
-      accept="image/png, image/jpeg"
-      :before-upload="handleFileChange"
-    >
-      <i v-if="imageUrl" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
-      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-      <span v-if="title" class="title">{{title}}</span>
-    </el-upload>
-  </div>
-</template>
-
-<script>
-export default {
-  model: [],
-  props: ["value", "change"],
-  components: {},
-  data() {
-    return {
-      uploading: false
-    };
-  },
-  computed: {},
-  mounted() {},
-  methods: {
-    handleDeleteFile() {
-      this.$emit("change", "");
-    },
-    handleFileChange(file) {
-      // const file = e.target.files[0];
-      // if (file.size / 1024 > 500) {
-      //   this.$message.error("图片大小不得超过500k，请重新选择");
-      //   return false;
-      // }
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("original_filename", file.name);
-      this.uploading = true;
-      this.$axios
-        .$post(`/upload_image`, formData, {
-          headers: { "Content-Type": "multipart/form-data" }
-        })
-        .then(res => {
-          this.$emit("change", res.filename);
-        })
-        .finally(() => {
-          this.uploading = false;
-        });
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.uploader {
-  position: relative;
-  background: #fff;
-  .el-icon-delete {
-    display: none;
-  }
-  .avatar-uploader .el-upload {
-    width: 184px;
-    height: 162px;
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    img {
-      width: 100%;
-      height: auto;
-      object-fit: contain;
-      object-position: top left;
-    }
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409eff;
-    .el-icon-delete {
-      display: block;
-    }
-  }
-  .avatar-uploader-icon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-size: 44px;
-    color: #dce1e8;
-    width: 184px;
-    height: 162px;
-    line-height: 160px;
-    text-align: center;
-    /* background: rgba(1, 1, 1, 0.1); */
-    :hover {
-      color: #409eff;
-    }
-  }
-  .avatar {
-    width: 184px;
-    height: 162px;
-    display: block;
-  }
-  .title {
-    position: absolute;
-    left: 50%;
-    bottom: 8px;
-    transform: translateX(-50%);
-    font-size: 13px;
-    font-family: PingFangSC-Medium;
-    font-weight: 500;
-    color: rgba(25, 34, 46, 1);
-    line-height: 18px;
-  }
-}
-</style>

components/sign/education.vue

@@ -23,14 +23,7 @@
         <div v-else :key="'education' + idx" class="edit">
           <el-form ref="form" :rules="rules" :model="item" label-width="147px">
             <div class="header">
-              <el-date-picker
-                v-model="item.date"
-                type="daterange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                value-format="yyyy-MM-dd"
-              ></el-date-picker>
+              <date-range class="range" v-model="item.date"></date-range>
               <el-select
                 v-model="item.university"
                 allow-create
@@ -114,6 +107,7 @@
 
 <script>
 import uploader from "@/components/uploader";
+import dateRange from "@/components/date-range";
 import { mapState } from "vuex";
 export default {
   data() {
@@ -128,23 +122,13 @@ export default {
         diploma_url: "",
         start_time: "",
         end_time: "",
-        data: "",
+        date: [],
         university: "",
         major: "",
         education_background: "",
         description: ""
       },
-      education: [
-        // {
-        //   diploma_photo: "",
-        //   start_time: "2019-01-02",
-        //   end_time: "2019-01-02",
-        //   university: "程序员客栈",
-        //   major: "高级产品经理",
-        //   description:
-        //     "主要负责程序员客栈“雇佣直通车、1980服务、云端项目、雇佣项目“项目前后端开发，参与整个项目的设计、需求讨论、代码开发、联调测试及系统维护迭代。 【主要工作成就】：解决“雇佣直通车”项目，系统智能自动匹配算法问题。"
-        // }
-      ],
+      education: [],
       current: null,
       originEducation: [],
       universities: [],
@@ -155,7 +139,8 @@ export default {
     };
   },
   components: {
-    uploader
+    uploader,
+    dateRange
   },
   computed: {
     ...mapState(["userinfo"])
@@ -324,6 +309,9 @@ export default {
         justify-content: space-between;
         margin-bottom: 10px;
       }
+      .range {
+        margin-right: 10px;
+      }
       .opts {
         display: flex;
         align-items: center;
@@ -340,23 +328,17 @@ export default {
         }
       }
       .small {
-        width: 100px;
+        width: 140px;
       }
       .big {
         width: 100%;
       }
-      .el-date-editor {
-        margin-right: 10px;
-      }
-      .to {
-        margin-right: 10px;
-      }
       .times {
         .el-checkbox {
           width: 88px;
         }
         .el-input {
-          width: 136px;
+          width: 160px;
         }
       }
       .content {

components/sign/experience-form.vue

@@ -2,14 +2,15 @@
   <div class="edit">
     <el-form ref="form" :rules="rules" :model="item" label-width="147px">
       <div class="header">
-        <el-date-picker
+        <!-- <el-date-picker
           v-model="item.date"
           type="daterange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
-        ></el-date-picker>
+        ></el-date-picker>-->
+        <date-range class="range" v-model="item.date"></date-range>
         <el-select
           v-model="item.company"
           allow-create
@@ -71,11 +72,11 @@
 </template>
 
 <script>
-import uploader from "@/components/uploader";
+import dateRange from "@/components/date-range";
 export default {
   props: ["idx", "item", "handleDelete", "handleCancel", "handleConfirm"],
   components: {
-    uploader
+    dateRange
   },
   data() {
     return {
@@ -204,16 +205,26 @@ export default {
 .edit {
   padding: 20px;
   > form {
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
     .opts {
       display: flex;
       align-items: center;
-      float: right;
       .el-button {
         margin-left: 5px;
       }
     }
-    .inline {
-      display: flex;
+    .el-select,
+    .el-input {
+      width: 136px;
+      margin-right: 10px;
+      .el-input--suffix .el-input__inner {
+        padding-right: 0;
+      }
     }
     .to {
       margin-right: 10px;

components/sign/experience.vue

@@ -258,54 +258,7 @@ export default {
     color: rgba(16, 185, 106, 1);
     border: 1px solid rgba(16, 185, 106, 1);
   }
-  .edit {
-    padding: 20px;
-    > form {
-      .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-      }
-      .opts {
-        display: flex;
-        align-items: center;
-        .el-button {
-          margin-left: 5px;
-        }
-      }
-      .el-select,
-      .el-input {
-        width: 136px;
-        margin-right: 10px;
-        .el-input--suffix .el-input__inner {
-          padding-right: 0;
-        }
-      }
-      .to {
-        margin-right: 10px;
-      }
-      .times {
-        .el-checkbox {
-          width: 88px;
-        }
-        .el-input {
-          width: 136px;
-        }
-      }
-      .content {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-top: 10px;
-        .el-textarea {
-          display: flex;
-          width: 766px;
-          height: 162px;
-        }
-      }
-    }
-  }
+
   .show {
     padding: 23px 33px 23px 20px;
     border-bottom: 1px solid #ebeef5;