vue2-client 1.14.42 → 1.14.43

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--   上方流程显示   -->
-    <a-card :bordered="false" :loading="loading" title="项目进度">
+    <a-card :bordered="false" :loading="loading">
       <!--  项目进度流程  -->
       <work-flow-timeline
         :current-step-id="currentStepId"
@@ -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
@@ -142,6 +142,7 @@ export default {
 <style lang="less" scoped>
 .timeline {
   /deep/ .ant-steps-dot {
+    margin-bottom: 6px;
     .ant-steps-item-tail {
       top: 7px;
       margin-left: 106px;
@@ -152,7 +153,7 @@ export default {
     }
     .ant-steps-item-content {
       width: 200px;
-      margin-top: 16px;
+      margin-top: 24px;
       .ant-steps-item-description {
         text-align: left;
         margin: 6px 0 0 60px;