imatrix-ui 0.0.1-dsn

package/packages/workflow-history-list/src/workflow-history-list.vue

@@ -0,0 +1,291 @@
+<template>
+  <el-table
+    v-if="loaded"
+    :data="histories"
+    element-loading-text="Loading"
+    border
+    fit
+    highlight-current-row
+    row-key="uuid"
+    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    lazy
+    :load="getChildren"
+    :max-height="tableMaxHeight"
+  >
+    <el-table-column
+      :label="$t('workflowHistoryList.index')"
+      align="left"
+      width="80px"
+    >
+      <template v-slot="scope">
+        {{ scope.$index + 1 }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('workflowHistoryList.taskName')"
+      align="left"
+      width="250"
+    >
+      <template v-slot="scope">
+        <span
+          v-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_START'
+          "
+          >{{ $t('workflowHistoryList.processStart') }}</span
+        >
+        <span
+          v-else-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
+          "
+          >{{ $t('workflowHistoryList.processEnd') }}</span
+        >
+        <span v-else-if="scope.row.current" style="color: #e6a23c">{{
+          i18nTaskName(scope.row)
+        }}</span>
+        <span v-else-if="!scope.row.special">{{
+          i18nTaskName(scope.row)
+        }}</span>
+        <span v-else-if="scope.row.special === true" style="color: red">{{
+          i18nTaskName(scope.row) +
+          '[' +
+          $t('workflowHistoryList.specailText') +
+          ']'
+        }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('workflowHistoryList.operator')"
+      align="left"
+      width="250"
+    >
+      <template v-slot="scope">
+        <span
+          v-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
+          "
+        />
+        <span v-else>{{ scope.row.creatorName }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('workflowHistoryList.operatorLg')"
+      align="left"
+      width="250"
+    >
+      <template v-slot="scope">
+        <span
+          v-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
+          "
+        />
+        <span v-else>{{ scope.row.creator }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('workflowHistoryList.operatorDept')"
+      align="left"
+      width="150"
+    >
+      <template v-slot="scope">
+        <span
+          v-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
+          "
+        />
+        <span v-else>{{ scope.row.departmentName }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('workflowHistoryList.operationTime')"
+      align="left"
+      width="200"
+    >
+      <template v-slot="scope">
+        <span
+          v-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
+          "
+        />
+        <span v-else>{{ scope.row.formatCreatedTime }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('workflowHistoryList.operation')"
+      align="left"
+      width="400"
+    >
+      <template v-slot="scope">
+        <span
+          v-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
+          "
+        />
+        <span v-else-if="scope.row.current" style="color: #e6a23c"
+          >{{ scope.row.transactionResult }}
+          {{ $t('workflowHistoryList.toDoText') }}</span
+        >
+        <span v-else>{{ i18nOperation(scope.row) }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('workflowHistoryList.opinion')"
+      align="left"
+      width="400"
+    >
+      <template v-slot="scope">
+        <span
+          v-if="
+            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
+          "
+        />
+        <span v-else>{{ scope.row.opinion }}</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import * as Vue from 'vue'
+import { i18nOperation } from '../../../src/utils/workflow-util'
+import { getLanguageWithLocale } from '../../../src/utils/util'
+import ApiJs from './api'
+export default {
+  name: 'WorkflowHistoryList',
+  props: {
+    workflowId: {
+      type: Number,
+      default: null,
+    },
+    // 流转历史列表，在图形流转历史中查看子流程流转历史需要使用
+    historyList: {
+      type: Array,
+      default: null,
+    },
+    // 主子流程的国际化配置
+    allProcessI18n: {
+      type: Object,
+      default: null,
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: null,
+    },
+  },
+  data() {
+    let histories = null
+    if (this.historyList && this.historyList.length > 0) {
+      histories = [].concat(this.historyList)
+    }
+    return {
+      loaded: false,
+      histories,
+      processI18n: null,
+      processNameI18n: null,
+      tableMaxHeight: null,
+    }
+  },
+  computed: {},
+  provide() {
+    return {}
+  },
+  created() {
+    this.getI18nSet().then((processI18n) => {
+      this.processI18n = processI18n
+      if (!this.histories || this.histories === null) {
+        this.getData()
+      } else {
+        this.loaded = true
+      }
+    })
+  },
+  mounted() {},
+  methods: {
+    ...ApiJs,
+    getData() {
+      this.$http
+        .get(
+          window.$vueApp.config.globalProperties.baseAPI +
+            '/wf-editor/instance-histories/' +
+            this.workflowId
+        )
+        .then((data) => {
+          this.histories = data.histories
+          if (data && data.currentTasks) {
+            this.histories = this.histories.concat(data.currentTasks)
+          }
+          this.loaded = true
+          if (this.maxHeight) {
+            this.tableMaxHeight = Number(this.maxHeight)
+          } else {
+            if (this.$parent.$el.offsetHeight) {
+              this.tableMaxHeight = this.$parent.$el.offsetHeight
+            }
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+          this.loaded = true
+        })
+    },
+    getI18nSet() {
+      return new Promise((resolve, reject) => {
+        if (this.allProcessI18n) {
+          resolve(this.allProcessI18n)
+        } else {
+          this.$http
+            .get(
+              window.$vueApp.config.globalProperties.baseAPI +
+                '/wf-editor/i18n-settings/get-bundle-info?workflowId=' +
+                this.workflowId
+            )
+            .then((processI18n) => {
+              resolve(processI18n)
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        }
+      })
+    },
+    i18nOperation(row) {
+      let oneProcessI18n
+      let processNameI18n
+      const language = getLanguageWithLocale()
+      const bundleCode = row.bundleCode
+      if (bundleCode && bundleCode !== '' && this.processI18n) {
+        oneProcessI18n = this.processI18n[bundleCode]
+      }
+      if (oneProcessI18n && oneProcessI18n['processName']) {
+        processNameI18n = oneProcessI18n['processName'][language]
+      }
+      return i18nOperation(row, processNameI18n, oneProcessI18n, language)
+    },
+    i18nTaskName(row) {
+      let oneProcessI18n
+      const bundleCode = row.bundleCode
+      if (bundleCode && bundleCode !== '' && this.processI18n) {
+        oneProcessI18n = this.processI18n[bundleCode]
+      }
+      let taskName = null
+      // if (!bundleCode && this.processI18n && Object.keys(this.processI18n).length === 1) {
+      //   // 表示是主流程的国际化配置
+      //   const bundleCodes = Object.keys(this.processI18n)
+      //   oneProcessI18n = this.processI18n[bundleCodes[0]]
+      // }
+      const i18nKey = row.i18nKey
+      if (i18nKey && oneProcessI18n && oneProcessI18n[i18nKey]) {
+        // 根据locale获得语言编码，例如：cn->zh_CN,en->en_US
+        const language = getLanguageWithLocale()
+        taskName = oneProcessI18n[i18nKey][language]
+      }
+      if (!taskName || taskName === null) {
+        taskName = row.taskName
+      }
+      return taskName
+    },
+    getChildren(row, treeNode, resolve) {
+      resolve(row.children)
+    },
+  },
+}
+</script>

package/packages/workgroup-tree/index.js

@@ -0,0 +1,6 @@
+import WorkgroupTree from './src/workgroup-tree.vue'
+WorkgroupTree.install = function (Vue) {
+  Vue.component(WorkgroupTree.name, WorkgroupTree)
+}
+
+export default WorkgroupTree

package/packages/workgroup-tree/src/workgroup-tree.vue

@@ -0,0 +1,87 @@
+<template>
+	<div>
+		<el-dialog
+				:close-on-click-modal="false"
+				:title="myTitle"
+				:width="multiple ? '60%' : '40%'"
+				append-to-body
+				class="user-tree"
+				model-value
+				@close="$emit('close')"
+				@closed="$emit('closed')"
+				@open="$emit('open')"
+				@opend="$emit('opend')"
+		>
+			<inline-workgroup-tree
+					ref="workgroupTree"
+					:branch-info="branchInfo"
+					:multiple="multiple"
+					@result="result"
+			/>
+			<template v-slot:footer>
+				<div class="dialog-footer">
+					<el-button class="button--default" size="default" @click="$emit('close')">
+						{{ $t('imatrixUIPublicModel.cancel') }}
+					</el-button>
+					<el-button size="default" type="primary" @click="selectWorkgroup">
+						{{ $t('imatrixUIPublicModel.sure') }}
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {$emit} from '../../utils/gogocodeTransfer'
+import InlineWorkgroupTree from '../../workgroup-tree-inline/src/workgroup-tree-inline.vue'
+
+export default {
+	name: 'WorkgroupTree',
+	components: {
+		InlineWorkgroupTree,
+	},
+	props: {
+		// 是否是多选树，默认是true
+		multiple: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		branchInfo: {
+			type: Array,
+			default: null,
+		},
+		// 弹框的标题
+		title: {
+			type: String,
+			default: null,
+		},
+		// 弹框的宽度
+		width: {
+			type: String,
+			default: '60%',
+		},
+	},
+	data() {
+		let myTitle = this.$t('imatrixUIMessage.pleaseSelectATeam')
+		if (this.title) {
+			myTitle = this.title
+		}
+		return {
+			myTitle,
+		}
+	},
+	methods: {
+		// 工作组单选回调
+		result(selectNodeInfo) {
+			$emit(this, 'close', selectNodeInfo)
+		},
+		// 嵌入树，多选时，点击确定时调用的方法
+		selectWorkgroup() {
+			this.$refs.workgroupTree.selectWorkgroup()
+		},
+	},
+	emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed'],
+}
+</script>

package/packages/workgroup-tree-inline/index.js

@@ -0,0 +1,6 @@
+import InlineWorkgroupTree from './src/workgroup-tree-inline.vue'
+InlineWorkgroupTree.install = function (Vue) {
+  Vue.component(InlineWorkgroupTree.name, InlineWorkgroupTree)
+}
+
+export default InlineWorkgroupTree

package/packages/workgroup-tree-inline/src/search-result.vue

@@ -0,0 +1,226 @@
+<template>
+	<div style="height: 100%">
+		<el-table
+				ref="superGrid"
+				:data="gridData"
+				:max-height="myHeight"
+				:row-class-name="tableRowClassName"
+				border
+				fit
+				row-key="id"
+				@row-click="rowClick"
+				@row-dblclick="rowDblclick"
+		>
+			<el-table-column v-if="multiple === false" fixed width="60">
+				<template v-slot="scope">
+					<el-radio
+							v-model="singleWorkgroupIndex"
+							:label="scope.$index"
+							@change="selectWorkgroup"
+					>
+						{{ scope.$index + 1 }}
+					</el-radio>
+				</template>
+			</el-table-column>
+			<el-table-column
+					v-if="multiple && isSearchResult"
+					:label="$t('imatrixUIPublicModel.edit')"
+					align="center"
+					fixed
+					width="60px"
+			>
+				<template v-slot="scope">
+					<div>
+						<el-button
+								:disabled="isDisable(scope.row)"
+								:icon="ElIconPlus"
+								circle
+								size="default"
+								type="primary"
+								@click="addWorkgroup(scope.$index, scope.row)"
+						/>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column
+					v-if="multiple && !isSearchResult"
+					:label="$t('imatrixUIPublicModel.edit')"
+					align="center"
+					fixed
+					width="60px"
+			>
+				<template v-slot="scope">
+					<div>
+						<el-button
+								:icon="ElIconDelete"
+								circle
+								size="default"
+								type="danger"
+								@click="removeWorkgroup(scope.$index, scope.row)"
+						/>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column
+					v-if="multiple"
+					:label="$t('superGrid.index')"
+					align="center"
+					width="60px"
+			>
+				<template v-slot="scope">
+					{{ scope.$index + 1 }}
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('workgroupTree.workingGroupName')"
+					:width="110"
+					prop="name"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.name" class="ellipsis cell--span">{{
+            scope.row.name
+          }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('workgroupTree.workingGroupNumber')"
+					:width="110"
+					prop="code"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.code" class="ellipsis cell--span">{{
+            scope.row.code
+          }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('workgroupTree.workgroupDescription')"
+					:width="300"
+					prop="description"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.description" class="ellipsis cell--span">{{
+            scope.row.description
+          }}</span>
+				</template>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+import {Plus as ElIconPlus, Delete as ElIconDelete} from '@element-plus/icons-vue'
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+
+export default {
+	data() {
+		let tableHeight = this.height
+		tableHeight = tableHeight.substring(0, tableHeight.indexOf('px'))
+		const myHeight = parseInt(tableHeight) + 30 + 'px'
+		return {
+			// 选中的用户序号
+			singleWorkgroupIndex: null,
+			selectedWorkgroup: null,
+			myHeight,
+			language: !window.$locale ? 'cn' : window.$locale,
+			ElIconPlus,
+			ElIconDelete,
+		}
+	},
+	name: 'WorkgroupResult',
+	props: {
+		gridData: {
+			type: Array,
+			default: null,
+		},
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		// 多选树时是否是查询结果列表，用于控制“操作”列按钮的显示
+		isSearchResult: {
+			type: Boolean,
+			default: true,
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		selectResult: {
+			type: Array,
+			default: function () {
+				return []
+			},
+		},
+	},
+	created() {
+	},
+	methods: {
+		// 移除工作组
+		removeWorkgroup(index, row) {
+			$emit(this, 'removeWorkgroup', index, row)
+		},
+		// 添加工作组
+		addWorkgroup(index, row) {
+			$emit(this, 'addWorkgroup', index, row)
+		},
+		// 选中工作组
+		selectWorkgroup(selectVal) {
+			$emit(this, 'selectResult', this.gridData[selectVal])
+		},
+		rowClick(row, column, event) {
+			this.singleWorkgroupIndex = row.row_index
+			$emit(this, 'selectResult', row)
+		},
+		tableRowClassName({row, rowIndex}) {
+			row.row_index = rowIndex
+		},
+		// 双击添加工作组
+		rowDblclick(row, column, event) {
+			if (this.multiple) {
+				$emit(this, 'addWorkgroup', null, row)
+			} else {
+				$emit(this, 'resultRowDblclick', row)
+			}
+		},
+		isDisable(row) {
+			if (this.selectResult) {
+				const containWorkgroups = this.selectResult.filter(
+						this.filterWorkgroup(row)
+				)
+				if (containWorkgroups && containWorkgroups.length > 0) {
+					return true
+				}
+			}
+			return false
+		},
+		// 判断工作组是否存在的过滤器
+		filterWorkgroup(queryWorkgroup) {
+			return (workgroup) => {
+				return workgroup.id === queryWorkgroup.id
+			}
+		},
+	},
+	emits: [
+		'removeWorkgroup',
+		'addWorkgroup',
+		'selectResult',
+		'resultRowDblclick',
+		,
+	],
+}
+</script>
+
+<style>
+.searchResult {
+	color: red;
+}
+
+.inline-select-custom {
+	width: 100px;
+}
+
+.inline-input-custom {
+	width: 98%;
+}
+</style>