n20-common-lib 3.3.0 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -10,7 +10,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "build:Jenkins_1": "vue-cli-service build --serverConfig ./server-config-jenkins.jsonc",
-    "build:css": "node build_css",
+    "build:css": "node build_css.js",
     "build:dev": "vue-cli-service build",
     "build:doc": "node versionInfo.js && vue-cli-service build --testTheme",
     "build:gzip": "vue-cli-service build --gzip",

package/src/assets/css/_coreLib.scss

@@ -60,6 +60,7 @@
 @import './v3/collapse.scss';
 @import './v3/collapse-link.scss';
 @import './v3/anchor.scss';
+@import './v3/approval-card.scss';
 @import './info-card.scss';
 
 //临时引入

package/src/assets/css/v3/approval-card.scss

@@ -0,0 +1,513 @@
+/* v3 版本 ApprovalCard 审批卡片样式 */
+.v3-approval-card,
+.v3-approval-card__preview-drawer {
+  --v3-approval-primary: var(--primary-6, #007aff);
+  --v3-approval-success: var(--success-7, #2db185);
+  --v3-approval-danger: var(--danger-6, #f53f3f);
+  --v3-approval-warning: var(--warning-6, #ff7d00);
+  --v3-approval-text-1: var(--text-1, #1d2129);
+  --v3-approval-text-2: var(--text-2, #4e5969);
+  --v3-approval-text-3: var(--text-3, #86909c);
+  --v3-approval-border: var(--border-2, #e5e6eb);
+  --v3-approval-fill: var(--fill-1, #f7f8fa);
+}
+
+.v3-approval-card {
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--v3-approval-text-1);
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+}
+
+.v3-approval-card *,
+.v3-approval-card *::before,
+.v3-approval-card *::after {
+  box-sizing: border-box;
+}
+
+.v3-approval-card__timeline {
+  width: 100%;
+}
+
+.v3-approval-card__item {
+  position: relative;
+  width: 100%;
+  padding: 0 0 32px 24px;
+}
+
+.v3-approval-card__item:last-child {
+  padding-bottom: 0;
+}
+
+.v3-approval-card__track {
+  position: absolute;
+  top: 10px;
+  bottom: -10px;
+  left: 7px;
+  width: 1px;
+  background: var(--v3-approval-border);
+}
+
+.v3-approval-card__dot {
+  position: absolute;
+  top: 8px;
+  left: 5px;
+  width: 6px;
+  height: 6px;
+  border-radius: 1px;
+  background: var(--v3-approval-primary);
+}
+
+.v3-approval-card__item.is-waiting .v3-approval-card__dot {
+  background: #c9cdd4;
+}
+
+.v3-approval-card__item.is-approval .v3-approval-card__dot {
+  background: var(--v3-approval-success);
+}
+
+.v3-approval-card__item.is-reject .v3-approval-card__dot {
+  background: var(--v3-approval-danger);
+}
+
+.v3-approval-card__item.is-revocation .v3-approval-card__dot {
+  background: var(--v3-approval-warning);
+}
+
+.v3-approval-card__node-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.v3-approval-card__title-row,
+.v3-approval-card__organization-row,
+.v3-approval-card__review-header,
+.v3-approval-card__drawer-header,
+.v3-approval-card__child-title-row {
+  display: flex;
+  align-items: center;
+}
+
+.v3-approval-card__title {
+  overflow: hidden;
+  color: var(--v3-approval-text-1);
+  font-weight: 500;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v3-approval-card__item.is-reject .v3-approval-card__title {
+  color: var(--v3-approval-danger);
+}
+
+.v3-approval-card__item.is-revocation .v3-approval-card__title {
+  color: var(--v3-approval-warning);
+}
+
+.v3-approval-card__count {
+  flex: none;
+  color: var(--v3-approval-text-2);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.v3-approval-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--v3-approval-text-3);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.v3-approval-card__meta-divider,
+.v3-approval-card__file-divider {
+  width: 1px;
+  height: 12px;
+  background: var(--v3-approval-border);
+}
+
+.v3-approval-card__cost {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--v3-approval-text-2);
+}
+
+.v3-approval-card__cost i {
+  font-size: 14px;
+}
+
+.v3-approval-card__panel,
+.v3-approval-card__add-task {
+  width: 100%;
+  margin-top: 8px;
+  border-radius: 4px;
+}
+
+.v3-approval-card__panel {
+  padding: 8px 12px;
+  background: var(--v3-approval-fill);
+}
+
+.v3-approval-card__item.is-approval .v3-approval-card__person-panel,
+.v3-approval-card__item.is-reject .v3-approval-card__person-panel {
+  border: 1px solid var(--v3-approval-border);
+  background: #fff;
+}
+
+.v3-approval-card__panel-title {
+  margin-bottom: 8px;
+  color: var(--v3-approval-text-2);
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.v3-approval-card__pending-users {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 4px;
+  width: 100%;
+}
+
+.v3-approval-card__pending-user {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  line-height: 22px;
+  white-space: nowrap;
+}
+
+.v3-approval-card__separator {
+  color: var(--v3-approval-text-3);
+  font-weight: 500;
+}
+
+.v3-approval-card__avatar {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--v3-approval-border);
+  border-radius: 50%;
+  background: #fff;
+  color: var(--v3-approval-primary);
+  font-size: 14px;
+}
+
+.v3-approval-card__avatar--small {
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+}
+
+.v3-approval-card__avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.v3-approval-card__add-task {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: #e8f7ff;
+  color: var(--v3-approval-text-2);
+  line-height: 22px;
+}
+
+.v3-approval-card__add-task-tag {
+  margin-left: 4px;
+  color: var(--v3-approval-primary);
+}
+
+.v3-approval-card__organization-row,
+.v3-approval-card__review-header,
+.v3-approval-card__drawer-header,
+.v3-approval-card__child-title-row {
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.v3-approval-card__organization {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--v3-approval-text-1);
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v3-approval-card__link-button,
+.v3-approval-card__sub-process-trigger,
+.v3-approval-card__file-actions button,
+.v3-approval-card__child-file {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.v3-approval-card__link-button {
+  flex: none;
+  color: var(--v3-approval-primary);
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.v3-approval-card__assignee-pill {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  margin-top: 8px;
+  padding: 2px 12px 2px 2px;
+  border: 1px solid var(--v3-approval-border);
+  border-radius: 40px;
+  background: #fff;
+  line-height: 22px;
+}
+
+.v3-approval-card__assignee-name {
+  overflow: hidden;
+  margin-left: 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v3-approval-card__terminal {
+  flex: none;
+  margin-left: 4px;
+  color: var(--v3-approval-text-2);
+  font-size: 13px;
+}
+
+.v3-approval-card__secondary-line {
+  margin-top: 8px;
+  color: var(--v3-approval-text-2);
+  line-height: 22px;
+}
+
+.v3-approval-card__opinion,
+.v3-approval-card__review-content {
+  margin-top: 8px;
+  padding: 4px 12px;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--v3-approval-text-2);
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.v3-approval-card__review-panel,
+.v3-approval-card__file-panel,
+.v3-approval-card__sub-process {
+  color: var(--v3-approval-text-1);
+}
+
+.v3-approval-card__collapse-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.v3-approval-card__review-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.v3-approval-card__review-row + .v3-approval-card__review-row {
+  margin-top: 4px;
+}
+
+.v3-approval-card__review-row.is-stacked {
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.v3-approval-card__sub-process-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: var(--v3-approval-primary);
+  line-height: 22px;
+  text-align: left;
+}
+
+.v3-approval-card__child-list {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--v3-approval-border);
+}
+
+.v3-approval-card__child-item + .v3-approval-card__child-item {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed var(--v3-approval-border);
+}
+
+.v3-approval-card__child-title {
+  color: var(--v3-approval-text-1);
+  font-weight: 500;
+}
+
+.v3-approval-card__child-title.is-reject,
+.v3-approval-card__child-title.is-reject .v3-approval-card__title {
+  color: var(--v3-approval-danger);
+}
+
+.v3-approval-card__child-title.is-revocation {
+  color: var(--v3-approval-warning);
+}
+
+.v3-approval-card__child-time {
+  flex: none;
+  color: var(--v3-approval-text-3);
+  font-size: 12px;
+}
+
+.v3-approval-card__child-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.v3-approval-card__child-review {
+  margin-top: 8px;
+}
+
+.v3-approval-card__child-file {
+  color: var(--v3-approval-primary);
+}
+
+.v3-approval-card__file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.v3-approval-card__file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 8px;
+  border: 1px solid var(--v3-approval-border);
+  border-radius: 4px;
+  background: #fff;
+}
+
+.v3-approval-card__file-main,
+.v3-approval-card__file-actions {
+  display: flex;
+  align-items: center;
+}
+
+.v3-approval-card__file-main {
+  min-width: 0;
+  gap: 8px;
+}
+
+.v3-approval-card__file-icon {
+  display: block;
+  flex: none;
+  width: 24px;
+  height: 24px;
+}
+
+.v3-approval-card__file-name {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v3-approval-card__file-actions {
+  flex: none;
+  gap: 12px;
+  margin-left: 16px;
+}
+
+.v3-approval-card__file-actions button {
+  color: var(--v3-approval-text-2);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.v3-approval-card__file-actions button:hover {
+  color: var(--v3-approval-primary);
+}
+
+.v3-approval-card__preview-drawer .el-drawer__header {
+  margin-bottom: 0;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--v3-approval-border);
+}
+
+.v3-approval-card__drawer-header {
+  width: 100%;
+  padding-right: 16px;
+}
+
+.v3-approval-card__drawer-title {
+  color: var(--v3-approval-text-1);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.v3-approval-card__drawer-body {
+  height: 100%;
+  padding: 16px 20px 20px;
+}
+
+.v3-approval-card__preview-content {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.v3-approval-card__preview-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  color: var(--v3-approval-text-3);
+}
+
+.v3-approval-card__preview-fallback > i {
+  font-size: 60px;
+}
+
+@media (max-width: 768px) {
+  .v3-approval-card__preview-drawer .v3-approval-card__drawer {
+    width: 100% !important;
+  }
+
+  .v3-approval-card__meta,
+  .v3-approval-card__review-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .v3-approval-card__meta-divider {
+    display: none;
+  }
+}

package/src/components/ApprovalButtons/getApprovalConfig.js

@@ -0,0 +1,87 @@
+import getJsonc from '../../assets/getJsonc.js'
+import axios from '../../utils/axios'
+
+const DYNAMIC_CONFIG_URL = '/bems/portal/sysAppConfig/listAllConfig'
+const DYNAMIC_CONFIG_QUERY = {
+  systemNos: ['BEMS'],
+  menuNos: ['BG_CONFIG'],
+  moduleNos: ['activiti'],
+  groupNos: [],
+  configKeys: []
+}
+
+let backendConfigPromise
+
+function parseConfigValue(value) {
+  if (typeof value !== 'string') return value
+  try {
+    return JSON.parse(value)
+  } catch (error) {
+    return value
+  }
+}
+
+function setConfigValue(target, path, value) {
+  path.reduce((current, key, index) => {
+    if (index === path.length - 1) {
+      current[key] = value
+      return current
+    }
+    if (!current[key] || typeof current[key] !== 'object') {
+      current[key] = {}
+    }
+    return current[key]
+  }, target)
+}
+
+function decodeConfigList(base64) {
+  if (!base64) return []
+  const binary = window.atob(base64)
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
+  const configList = JSON.parse(new TextDecoder('utf-8').decode(bytes))
+  return Array.isArray(configList) ? configList : []
+}
+
+function mergeConfigList(configList) {
+  return configList.reduce((config, item) => {
+    if (!item || !item.configKey) return config
+    setConfigValue(config, item.configKey.split('.'), parseConfigValue(item.configValue))
+    return config
+  }, {})
+}
+
+async function getBackendConfig() {
+  if (!backendConfigPromise) {
+    backendConfigPromise = (async () => {
+      const { data } = await axios.post(DYNAMIC_CONFIG_URL, DYNAMIC_CONFIG_QUERY, {
+        loading: false,
+        noMsg: true
+      })
+      const config = mergeConfigList(decodeConfigList(data))
+      return {
+        ...config,
+        ...(config.nstc && config.nstc.activiti ? config.nstc.activiti : {})
+      }
+    })()
+  }
+
+  try {
+    return await backendConfigPromise
+  } catch (error) {
+    // 接口不可用时不缓存失败结果，后续组件实例仍可重新探测新配置接口。
+    backendConfigPromise = undefined
+    throw error
+  }
+}
+
+/**
+ * 优先读取后台管理配置，低版本门户未提供接口时回退 JSONC。
+ * @returns {Promise<Object>}
+ */
+export default async function getApprovalConfig() {
+  try {
+    return await getBackendConfig()
+  } catch (error) {
+    return getJsonc('portal/server-config.jsonc', null, true)
+  }
+}

package/src/components/ApprovalButtons/index.vue

@@ -349,6 +349,7 @@ import ShowAppOpi from './showAppOpi.vue'
 import ShowOtherAtt from './showOtherAttr.vue'
 import ShowOtherAttNew from './showOtherAttrNew.vue'
 import { toExaminePath } from './specialHandle'
+import getApprovalConfig from './getApprovalConfig'
 
 import getJsonc from '../../assets/getJsonc.js'
 import { closeTagsForBackPage } from '../../plugins/CompatibleOld'
@@ -644,23 +645,19 @@ export default {
       console.log(code, data)
     },
     // 意见是否必填
-    getConfiguration() {
-      getJsonc('portal/server-config.jsonc', null, true)
-        .then(({ opinionRequired, showApproveTo }) => {
-          this.requiredC = opinionRequired ?? this.required
-          this.showApproveTo = showApproveTo ?? true
-          // 读取该工作流是否意见必填
-          if (this.$route.query.remarkIsMust !== undefined) {
-            this.requiredC = this.$route.query.remarkIsMust === '1'
-          }
-        })
-        .catch(() => {
-          this.requiredC = this.required
-          // 读取该工作流是否意见必填
-          if (this.$route.query.remarkIsMust !== undefined) {
-            this.requiredC = this.$route.query.remarkIsMust === '1'
-          }
-        })
+    async getConfiguration() {
+      try {
+        const { opinionRequired, showApproveTo } = await getApprovalConfig()
+        this.requiredC = opinionRequired ?? this.required
+        this.showApproveTo = showApproveTo ?? true
+      } catch (error) {
+        this.requiredC = this.required
+      } finally {
+        // 工作流节点配置优先于全局审批意见必填配置。
+        if (this.$route.query.remarkIsMust !== undefined) {
+          this.requiredC = this.$route.query.remarkIsMust === '1'
+        }
+      }
     },
     getTodoList() {
       return new Promise((resolve, reject) => {

package/src/components/ApprovalRecord/index.vue

@@ -61,7 +61,7 @@
 import expandableWrap from '../Expandable/main.vue'
 import approvalCard from '../ApprovalCard/index.vue'
 import approvalImg from './approvalImg.vue'
-import getJsonc from '../../assets/getJsonc'
+import getApprovalConfig from '../ApprovalButtons/getApprovalConfig'
 export default {
   name: 'ApprovalRecord',
   components: {
@@ -99,10 +99,14 @@ export default {
       return this.procInstId || this.$route.query.processInstanceId
     }
   },
-  mounted() {
-    getJsonc('portal/server-config.jsonc').then(({ approvalMode }) => {
+  async mounted() {
+    try {
+      const { approvalMode } = await getApprovalConfig()
       this.approvalMode = approvalMode || 'dialog'
-    })
+    } catch (error) {
+      // 后台配置和旧 JSONC 都不可用时保留原有弹窗展示模式。
+      this.approvalMode = 'dialog'
+    }
   }
 }
 </script>