修复责任人选择、点击完成的图片换为div、时间节点不显示、完成日期控件更改问题

src/App.vue

@@ -1,10 +1,18 @@
 <template>
   <div id="app">
-    <router-view />
+    <a-config-provider :locale="zhCN">
+      <router-view />
+    </a-config-provider>
   </div>
 </template>
 
 <script>
+
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
 export default {
   name: 'App',
 };

src/trace/TraceCreate.vue

@@ -29,7 +29,11 @@
           <label for="trackUserId">责任人</label>
           <select id="trackUserId" v-model="userSelected" class="form-control">
             <option value="" />
-            <option v-for="user in userList" :key="user" :value="user.userId">
+            <option
+              v-for="user in projectUserList"
+              :key="user"
+              :value="user.userId"
+            >
               {{ user.userName }}
             </option>
           </select>
@@ -60,12 +64,17 @@
           />
         </div>
         <div class="form-group">
-          <label>完成时间</label>
-          <Date
-            v-model="planFinishedDate"
-            :readonly="isdisable"
-            style="width: 100%"
-          />
+          <label>完成时间</label><br />
+          <a-locale-provider :locale="locale">
+            <a-date-picker
+              v-model:value="planFinishedDate"
+              style="width: 100%"
+              show-time
+              format="YYYY-MM-DD HH:mm:ss"
+              :show-now="false"
+              placeholder="请选择完成日期"
+            />
+          </a-locale-provider>
         </div>
         <button
           style="width: 100%; background-color: #007aff; color: white"
@@ -84,7 +93,7 @@
 import Common from '../common/Common.js';
 
 import UpladFile from '../widget/UpladFile.js';
-
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
 import { Notify } from 'pc-component-v3';
 import Treeselect from '../widget/TreeSelect.vue';
 import ATreeselect from '../widget/ATreeSelect.vue';
