vue2-client 1.14.49 → 1.14.51

package/.env

@@ -15,6 +15,6 @@ VUE_APP_DIVISIONSOHCHINA=admin.divisionsohchina
 VUE_APP_WEB_CONFIG_KEY=admin.webconfig
 VUE_APP_WEB_STYLES_KEY=admin.webstylesconfig
 VUE_APP_API_BASE_URL=http://123.60.214.109:8405
-VUE_APP_SYSTEM_NAME=af-system
+VUE_APP_SYSTEM_NAME=af-apply
 VUE_APP_LOGIN_VERSION=V4
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.14.49",
+  "version": "1.14.51",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XTab/XTab.vue

@@ -1,15 +1,16 @@
 <template>
-  <a-card :bordered="false">
-    <a-tabs :tabBarGutter="10" :activeKey="activeKey" @change="tabPaneChange" :hideAdd="true" :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }">
+  <a-card :bordered="false" :body-style="bodyStyle">
+    <a-tabs :tabBarGutter="tabBarGutter" :activeKey="activeKey" @change="tabPaneChange" :hideAdd="true" :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }">
+      <slot name="extraBeforeTabs"></slot>
       <a-tab-pane
         :forceRender="true"
         v-for="(tab, index) in config.data"
-        :key="index"
+        :key="'xTabPane' + index"
         :tab="tab.title"
       >
         <component
           :is="tab.slotType"
-          :key="index"
+          :key="'xTabPane' + index"
           :ref="`tab_com_${tab.slotType}_${index}`"
           :serviceName="tab.serviceName"
           :serverName="tab.serviceName"
