修改CURD编辑器和主题的功能。

public/index-debug.html

@@ -26,6 +26,7 @@
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="./static/jQuery-ResizableColumns/jQuery.resizableColumns.css">
 
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="./static/summernote/dist/summernote.min.css">
+	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="./api/file/getThemeCss">
 
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="./static/jquery/dist/jquery.js"></script>
 

src/App.vue

@@ -21,11 +21,6 @@
               <keep-alive>
                 <MenuWidget
                   :width="width"
-                  :logo-width="logoWidth"
-                  :left-color="color"
-                  :menu-color="menuColor"
-                  :select-color="selectColor"
-                  :search-color="searchColor"
                 />
               </keep-alive>
               <div class="resize-handle" @mousedown="handleMouseDown" />
@@ -88,11 +83,6 @@ export default {
       startX: 0,
       startWidth: 0,
       width: 230,
-      logoWidth: 152, // 不同logo不同适应宽度
-      color: '#2a3f54', // 左边菜单栏颜色配置 #277fd0
-      selectColor: '#495d70', // 三级菜单悬浮颜色配置 #6db0ee
-      searchColor: '#1c3e4b', // 菜单栏搜索框颜色配置 #1673c0
-      menuColor: 'linear-gradient(#334556, #2c4257), #2a3f54', // 二级菜单颜色配置 #2e8ee7
     };
   },
 
@@ -120,22 +110,11 @@ export default {
       localStorage.setItem('menuWidth', 230);
     }
 