@@ -111,6 +120,7 @@ export default {
       projectTaskDtos: [], //项目任务时间点
       srcArray: [],
       loading: false,
+      locale: zhCN,
     };
   },
   watch: {
@@ -126,7 +136,7 @@ export default {
     this.projectId = this.$route.params.projectId;
     console.log(this.projectId, 'projectId');
     this.initProject();
-    this.initData();
+    // this.initData();
     $('#summernote').summernote({
       toolbar: [
         [
@@ -210,7 +220,9 @@ export default {
       _self.traceDto.receiveUserId = _self.userSelected; //接收人Id
       _self.traceDto.projectTaskId = _self.$refs.treeSelect.getValue();
       if (_self.planFinishedDate != undefined && _self.planFinishedDate != '') {
-        _self.traceDto.planFinishedDate = _self.planFinishedDate + ' 00:00:00'; //完成时间
+        _self.traceDto.planFinishedDate = _self.dateConvert(
+          _self.planFinishedDate,
+        ); //完成时间
       }
       _self.traceDto.projectId = _self.projectId; //项目Id
 
@@ -237,7 +249,7 @@ export default {
         });
       } else {
         Notify.error('提示', '标题不能为空！');
-        $('body').addClass('modal-open',{overflow:'auto'});
+        $('body').addClass('modal-open', { overflow: 'auto' });
       }
     },
 
@@ -378,9 +390,9 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          console.log(data,'时间节点');
+          console.log(data, '时间节点');
           _self.projectTaskDtos = _self.convertToTreedata(data);
-          // console.log(_self.projectTaskDtos);
+          console.log(_self.projectTaskDtos, '99999999999999999');
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
@@ -397,7 +409,7 @@ export default {
           value: data[i].id,
           key: data[i].id,
         };
-        if ('children' in data[i]) {
+        if ('children' in data[i] && data[i].children !== null) {
           tempObj.children = this.convertToTreedata(data[i].children);
         }
         //push到数据数组中
@@ -405,6 +417,33 @@ export default {
       }
       return returnData;
     },
+    // 日期处理函数
+    plusZero: function (n) {
+      return n >= 10 ? n : '0' + n;
+    },
+
+    dateConvert: function (dateStr) {
+      const date = new Date(dateStr);
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      const hour = date.getHours();
+      const minute = date.getMinutes();
+      const second = date.getSeconds();
+      return (
+        year +
+        '-' +
+        this.plusZero(month) +
+        '-' +
+        this.plusZero(day) +
+        ' ' +
+        this.plusZero(hour) +
+        ':' +
+        this.plusZero(minute) +
+        ':' +
+        this.plusZero(second)
+      );
+    },
   },
 };
 </script>

src/trace/TraceName.vue

@@ -8,11 +8,19 @@
       <div>
         <div class="row">
           <div align="center">
-            <img
-              class="mui-img"
-              :src="finishedImageName"
-              @click="getTimeLineNumber()"
-            />
+            <div v-if="finished" class="checked" @click="getTimeLineNumber()" />
+            <div v-else class="clickFinished">
+              <div
+                style="
+                  width: 50px;
+                  height: 50px;
+                  color: #9b9b9b;
+                  margin-top: 16px;
+                "
+              >
+                <span>点击完成任务</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -118,7 +126,6 @@
   </div>
 </template>
 <script>
-
 import Common from '../common/Common.js';
 
 import UpladFile from '../widget/UpladFile.js';
@@ -130,7 +137,6 @@ import TraceComment from './TraceComment.vue';
 import TraceTimeLine from './TraceTimeLine.vue';
 import TraceAttachment from './TraceAttachment.vue';
 
-
 import AudioField from '../widget/AudioField.vue';
 import { Notify } from 'pc-component-v3';
 export default {
@@ -138,9 +144,9 @@ export default {
     TraceLog,
     TraceComment,
     TraceTimeLine,
-    
+
     TraceAttachment,
-    
+
     UpladFile,
     AudioField,
   },
@@ -252,15 +258,15 @@ export default {
     updateTracefinished: function () {
       var _self = this;
       if (_self.count == 0) {
-        _self.loading=true;
+        _self.loading = true;
         TraceResource.updateTraceFinished(_self.trace.id).then(
           successData => {
             _self.loadTraceById();
-            _self.loading=false;
+            _self.loading = false;
             _self.$refs.traceLog.getTraceLog();
           },
           errorData => {
-            _self.loading=false;
+            _self.loading = false;
             Common.processException(errorData);
           },
         );
@@ -424,4 +430,42 @@ export default {
   background-color: #007aff;
   color: white;
 }
+.checked {
+  background: #69ba52;
+  width: 80px;
+  height: 80px;
+  border-radius: 16px;
+  position: relative;
+  cursor: pointer;
+}
+.checked::after {
+  content: "";
+  background-color: white;
+  width: 26px;
+  height: 8px;
+  position: absolute;
+  top: 44px;
+  left: 14px;
+  border-radius: 8px;
+  transform: rotate(34deg);
+}
+.checked::before {
+  content: "";
+  background-color: white;
+  width: 43px;
+  height: 8px;
+  position: absolute;
+  top: 37px;
+  left: 26px;
+  transform: rotate(-50deg);
+  border-radius: 8px;
+}
+.clickFinished {
+  border: 2px solid #9b9b9b;
+  width: 80px;
+  height: 80px;
+  border-radius: 16px;
+  position: relative;
+  cursor: pointer;
+}
 </style>

src/trace/TraceUpdate.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
     <div>
-      <Navbar
-        title="编辑任务"
-        :is-go-back="true"
-      />
+      <Navbar title="编辑任务" :is-go-back="true" />
       <div v-if="traceDto != null">
         <div class="form-group">
           <label for="exampleInputEmail1">标题</label>
@@ -74,14 +71,24 @@
 
         <div class="form-group">
           <label>完成时间</label>
-          <Date
+          <a-locale-provider :locale="locale">
+            <a-date-picker
+              v-model:value="planFinishedDate"
+              style="width: 100%"
+              show-time
+              format="YYYY-MM-DD HH:mm:ss"
+              :show-now="false"
+              placeholder="请选择完成日期"
+            />
+          </a-locale-provider>
+          <!-- <Date
             v-model="traceDto.planFinishedDate"
             style="width: 100%"
-          />
+          /> -->
         </div>
 
         <button
-          style="width:100%;background-color: #007aff;color: white"
+          style="width: 100%; background-color: #007aff; color: white"
           type="button"
           class="btn btn-blue search-button"
           @click="updateTrace()"
@@ -95,7 +102,7 @@
 </template>
 <script>
 import TraceResource from './TraceResource.js';
-
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
 import Common from '../common/Common.js';
 import UpladFile from '../widget/UpladFile.js';
 import TraceCommon from './TraceCommon.js';
@@ -106,12 +113,8 @@ import Treeselect from '../widget/TreeSelect.vue';
 import AudioField from '../widget/AudioField.vue';
 export default {
   components: {
-    
-    
-    
-    
     UpladFile,
-    
+
     Treeselect,
     AudioField,
   },
@@ -123,10 +126,12 @@ export default {
       projectItemUserListUser: [],
       projectItemUserListProject: [],
       summernoteInitSuccess: false, // summernote初始化成功
-      projectTaskDtos: [],//项目任务时间点
+      projectTaskDtos: [], //项目任务时间点
       isflag: true,
       srcArray: [],
       loading: false,
+      locale: zhCN,
+      planFinishedDate: '',
     };
   },
   watch: {
@@ -149,7 +154,6 @@ export default {
     this.isflag = false;
   },
 
-
   beforeUnmount: function () {
     if (this.summernoteInitSuccess == true) {
       $('#summernote').summernote('destroy');
@@ -159,18 +163,18 @@ export default {
   },
   methods: {
     /**
-         * 删除语音
-         * @param {Object} index
-         */
+     * 删除语音
+     * @param {Object} index
+     */
     deleteAudioSrc: function (index) {
       var _self = this;
       _self.srcArray.splice(index, 1);
       _self.traceDto.audioSrcs = JSON.stringify(_self.srcArray);
     },
     /**
-         * 录音停止之后
-         * @param {Object} param
-         */
+     * 录音停止之后
+     * @param {Object} param
+     */
     handelEndRecord: function (param) {
       var _self = this;
       if (param.fileName != undefined) {
@@ -186,8 +190,13 @@ export default {
       var _self = this;
       _self.traceDto.detail = $('#summernote').summernote('code');
       _self.traceDto.projectTaskId = _self.$refs.treeSelect.getValue();
+      if (_self.planFinishedDate != undefined && _self.planFinishedDate != '') {
+        _self.traceDto.planFinishedDate = _self.dateConvert(
+          _self.planFinishedDate,
+        ); //完成时间
+      }
       if (_self.traceDto.summary != '' && _self.traceDto.summary != undefined) {
-        _self.loading=true;
+        _self.loading = true;
         $.ajax({
           url: Common.getApiURL('TraceResource/updateTrace'),
           type: 'post',
@@ -198,11 +207,11 @@ export default {
           },
           success: function (data) {
             Notify.success('提示', '修改成功！');
-            _self.loading=false;
+            _self.loading = false;
             _self.back();
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
-            _self.loading=false;
+            _self.loading = false;
             Common.processException(XMLHttpRequest, textStatus, errorThrown);
           },
         });
@@ -211,69 +220,80 @@ export default {
       }
     },
 
-    //图片上传  
+    //图片上传
     sendFile: function (file, editor, $editable) {
       var _self = this;
-      UpladFile.photoCompress(file, {
-        quality: 0.2,
-      }, function (base64Codes) {
-        var bl = UpladFile.convertBase64UrlToBlob(base64Codes);
-        var rst = new FormData();
-        rst.append('images', bl, 'file_' + Date.parse(new Date()) + '.jpg');
-        rst.append('className', _self.className);
-        $.ajax({
-          url: Common.getApiURL('file/imageUpload'),
-          type: 'post',
-          data: rst,
-          contentType: false,
-          processData: false,
-          beforeSend: function (request) {
-            Common.addTokenToRequest(request);
-          },
-          success: function (data) {
-            if (data != 'error') {
-              var imageName = data.substring(data.indexOf(':') + 1);
-              // 方法1: 直接插入图片，由于图片不能加载，导致导致插入失败。
-              // $("#summernote").summernote('insertImage', Common.getResourceUrl("image", _self.className, imageName), 'image name');
+      UpladFile.photoCompress(
+        file,
+        {
+          quality: 0.2,
+        },
+        function (base64Codes) {
+          var bl = UpladFile.convertBase64UrlToBlob(base64Codes);
+          var rst = new FormData();
+          rst.append('images', bl, 'file_' + Date.parse(new Date()) + '.jpg');
+          rst.append('className', _self.className);
+          $.ajax({
+            url: Common.getApiURL('file/imageUpload'),
+            type: 'post',
+            data: rst,
+            contentType: false,
+            processData: false,
+            beforeSend: function (request) {
+              Common.addTokenToRequest(request);
+            },
+            success: function (data) {
+              if (data != 'error') {
+                var imageName = data.substring(data.indexOf(':') + 1);
+                // 方法1: 直接插入图片，由于图片不能加载，导致导致插入失败。
+                // $("#summernote").summernote('insertImage', Common.getResourceUrl("image", _self.className, imageName), 'image name');
 
-              // 方法2：创建img节点，然后插入<img>节点，可以插入，但是图片没有显示，点击一下code，然后就显示了。
-              // var node = document.createElement('img') // 创建节点，用于包裹视频，再加这一层是方便调视频样式
-              // node.setAttribute("authSrc", Common.getResourceUrl("image", _self.className, imageName));
-              // node.setAttribute("is", "auth-img");
-              // $("#summernote").summernote('insertNode', node);
+                // 方法2：创建img节点，然后插入<img>节点，可以插入，但是图片没有显示，点击一下code，然后就显示了。
+                // var node = document.createElement('img') // 创建节点，用于包裹视频，再加这一层是方便调视频样式
+                // node.setAttribute("authSrc", Common.getResourceUrl("image", _self.className, imageName));
+                // node.setAttribute("is", "auth-img");
+                // $("#summernote").summernote('insertNode', node);
 
-              // 方法3：重新给code赋值，此时丢失了鼠标焦点，此时不满足要求。
-              // var get_code = $('#summernote').summernote('code');
-              // $('#summernote').summernote('code', get_code);
+                // 方法3：重新给code赋值，此时丢失了鼠标焦点，此时不满足要求。
+                // var get_code = $('#summernote').summernote('code');
+                // $('#summernote').summernote('code', get_code);
 
-              // 方法4：插入文本（尝试失败)
-              //let imageText = "<img is='auth-img' authSrc='" + Common.getResourceUrl("image", _self.className, imageName) + "'/>";
-              //$('#summernote').summernote('insertText', imageText);
+                // 方法4：插入文本（尝试失败)
+                //let imageText = "<img is='auth-img' authSrc='" + Common.getResourceUrl("image", _self.className, imageName) + "'/>";
+                //$('#summernote').summernote('insertText', imageText);
 
-              // 方法5: 插入div,div中嵌入img，测试OK
-              //                          var node = document.createElement('div') // 创建节点，用于包裹视频，再加这一层是方便调视频样式
-              //                          node.innerHTML = "<img is='auth-img' authSrc='" + Common.getResourceUrl("image", _self.className, imageName) + "' />";
-              //                          $("#summernote").summernote('insertNode', node);
-              $('#summernote').summernote('insertImage', Common.getResourceUrl('image', _self.className, imageName), 'image name');
-            }
-          },
-          error: function () {
-            Notify.error('提示', '上传失败！');
-            return;
-          },
-        });
-        return rst.file;
-      });
+                // 方法5: 插入div,div中嵌入img，测试OK
+                //                          var node = document.createElement('div') // 创建节点，用于包裹视频，再加这一层是方便调视频样式
+                //                          node.innerHTML = "<img is='auth-img' authSrc='" + Common.getResourceUrl("image", _self.className, imageName) + "' />";
+                //                          $("#summernote").summernote('insertNode', node);
+                $('#summernote').summernote(
+                  'insertImage',
+                  Common.getResourceUrl('image', _self.className, imageName),
+                  'image name',
+                );
+              }
+            },
+            error: function () {
+              Notify.error('提示', '上传失败！');
+              return;
+            },
+          });
+          return rst.file;
+        },
+      );
     },
 
     /**
-         * 初始化项目
-         */
+     * 初始化项目
+     */
     initProject: function () {
       var _self = this;
-      _self.projectItemUserListProject.splice(0, _self.projectItemUserListProject.length);
+      _self.projectItemUserListProject.splice(
+        0,
+        _self.projectItemUserListProject.length,
+      );
       $.ajax({
-        url: Common.getApiURL('ProjectItemUserResource/listByUserId'),//通过用户Id查找有权操作的项目
+        url: Common.getApiURL('ProjectItemUserResource/listByUserId'), //通过用户Id查找有权操作的项目
         type: 'get',
         dataType: 'json',
         contentType: 'application/json',
@@ -292,26 +312,28 @@ export default {
       });
     },
 
-
     /**
-         * 项目选择
-         * @author ZhangTeng 20190213
-         */
+     * 项目选择
+     * @author ZhangTeng 20190213
+     */
     changeProjectSelected: function () {
       var _self = this;
       var count = 0;
-      _self.projectItemUserListUser.splice(0, _self.projectItemUserListUser.length);
+      _self.projectItemUserListUser.splice(
+        0,
+        _self.projectItemUserListUser.length,
+      );
 
       if (_self.traceDto == null || _self.traceDto.projectId == null) {
         return;
       }
 
       $.ajax({
-        url: Common.getApiURL('ProjectItemUserResource/listByProjectItemId'),//通过项目Id查找有权操作的项目的用户
+        url: Common.getApiURL('ProjectItemUserResource/listByProjectItemId'), //通过项目Id查找有权操作的项目的用户
         type: 'get',
         dataType: 'json',
         contentType: 'application/json',
-        data: { 'projectItemId': _self.traceDto.projectId },
+        data: { projectItemId: _self.traceDto.projectId },
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
@@ -332,48 +354,80 @@ export default {
       var _self = this;
       _self.traceId = this.$route.params.traceId;
       if (_self.traceId != null && _self.traceId != '') {
-        TraceResource.uniqueByTraceId(_self.traceId).then(successData => {
-          _self.traceDto = successData;
-          if (successData != undefined && successData.audioSrcs != undefined) {
-            _self.srcArray = JSON.parse(successData.audioSrcs);
-          }
-          _self.changeProjectSelected();
-          $('#summernote').summernote({
-            toolbar: [
-              ['insert', ['link', 'picture', 'video', 'audio', 'hr', 'table', //插件
-                'fontname', 'fontsize', 'color', 'bold', 'italic', 'underline', 'strikethrough', 'clear',//字体样式
-                'style', 'ol', 'ul', 'paragraph', 'height',//段落样式
-                'fullscreen', 'codeview', 'undo', 'redo', 'help',//Misc
-              ]],
-            ],
-            height: 400,
-            minHeight: 300,
-            maxHeight: 500,
-            focus: true,
-            lang: 'zh-CN',
-            callbacks: {
-              onImageUpload: function (files, editor, $editable) {
-                _self.sendFile(files[0], editor, $editable);
+        TraceResource.uniqueByTraceId(_self.traceId).then(
+          successData => {
+            _self.traceDto = successData;
+            if (
+              successData != undefined &&
+              successData.audioSrcs != undefined
+            ) {
+              _self.srcArray = JSON.parse(successData.audioSrcs);
+            }
+            _self.changeProjectSelected();
+            $('#summernote').summernote({
+              toolbar: [
+                [
+                  'insert',
+                  [
+                    'link',
+                    'picture',
+                    'video',
+                    'audio',
+                    'hr',
+                    'table', //插件
+                    'fontname',
+                    'fontsize',
+                    'color',
+                    'bold',
+                    'italic',
+                    'underline',
+                    'strikethrough',
+                    'clear', //字体样式
+                    'style',
+                    'ol',
+                    'ul',
+                    'paragraph',
+                    'height', //段落样式
+                    'fullscreen',
+                    'codeview',
+                    'undo',
+                    'redo',
+                    'help', //Misc
+                  ],
+                ],
+              ],
+              height: 400,
+              minHeight: 300,
+              maxHeight: 500,
+              focus: true,
+              lang: 'zh-CN',
+              callbacks: {
+                onImageUpload: function (files, editor, $editable) {
+                  _self.sendFile(files[0], editor, $editable);
+                },
               },
-            },
-          });
-          if (_self.traceDto != null) {
-            $('#summernote').summernote('code', _self.traceDto.detail);
-          }
-          _self.summernoteInitSuccess = true;
-        }, errorData => {
-          Common.processException(errorData);
-        });
+            });
+            if (_self.traceDto != null) {
+              $('#summernote').summernote('code', _self.traceDto.detail);
+            }
+            _self.summernoteInitSuccess = true;
+          },
+          errorData => {
+            Common.processException(errorData);
+          },
+        );
       }
     },
     /**
-         * 根据项目id查询项目任务时间节点
-         * @author GuoZhiBo 20191010
-         */
+     * 根据项目id查询项目任务时间节点
+     * @author GuoZhiBo 20191010
+     */
     queryProjectTaskDtoByProjectId: function () {
       var _self = this;
       $.ajax({
-        url: Common.getApiURL('ProjectTaskResource/queryProjectTaskDtoByProjectId'),
+        url: Common.getApiURL(
+          'ProjectTaskResource/queryProjectTaskDtoByProjectId',
+        ),
         type: 'get',
         dataType: 'json',
         contentType: 'application/json',
@@ -392,10 +446,36 @@ export default {
         },
       });
     },
+    // 日期处理函数
+    plusZero: function (n) {
+      return n >= 10 ? n : '0' + n;
+    },
+
+    dateConvert: function (dateStr) {
+      const date = new Date(dateStr);
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      const hour = date.getHours();
+      const minute = date.getMinutes();
+      const second = date.getSeconds();
+      return (
+        year +
+        '-' +
+        this.plusZero(month) +
+        '-' +
+        this.plusZero(day) +
+        ' ' +
+        this.plusZero(hour) +
+        ':' +
+        this.plusZero(minute) +
+        ':' +
+        this.plusZero(second)
+      );
+    },
   },
 };
 </script>
 
 <style scoped>
-
 </style>