@@ -57,6 +58,9 @@ export default {
   computed: {
     ...mapState('account', { currUser: 'user' })
   },
+  mounted () {
+    this.activeKey = this.defaultActiveKey
+  },
   methods: {
     // 自定义函数中调用的方法  这个不能删
     getWindow,
@@ -211,6 +215,20 @@ export default {
       type: Object,
       default: undefined
     },
+    tabBarGutter: {
+      type: Number,
+      default: 10
+    },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    defaultActiveKey: {
+      type: String,
+      default: 'xTabPane0'
+    },
   },
   watch: {
     configName: {
@@ -232,7 +250,4 @@ export default {
 }
 </script>
 <style scoped>
-:deep(.ant-tabs-bar) {
-  margin: 0
-}
 </style>

package/src/base-client/components/common/XTable/XTable.vue

@@ -530,7 +530,9 @@ export default {
   watch: {
     pageMaxSize: {
       handler (val) {
-        this.tableContext.pageMaxSize = val
+        if (this.tableContext) {
+          this.tableContext.pageMaxSize = val
+        }
       },
       immediate: true
     }

package/src/base-client/components/common/XUploadFilesView/index.vue

@@ -0,0 +1,485 @@
+<template>
+  <div class="upload-files-container">
+    <div class="filter-container">
+      <div class="filter-group">
+        <a-date-picker
+          v-model="upload_date"
+          placeholder="上传日期"
+          @change="selfSearch"
+          class="filter-item"
+        />
+        <a-select
+          class="filter-item"
+          v-model="fusetype"
+          :options="fusetypes"
+          placeholder="分类"
+          @change="selfSearch"
+          allow-clear
+        />
+        <a-button type="primary" @click="selfSearch" class="search-btn">
+          查询
+        </a-button>
+      </div>
+    </div>
+
+    <div v-if="files.length === 0" class="empty-state">
+      <i class="anticon anticon-inbox empty-icon"></i>
+      <p>暂无附件数据</p>
+    </div>
+
+    <div v-else class="file-timeline">
+      <div v-for="(item, index) in files" :key="'fileGroup' + index" class="date-group">
+        <div class="date-header">
+          <i class="anticon anticon-calendar"></i>
+          <span>{{ item.days }}</span>
+        </div>
+        <div class="file-grid">
+          <div v-for="file in item.arrays" :key="'fileItem' + file.id" class="file-card">
+            <div class="card-content">
+              <div class="file-preview">
+                <img
+                  v-if="file.f_filetype.includes('jpg') || file.f_filetype.includes('png')"
+                  :src="file.f_downloadpath"
+                  class="preview-image"
+                  @click="previewImage(file.f_downloadpath)"
+                />
+                <div v-else class="file-icon">
+                  <i class="anticon anticon-file"></i>
+                </div>
+              </div>
+              <div class="file-info">
+                <div class="info-row">
+                  <span class="info-label"><i class="anticon anticon-clock-circle"></i> 上传时间:</span>
+                  <span class="info-value">{{ file.f_uploaddate }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label"><i class="anticon anticon-user"></i> 操作员:</span>
+                  <span class="info-value">{{ file.f_username }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label"><i class="anticon anticon-tag"></i> 分类:</span>
+                  <span class="info-value">{{ file.fusetype }}</span>
+                </div>
+                <div class="info-row remarks">
+                  <span class="info-label"><i class="anticon anticon-message"></i> 说明:</span>
+                  <span class="info-value">{{ file.fremarks || '无' }}</span>
+                </div>
+              </div>
+              <div class="file-actions">
+                <a-button
+                  type="link"
+                  :href="file.f_downloadpath"
+                  target="_blank"
+                  class="action-btn preview-btn"
+                >
+                  <i class="anticon anticon-eye"></i>
+                  预览
+                </a-button>
+                <a-button
+                  v-if="isDelete === '1'"
+                  type="link"
+                  danger
+                  @click="delet(file.id)"
+                  class="action-btn delete-btn"
+                >
+                  <i class="anticon anticon-delete"></i>
+                  删除
+                </a-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { post } from '@vue2-client/services/api'
+import { del } from '@vue2-client/services/api/restTools'
+
+export default {
+  name: 'XUploadFilesView',
+  props: {
+    currUserInfo: {
+      type: Object,
+      default: () => undefined
+    }
+  },
+  data () {
+    return {
+      upload_date: null,
+      fusetype: null,
+      files: [],
+      fusetypes: [],
+      isDelete: '0'
+    }
+  },
+  methods: {
+    async getfusetypes () {
+      this.fusetypes = [{ label: '全部', value: '' }]
+      const res = await post('/api/af-revenue/logic/getFileUseType', {})
+      this.fusetypes.push(...res
+        .filter(item => item.fusetype && item.fusetype.trim() !== '')
+        .map(item => ({ label: item.fusetype, value: item.fusetype })))
+      this.fusetype = ''
+    },
+    async getFiles () {
+      if (!this.currUserInfo) return
+      this.files = []
+      let condition = `f_blobid = '${this.currUserInfo.f_userinfo_id}'`
+      if (this.upload_date) {
+        condition += ` and CONVERT(VARCHAR(100), f_uploaddate, 23) = '${this.upload_date}'`
+      }
+      if (this.fusetype) {
+        condition += ` and fusetype = '${this.fusetype}'`
+      }
+      const res = await post('/api/af-revenue/logic/getAllFiles', { data: { condition } })
+      this.files = res.days.map(day => ({
+        days: day.uploadday,
+        arrays: res.array.filter(file => file.uploadday === day.uploadday)
+      }))
+    },
+    async delet (fileId) {
+      await del('api/af-revenue/entity/save/t_files', { id: fileId }, { resolveMsg: '删除成功', rejectMsg: '删除失败' })
+      this.getFiles()
+    },
+    selfSearch () {
+      this.getFiles()
+    },
+    previewImage (url) {
+      window.open(url, '_blank')
+    }
+  },
+  mounted () {
+    if (this.$login.r.includes('上传附件删除')) {
+      this.isDelete = '1'
+    }
+    this.getFiles()
+    this.getfusetypes()
+  }
+}
+</script>
+
+<style scoped>
+.upload-files-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: #f9fafc;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* 过滤区样式 */
+.filter-container {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(240, 240, 240, 0.8);
+  transition: all 0.3s ease;
+}
+
+.filter-container:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.filter-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+
+.filter-item {
+  min-width: 200px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+  border-radius: 6px;
+}
+
+.search-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  border-radius: 6px;
+  padding: 0 16px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(24, 144, 255, 0.2);
+  justify-content: center;
+}
+
+.search-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
+}
+
+/* 空状态样式 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0;
+  background-color: #fff;
+  border-radius: 10px;
+  color: #8c8c8c;
+  border: 1px dashed #e8e8e8;
+  transition: all 0.3s ease;
+}
+
+.empty-icon {
+  font-size: 48px;
+  color: #bfbfbf;
+  margin-bottom: 16px;
+}
+
+.empty-state p {
+  font-size: 16px;
+  margin-top: 8px;
+  color: #8c8c8c;
+}
+
+/* 文件时间线 */
+.file-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.date-group {
+  background-color: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(240, 240, 240, 0.8);
+  transition: all 0.3s ease;
+}
+
+.date-group:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.date-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #e6f7ff, #f0f5ff);
+  border-bottom: 1px solid #e6f0ff;
+  font-weight: 500;
+  color: #1890ff;
+  font-size: 15px;
+}
+
+.date-header i {
+  font-size: 18px;
+}
+
+/* 文件网格 */
+.file-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  padding: 20px;
+}
+
+/* 文件卡片 */
+.file-card {
+  border-radius: 10px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid #f0f0f0;
+  height: 100%;
+  background-color: #fff;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
+}
+
+.file-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  border-color: #e6f7ff;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* 文件预览 */
+.file-preview {
+  height: 200px;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+  cursor: zoom-in;
+}
+
+.preview-image:hover {
+  transform: scale(1.08);
+}
+
+.file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 64px;
+  color: #bfbfbf;
+  background-color: #fafafa;
+  transition: all 0.3s ease;
+}
+
+.file-icon:hover {
+  color: #1890ff;
+}
+
+.file-icon i {
+  opacity: 0.7;
+}
+
+/* 文件信息 */
+.file-info {
+  padding: 16px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: #fff;
+}
+
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 14px;
+  color: #595959;
+  line-height: 1.5;
+}
+
+.info-label {
+  font-weight: 500;
+  color: #8c8c8c;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 80px;
+}
+
+.info-label i {
+  font-size: 14px;
+  color: #1890ff;
+}
+
+.info-value {
+  color: #262626;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remarks .info-value {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.6;
+  color: #434343;
+}
+
+/* 操作按钮 */
+.file-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+  background-color: #fafafa;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 4px 12px;
+  transition: all 0.3s ease;
+}
+
+.action-btn i {
+  font-size: 14px;
+}
+
+.preview-btn {
+  color: #1890ff;
+}
+
+.preview-btn:hover {
+  background-color: #e6f7ff;
+}
+
+.delete-btn {
+  color: #ff4d4f;
+}
+
+.delete-btn:hover {
+  background-color: #fff1f0;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filter-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filter-item {
+    width: 100%;
+    min-width: auto;
+  }
+
+  .search-btn {
+    width: 100%;
+  }
+
+  .file-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .upload-files-container {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .file-preview {
+    height: 160px;
+  }
+
+  .date-header {
+    padding: 12px 16px;
+  }
+
+  .file-grid {
+    padding: 12px;
+    gap: 12px;
+  }
+}
+</style>