-    this.getMenuSetting();
     this.computerComponentVisible();
   },
 
   methods: {
-    // 获取菜单栏配置
-    getMenuSetting() {
-      const setting = JSON.parse(localStorage.getItem('menuSetting'));
-      if (setting) {
-        this.logoWidth = setting.logoWidth;
-        this.color = setting.mainColor;
-        this.selectColor = setting.threeLevelColor;
-        this.searchColor = setting.searchInputColor;
-        this.menuColor = setting.secondLevelColor;
-      }
-    },
+   
 
     throttle(func, limit) {
       let inThrottle;
@@ -612,4 +591,10 @@ nav ul.pagination {
 .resize-handle:hover {
   cursor: ew-resize;
 }
+
+
+</style>
+
+<style>
+
 </style>

src/client/MenuNode.vue

@@ -31,7 +31,6 @@
       v-if="model.menuNodeType == "Branch""
       class="menu-branch"
       :class="{'active': model.expand}"
-      :style="{backgroundColor: menuColor}"
       @click="selectMenuNode(model)"
     >
       <i
@@ -89,14 +88,6 @@ export default {
         return null;
       },
     },
-    menuColor: {
-      type: String,
-      default: 'linear-gradient(#334556, #2c4257), #2a3f54',
-    },
-    selectColor: {
-      type: String,
-      default: '#495d70',
-    },
   },
   emits: ['selectNode'],
 
@@ -252,8 +243,10 @@ export default {
 <style>
 .menu-branch.active {
     text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
-    /* background: linear-gradient(#334556, #2c4257), #2a3f54; */
-    background: v-bind(menuColor);
+    background: var(--second-level-menu-color);
+    /* background: v-bind(menuColor); */
+    /* background-color: var(--example-color); */
+    
     box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0,
         inset rgba(255, 255, 255, 0.16) 0 1px 0;
 }

src/client/MenuWidget.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     class="menu-side left_col scroll-view"
-    :style="{ width: width + 'px', backgroundColor: leftColor }"
+    :style="{ width: width + 'px' }"
   >
     <div class="navbar nav_title" style="border: 0">
       <a href="#/desktop/dashboard" class="site_title"><img
-        :style="{ width: logoWidth + 'px'}"
+        style="width: var(--menu-logo-width)"
         :src="logoUrl"
       /></a>
     </div>
@@ -21,7 +21,7 @@
             type="text"
             class="form-control menu-search"
             :placeholder="$t('lang.menuWidget.searchMenu')"
-            :style="{ backgroundColor: searchColor }"
+            style="background-color: var(--menu-search-input-background-color)"
           />
         </div>
 
@@ -53,8 +53,6 @@
                   :key="subMenuItem.uuid"
                 >
                   <MenuNode
-                    :menu-color="menuColor"
-                    :select-color="selectColor"
                     :model="subMenuItem"
                     @select-node="selectNode($event, rootNode.subMenus)"
                   />
@@ -84,26 +82,6 @@ export default {
       default: 230,
       type: Number,
     },
-    logoWidth: {
-      default: 152,
-      type: Number,
-    },
-    leftColor: {
-      default: '#2a3f54',
-      type: String,
-    },
-    menuColor: {
-      default: 'linear-gradient(#334556, #2c4257), #2a3f54',
-      type: String,
-    },
-    searchColor: {
-      default: '#1c3e4b',
-      type: String,
-    },
-    selectColor: {
-      default: '#495d70',
-      type: String,
-    },
   },
   data: function () {
     this.Language = Language;
@@ -378,12 +356,6 @@ export default {
 </script>
 
 <style scoped>
-.menu-side {
-  background: var(--leftColor);
-}
-.menu-search {
-  background: var(--searchColor);
-}
 .menu-div {
   padding-left: 10px;
   padding-right: 10px;
@@ -401,13 +373,13 @@ export default {
 
 <style>
 .menu-side {
+  background-color: var(--menu-side-background-color);
   position: fixed;
   top: 0px;
   bottom: 0;
   left: 0;
   /* padding-top: 51px; */
   width: 230px;
-  background-color: #293c55;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -456,6 +428,11 @@ export default {
   box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0,
     inset rgba(255, 255, 255, 0.16) 0 1px 0;
 }
+
+.main_menu .nav.child_menu li li a:hover{
+  background-color: var(--menu-select-color);
+}
+
 .main_menu .nav.child_menu {
   display: none;
 }
@@ -497,7 +474,7 @@ export default {
 }
 .main_menu .nav.child_menu li li:hover,
 .main_menu .nav.child_menu li li.active {
-  background-color: v-bind(selectColor);
+  background-color: var(--menu-select-color);
 }
 .main_menu .nav.child_menu li li a:hover,
 .main_menu .nav.child_menu li li a.active {

src/locales/en-US.json

@@ -230,6 +230,8 @@
           "rejectConfirm": "Are you sure to reject?", 
           "chooseTransferUser": "Choose Transfer User", 
           "transferTo": "Transfer To", 
+          "transferReason": "Transfer Reason",
+          "inputTransferReason": "Please Input Transfer Reason",
           "inputComment": "Please Input Comment", 
           "copyUser": "Copy User", 
           "return": "Return", 

src/locales/zh-CN.json

@@ -236,6 +236,8 @@
       "returnConfirm": "您确认要退回吗?",
       "chooseTransferUser": "选择转交用户",
       "transferTo": "转交给",
+      "transferReason": "转交原因",
+      "inputTransferReason": "请输入转交原因",
       "inputComment": "填写评论",
       "copyUser": "抄送人",
       "viewApprovalProcess": "查看审批流程",

src/window1/tabGridView/GridBody.vue

@@ -18,7 +18,7 @@
 
     <td :colspan="tabGridFields.length + 1" style="text-align: left; padding-left: 2rem;">
       <a-space align="center">
-        <div v-for="tabGridTitleField in tabGridTitleFields" @click="clickRecord">
+        <div v-for="tabGridTitleField in tabGridTitleFields" :key="tabGridTitleField.fieldName" @click="clickRecord">
           <a-space align="center">
             <span style="font-weight: normal;">{{ Language.getDisplayNameTrl($i18n.locale, tabGridTitleField) }}</span>
             <CellTextItem

src/workflow/ApproveComment.vue

@@ -1,107 +1,80 @@
 <template>
   <div>
-    <div
-      v-if="processInstanceDescription != undefined"
-      class="panel panel-default"
-    >
-      <div class="panel-heading">
-        {{ $t("lang.approveComment.approveStatus") }}
-        <span class="label label-primary m-label">
+    <div v-if="processInstanceDescription != undefined">
+      <div class="page-header">
+        <h4 style="display: inline-block; margin-right: 2rem;">
+          {{ $t("lang.approveComment.approveStatus") }}
+        </h4>
+        <a-tag color="processing">
+          <template #icon>
+            <sync-outlined :spin="true" />
+          </template>
           {{
             !processInstanceDescription.suspended
               ? $t("lang.approveComment.running")
               : $t("lang.approveComment.finished")
           }}
-        </span>
+        </a-tag>
 
-        <span class="label label-info m-label">
+        <a-tag color="warning">
+          <template #icon>
+            <clock-circle-outlined />
+          </template>
           {{ $t("lang.approveComment.needApprove") }}:
           {{
             processInstanceDescription.taskDescriptions == undefined
               ? "0"
               : processInstanceDescription.taskDescriptions.length
           }}
-        </span>
+        </a-tag>
 
-        <span class="label label-success m-label">
+
+        <a-tag color="success">
+          <template #icon>
+            <check-circle-outlined />
+          </template>
           {{ $t("lang.approveComment.approved") }}:
           {{
             processInstanceDescription.historicTaskInstanceDescriptions == undefined
               ? "0"
               : processInstanceDescription.historicTaskInstanceDescriptions.length
           }}
-        </span>
+        </a-tag>
       </div>
-      <div class="panel-body">
+
+      <div>
         <div v-if="showChoiceButton && isActiveTask" class="form">
           <PreviousNodeSelectUser
-            ref="previousNodeSelectUser"
-            :process-instance-id="processInstanceId"
-            :model-data="modelData"
-            :work-flow="workFlow"
-            :task-id="taskInfoId"
+            ref="previousNodeSelectUser" :process-instance-id="processInstanceId"
+            :model-data="modelData" :work-flow="workFlow" :task-id="taskInfoId"
             :approve-form-value="approveFormValue"
           />
 
           <div class="form-group" style="margin-top: 10px">
-            <div
-              class="btn-group btn-group-justified"
-              role="group"
-              aria-label="..."
-            >
-              <div class="btn-group" role="group">
-                <button
-                  type="button"
-                  class="btn btn-primary"
-                  @click="modal3 = true"
-                >
-                  {{ $t("lang.approveComment.approve") }}<br />
-                  <font v-if="$i18n.locale == 'zh-CN'">Approve</font>
-                </button>
-              </div>
-              <div class="btn-group" role="group">
-                <button type="button" class="btn btn-secondary" @click="transfer">
-                  {{ $t("lang.approveComment.transfer") }}
-                  <br />
-                  <font v-if="$i18n.locale == 'zh-CN'">Forward</font>
-                </button>
-              </div>
-              <div class="btn-group" role="group">
-                <button type="button" class="btn btn-danger" @click="reject">
-                  {{ $t("lang.approveComment.reject") }}
-                  <br />
-                  <font v-if="$i18n.locale == 'zh-CN'">Reject</font>
-                </button>
-              </div>
-              <div class="btn-group" role="group">
-                <button type="button" class="btn btn-warning" @click="withdraw">
-                  {{ $t("lang.approveComment.return") }}
-                  <br />
-                  <font v-if="$i18n.locale == 'zh-CN'">Return</font>
-                </button>
-              </div>
-              <div class="btn-group" role="group">
-                <button
-                  type="button"
-                  class="btn btn-info"
-                  @click="addComment"
-                >
-                  {{ $t("lang.approveComment.comment") }}
-                  <br />
-                  <font v-if="$i18n.locale == 'zh-CN'">Comments</font>
-                </button>
-              </div>
-            </div>
+            <a-flex justify="space-between" align="flex-start" gap="middle">
+              <a-button type="primary" size="large" class="approve-button" @click="modal3 = true">
+                {{ $t("lang.approveComment.approve") }}<br />
+              </a-button>
+              <a-button size="large" class="approve-button" @click="transfer">
+                {{ $t("lang.approveComment.transfer") }}
+              </a-button>
+              <a-button size="large" class="approve-button" danger @click="reject">
+                {{ $t("lang.approveComment.reject") }}
+              </a-button>
+              <a-button size="large" class="approve-button" @click="withdraw">
+                {{ $t("lang.approveComment.return") }}
+              </a-button>
+              <a-button size="large" class="approve-button" @click="addComment">
+                {{ $t("lang.approveComment.comment") }}
+              </a-button>
+            </a-flex>
           </div>
 
           <!-- 表单属性 -->
 
           <ApproveForm
-            ref="approveForm"
-            :process-instance-id="processInstanceId"
-            :workflow="workFlow"
-            :task-id="taskInfoId"
-            @value-changed="approveFormValueChanged"
+            ref="approveForm" :process-instance-id="processInstanceId" :workflow="workFlow"
+            :task-id="taskInfoId" @value-changed="approveFormValueChanged"
           />
 
           <div class="form-group">
@@ -112,21 +85,18 @@
           <ApproveTaskAttachmentEdit :task-id="taskInfoId" />
         </div>
 
-        
+
 
         <ul class="media-list">
           <li class="media">
             <div class="media-left">
               <a>
                 <AuthImage
-                  id="image202002281140001"
-                  :auth-src="
-                    Common.getThumbnailImageSrc(
-                      'com.leanwo.prodog.base.model.User',
-                      processInstanceDescription.startUserImage
-                    )
-                  "
-                  class="media-object thumbnail m-image"
+                  id="image202002281140001" :auth-src="Common.getThumbnailImageSrc(
+                    'com.leanwo.prodog.base.model.User',
+                    processInstanceDescription.startUserImage
+                  )
+                  " class="media-object thumbnail m-image"
                 />
               </a>
             </div>
@@ -145,19 +115,16 @@
           <template v-if="processInstanceDescription.historicTaskInstanceDescriptions != undefined">
             <li
               v-for="historicTaskInstanceDescription in processInstanceDescription.historicTaskInstanceDescriptions"
-              :key="historicTaskInstanceDescription.id"
-              class="media"
+              :key="historicTaskInstanceDescription.id" class="media"
             >
               <div class="media-left">
                 <a>
                   <AuthImage
-                    :auth-src="
-                      Common.getThumbnailImageSrc(
-                        'com.leanwo.prodog.base.model.User',
-                        historicTaskInstanceDescription.assigneeImageUrl
-                      )
-                    "
-                    class="media-object thumbnail m-image"
+                    :auth-src="Common.getThumbnailImageSrc(
+                      'com.leanwo.prodog.base.model.User',
+                      historicTaskInstanceDescription.assigneeImageUrl
+                    )
+                    " class="media-object thumbnail m-image"
                   />
                 </a>
               </div>
@@ -170,39 +137,34 @@
                 </h4>
 
                 <div v-if="historicTaskInstanceDescription.comments != undefined">
-                  <div
-                    v-for="commentItem in historicTaskInstanceDescription.comments"
-                    :key="commentItem.id"
-                  >
+                  <div v-for="commentItem in historicTaskInstanceDescription.comments" :key="commentItem.id">
                     <h5 class="m-h5">{{ commentItem.time }}</h5>
                     <p class="comment-text">{{ commentItem.message }}</p>
                   </div>
                 </div>
 
-                <ApproveTaskAttachmentView :enable-delete="false" :attachments="historicTaskInstanceDescription.attachments" />
+                <ApproveTaskAttachmentView
+                  :enable-delete="false"
+                  :attachments="historicTaskInstanceDescription.attachments"
+                />
               </div>
             </li>
           </template>
 
           <template v-for="activeTask in processInstanceDescription.taskDescriptions" :key="activeTask.id">
             <li
-            
               v-if="
                 processInstanceDescription.taskDescriptions != undefined
-              "
-            
-              class="media"
+              " class="media"
             >
               <div class="media-left">
                 <a>
                   <AuthImage
-                    :auth-src="
-                      Common.getThumbnailImageSrc(
-                        'com.leanwo.prodog.base.model.User',
-                        activeTask.assigneeImageUrl
-                      )
-                    "
-                    class="media-object thumbnail m-image"
+                    :auth-src="Common.getThumbnailImageSrc(
+                      'com.leanwo.prodog.base.model.User',
+                      activeTask.assigneeImageUrl
+                    )
+                    " class="media-object thumbnail m-image"
                   />
                 </a>
               </div>
@@ -216,16 +178,16 @@
 
 
                 <div v-if="activeTask.comments != undefined">
-                  <div
-                    v-for="commentItem in activeTask.comments"
-                    :key="commentItem.id"
-                  >
+                  <div v-for="commentItem in activeTask.comments" :key="commentItem.id">
                     <h5 class="m-h5">{{ commentItem.time }}</h5>
                     <p class="comment-text">{{ commentItem.message }}</p>
                   </div>
                 </div>
-                
-                <ApproveTaskAttachmentView :enable-delete="activeTask.id == taskInfoId" :attachments="activeTask.attachments" />
+
+                <ApproveTaskAttachmentView
+                  :enable-delete="activeTask.id == taskInfoId"
+                  :attachments="activeTask.attachments"
+                />
               </div>
             </li>
           </template>
@@ -233,139 +195,51 @@
       </div>
     </div>
 
-    <Modal
-      v-model:show="modal3"
-      :small="true"
-      :show-ok-button="false"
-      :show-canel-button="false"
+    <a-modal
+      v-model:open="modal3"
+      :title="$t('lang.approveComment.notice')"
+      :cancel-text="$t('lang.approveComment.cancel')"
+      :ok-text="$t('lang.approveComment.confirm')"
     >
-      <template #header>
-        <h3>{{ $t("lang.approveComment.notice") }}</h3>
-      </template>
-      <div class="row">
-        <div class="col-md-12">
-          <h3>{{ $t("lang.approveComment.confirmSubmit") }}</h3>
-        </div>
-        <div class="col-md-6">
-          <button
-            type="button"
-            class="btn btn-success btn-lg"
-            style="margin-top: 20px; width: 100%"
-            @click="confirmApprove"
-          >
-            {{ $t("lang.approveComment.confirm") }}
-          </button>
-        </div>
-        <div class="col-md-6">
-          <button
-            type="button"
-            class="btn btn-default btn-lg"
-            style="margin-top: 20px; width: 100%"
-            @click="modal3 = false"
-          >
-            {{ $t("lang.approveComment.cancel") }}
-          </button>
-        </div>
-      </div>
-    </Modal>
-
-    <Modal
-      v-model:show="modal4"
-      :small="true"
-      :show-ok-button="false"
-      :show-canel-button="false"
+      {{ $t("lang.approveComment.confirmSubmit") }}
+    </a-modal>
+
+    <a-modal
+      v-model:open="modal4" 
+      :title="$t('lang.approveComment.notice')"
+      :cancel-text="$t('lang.approveComment.cancel')"
+      :ok-text="$t('lang.approveComment.confirm')"
     >
-      <template #header>
-        <h3>{{ $t("lang.approveComment.notice") }}</h3>
-      </template>
-      <div class="row">
-        <div class="col-md-12">
-          <h3>{{ $t("lang.approveComment.rejectConfirm") }}</h3>
-        </div>
-        <div class="col-md-6">
-          <button
-            type="button"
-            class="btn btn-success btn-lg"
-            style="margin-top: 20px; width: 100%"
-            @click="confirmReject"
-          >
-            {{ $t("lang.approveComment.confirm") }}
-          </button>
-        </div>
+      {{ $t("lang.approveComment.rejectConfirm") }}
+    </a-modal>
 
-        <div class="col-md-6">
-          <button
-            type="button"
-            class="btn btn-default btn-lg"
-            style="margin-top: 20px; width: 100%"
-            @click="modal4 = false"
-          >
-            {{ $t("lang.approveComment.cancel") }}
-          </button>
-        </div>
-      </div>
-    </Modal>
-
-    <Modal v-model:show="modal5" :full="true">
+    <a-modal v-model:open="modal5" width="80%" :title="$t('lang.approveComment.chooseTransferUser')">
       <InfoWindow
-        ref="info"
-        :info-window-no="infoWindowNo"
-        :where-clause-source="whereClauseSource"
+        ref="info" :info-window-no="infoWindowNo" :where-clause-source="whereClauseSource"
         @data-selected="transferSelectedUser"
       />
-      <template #header>
-        {{ $t("lang.approveComment.chooseTransferUser") }}
-      </template>
-    </Modal>
-
-    <Modal v-model:show="modal6" :full="true" @ok="transferSave">
-      <textarea
-        v-model="transferText"
-        width="100%"
-        class="form-control"
-        :placeholder="$t('lang.approveComment.inputComment')"
-      />
-      <template #header>
-        {{ $t("lang.approveComment.transferTo") }}{{ transferUserName }}
-      </template>
-    </Modal>
-
-    <Modal
-      v-model:show="modal7"
-      :small="true"
-      :show-ok-button="false"
-      :show-canel-button="false"
-    >
-      <template #header>
-        <h3>{{ $t("lang.approveComment.notice") }}</h3>
-      </template>
-      <div class="row">
-        <div class="col-md-12">
-          <h3>{{ $t("lang.approveComment.returnConfirm") }}</h3>
-        </div>
-        <div class="col-md-6">
-          <button
-            type="button"
-            class="btn btn-success btn-lg"
-            style="margin-top: 20px; width: 100%"
-            @click="confirmReturn"
-          >
-            {{ $t("lang.approveComment.confirm") }}
-          </button>
-        </div>
+    </a-modal>
 
-        <div class="col-md-6">
-          <button
-            type="button"
-            class="btn btn-default btn-lg"
-            style="margin-top: 20px; width: 100%"
-            @click="modal7 = false"
-          >
-            {{ $t("lang.approveComment.cancel") }}
-          </button>
+    <a-modal v-model:open="modal6" :title="$t('lang.approveComment.transfer')" @ok="transferSave">
+      <a-flex gap="small" vertical>
+        <div>{{ $t("lang.approveComment.transferTo") }}: {{ transferUserName }}</div>
+        <div>
+          {{ $t('lang.approveComment.transferReason') }}
         </div>
-      </div>
-    </Modal>
+        <a-textarea
+          v-model:value="transferText" :placeholder="$t('lang.approveComment.inputTransferReason')"
+          :auto-size="{ minRows: 3, maxRows: 10 }"
+        />
+      </a-flex>
+    </a-modal>
+
+    <a-modal
+      v-model:open="modal7" :small="true" 
+      :title="$t('lang.approveComment.notice')" :cancel-text="$t('lang.approveComment.cancel')"
+      :ok-text="$t('lang.approveComment.confirm')" @ok="confirmReturn"
+    >
+      {{ $t("lang.approveComment.returnConfirm") }}
+    </a-modal>
 
     <Loading v-if="loading" />
   </div>
@@ -388,9 +262,11 @@ import ApproveForm from './ApproveForm.vue';
 
 import vSelect from 'vue-select';
 import 'vue-select/dist/vue-select.css';
-import { Notify, Uuid } from 'pc-component-v3';
 import ApproveTaskAttachmentEdit from './ApproveTaskAttachmentEdit.vue';
 import ApproveTaskAttachmentView from './ApproveTaskAttachmentView.vue';
+import { CheckCircleOutlined, SyncOutlined, ClockCircleOutlined } from '@ant-design/icons-vue';
+import { notification } from 'ant-design-vue';
+
 
 export default {
 
@@ -401,6 +277,9 @@ export default {
     ApproveForm,
     ApproveTaskAttachmentEdit,
     ApproveTaskAttachmentView,
+    CheckCircleOutlined,
+    SyncOutlined,
+    ClockCircleOutlined,
   },
 
   props: {
@@ -426,7 +305,7 @@ export default {
     },
     workFlow: {
       type: Object,
-      default : function(){
+      default: function () {
         return null;
       },
     },
@@ -436,7 +315,7 @@ export default {
     },
     modelData: {
       type: Object,
-      default : function(){
+      default: function () {
         return null;
       },
     },
@@ -522,7 +401,7 @@ export default {
      */
     transferSave: function () {
       var _self = this;
-      _self.loading=true;
+      _self.loading = true;
       var transferTask = new Object();
       transferTask.workflowType = _self.workFlow.workflowType;
       transferTask.taskId = _self.taskInfoId;
@@ -541,14 +420,17 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(transferTask),
         success: function (data) {
-          _self.loading=false;
-          Notify.success('通知', '数据提交成功', true);
+          _self.loading = false;
+          notification.success({
+            message: '操作成功',
+            description: '单据转交成功',
+          });
           setTimeout(function () {
             window.close();
           }, 1000);
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -563,7 +445,7 @@ export default {
       var _self = this;
       this.modal5 = false;
       var userId = modelData.id;
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('userResource/getUser'),
         type: 'get',
@@ -574,13 +456,13 @@ export default {
           userId: userId,
         },
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           _self.transferUserId = data.id;
           _self.transferUserName = data.name;
           _self.modal6 = true;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -594,11 +476,11 @@ export default {
     transfer: function () {
       var _self = this;
       _self.initData();
-      if(_self.windowNo != null && (_self.windowNo == '20220707_162600' || _self.windowNo == '20220703_174047')){
+      if (_self.windowNo != null && (_self.windowNo == '20220707_162600' || _self.windowNo == '20220703_174047')) {
         _self.infoWindowNo = '20220928_175733';
         let areaId = _self.modelData.data.area.id;
         _self.whereClauseSource.customWhere = ' fm.areaId = ' + areaId;
-      }else{
+      } else {
         _self.infoWindowNo = '050408';
         let customerDataDimensions = [{
           fieldName: 'client.id',
@@ -662,7 +544,7 @@ export default {
      */
     refresh: function () {
       var _self = this;
-      _self.loading=true;
+      _self.loading = true;
 
       if (
         _self.processInstanceId == undefined ||
@@ -684,11 +566,11 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           _self.processInstanceDescription = data;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -701,7 +583,10 @@ export default {
     reject: function () {
       var _self = this;
       if (_self.comment == undefined || _self.comment.length == 0) {
-        Notify.error('没有理由', '请填写拒绝的理由。', false);
+        notification.error({
+          message: '操作失败',
+          description: '请填写拒绝原因',
+        });
         return;
       }
       _self.modal4 = true;
@@ -713,11 +598,14 @@ export default {
     withdraw: function () {
       var _self = this;
       if (_self.comment == undefined || _self.comment.length == 0) {
-        Notify.error('没有理由', '请填写退回的理由。', false);
+        notification.error({
+          message: '操作失败',
+          description: '请填写退回原因',
+        });
         return;
       }
       _self.modal7 = true;
-      
+
     },
 
     /**
@@ -736,7 +624,10 @@ export default {
       var _self = this;
 
       if (_self.comment == undefined || _self.comment.length == 0) {
-        Notify.error('无评论', '请填写评论。', false);
+        notification.error({
+          message: '操作失败',
+          description: '未填写评论信息，请先填写评论信息。',
+        });
         return;
       }
 
@@ -745,7 +636,7 @@ export default {
         comment: _self.comment,
       };
 
-      _self.loading=true;
+      _self.loading = true;
 
       $.ajax({
         url: Common.getApiURL('WorkflowResource/addComment'),
@@ -761,7 +652,7 @@ export default {
           _self.refresh();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -799,12 +690,17 @@ export default {
           chooseTask.copyUserIds = param.copyUsers;
           chooseTask.userSelectDtos = param.userSelectDtos;
         } catch (exception) {
-          Notify.error('存在未设置的审批人', exception.message, false);
+
+          notification.error({
+            message: '操作失败',
+            description: '存在未设置的审批人。' + exception.message,
+          });
+        
           return;
         }
       }
 
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('WorkflowResource/SetChoice'),
         type: 'post',
@@ -814,9 +710,14 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(chooseTask),
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
+
+          
+          notification.success({
+            message: '操作成功',
+            description: '已经成功的完成了任务。',
+          });
 
-          Notify.success('通知', '数据提交成功', true);
 
           setTimeout(function () {
             window.location.reload();
@@ -824,7 +725,7 @@ export default {
           }, 1000);
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -868,11 +769,12 @@ export default {
       CustomerWindowResource.getById(customerWindowId).then(
         successData => {
           if (successData == null) {
-            Notify.error(
-              '自定义窗口',
-              'id=' + customerWindowId + '的自定义窗口已经被删除。',
-              true,
-            );
+            
+            notification.error({
+              message: '操作失败',
+              description: '自定义窗口已经被删除。',
+            });
+          
             return;
           }
           var routeDate = {
@@ -914,7 +816,7 @@ export default {
       var _self = this;
       // 组装查询条件，然后放到后台数据库当中
       UserStorageResource.uploadUserStorage(userStorageDtos).then(
-        successData => {},
+        successData => { },
         errorData => {
           Common.processException(errorData);
         },
@@ -976,11 +878,13 @@ export default {
   cursor: pointer;
   margin-right: 5px;
 }
+
 .file-box {
   width: 150px;
   position: relative;
   display: table-cell;
 }
+
 .file-remove {
   position: absolute;
   right: 0px;
@@ -1049,12 +953,14 @@ th {
   0% {
     transform: scale(1);
   }
+
   /* 25% {
 		transform: scale(1.2);
 	} */
   50% {
     transform: scale(1.2);
   }
+
   /* 75% {
 		transform: scale(1.2);
 	} */
@@ -1062,11 +968,17 @@ th {
     transform: scale(1);
   }
 }
+
 button.forSaleOrder {
   animation: go 3s infinite;
   text-shadow: 1px 1px 1px black;
 }
-.comment-text{
+
+.comment-text {
   margin-bottom: 0px;
 }
+
+.approve-button {
+  width: 100%;
+}
 </style>

src/workflow/HistoryApproveComment.vue

@@ -4,23 +4,35 @@
     <div
       v-for="historyProcessInstanceDescription, index in historyProcessInstanceDescriptions"
       :key="historyProcessInstanceDescription.id"
-      class="panel panel-default"
     >
-      <div class="panel-heading">
-        {{ $t("lang.historyApproveComment.title") }}
-        <span v-if="historyProcessInstanceDescription.approvalHistory != null" class="label label-default m-label">
-          {{ historyProcessInstanceDescription.approvalHistory.documentStatusChangeReason }}
-        </span>
-        <span class="label label-warning m-label">
+      <div class="page-header">
+        <h4 style="display: inline-block; margin-right: 2rem;">
+          {{ $t("lang.historyApproveComment.title") }}
+        </h4>
+        
+        <a-tag color="warning">
           {{ index + 1 }} / {{ abandonCount == undefined ? "0" : abandonCount }}
-        </span>
-        <span class="m-label">
+        </a-tag>
+
+        <a-tag v-if="historyProcessInstanceDescription.approvalHistory != null" color="processing">
+          <template #icon>
+            <close-circle-outlined />
+          </template>
+          {{ historyProcessInstanceDescription.approvalHistory.documentStatusChangeReason }}
+        </a-tag>
+
+
+
+        <a-tag color="success">
+          <template #icon>
+            <clock-circle-outlined />
+          </template>
           {{ historyProcessInstanceDescription.startTime }}-{{ historyProcessInstanceDescription.endTime }}
-        </span>
+        </a-tag>
       </div>
-      <div
-        class="panel-body"
-      >
+
+      
+      <div>
         <ul
           class="media-list m-media-list"
         >
@@ -104,11 +116,14 @@ import Common from '../common/Common.js';
 import AuthImage from '../widget/AuthImage.vue';
 import { Notify } from 'pc-component-v3';
 import ApproveTaskAttachmentView from './ApproveTaskAttachmentView.vue';
+import { CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
 
 export default {
   components: {
     AuthImage,
     ApproveTaskAttachmentView,
+    CheckCircleOutlined, SyncOutlined, ClockCircleOutlined,
+    CloseCircleOutlined,
   },
 
   props: {