n20-common-lib 2.9.13 → 2.9.14

package/src/components/ApprovalCard/indexApp.vue

@@ -0,0 +1,592 @@
+/* 审批进度 */
+<template>
+  <div class="n20-approve-wrap">
+    <el-timeline :reverse="true">
+      <el-timeline-item v-for="(item, i) in approvalData" :key="i" :type="item | typeF(status)" :hide-timestamp="true">
+        <div class="n20-time">
+          <div>{{ item.endTime | dataF }}</div>
+          <div>{{ item.endTime | timeF }}</div>
+        </div>
+        <div>
+          <div v-if="item.result === 0" class="flex-box flex-v">
+            <div v-title="item.assignee" class="w-full n20-worker p-r-s" :show-overflow-tooltip="true">
+              {{ $lc(item.assignee) }}
+            </div>
+          </div>
+          <div v-if="item.result === 5" class="flex-box">
+            <div class="result-left-name" :class="item | typeF(status, 'color-')">
+              {{ $lc(item.resultName) }}
+            </div>
+          </div>
+          <div v-else class="flex-box">
+            <div class="result-left-name" :class="item | typeF(status, 'color-')">
+              {{ $lc(item.resultName) }}
+            </div>
+            <div
+              v-title="item.assignee"
+              class="flex-box flex-item n20-worker m-r-s text-ellipsis"
+              :show-overflow-tooltip="true"
+            >
+              <!-- <div
+                v-title="item.memberName"
+                :show-overflow-tooltip="true"
+                class="flex-item n20-worker m-r-s text-ellipsis"
+                style="width: 250px"
+              >
+                {{ item.memberName }}
+              </div>
+              <div
+                v-title="item.deptName"
+                :show-overflow-tooltip="true"
+                class="flex-item n20-worker m-r-s text-ellipsis"
+                style="width: 250px"
+              >
+                {{ item.deptName }}
+              </div>
+              <div
+                v-if="item.job"
+                v-title="item.job"
+                :show-overflow-tooltip="true"
+                class="flex-item n20-worker m-r-s text-ellipsis"
+                style="width: 250px"
+              >
+                {{ item.job }}
+              </div>
+              <div
+                v-title="item.roleName"
+                class="flex-item n20-worker text-ellipsis"
+                :show-overflow-tooltip="true"
+                style="width: 250px"
+              >
+                {{ item.roleName }}
+              </div> -->
+              <div
+                v-if="item.result !== 0"
+                v-title="item.assignee"
+                class="n20-worker text-ellipsis"
+                style="width: 180px"
+                :show-overflow-tooltip="true"
+              >
+                <span class="worker-icon n20-icon-user"></span>{{ item.assignee }}
+              </div>
+              <!-- <div
+                v-if="item.result !== 0 && item.appOrPc !== null && item.appOrPc !== '' && item.appOrPc !== undefined"
+              >
+                {{ item.appOrPc === '1' ? 'PC端审批' : item.appOrPc === '2' ? '外部系统审批' : 'App端审批' | $lc }}
+              </div>
+              <div v-if="item.showConnect === '1'" class="m-l-s">
+                <span class="pointer color-ccc f-s-s" @click="seeDetail(item)"
+                  >{{ '查看详情' | $lc }} <i class="el-icon-arrow-right"></i
+                ></span>
+              </div> -->
+            </div>
+          </div>
+
+          <div v-if="item.ccUserName" class="n20-description-c m-t">{{ '抄送人：' | $lc }}{{ item.ccUserName }}</div>
+          <div class="n20-description-c m-t flex-box flex-v">
+            <el-tag v-if="item.addTaskTag" class="m-r-s" effect="plain" type="info">{{
+              item.addTaskTag | remarkF(remarkOpt)
+            }}</el-tag>
+            <span v-if="item.addTaskName">{{ '加签审批人：' | $lc }}{{ item.addTaskName }}</span>
+          </div>
+
+          <template v-if="item.resultName !== '撤回' || showCtdMsg">
+            <!-- 子流程app暂时屏蔽 -->
+            <!-- <div v-if="item.subProcInitId" class="n20-description-c n20-description-bgc m-t p-a-s">
+              <span class="color-primary pointer" @click="seeApproveChild(item.subProcInitId)"
+                >{{ item.suggestion }}<i class="n20-icon-shouqizhedie f-s-m"></i
+              ></span>
+               <div v-if="showChildTimeline" class="n20-approve-wrap-children">
+                <el-timeline :reverse="true">
+                  <div
+                    v-for="(row, i) in approvalChildrenData"
+                    :key="i"
+                    :type="row | typeF(status)"
+                    :hide-timestamp="true"
+                  >
+                    <div class="n20-time">
+                      <div>{{ row.endTime | dataF }}</div>
+                      <div>{{ row.endTime | timeF }}</div>
+                    </div>
+                    <template>
+                      <div v-if="row.result === 0" class="flex-box flex-v">
+                        <div
+                          v-title="row.assignee"
+                          class="w-full n20-worker p-r-s text-ellipsis"
+                          :show-overflow-tooltip="true"
+                        >
+                          {{ row.assignee }}
+                        </div>
+                      </div>
+                      <div v-if="row.result === 5" class="flex-box">
+                        <div class="result-left-name" :class="row | typeF(status, 'color-')">
+                          {{ $lc(row.resultName) }}
+                        </div>
+                      </div>
+                      <div v-else class="flex-box">
+                        <div class="result-left-name" :class="row | typeF(status, 'color-')">
+                          {{ $lc(row.resultName) }}
+                        </div>
+                        <div
+                          v-title="row.assignee"
+                          class="flex-box flex-item n20-worker m-r-s text-ellipsis"
+                          :show-overflow-tooltip="true"
+                        >
+                          <div
+                            v-title="row.memberName"
+                            :show-overflow-tooltip="true"
+                            class="flex-item n20-worker m-r-s text-ellipsis"
+                            style="width: 250px"
+                          >
+                            {{ row.memberName }}
+                          </div>
+                          <div
+                            v-title="row.deptName"
+                            :show-overflow-tooltip="true"
+                            class="flex-item n20-worker m-r-s text-ellipsis"
+                            style="width: 250px"
+                          >
+                            {{ row.deptName }}
+                          </div>
+                          <div
+                            v-title="row.roleName"
+                            class="flex-item n20-worker text-ellipsis"
+                            :show-overflow-tooltip="true"
+                            style="width: 250px"
+                          >
+                            {{ row.roleName }}
+                          </div>
+                          <div
+                            v-if="row.result !== 0"
+                            v-title="row.assignee"
+                            class="n20-worker text-ellipsis"
+                            style="width: 180px"
+                            :show-overflow-tooltip="true"
+                          >
+                            <span class="worker-icon n20-icon-user"></span>{{ row.assignee }}
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="row.ccUserName" class="n20-description-c m-t">
+                        {{ '抄送人：' | $lc }}{{ row.ccUserName }}
+                      </div>
+                      <div v-if="row.addTaskName" class="n20-description-c m-t">
+                        {{ '加签审批人：' | $lc }}{{ row.addTaskName }}
+                      </div>
+                      <div v-if="row.resultName !== '撤回' || showCtdMsg">
+                        <div v-if="row.suggestion" class="n20-description-c n20-description-bgc m-t p-a-s">
+                          <span v-if="row.result !== status.waiting">{{ '审批意见：' | $lc }}</span>
+                          <span style="line-height: 22px">{{ row.suggestion }} </span>
+                        </div>
+                        <div
+                          v-if="row.flowHistoryCfgs && row.flowHistoryCfgs.length"
+                          class="n20-description-c m-t p-a-s"
+                        >
+                          <span
+                            v-if="row.result !== status.waiting"
+                            class="color-primary pointer"
+                            @click="showFlowHistoryChild = !showFlowHistoryChild"
+                            >{{ '审查意见：' | $lc }} <i class="n20-icon-shouqizhedie f-s-m"></i
+                          ></span>
+                          <div v-show="showFlowHistoryChild" class="n20-description-bgc p-a-s">
+                            <div v-for="(s, i) in row.flowHistoryCfgs" :key="i">
+                              {{ s.cfgName }}：{{ s.cfgText ? s.cfgText : s.cfgVal }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        v-if="row.flowHisFileList"
+                        class="n20-description-c n20-description-bgc"
+                        style="margin-top: 0 !important"
+                      >
+                        <span>{{ '附件信息' | $lc }}：</span>
+                        <div class="flex-box">
+                          <div
+                            v-for="(res, i) in row.flowHisFileList"
+                            :key="i"
+                            class="m-a-ss color-primary pointer"
+                            @click="preview(res)"
+                          >
+                            {{ res.fileName }}
+                          </div>
+                        </div>
+                        <Dialog
+                          v-drag
+                          class="p-a-0"
+                          :title="'附件预览' | $lc"
+                          :visible.sync="visibleP"
+                          top="2vh"
+                          width="96%"
+                          :close-on-click-modal="false"
+                          @close="closeSee"
+                        >
+                          <span class="file-upload-table_preview-pn">
+                            <el-button plain size="mini" @click="downFile(seeRow)">下载</el-button>
+                          </span>
+                          <div v-if="visibleP" class="p-a" style="height: 82vh">
+                            <component
+                              :is="previewSameOrg ? 'object' : 'div'"
+                              :key="previewUrl"
+                              :data="previewUrl"
+                              style="width: 100%; height: 100%"
+                            >
+                              <div class="flex-column flex-c flex-v" style="height: 100%">
+                                <i class="el-icon-s-release" style="font-size: 60px; color: #999"></i>
+                                <span style="margin-top: 16px">
+                                  {{ '不支持在线预览，请' | $lc
+                                  }}<el-link type="primary" @click="downFile(seeRow)">{{ '下载' | $lc }}</el-link
+                                  >{{ '到本地查看' | $lc }}
+                                </span>
+                              </div>
+                            </component>
+                          </div>
+                        </Dialog>
+                      </div>
+                    </template>
+                  </div>
+                </el-timeline>
+              </div>
+            </div> -->
+            <!-- app暂时屏蔽 -->
+            <!-- <div v-if="!item.subProcInitId && item.suggestion" class="n20-description-c n20-description-bgc m-t p-a-s">
+              <span v-if="item.result !== status.waiting">{{ '审批意见：' | $lc }}</span>
+              <span style="line-height: 22px">{{ item.suggestion }} </span>
+            </div>
+            <div v-if="item.flowHistoryCfgs && item.flowHistoryCfgs.length" class="n20-description-c m-t p-a-s">
+              <span
+                v-if="item.result !== status.waiting"
+                class="color-primary pointer"
+                @click="showFlowHistory = !showFlowHistory"
+                >{{ '审查意见：' | $lc }}<i class="n20-icon-shouqizhedie f-s-m"></i
+              ></span>
+              <div v-show="showFlowHistory" class="n20-description-bgc p-a-s">
+                <div v-for="(s, i) in item.flowHistoryCfgs" :key="i" class="p-b-s">
+                  <div>{{ s.cfgName }}：{{ s.cfgText ? s.cfgText : s.cfgVal }}</div>
+                  <div>{{ s.cfgRemark }}</div>
+                </div>
+              </div>
+            </div> -->
+            <!-- <div v-if="item.flowHisFileList" class="n20-description-c n20-description-bgc m-t p-a-s">
+              <span>{{ '附件信息' | $lc }}：</span>
+              <div class="flex-box">
+                <div
+                  v-for="(res, i) in item.flowHisFileList"
+                  :key="i"
+                  class="m-a-ss color-primary pointer"
+                  @click="preview(res)"
+                >
+                  {{ res.fileName }}
+                </div>
+              </div>
+              <Dialog
+                v-drag
+                class="p-a-0"
+                :title="'附件预览' | $lc"
+                :visible.sync="visibleP"
+                top="2vh"
+                width="96%"
+                :close-on-click-modal="false"
+                @close="closeSee"
+              >
+                <span class="file-upload-table_preview-pn">
+                  <el-button plain size="mini" @click="downFile(seeRow)">下载</el-button>
+                </span>
+                <div v-if="visibleP" class="p-a" style="height: 82vh">
+                  <component
+                    :is="previewSameOrg ? 'object' : 'div'"
+                    :key="previewUrl"
+                    :data="previewUrl"
+                    style="width: 100%; height: 100%"
+                  >
+                    <div class="flex-column flex-c flex-v" style="height: 100%">
+                      <i class="el-icon-s-release" style="font-size: 60px; color: #999"></i>
+                      <span style="margin-top: 16px">
+                        {{ '不支持在线预览，请' | $lc
+                        }}<el-link type="primary" @click="downFile(seeRow)">{{ '下载' | $lc }}</el-link
+                        >{{ '到本地查看' | $lc }}
+                      </span>
+                    </div>
+                  </component>
+                </div>
+              </Dialog>
+            </div> -->
+          </template>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+import 'viewerjs/dist/viewer.css'
+import getJsonc from 'n20-common-lib/src/assets/getJsonc.js'
+import axios from 'n20-common-lib/src/utils/axios.js'
+import { $lc } from 'n20-common-lib/src/utils/i18n/index.js'
+import importG from 'n20-common-lib/src/utils/importGlobal.js'
+import { linkPush } from 'n20-common-lib/src/utils/urlToGo.js'
+import Dialog from '../Dialog/index.vue'
+const ViewerImg = async function () {
+  let { component } = await importG('v-viewer', () => import(/*webpackChunkName: "v-viewer"*/ 'v-viewer'))
+  return component
+}
+if (!window._approvalExtend) window._approvalExtend = {}
+
+export default {
+  name: 'ApprovalCard',
+  components: {
+    Dialog,
+    ViewerImg
+  },
+  filters: {
+    typeF(item, status, prefix = '') {
+      let result = item.result
+      switch (result) {
+        case status.submit:
+          return prefix + 'primary'
+        case status.approval:
+          return prefix + 'primary'
+        case status.reject:
+          return prefix + 'danger'
+        case status.invalid:
+          return prefix + 'danger'
+        case status.end:
+          return prefix + 'primary'
+        case status.revocation:
+          return prefix + 'warning'
+        default:
+          return undefined
+      }
+    },
+    dataF(_t) {
+      let t = _t || ''
+      let ts = t.split(' ') || ['', '']
+      return ts[0]
+    },
+    timeF(_t) {
+      let t = _t || ''
+      let ts = t.split(' ') || ['', '']
+      return ts[1]
+    },
+    remarkF(val, list) {
+      return list?.find((item) => item.code === val)?.name || val
+    }
+  },
+  props: {
+    apiPrefix: {
+      type: String,
+      default: undefined
+    },
+    close: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: Object,
+      default: () => ({
+        waiting: 0,
+        submit: 1,
+        approval: 2,
+        reject: 3,
+        invalid: 4,
+        end: 5,
+        revocation: 6
+      })
+    },
+    approvalData: {
+      type: Array,
+      default: () => []
+    },
+    procInstId: {
+      type: String,
+      default: undefined
+    },
+    hideLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    this.viewerOptions = {
+      debug: true,
+      inline: true,
+      scalable: false, // 不显示水平(垂直)翻转
+      navbar: false,
+      button: false,
+      title: true,
+
+      toolbar: {
+        zoomIn: true,
+        zoomOut: true,
+        oneToOne: true,
+        reset: true,
+        rotateLeft: true,
+        rotateRight: true,
+        flipHorizontal: true,
+        flipVertical: true,
+        prev: false,
+        play: false,
+        next: false
+      }
+    }
+    return {
+      remarkOpt: [],
+      showChildTimeline: false,
+      approvalChildrenData: [],
+      // 显示撤回意见,默认不显示
+      showCtdMsg: window._approvalExtend['card.countermand.suggestion'] === true,
+      visibleP: false,
+      previewUrl: '',
+      imgType: /\.(jpg|png1|gif|svg)$/i,
+      previewName: '',
+      previewSameOrg: false,
+      seeTypes: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc)$/i,
+      seeRow: {},
+      showFlowHistory: true,
+      showFlowHistoryChild: true
+    }
+  },
+  async created() {
+    if (this.procInstId) {
+      const data = await this.getProcInstData(this.procInstId)
+      this.approvalData.push(...data)
+    }
+  },
+  methods: {
+    async seeDetail(item) {
+      const { appUrl = {} } = await getJsonc('activiti/server-config.jsonc', null, true)
+      if (appUrl[item._details.appNo]) {
+        let path = appUrl[item._details.appNo] + '/' + item._details.typeCode
+        linkPush(path, {
+          taskId: item._details.taskId,
+          typeCode: item._details.typeCode,
+          processInstanceId: item._details.procInstId,
+          appNo: item._details.appNo,
+          businessId: item._details.businessId
+        })
+      } else {
+        this.$message.error('未配置审批详情链接')
+      }
+    },
+    async seeApproveChild(id) {
+      this.showChildTimeline = !this.showChildTimeline
+      if (this.showChildTimeline) {
+        const data = await this.getProcInstData(id)
+        this.approvalChildrenData = data
+      } else {
+        this.approvalChildrenData = []
+      }
+    },
+    async getProcInstData(procInstId) {
+      const { data } = await axios.get(
+        `/bems/activiti/sample/Q003?r=${Math.random()}`,
+        {
+          procInstId
+        },
+        { loading: !this.hideLoading }
+      )
+
+      let approvalData = []
+      data?.forEach((item) => {
+        let _item = {
+          job: item.job || '',
+          isShow: item.isShow, //是否显示
+          endTime: item.endTime || '',
+          assignee: item.assignee,
+          suggestion: item.suggestion,
+          roleName: item.roleName,
+          flowHisFileList: item.flowHisFileList || null, //附件信息
+          ccUserName: item.ccUserName, // 抄送人
+          addTaskName: item.addTaskName, // 加签审批人
+          memberName: item.memberName, // 审批人单位
+          subProcInitId: item.subProcInitId, // 子流程id
+          appOrPc: item.appOrPc, // 终端标识 1 PC 2 APP
+          showConnect: item.showConnect, // 是否显示查看详情
+          _details: item,
+          deptName: item.deptName, // 部门
+          addTaskTag: item.addTaskTag, // 加签备注
+          flowHistoryCfgs: item.flowHistoryCfgs // 自定义字段
+        }
+        if (_item.addTaskTag && this.remarkOpt?.length === 0) {
+          this.getMdmDataDoc()
+        }
+        let resultName = item.optResult || ''
+        resultName = resultName.split('-')
+        resultName = resultName[resultName.length - 1]
+        _item.resultName = resultName === $lc('推进') ? $lc('批准') : resultName
+        _item.resultNameA = resultName === $lc('推进') ? $lc('批准') : resultName
+        if (item.optName) {
+          _item.resultName = item.optName
+        }
+        if (item.taskName === $lc('开始')) {
+          _item.result = 1
+        } else if (_item.resultNameA === $lc('加签推进')) {
+          _item.result = 2
+        } else if (_item.resultNameA === $lc('作废')) {
+          _item.result = 4
+        } else if (item.taskName === $lc('结束')) {
+          _item.result = 5
+        } else if ('approvalState' in item) {
+          _item.result = item.approvalState
+        } else if (!item.endTime) {
+          _item.result = 0
+        } else if (item.rejectFlag === 1) {
+          _item.result = 3
+        } else {
+          _item.result = 2
+        }
+
+        approvalData.push(_item)
+      })
+      return (
+        approvalData?.filter((item) => {
+          return item.isShow !== '0'
+        }) || []
+      )
+    },
+    // 获取数据字典加签备注
+    async getMdmDataDoc() {
+      const { code, data } = await axios.get(`/bems/1.0/mdmDataDoc?t=${Math.random()}`, { typeCode: 'ADD_TASK_TAG' })
+      if (code === 200) {
+        this.remarkOpt = data || []
+      }
+    },
+    async preview(row) {
+      this.visibleP = true
+      this.seeRow = row
+      this.previewUrl = `/api/onlinePreview?beid=${row.beid}`
+      this.previewName = row.fileName
+      this.previewSameOrg = this.seeTypes.test(row.fileName)
+    },
+    closeSee() {
+      this.previewUrl && URL.revokeObjectURL(this.previewUrl)
+      this.previewUrl = undefined
+      this.visibleP = false
+    },
+    async downFile(row) {
+      const blob = await axios.get(
+        this.apiPrefix
+          ? this.apiPrefix + `/neams/eamsbaserecord/download/${row.beid}`
+          : `/neams/eamsbaserecord/download/${row.beid}`,
+        null,
+        {
+          responseType: 'blob',
+          loading: false
+        }
+      )
+      this.$downloadBlob(blob, blob.name)
+    }
+  }
+}
+</script>
+<style scoped>
+.file-upload-table_preview-pn {
+  position: absolute;
+  right: 46px;
+  top: 10px;
+}
+.n20-approve-wrap .el-timeline {
+  padding-left: 80px;
+  padding-top: 10px;
+}
+</style>

package/src/components/ApprovalRecord/approvalImgPro/child.vue

@@ -46,7 +46,7 @@
             </tr>
             <tr v-for="(item, i) in assigneeEnd" :key="i">
               <td>{{ item.assignee }}</td>
-              <td class="text-c">{{ item.optResult }}</td>
+              <td class="text-c">{{ item.optName }}</td>
               <td>{{ item.suggestion }}</td>
               <td>{{ item.endTime }}</td>
             </tr>