package/src/base-client/components/his/XTimeSelect/XTimeSelect.vue

@@ -6,7 +6,7 @@
       <div v-if="type === 'range'" class="picker-wrapper">
         <a-range-picker
           :value="dateRange"
-          :placeholder="['开始日期', '结束日期 ']"
+          :placeholder="['开始日期', '结束日期']"
           separator="至"
           :disabled="disabled"
           :allowClear="allowClear"

package/src/pages/WorkflowDetail/WorkFlowDemo.vue

@@ -6,7 +6,7 @@ export default {
   components: { WorkflowDetail },
   mounted () {
     this.$refs.workFlow.init({
-      workflowId: '11'
+      workflowId: '31'
     })
   },
   methods: {

package/src/pages/WorkflowDetail/WorkflowDetail.vue

@@ -34,21 +34,23 @@
           >
             <!-- 查看/编辑进度标签页 -->
             <a-tab-pane key="1" tab="开始工作">
-              <WorkFlowHandle
-                v-if="activeKey === '1' && details.f_state !== undefined && steps !== undefined"
-                ref="workflowHandle"
-                :workflow-id="workflowId"
-                :workflowState="details.f_state === 1"
-                :complete-time="details.f_complete_time"
-                :stepsForChild="steps"
-                :visible="visible"
-                :taskName="details.f_task_name"
-                :details="details"
-                @refresh="stepChanged"
-                @success="success"
-                @nextClick="nextClick"
-                class="handle-content"
-              />
+              <template v-if="details">
+                <WorkFlowHandle
+                  v-if="activeKey === '1' && details.f_state !== undefined && steps !== undefined"
+                  ref="workflowHandle"
+                  :workflow-id="workflowId"
+                  :workflowState="details.f_state === 1"
+                  :complete-time="details.f_complete_time"
+                  :stepsForChild="steps"
+                  :visible="visible"
+                  :taskName="details.f_task_name"
+                  :details="details"
+                  @refresh="stepChanged"
+                  @success="success"
+                  @nextClick="nextClick"
+                  class="handle-content"
+                />
+              </template>
             </a-tab-pane>
 
             <!-- 任务流转记录标签页 -->
@@ -71,16 +73,27 @@
                 />
               </span>
               <div class="message-content">
-                <leave-message
-                  :workflowId="workflowId"
-                  :projectName="details.f_task_name"
-                  :data="messageList"
-                  :loading="messageLoading"
-                  @success="success"
-                  class="leave-message-component"
-                />
+                <template v-if="details">
+                  <leave-message
+                    :workflowId="workflowId"
+                    :projectName="details.f_task_name"
+                    :data="messageList"
+                    :loading="messageLoading"
+                    @success="success"
+                    class="leave-message-component"
+                  />
+                </template>
               </div>
             </a-tab-pane>
+
+            <!-- 查看附件标签页 -->
+            <a-tab-pane key="5" tab="查看附件">
+              <template v-if="details">
+                <XUploadFilesView
+                  :currUserInfo="{ f_userinfo_id: 90613 }"
+                />
+              </template>
+            </a-tab-pane>
           </a-tabs>
         </a-card>
       </div>
@@ -97,6 +110,7 @@ import { postByServiceName } from '@vue2-client/services/api/restTools'
 import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
 import WorkflowLog from './WorkflowPageDetail/WorkflowLog.vue'
 import LeaveMessage from './WorkflowPageDetail/LeaveMessage'
+import XUploadFilesView from '@vue2-client/base-client/components/common/XUploadFilesView/index.vue'
 
 export default {
   name: 'WorkflowDetail',
@@ -105,7 +119,8 @@ export default {
     WorkFlowHandle,
     XFormTable,
     WorkflowLog,
-    LeaveMessage
+    LeaveMessage,
+    XUploadFilesView
   },
   data () {
     return {
@@ -118,7 +133,7 @@ export default {
       // 保存流程和留言信息
       steps: undefined,
       // 基础信息
-      details: {},
+      details: undefined,
       // 是否已完成
       allStepDown: false,
       // 给XFormTable增加额外查询条件
@@ -133,7 +148,7 @@ export default {
       messageList: [],
       messageLoading: true,
       workflowId: '',
-      direction: '',
+      direction: 'right',
       visible: false
     }
   },
@@ -170,7 +185,7 @@ export default {
       this.visible = false
       this.activeKey = '1'
       this.allStepDown = false
-      this.details = {}
+      this.details = undefined
       this.fixedAddForm = {}
       this.fixedQueryForm = {}
       this.steps = undefined
@@ -200,7 +215,7 @@ export default {
       this.fixedAddForm.a_f_workflow_id = this.workflowId
     },
     // 初始化两张固定表
-    async init ({ workflowId, direction, visible = true }) {
+    async init ({ workflowId, direction = 'right', visible = true }) {
       this.workflowId = workflowId
       this.direction = direction
       this.visible = visible
@@ -242,9 +257,10 @@ export default {
     .content-card {
       border-radius: 8px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      height: 100%;
 
       /deep/ .ant-card-body {
-        padding: 12px 24px 24px;
+        padding: 0px 24px 24px;
       }
     }
   }

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowBaseInformation.vue

@@ -202,7 +202,6 @@ export default {
   methods: {
     init () {
       this.loading = this.details.f_entry_name === undefined
-      console.log(this.currUser)
       // this.isCreatedBy = this.currUser.roles.includes('14524271')
       this.completeTime = undefined
       this.overdueTime = undefined
@@ -258,20 +257,6 @@ export default {
       if (newVal) {
         this.init()
       }
-    },
-    details: {
-      deep: true,
-      handler (newVal) {
-        if (newVal.person) {
-          // 删除值为空的键
-          for (const key in newVal.person) {
-            if (!newVal.person[key]) {
-              delete newVal.person[key]
-            }
-          }
-        }
-        this.init()
-      }
     }
   }
 }

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowHandle.vue

@@ -12,75 +12,93 @@
         change-able
         @activeStep="activeStep"/>
     </a-card>
-    <!--  如果不是当前步骤，显示历史记录  -->
-    <a-tabs default-active-key="1" @change="note = ''">
-      <a-tab-pane key="1" :tab="!beforeStepActive && !workflowState ? '表单' : '进度详情'">
-        <a-card :bordered="false" :loading="loadingHistory">
-          <div v-if="beforeStepActive || workflowState">
-            <!--   当前步骤无记录   -->
-            <div v-show="!formCompletedDataPreview" style="text-align: center">
-              <h1>该步骤暂无记录</h1>
-            </div>
-            <!--   当前步骤历史记录   -->
-            <div v-if="formCompletedDataPreview">
-              <a-descriptions
-                v-show="formCompletedDataPreview.data"
-                :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
-                title="历史记录"
-                bordered
-              >
-                <a-descriptions-item
-                  v-for="(value,key) in formCompletedDataPreview.data"
-                  :key="key"
-                >
-                  <span slot="label" style="color: #000">{{ key }}</span>
-                  <div style="white-space: pre-wrap">{{ value }}</div>
-                </a-descriptions-item>
-              </a-descriptions>
-              <div v-if="formCompletedDataPreview.note">
-                <div class="ant-descriptions-title complete-data-title">备注</div>
-                <p style="white-space: pre-wrap">{{ formCompletedDataPreview.note }}</p>
-              </div>
-              <div v-if="formCompletedDataPreview.images.length">
-                <div class="ant-descriptions-title complete-data-title">图片</div>
-                <image-item :images="formCompletedDataPreview.images" @preview="handlePreviewFile"/>
-              </div>
-              <div v-if="formCompletedDataPreview.files.length">
-                <div class="ant-descriptions-title complete-data-title">附件</div>
-                <file-item :files="formCompletedDataPreview.files" @preview="handlePreviewFile"/>
-              </div>
-            </div>
+    <!-- 无权访问的提示 -->
+    <template v-if="!canSubmit">
+      <a-result status="403" title="无权操作" sub-title="您没有访问该步骤的权限.">
+      </a-result>
+    </template>
+    <template v-else>
+      <!-- 流程被退回的提示 -->
+      <template v-if="currentStep && currentStep.back && !(beforeStepActive || workflowState)">
+        <a-alert type="info" show-icon style="margin-bottom: 14px">
+          <div slot="message">
+            <span style="font-weight: bold">流程被退回</span>
+            <span style="margin-left: 14px; font-size: 14px; color: rgba(0, 0, 0, 0.65)">请重新填写信息发起提交</span>
+          </div>
+          <div slot="description">
+            <div>操作人：{{ currentStep.back.f_operator }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作时间：{{ currentStep.back.f_date }}</div>
+            <div>原因：{{ currentStep.back.f_notes }}</div>
           </div>
-          <!-- 如果是当前步骤，填写表单，控制流程等 -->
-          <div v-if="!beforeStepActive && !workflowState">
-            <div v-if="canSubmit">
-              <!-- 退回提示 -->
-              <a-alert v-if="currentStep && currentStep.back" type="info" show-icon style="margin-bottom: 14px">
-                <div slot="message">
-                  <span style="color: #000">被退回</span>
-                  <span style="margin-left: 14px; font-size: 14px; color: rgba(0, 0, 0, 0.65)">{{
-                    currentStep.back.f_desc
-                  }}</span>
+        </a-alert>
+      </template>
+      <!-- 步骤内容主体 -->
+      <a-tabs default-active-key="1" @change="note = ''" type="card">
+        <template v-if="beforeStepActive || workflowState">
+          <a-tab-pane key="0" tab="步骤详情">
+            <a-card :bordered="false" :loading="loadingHistory">
+              <!--   当前步骤历史记录   -->
+              <template v-if="formCompletedDataPreview">
+                <a-descriptions
+                  v-show="formCompletedDataPreview.data"
+                  :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
+                  title="步骤历史记录"
+                  bordered
+                >
+                  <a-descriptions-item
+                    v-for="(value,key) in formCompletedDataPreview.data"
+                    :key="key"
+                  >
+                    <span slot="label" style="color: #000">{{ key }}</span>
+                    <div style="white-space: pre-wrap">{{ value }}</div>
+                  </a-descriptions-item>
+                </a-descriptions>
+                <div v-if="formCompletedDataPreview.note">
+                  <div class="ant-descriptions-title complete-data-title">备注</div>
+                  <p style="white-space: pre-wrap">{{ formCompletedDataPreview.note }}</p>
+                </div>
+                <div v-if="formCompletedDataPreview.images.length">
+                  <div class="ant-descriptions-title complete-data-title">图片</div>
+                  <image-item :images="formCompletedDataPreview.images" @preview="handlePreviewFile"/>
                 </div>
-                <div slot="description">
-                  <div>操作人：{{ currentStep.back.f_operator }}</div>
-                  <div>操作时间：{{ currentStep.back.f_date }}</div>
-                  <div>退回原因：{{ currentStep.back.f_notes }}</div>
+                <div v-if="formCompletedDataPreview.files.length">
+                  <div class="ant-descriptions-title complete-data-title">附件</div>
+                  <file-item :files="formCompletedDataPreview.files" @preview="handlePreviewFile"/>
                 </div>
-              </a-alert>
-              <!-- 任务时间提示 -->
-              <!--              <a-alert-->
-              <!--                v-if="taskIsOverdue"-->
-              <!--                type="warning"-->
-              <!--                message="当前任务已超过限定完成时间，联系发起人修改完成时间后即可提交"-->
-              <!--                show-icon-->
-              <!--                style="margin-bottom: 14px"/>-->
-              <!--    当前步骤，填写表单    -->
-              <x-add-native-form
-                v-if="stepDefine.length > 0"
-                ref="xAddForm"
-                @onSubmit="submitForm">
-              </x-add-native-form>
+              </template>
+              <!--   当前步骤无记录   -->
+              <template v-else>
+                <a-result status="404" title="暂无数据" sub-title="该步骤暂无数据。">
+                </a-result>
+              </template>
+            </a-card>
+          </a-tab-pane>
+        </template>
+        <template v-else>
+          <a-tab-pane key="1" tab="业务操作">
+            <a-card :bordered="false" :loading="loadingHistory">
+              <template v-if="showTab">
+                <x-tab :local-config="tabDesigner" :body-style="{ padding: 0 }" :tabBarGutter="24" default-active-key="workFlowTab">
+                  <a-tab-pane
+                    :forceRender="true"
+                    v-if="showForm"
+                    slot="extraBeforeTabs"
+                    key="workFlowTab"
+                    tab="表单"
+                  >
+                    <x-add-native-form
+                      ref="xAddForm"
+                      @onSubmit="submitForm"/>
+                  </a-tab-pane>
+                </x-tab>
+              </template>
+              <template v-else>
+                <template v-if="showForm">
+                  <x-add-native-form
+                    ref="xAddForm"
+                    @onSubmit="submitForm"/>
+                </template>
+              </template>
+              <a-divider />
               <a-form v-if="!lastStep" label-align="left" :label-col="{ span: 3 }" :wrapper-col="{ span: 13 }">
                 <a-form-item v-if="showStepNextBtn" label="操作类型" required>
                   <a-radio-group v-model="operationType" @change="handleOperationTypeChange">
@@ -88,7 +106,7 @@
                     <a-radio value="skip">{{ stepNextBtnTitle }}</a-radio>
                   </a-radio-group>
                 </a-form-item>
-                <a-form-item label="指定下一环节处理人" required v-if="needSelectPerson">
+                <a-form-item label="下一环节处理人" required v-if="needSelectPerson">
                   <a-select
                     v-model="checkedChargePerson"
                     placeholder="请选择或搜索"
@@ -112,12 +130,12 @@
                     placeholder="请选择"/>
                 </a-form-item>
               </a-form>
+              <a-divider />
               <!--     备注信息    -->
-              <div class="line"></div>
               <a-textarea
                 v-model="note"
                 :auto-size="{ minRows: 3, maxRows: 5 }"
-                placeholder="添加备注"
+                placeholder="填写本环节备注事项"
               />
               <!--  当前步骤完成后，控制流程按钮  -->
               <div style="text-align: center">
@@ -147,7 +165,7 @@
                           type="primary"
                           @click="nextClick"
                         >
-                          提交
+                          完成提交
                           <a-icon type="right"/>
                         </a-button>
                       </a-popover>
@@ -160,7 +178,7 @@
                           type="primary"
                           @click="stepNextClick"
                         >
-                          跳跃
+                          跳过
                         </a-button>
                       </a-popover>
                       <a-button
@@ -168,55 +186,51 @@
                         type="primary"
                         @click="lastStepNextClick"
                       >
-                        确认完工
+                        确认完成
                       </a-button>
                     </template>
                   </a-space>
                 </a-radio-group>
               </div>
-            </div>
-            <p v-else style="font-size:16px">
-              <a-icon type="info-circle"/>
-              <span style="margin-left:6px">无权操作</span>
-            </p>
-          </div>
-        </a-card>
-      </a-tab-pane>
-      <!-- 退回 -->
-      <a-tab-pane v-if="canSubmit && !beforeStepActive && showPrevBtn && !workflowState" key="2" tab="退回">
-        <a-form layout="vertical">
-          <a-form-item label="退回原因" :wrapper-col="{ span: 10 }" required>
-            <a-textarea
-              v-model="note"
-              :auto-size="{ minRows: 4, maxRows: 10 }"
-              placeholder="请填写退回原因 / 备注"
-            />
-          </a-form-item>
-          <a-form-item :wrapper-col="{ offset: 4 }">
-            <a-popover :title="preBtnTitle">
-              <template slot="content">
-                <p v-for="(item,index) in preBtnText" :key="index">{{ item }}</p>
-              </template>
-              <a-button
-                type="danger"
-                @click="preClick"
-              >
-                <a-icon type="left"/>
-                退回
-              </a-button>
-            </a-popover>
-          </a-form-item>
-        </a-form>
-      </a-tab-pane>
-      <a-tab-pane v-if="canSubmit && !beforeStepActive && showPrevBtn && !workflowState" key="3" tab="工单拆分">
-        <!--   分配工单   -->
-        <workflow-list-resolution :workflow-project-id="workflowId" :details="details"></workflow-list-resolution>
-      </a-tab-pane>
-    </a-tabs>
-    <!-- 文件预览 -->
-    <a-modal v-model="previewFileVisible" :footer="null" :dialog-style="{ top: '20px' }" width="85%" :z-index="1001">
-      <file-preview :path="filePath"/>
-    </a-modal>
+            </a-card>
+          </a-tab-pane>
+        </template>
+        <!-- 退回 -->
+        <a-tab-pane v-if="canSubmit && !beforeStepActive && showPrevBtn && !workflowState" key="2" tab="退回">
+          <a-form layout="vertical">
+            <a-form-item label="退回原因" :wrapper-col="{ span: 10 }" required>
+              <a-textarea
+                v-model="note"
+                :auto-size="{ minRows: 4, maxRows: 10 }"
+                placeholder="请填写退回原因 / 备注"
+              />
+            </a-form-item>
+            <a-form-item :wrapper-col="{ offset: 4 }">
+              <a-popover :title="preBtnTitle">
+                <template slot="content">
+                  <p v-for="(item,index) in preBtnText" :key="index">{{ item }}</p>
+                </template>
+                <a-button
+                  type="danger"
+                  @click="preClick"
+                >
+                  <a-icon type="left"/>
+                  退回
+                </a-button>
+              </a-popover>
+            </a-form-item>
+          </a-form>
+        </a-tab-pane>
+        <a-tab-pane v-if="canSubmit && !beforeStepActive && showPrevBtn && !workflowState" key="3" tab="工单拆分">
+          <!--   分配工单   -->
+          <workflow-list-resolution :workflow-project-id="workflowId" :details="details"></workflow-list-resolution>
+        </a-tab-pane>
+      </a-tabs>
+      <!-- 文件预览 -->
+      <a-modal v-model="previewFileVisible" :footer="null" :dialog-style="{ top: '20px' }" width="85%" :z-index="1001">
+        <file-preview :path="filePath"/>
+      </a-modal>
+    </template>
   </div>
 </template>
 
@@ -238,10 +252,12 @@ import { commonApi } from '@vue2-client/services/api'
 import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
 import * as util from '@vue2-client/utils/util'
 import { getConfigByNameAsync, runLogic } from '@vue2-client/services/api/common'
+import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
 
 export default {
   name: 'WorkFlowHandle',
   components: {
+    XTab,
     WorkflowListResolution,
     XAddNativeForm,
     WorkFlowTimeline,
@@ -254,10 +270,23 @@ export default {
   computed: {
     ...mapState('account', { currUser: 'user' }),
     canSubmit () {
+      // 对于超级管理员直接认为可以提交
+      if (this.currUser.ename === '1') {
+        return true
+      }
+      // currentStepId可能还没初始化，此处拿不到先返回false
+      if (!this.currentStepId) {
+        return false
+      }
       const step = this.stepsForChild[this.currentStepId - 1]
-
       // 检查角色和部门权限
       if (step && step.properties && step.properties.chargePerson) {
+        // chargePerson 改造  旧数据类型是 {chrgePerson: {role: '1', department: '1'}}
+        // 如果是旧的格式 转换成新的格式后再作处理
+        if (step.properties.chargePerson.role || step.properties.chargePerson.department) {
+          step.properties.chargePerson.needSelectPerson = true
+          step.properties.chargePerson.personList = [{ type: step.properties.chargePerson.role ? 'role' : 'department', name: step.properties.chargePerson.role || step.properties.chargePerson.department }]
+        }
         if (step.properties.chargePerson.personList && step.properties.chargePerson.personList.length > 0) {
           // 使用some方法判断当前人员是否满足任一条件
           return step.properties.chargePerson.personList.some(item => {
@@ -286,6 +315,10 @@ export default {
     return {
       // 显示供用户填写的当前步骤表单
       showForm: false,
+      // 显示步骤的tab页
+      showTab: false,
+      // tab页的配置
+      tabDesigner: undefined,
       // 当前步骤表单标题
       formTitle: '',
       // 当前步骤表单定义Json
@@ -631,6 +664,7 @@ export default {
       }
       this.isLastStep(this.currentStepId)
       if (!this.lastStep) {
+        // 设置下一步的操作人
         this.setChargePersonOptions(this.currentStepId + 1)
       }
       this.workflowControl()
@@ -665,18 +699,31 @@ export default {
           }
         )
     },
-    // 打开填写表单，获取当前步骤定义内容，生成表单
-    openForm () {
-      this.stepDefine = this.stepsDefine[this.currentStep.id - 1].properties.form.formJson
-      this.showForm = true
-      this.$nextTick(() => {
-        this.$refs.xAddForm && this.$refs.xAddForm.init({
-          businessType: '修改',
-          formItems: this.stepDefine,
-          layout: this.stepsDefine[this.currentStep.id - 1].properties.form.xAddFormLayout,
-          showSubmitBtn: false
+    // 获取当前步骤定义内容，构建组件
+    buildComp () {
+      const properties = this.stepsDefine[this.currentStep.id - 1].properties
+      // 表单的渲染
+      if (properties.form && properties.form.formJson) {
+        this.stepDefine = properties.form.formJson
+        this.showForm = true
+        this.$nextTick(() => {
+          this.$refs.xAddForm && this.$refs.xAddForm.init({
+            businessType: '修改',
+            formItems: this.stepDefine,
+            layout: properties.form.xAddFormLayout,
+            showSubmitBtn: false
+          })
         })
-      })
+      } else {
+        this.showForm = false
+      }
+      // Tab的渲染
+      this.tabDesigner = properties.tabDesigner
+      if (this.tabDesigner) {
+        this.showTab = true
+      } else {
+        this.showTab = false
+      }
     },
     // 根据当前节点，判断之后流程，以及按钮的显示
     workflowControl () {
@@ -778,7 +825,7 @@ export default {
       } else {
         this.loadingHistory = false
         this.beforeStepActive = false
-        this.openForm()
+        this.buildComp()
       }
     },
     // 获取已经完成步骤的数据
@@ -908,7 +955,8 @@ export default {
     // 从指定步骤设置负责人下拉选择框
     async setChargePersonOptions (stepId) {
       this.checkedChargePerson = undefined
-      const defineProperties = this.stepsDefine[stepId - 1].properties
+      const define = this.stepsDefine[stepId - 1]
+      const defineProperties = define.properties
       // chargePerson 改造  旧数据类型是 {chrgePerson: {role: '1', department: '1'}}
       // 新数据类型是
       // "chargePerson": {
@@ -925,6 +973,11 @@ export default {
       //     "needSelectPerson": true
       // }
       const chargePerson = defineProperties.chargePerson
+      if (!chargePerson) {
+        this.needSelectPerson = false
+        this.chargePersonOptions = []
+        return
+      }
       // 如果是旧的格式 转换成新的格式后再作处理
       if (chargePerson.role || chargePerson.department) {
         chargePerson.needSelectPerson = true
@@ -1008,15 +1061,11 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.line {
-  width: 100%;
-  height: 5px;
-  border-bottom: rgb(240, 240, 240) solid 1px;
-  margin-bottom: 30px;
-}
-
 .complete-data-title {
   margin-top: 8px;
   margin-bottom: 8px;
 }
+:deep(.ant-result){
+  padding: 0;
+}
 </style>

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowTimeline.vue

@@ -124,7 +124,7 @@ export default {
         return
       }
       if (stepId > this.currentStepId) {
-        return this.$message.info('您要访问的步骤超出了当前进度！')
+        return this.$message.warn('请先完成当前步骤')
       }
       this.$emit('activeStep', stepId)
       this.displayStepId = stepId