封装时间，优化项目管理

components/page/timeDifference.vue

 <template>
-  <div class="time-view">{{ date }}</div>
+  <div class="time-view" v-if="timeValue.startDate && timeValue.endDate">
+    <span>{{ timeValue.startDate }}</span
+    >&nbsp; <span class="line">————</span>&nbsp;
+    <!-- {{ date }} -->
+    <span>{{ timeValue.endDate }}</span>
+    <div class="jian-tou"></div>
+    <div class="day-time">{{ date }}</div>
+  </div>
 </template>
 <script>
 export default {
@@ -8,14 +15,18 @@ export default {
     return {};
   },
   props: {
+    // model: {
+    //   prop: "value",
+    //   event: "on-change",
+    // },
     timeValue: {
       type: [String, Object],
       default: "",
     },
-    // mode: {
-    //   type: [String, Object],
-    //   default: "",
-    // },
+    work: {
+      type: [String, Number], //传入的work为0，转换为小时，1为天，2为周，3为月
+      default: 0,
+    },
   },
   computed: {
     date() {
@@ -24,33 +35,42 @@ export default {
       var date3 = 0;
       date3 = date2 - date1;
 
-      var timeSpanStr;
-      if (date3 <= 1000 * 60 * 1) {
-        timeSpanStr = "刚刚";
-      } else if (1000 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60) {
-        timeSpanStr = Math.round(date3 / (1000 * 60)) + "分钟";
-      } else if (1000 * 60 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60 * 24) {
-        timeSpanStr = Math.round(date3 / (1000 * 60 * 60)) + "小时";
-      } else if (
-        1000 * 60 * 60 * 24 <
-        date3
-        // && date3 <= 1000 * 60 * 60 * 24 * 30
-      ) {
-        timeSpanStr = Math.round(date3 / (1000 * 60 * 60 * 24)) + "天";
-      }
-      return timeSpanStr;
+      // var timeSpanStr;
+      // if (date3 <= 1000 * 60 * 1) {
+      //   timeSpanStr = "刚刚";
+      // } else if (1000 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60) {
+      //   timeSpanStr = Math.round(date3 / (1000 * 60)) + "分钟";
+      // } else if (1000 * 60 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60 * 24) {
+      //   timeSpanStr = Math.round(date3 / (1000 * 60 * 60)) + "小时";
+      // } else if (
+      //   1000 * 60 * 60 * 24 <
+      //   date3
+      //   // && date3 <= 1000 * 60 * 60 * 24 * 30
+      // ) {
+      //   timeSpanStr = Math.round(date3 / (1000 * 60 * 60 * 24)) + "天";
+      // }
+      // return timeSpanStr;
 
-      // var result = "";
-      // var minute = 1000 * 60;
-      // var hour = minute * 60;
-      // var day = hour * 24;
-      // var month = day * 30;
-      // if (date3 < 0) return;
-      // var monthC = date3 / month;
-      // var weekC = date3 / (7 * day);
-      // var dayC = date3 / day;
-      // var hourC = date3 / hour;
-      // var minC = date3 / minute;
+      var result = "";
+      var minute = 1000 * 60;
+      var hour = minute * 60;
+      var day = hour * 24;
+      var month = day * 30;
+      if (date3 < 0) return;
+      var monthC = date3 / month;
+      var weekC = date3 / (7 * day);
+      var dayC = date3 / day;
+      var hourC = date3 / hour;
+      var minC = date3 / minute;
+      if (this.work == 3) {
+        result = "" + parseInt(monthC) + "月";
+      } else if (this.work == 2) {
+        result = "" + parseInt(weekC) + "周";
+      } else if (this.work == 1) {
+        result = "" + parseInt(dayC) + "天";
+      } else if (this.work == 0) {
+        result = "" + parseInt(hourC) + "小时";
+      }
       // if (monthC >= 1) {
       //   result = "" + parseInt(monthC) + "月";
       // } else if (weekC >= 1) {
@@ -59,12 +79,14 @@ export default {
       //   result = "" + parseInt(dayC) + "天";
       // } else if (hourC >= 1) {
       //   result = "" + parseInt(hourC) + "小时";
-      // } else if (minC >= 1) {
+      // }
+      // else if (minC >= 1) {
       //   result = "" + parseInt(minC) + "分钟";
-      // } else {
-      //   result = "刚刚";
       // }
-      // return result;
+      else {
+        result = "0";
+      }
+      return result;
     },
   },
   mounted() {},
@@ -73,4 +95,26 @@ export default {
 };
 </script>
 <style lang="less">
+.time-view {
+  width: 300px;
+  position: relative;
+  .day-time {
+    position: absolute;
+    bottom: 11px;
+    left: 83px;
+  }
+  .line {
+    font-size: 18px;
+  }
+  .jian-tou {
+    position: absolute;
+    bottom: 9px;
+    left: 144px;
+    width: 7px;
+    height: 7px;
+    border-top: 2px solid #666;
+    border-right: 2px solid #666;
+    transform: rotate(45deg);
+  }
+}
 </style>

pages/project/project/add.vue

 <template>
-  <Form ref="form" :model="entity" :rules="rules" :label-width="90">
+  <Form ref="form" :model="entity" :rules="rules" :label-width="100">
     <Row>
       <Col span="8" class="projct-img">
         <FormItem :label="l('picture')" prop="picture">
@@ -72,29 +72,28 @@
           ><FormItem :label="l('state')" prop="state">
             <Dictionary
               code="project.main.state"
+              type="radio"
               v-model="entity.state"
             ></Dictionary> </FormItem
         ></Col>
-        <Col :span="12"
-          ><FormItem :label="l('startDate')" prop="startDate">
+        <Col :span="12">
+          <FormItem label="开始结束时间" prop="date">
             <DatePicker
-              type="date"
-              v-model="entity.startDate"
+              type="datetimerange"
+              format="yyyy-MM-dd"
+              v-model="date"
+              placeholder="请选择时间范围"
+              @on-change="changeFormat"
+              style="width: 300px"
             ></DatePicker> </FormItem
         ></Col>
-        <Col :span="12"
-          ><FormItem :label="l('endDate')" prop="endDate">
-            <DatePicker
-              type="date"
-              v-model="entity.endDate"
-            ></DatePicker> </FormItem
-        ></Col>
-        <!-- <TimeDifference :timeValue="timeValue"></TimeDifference>  -->
+        <!-- <TimeDifference :timeValue="timeValue" :wrok="1"></TimeDifference> -->
         <Col :span="12"
           ><FormItem :label="l('type')" prop="type">
             <Dictionary
               code="project.main.type"
               v-model="entity.type"
+              type="radio"
             ></Dictionary> </FormItem
         ></Col>
         <!--       
@@ -144,6 +143,7 @@ export default {
       },
       imgName: "",
       avatorPath: "",
+      date: [],
       entity: {
         // creationTime: null,
         creatorUserId: this.$store.state.userInfo.userId,
@@ -154,11 +154,12 @@ export default {
         // deleterUserId: null,
         title: "",
         note: "",
-        state: null,
-        type: null,
+        state: 1,
+        type: 0,
         picture: "",
         attachment: "",
         phase: null,
+
         startDate: "",
         endDate: "",
         businessUnits: "",
@@ -187,6 +188,10 @@ export default {
     this.parms.eid = this.$u.guid();
   },
   methods: {
+    changeFormat(val) {
+      this.entity.startDate = val[0];
+      this.entity.endDate = val[1];
+    },
     imgUrl() {
       window.open(this.avatorPath, "_blank");
     },

pages/project/project/edit.vue

 <template>
-  <Form ref="form" :model="entity" :rules="rules" :label-width="90">
+  <Form ref="form" :model="entity" :rules="rules" :label-width="100">
     <Row>
       <Col span="8" class="projct-img">
         <FormItem :label="l('picture')" prop="picture">
@@ -30,10 +30,21 @@
             <Dictionary
               code="project.main.state"
               v-model="entity.state"
+              type="radio"
             ></Dictionary> </FormItem
         ></Col>
-
-        <Col :span="12"
+        <Col :span="12">
+          <FormItem label="开始结束时间" prop="date">
+            <DatePicker
+              type="datetimerange"
+              format="yyyy-MM-dd"
+              v-model="date"
+              placeholder="请选择时间范围"
+              @on-change="changeFormat"
+              style="width: 300px"
+            ></DatePicker> </FormItem
+        ></Col>
+        <!-- <Col :span="12"
           ><FormItem :label="l('startDate')" prop="startDate">
             <DatePicker
               type="date"
@@ -46,12 +57,13 @@
               type="date"
               v-model="entity.endDate"
             ></DatePicker> </FormItem
-        ></Col>
+        ></Col> -->
         <Col :span="12"
           ><FormItem :label="l('type')" prop="type">
             <Dictionary
               code="project.main.type"
               v-model="entity.type"
+              type="radio"
             ></Dictionary> </FormItem
         ></Col>
         <Col :span="24">
@@ -96,7 +108,11 @@ export default {
     return {
       imgName: "",
       avatorPath: "",
-      entity: {},
+      entity: {
+        state: 1,
+        type: 0,
+      },
+      date: [],
       rules: {
         title: [{ required: true, message: "必填", trigger: "blur" }],
       },
@@ -116,6 +132,11 @@ export default {
     this.$refs.refmovieFile1.inputShow = false;
   },
   methods: {
+    changeFormat(val) {
+      // console.log(val)
+      this.entity.startDate = val[0];
+      this.entity.endDate = val[1];
+    },
     imgUrl() {
       window.open(this.avatorPath, "_blank");
     },
@@ -123,14 +144,21 @@ export default {
       Api.get({ id: v }).then((r) => {
         this.entity = r.result;
         this.avatorPath = fileUrlDown + r.result.picture;
-        this.imgName = r.result.picture;
+        if (r.result.picture) {
+          this.imgName = r.result.picture;
+        }
         if (r.result.attachment && r.result.attachment != "") {
           this.parms.eid = r.result.attachment;
         } else {
           this.parms.eid = this.$u.guid();
         }
         this.entity.attachment = this.parms.eid;
-        // this.entity.creatorUserId = r.result.creatorUserId;
+        // let data0 = r.result.startDate.slice(0, 10);
+        // let data1 = r.result.endDate.slice(0, 10);
+        // this.date[0] = JSON.parse(data0);
+        // this.date[1] = JSON.parse(data1);
+        // console.log(this.date);
+        // console.log(typeof this.date[1]);
       });
     },
     handleSubmit() {

pages/project/project/index.vue

@@ -214,6 +214,16 @@ export default {
           align: "left",
           easy: true,
           high: true,
+          render: (h, params) => {
+            return h(
+              "op",
+              {
+                attrs: { oprate: "detail" },
+                on: { click: () => this.view(params.row.id) },
+              },
+              params.row.title
+            );
+          },
         },
         {
           key: "state",
@@ -322,14 +332,14 @@ export default {
           align: "center",
           render: (h, params) => {
             return h("div", { class: "action" }, [
-              h(
-                "op",
-                {
-                  attrs: { oprate: "detail" },
-                  on: { click: () => this.view(params.row.id) },
-                },
-                "查看"
-              ),
+              // h(
+              //   "op",
+              //   {
+              //     attrs: { oprate: "detail" },
+              //     on: { click: () => this.view(params.row.id) },
+              //   },
+              //   "查看"
+              // ),
               //h('op', { attrs: { oprate: 'copy' }, on: { click: () => this.copy(params.row.id) } }, '克隆'),
               h(
                 "op",
@@ -424,10 +434,13 @@ export default {
       }
     },
     viewFiles(row) {
-      console.log(row);
-      this.parms.eid = row.attachment;
-
-      this.modal1 = true;
+      // console.log(row.attachment);
+      if (row.attachment) {
+        this.parms.eid = row.attachment;
+        this.modal1 = true;
+      } else {
+        this.$Message.error("暂没上传附件");
+      }
     },
     ok() {
       this.$refs.grid.load();