date兼容问题

src/components/Modal.vue

@@ -9,14 +9,17 @@
           <span>资料名称</span>
           <div>{{ ziliaoName }}</div>
         </div>
-        <div class="bodyRow timeWidth">
-          <span>发布时间</span
-          ><input
-            type="date"
-            placeholder="选择时间"
-            :max="localDay"
-            v-model="ziliaoTime"
-          />
+        <div class="publish_time">
+          <span class="publish_time_span">发布时间</span>
+          <div class="date_pick">
+            <Datepicker
+              :language="zh"
+              format="yyyy/MM/dd"
+              placeholder=" 年 / 月 / 日"
+              v-model="datePickValue"
+              :disabled-dates="limit"
+            ></Datepicker>
+          </div>
         </div>
         <div class="bodyRow">
           <!--  <div class="contentCol1">
@@ -147,6 +150,8 @@
 </template>
 
 <script>
+import Datepicker from "vuejs-datepicker";
+import { zh } from "vuejs-datepicker/dist/locale";
 export default {
   name: "Modal",
   props: {
@@ -165,8 +170,14 @@ export default {
       default: "编辑",
     },
   },
+  components: {
+    Datepicker,
+  },
   data() {
     return {
+      zh: zh,
+      limit: {},
+      datePickValue: "",
       dataName: [],
       carSeries: [],
       carType: [],
@@ -203,7 +214,6 @@ export default {
       releaseChannel: [],
       releasePlate: [],
       userId: "",
-      localDay: "",
       noEditFlag: false,
     };
   },
@@ -213,26 +223,24 @@ export default {
     },
     // 获取当前的月份
     getLocalMonth: function () {
-      let data = new Date();
-      let year = data.getFullYear();
-      let month = data.getMonth() + 1;
-      let day = data.getDate();
-      if (month < 10) {
-        month = "0" + month;
-      } else {
-        month = month + "";
-      }
-      if (day < 10) {
-        day = "0" + day;
-      } else {
-        day = day + "";
-      }
-      this.localDay = year + "-" + month + "-" + day;
+      this.limit = { from: new Date() };
+    },
+    formatDateToDate: function (val) {
+      this.ziliaoTime = "";
+      let date = new Date(val);
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      const time = y + "-" + m + "-" + d;
+      this.ziliaoTime = time;
     },
     // 判断非空
     beforeEdit: function () {
       this.releaseP = (this.releaseP || "").replace(/\s/g, "");
       this.mediaTitle = (this.mediaTitle || "").replace(/\s/g, "");
+      this.formatDateToDate(this.datePickValue);
       if (!this.ziliaoTime) {
         this.noEditFlag = true;
         alert("发布时间不能为空");
@@ -622,7 +630,7 @@ this.readCount&&this.goodCount&&  this.bbsCount&& this.lookingCount */
 };
 </script>
 
-<style>
+<style scoped lang="less">
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -737,8 +745,16 @@ input {
   align-items: center;
   width: 363px;
 }
-.timeWidth input {
-  width: 150px;
+.publish_time {
+  display: flex;
+  padding: 4px;
+  .publish_time_span{
+    width: 80px;
+    margin: 10px;
+  }
+  .date_pick{
+    padding-top: 10px;
+  }
 }
 </style>
 

src/views/data/UploadInfor.vue

@@ -24,17 +24,20 @@
       </div>
       <div class="selectType">
         <p>选择类型</p>
-        <div>
+        <div class="material_time">
           <span>素材时间</span>
-          <input
-            type="month"
-            :min="localMonth"
-            class="inputStyle"
-            v-model="materialTime"
-            @change="materialTimeChange"
-          />
-          <span style="margin-left: 30px">经销商范围</span>
-          <select class="selectStyle" v-model="scope" autocomplete="off">
+          <Datepicker
+            :language="zh"
+            format="yyyy/MM"
+            placeholder=" 年 / 月"
+            v-model="monthPickValue"
+            minimum-view="month"
+            :disabled-dates="limit"
+          ></Datepicker>
+        </div>
+        <div class="dealer_scope">
+          <span>经销商范围</span>
+          <select class="selectStyle" v-model="scope" autocomplete="off" style="margin:0">
             <option value="1">共通</option>
             <option value="0">部分</option>
           </select>
@@ -120,21 +123,20 @@
         />
       </div>
     </div>
-
-    <div class="dataName" style="margin-top: 2%">
+    <div class="feed_back" style="margin-top: 2%">
       <span>反馈设置</span>
       <select class="selectStyle" v-model="isFeedBack" autocomplete="off">
         <option value="0">不需要反馈</option>
         <option value="1">需要反馈</option>
       </select>
-      <input
-        type="date"
-        :min="localDay"
-        class="inputStyle"
-        v-model="feedBackTime"
+      <Datepicker
+        :language="zh"
+        format="yyyy/MM/dd"
+        placeholder=" 年 / 月 / 日"
         v-show="isFeedBack === '1'"
-        @change="feedBackTimeChange"
-      />
+        v-model="datePickValue"
+        :disabled-dates="limit"
+      ></Datepicker>
     </div>
     <div class="uploadFile">
       <p class="title">附件</p>
@@ -154,7 +156,6 @@
       :tipText="tipModalText"
       @close_tip_modal="closeTipModal"
     />
-    <!-- <Datepicker :language="zh" format="yyyy/MM" :typeable="false" type="month"></Datepicker> -->
   </div>
 </template>
 
@@ -163,8 +164,8 @@ import UpLoadTable from "./components/UploadInforTable";
 import Count from "../../components/Count";
 import Tablepage from "../../components/TablePage";
 import TipModal from "../../components/TipModal";
-// import Datepicker from 'vuejs-datepicker';
-// import {zh} from 'vuejs-datepicker/dist/locale'
+import Datepicker from 'vuejs-datepicker';
+import {zh} from 'vuejs-datepicker/dist/locale'
 export default {
   props: {
     isManufacturer: {
@@ -177,12 +178,15 @@ export default {
     Count,
     Tablepage,
     TipModal,
-    // Datepicker
+    Datepicker
   },
   watch: {},
   data() {
     return {
-      // zh: zh,
+      zh: zh,
+      monthPickValue: "",
+      datePickValue: "",
+      limit: {},
       allDataNameList: [],
       tipFlag: false, // 是否展示提示
       tipText: "资料名称不能重复，请重新输入",
@@ -203,8 +207,6 @@ export default {
       currentPage: 1,
       areaList: [], // 按区域添加
       groupList: [], // 按小组添加
-      localMonth: "",
-      localDay: "",
       tableData: [], // 表格显示的数据
       allDlr: [], // 所有经销商数据
       idList: [],
@@ -223,8 +225,6 @@ export default {
     // 检查名字是否重复 失去焦点判断
     checkName: function () {
       let include = this.allDataNameList.indexOf(this.inforName);
-      console.log(this.allDataNameList, "all");
-      console.log(include);
       if (!this.inforName) {
         this.tipText = "资料名不能为空";
         this.tipFlag = true;
@@ -240,16 +240,6 @@ export default {
       this.tipText = "资料名称不能重复，请重新输入";
       this.tipFlag = false;
     },
-    // 素材时间变化
-    materialTimeChange: function () {
-      // this.materialTime = this.localMonth.replace('-', '/');
-      console.log(this.materialTime);
-    },
-    // 反馈时间变化
-    feedBackTimeChange: function () {
-      // this.materialTime = this.localMonth.replace('-', '/');
-      console.log(this.feedBackTime);
-    },
     // 显示隐藏按小组添加下拉框
     showOption() {
       this.optionFlag = !this.optionFlag;
@@ -363,11 +353,33 @@ export default {
         this.currentPage * this.pageSize
       );
     },
+    // 时间格式转化
+    formatDateToMonth: function (val) {
+      let date = new Date(val)
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+      m = m < 10 ? ('0' + m) : m
+      const time =  y + '-' + m;
+      this.materialTime = time;
+      console.log(time);
+    },
+    formatDateToDate: function (val) {
+      let date = new Date(val)
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+      m = m < 10 ? ('0' + m) : m
+      let d = date.getDate()
+      d = d < 10 ? ('0' + d) : d
+      const time =  y + '-' + m + '-' + d;
+      this.feedBackTime = time;
+    },
     // 点击提交，检查名字是否重复，获取数据
     submit: function () {
       if (this.isFeedBack === "0") {
         this.feedBackTime = "";
       }
+      this.formatDateToMonth(this.monthPickValue);
+      this.formatDateToDate(this.datePickValue);
       this.checkName();
       if (!this.tipFlag) {
         if (!this.inforDes) {
@@ -412,21 +424,9 @@ export default {
     getLocalMonth: function () {
       let data = new Date();
       let year = data.getFullYear();
-      let month = data.getMonth() + 1;
+      let month = data.getMonth();
       let day = data.getDate();
-      if (month < 10) {
-        month = "0" + month;
-      } else {
-        month = month + "";
-      }
-      if (day < 10) {
-        day = "0" + day;
-      } else {
-        day = day + "";
-      }
-      this.localMonth = year + "-" + month;
-      this.localDay = year + "-" + month + "-" + day;
-      console.log(this.localDay);
+      this.limit = {to : new Date(year, month,  day)};
     },
     // 提交接口
     submitRequest: function () {
@@ -439,12 +439,9 @@ export default {
       paramData.append("sourceTime", this.materialTime);
       paramData.append("endDate", this.feedBackTime);
       paramData.append("dealerScope", this.scope);
-      console.log(this.scope, 111);
       if (this.scope === "0") {
         paramData.append("dealerList", this.idList);
-        console.log(1111, this.idList);
       }
-      console.log(paramData.getAll("dataName"));
       this.$http
         .uploadFile("/firmsUpload", paramData)
         .then((res) => {
@@ -489,7 +486,6 @@ export default {
         data: data,
       })
         .then((res) => {
-          console.log(res);
           this.tableData = [];
           let nowSum = this.sum;
           if (res.data && res.data.code === 200) {
@@ -629,8 +625,24 @@ export default {
   .selectType {
     margin-top: 10px;
     margin-bottom: 10px;
-    div {
+    .material_time {
+      display: flex;
+      margin-left: 65px;
+      span{
+        height: 20px;
+        line-height: 20px;
+        width: 100px;
+      }
+    }
+    .dealer_scope {
+      margin-top: 10px;
+      display: flex;
       margin-left: 65px;
+      span{
+        height: 20px;
+        line-height: 20px;
+        width: 100px;
+      }
     }
   }
   .selectStyle {
@@ -760,6 +772,9 @@ export default {
       height: 28px;
     }
   }
+  .feed_back {
+    display: flex;
+  }
   .table {
     margin-top: 10px;
   }

src/views/data/UploadLinks.vue

@@ -23,9 +23,19 @@
         </div>
         <div class="time">
           <p>请选择时间段</p>
-          <input type="date" v-model="startTime" />
+          <Datepicker
+            :language="zh"
+            format="yyyy/MM/dd"
+            placeholder=" 年 / 月 / 日"
+            v-model="startTimeValue"
+          ></Datepicker>
           <span>至</span>
-          <input type="date" v-model="endTime" />
+          <Datepicker
+            :language="zh"
+            format="yyyy/MM/dd"
+            placeholder=" 年 / 月 / 日"
+            v-model="endTimeValue"
+          ></Datepicker>
         </div>
         <div class="current_button" @click="search">搜索</div>
       </div>
@@ -54,15 +64,21 @@ import TablePage from "../../components/TablePage";
 import Count from "../../components/Count";
 import Table from "./components/UploadLinksTable";
 import { env_url, php_url } from "../../config/env";
+import Datepicker from "vuejs-datepicker";
+import { zh } from "vuejs-datepicker/dist/locale";
 import axiosTest from "axios";
 export default {
   components: {
     TablePage,
     Count,
     Table,
+    Datepicker,
   },
   data() {
     return {
+      zh: zh,
+      startTimeValue: "",
+      endTimeValue: "",
       inputValue: "",
       sum: 0,
       currentPage: 1,
@@ -87,7 +103,19 @@ export default {
     focusInput: function () {
       this.inputValue = "";
     },
+    formatDateToDate: function (val) {
+      let date = new Date(val)
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+      m = m < 10 ? ('0' + m) : m
+      let d = date.getDate()
+      d = d < 10 ? ('0' + d) : d
+      const time =  y + '-' + m + '-' + d;
+      return time
+    },
     search: function () {
+      this.startTime = this.formatDateToDate(this.startTimeValue);
+      this.endTime = this.formatDateToDate(this.endTimeValue);
       let data = {
         queryParams: this.inputValue,
         localArea: this.areaValue,
@@ -153,7 +181,6 @@ export default {
         data: data,
       })
         .then((res) => {
-          console.log(res.data, 111111);
           this.tableData = res.data.data;
           this.sum = res.data.count;
         })
@@ -170,7 +197,6 @@ export default {
         data: data,
       })
         .then((res) => {
-          console.log(res, 22)
           this.tableData = res.data.data;
           this.sum = +res.data.count;
         })
@@ -187,8 +213,6 @@ export default {
         .then((res) => {
           if (res.data && res.data.code === 200) {
             this.areaList = res.data.data;
-          } else {
-            console.log(res);
           }
         })
         .catch((err) => {
@@ -197,11 +221,6 @@ export default {
     },
     // 导出   接口
     exportTem: function () {
-      // queryParams: this.inputValue,
-      //         localArea: this.areaValue,
-      //         startTime: this.startTime,
-      //         endTime: this.endTime,
-      // let url = this.onlineUrl + "/exportFactory";
       let url =
         this.otherUrl +
         "/lexus_php/web/report_export.php?queryParams=" +

src/views/data/components/UploadLinkEditModal.vue

@@ -9,14 +9,17 @@
           <span>资料名称</span>
           <div>{{ ziliaoName }}</div>
         </div>
-        <div class="bodyRow timeWidth">
-          <span>发布时间</span
-          ><input
-            type="date"
-            placeholder="选择时间"
-            :max="localDay"
-            v-model="ziliaoTime"
-          />
+        <div class="publish_time">
+          <span class="publish_time_span">发布时间</span>
+          <div class="date_pick">
+            <Datepicker
+              :language="zh"
+              format="yyyy/MM/dd"
+              placeholder=" 年 / 月 / 日"
+              v-model="datePickValue"
+              :disabled-dates="limit"
+            ></Datepicker>
+          </div>
         </div>
         <div class="bodyRow">
           <div class="contentCol1">
@@ -124,6 +127,8 @@
 </template>
 
 <script>
+import Datepicker from "vuejs-datepicker";
+import { zh } from "vuejs-datepicker/dist/locale";
 export default {
   name: "Modal",
   props: {
@@ -138,8 +143,14 @@ export default {
       default: "",
     },
   },
+  components: {
+    Datepicker,
+  },
   data() {
     return {
+      zh: zh,
+      limit: {},
+      datePickValue: "",
       ziliaoName: this.LinkData.informationName,
       ziliaoId: "",
       ziliaoTime: "",
@@ -161,7 +172,6 @@ export default {
       mediaUrl: this.LinkData.mediaUrl || "",
       dictList: [],
       initParentId: "",
-      localDay: "",
       noEditFlag: false,
     };
   },
@@ -188,10 +198,22 @@ export default {
     closeSelf: function () {
       this.$emit("closeme");
     },
+    formatDateToDate: function (val) {
+      this.ziliaoTime = "";
+      let date = new Date(val);
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      const time = y + "-" + m + "-" + d;
+      this.ziliaoTime = time;
+    },
     // 判断非空
-    boforeEdit: function () {
-      this.releaseP = (this.releaseP || '').replace(/\s/g, "");
-      this.mediaTitle = (this.mediaTitle || '').replace(/\s/g, "");
+    beforeEdit: function () {
+      this.releaseP = (this.releaseP || "").replace(/\s/g, "");
+      this.mediaTitle = (this.mediaTitle || "").replace(/\s/g, "");
+      this.formatDateToDate(this.datePickValue);
       if (!this.ziliaoTime) {
         this.noEditFlag = true;
         alert("发布时间不能为空");
@@ -255,7 +277,7 @@ export default {
     },
     edit() {
       this.noEditFlag = false;
-      this.boforeEdit();
+      this.beforeEdit();
       if (!this.noEditFlag) {
         //当前月份
         let date = new Date();
@@ -270,7 +292,6 @@ export default {
             dealerId: this.userId,
             dataId: this.ziliaoId,
             informationName: this.ziliaoName,
-            //   releaseTime: this.ziliaoTime,
             releaseTime: this.ziliaoTime,
             carType: this.carTypeValue,
 
@@ -306,21 +327,7 @@ export default {
     },
     // 获取当前的月份
     getLocalMonth: function () {
-      let data = new Date();
-      let year = data.getFullYear();
-      let month = data.getMonth() + 1;
-      let day = data.getDate();
-      if (month < 10) {
-        month = "0" + month;
-      } else {
-        month = month + "";
-      }
-      if (day < 10) {
-        day = "0" + day;
-      } else {
-        day = day + "";
-      }
-      this.localDay = year + "-" + month + "-" + day;
+      this.limit = { from: new Date() };
     },
     initialData: function () {
       this.ziliaoName = this.LinkData.informationName;
@@ -468,7 +475,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped lang="less">
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -583,8 +590,16 @@ input {
   align-items: center;
   width: 363px;
 }
-.timeWidth input {
-  width: 150px;
+.publish_time {
+  display: flex;
+  padding: 4px;
+  .publish_time_span{
+    width: 80px;
+    margin: 10px;
+  }
+  .date_pick{
+    padding-top: 10px;
+  }
 }
 </style>
 

src/views/data/components/addFeedbackMoal.vue

@@ -9,14 +9,17 @@
           <span>资料名称</span>
           <div>{{ fileName }}</div>
         </div>
-        <div class="bodyRow timeWidth">
-          <span>发布时间</span
-          ><input
-            type="date"
-            placeholder="选择时间"
-            :max="localDay"
-            v-model="ziliaoTime"
-          />
+        <div class="publish_time">
+          <span class="publish_time_span">发布时间</span>
+          <div class="date_pick">
+            <Datepicker
+              :language="zh"
+              format="yyyy/MM/dd"
+              placeholder=" 年 / 月 / 日"
+              v-model="datePickValue"
+              :disabled-dates="limit"
+            ></Datepicker>
+          </div>
         </div>
         <div class="bodyRow">
           <div class="contentCol1">
@@ -124,8 +127,13 @@
 </template>
 
 <script>
+import Datepicker from "vuejs-datepicker";
+import { zh } from "vuejs-datepicker/dist/locale";
 export default {
   name: "Modal",
+  components: {
+    Datepicker,
+  },
   props: {
     fileName: {
       type: String,
@@ -142,6 +150,9 @@ export default {
   },
   data() {
     return {
+      zh: zh,
+      datePickValue: "",
+      limit: {},
       ziliaoTime: "",
       carTypeValue: "1",
       carType: [],
@@ -153,15 +164,14 @@ export default {
       content1: [],
       contentName2: "", //'内容分类',
       content2: [],
-      readCount: 0,
-      goodCount: 0,
-      bbsCount: 0,
-      lookingCount: 0,
+      readCount: null,
+      goodCount: null,
+      bbsCount: null,
+      lookingCount: null,
       mediaTitle: "", //'文章标题',
       mediaUrl: "",
       dictList: [],
       initParentId: "",
-      localDay: "",
       noEditFlag: false,
     };
   },
@@ -188,10 +198,22 @@ export default {
     closeSelf: function () {
       this.$emit("closeme");
     },
+    formatDateToDate: function (val) {
+      this.ziliaoTime = "";
+      let date = new Date(val);
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      const time = y + "-" + m + "-" + d;
+      this.ziliaoTime = time;
+    },
     // 判断非空
     beforeEdit: function () {
       this.releaseP = (this.releaseP || "").replace(/\s/g, "");
       this.mediaTitle = (this.mediaTitle || "").replace(/\s/g, "");
+      this.formatDateToDate(this.datePickValue);
       if (!this.ziliaoTime) {
         this.noEditFlag = true;
         alert("发布时间不能为空");
@@ -289,21 +311,7 @@ export default {
     },
     // 获取当前的月份
     getLocalMonth: function () {
-      let data = new Date();
-      let year = data.getFullYear();
-      let month = data.getMonth() + 1;
-      let day = data.getDate();
-      if (month < 10) {
-        month = "0" + month;
-      } else {
-        month = month + "";
-      }
-      if (day < 10) {
-        day = "0" + day;
-      } else {
-        day = day + "";
-      }
-      this.localDay = year + "-" + month + "-" + day;
+      this.limit = { from: new Date() };
     },
     getCarType: function () {
       this.$http({
@@ -413,7 +421,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped lang="less">
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -528,7 +536,15 @@ input {
   align-items: center;
   width: 363px;
 }
-.timeWidth input {
-  width: 150px;
+.publish_time {
+  display: flex;
+  padding: 4px;
+  .publish_time_span{
+    width: 80px;
+    margin: 10px;
+  }
+  .date_pick{
+    padding-top: 10px;
+  }
 }
 </style>