From 3aedad63dd01f1fc5154cb520af32edab967d6e0 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周一, 12 5月 2025 09:15:26 +0800
Subject: [PATCH] Merge branch 'master' of http://222.71.245.114:9086/r/HIA24016N_PipeLineDemo
---
PipeLineLems/pipelinelems_web/src/widgets/OrderManagement-main/components/collapse-table/index.vue | 569 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 569 insertions(+), 0 deletions(-)
diff --git a/PipeLineLems/pipelinelems_web/src/widgets/OrderManagement-main/components/collapse-table/index.vue b/PipeLineLems/pipelinelems_web/src/widgets/OrderManagement-main/components/collapse-table/index.vue
new file mode 100644
index 0000000..85bf722
--- /dev/null
+++ b/PipeLineLems/pipelinelems_web/src/widgets/OrderManagement-main/components/collapse-table/index.vue
@@ -0,0 +1,569 @@
+<template>
+ <div>
+ <Collapse :title="_t(title)" :status="status" style="margin-top: 12px">
+ <template #header-left v-if="hasProductionLineStructure">
+ <el-select
+ v-if="status != -2"
+ style="width: 140px; margin-left: 10px"
+ v-model="orderSegMap[status]"
+ @change="onChangeSegment"
+ >
+ <el-option :label="_t('鍏ㄩ儴')" value=""></el-option>
+ <el-option
+ v-for="item in productionOptions"
+ :key="item?.value"
+ :label="item?.name"
+ :value="item?.value"
+ ></el-option>
+ </el-select>
+ </template>
+ <template #header-right>
+ <div class="header-right">
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.DOWNLOADTEMPLATE)"
+ class="export"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.DOWNLOADTEMPLATE)"
+ >
+ {{ _t('瀵煎嚭妯℃澘') }}
+ </div>
+ <el-upload
+ action="#"
+ accept=".xlsx"
+ :show-file-list="false"
+ :http-request="onImport"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.UPLOAD)"
+ >
+ <div class="import">{{ _t('瀵煎叆') }}</div>
+ </el-upload>
+
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.DELIVER)"
+ class="deliver"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.DELIVER)"
+ v-if="controlMode"
+ >
+ {{ _t('涓嬪彂') }}
+ </div>
+
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.ACTIVATION)"
+ class="edit"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.ACTIVATION)"
+ >
+ {{ _t('婵�娲�') }}
+ </div>
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.EDIT)"
+ class="delete"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.EDIT)"
+ >
+ {{ _t('缂栬緫') }}
+ </div>
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.PAUSE)"
+ class="pause"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.PAUSE)"
+ >
+ {{ _t('鏆傚仠') }}
+ </div>
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.REVOKE)"
+ class="delete"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.REVOKE)"
+ >
+ {{ _t('鎾ら攢') }}
+ </div>
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.COMPLTE)"
+ class="deliver"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.COMPLTE)"
+ >
+ {{ _t('瀹屾垚') }}
+ </div>
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.FINISHED)"
+ class="finished"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.FINISHED)"
+ >
+ {{ _t('缁撴潫') }}
+ </div>
+ <div
+ @click="onAction(ORDER_ACTIONS_STATUS.DELETE)"
+ class="delete"
+ v-show="buttons.includes(ORDER_ACTIONS_STATUS.DELETE)"
+ >
+ {{ _t('鍒犻櫎') }}
+ </div>
+ </div>
+ </template>
+ <template #content>
+ <Table
+ ref="tableRef"
+ :total="total"
+ :pageSize="paginationConfig.pageSize"
+ v-model:dataSource="computedData"
+ :columns="columns"
+ :isSeq="true"
+ :isChecked="true"
+ maxHeight="330px"
+ id="id"
+ @page="onPage"
+ @check="handleSelectionChange"
+ >
+ <template
+ #[item.field]="{ row }"
+ :key="item.field"
+ v-for="item in columnsSlots"
+ >
+ <span v-if="item.field == 'productModel'">{{
+ row.product.model || '-'
+ }}</span>
+ <span v-else>{{
+ (item.formatter
+ ? item.formatter(row[item.field])
+ : row.extraProperties[item.field] || row[item.field]) || '-'
+ }}</span>
+ </template>
+ <template #segments="{ row }" v-if="[1, 0, -1, -2].includes(status)">
+ <Text :truncated="true" :title="currentSegment(row)">{{
+ currentSegment(row)
+ }}</Text>
+ </template>
+ <template #actionSort="{ row, index }" v-if="!hiddenSort">
+ <i
+ class="iconfont icon-shang2 sortClass"
+ :class="{ prohibit: index === 0 }"
+ @click="onSort(row, index, 'top')"
+ ></i>
+ <i
+ class="iconfont icon-xia2 sortClass"
+ :class="{ prohibit: index === tableData.length - 1 }"
+ @click="onSort(row, index, 'down')"
+ ></i>
+ </template>
+ </Table>
+ </template>
+ </Collapse>
+ <div style="width: 100%; height: 12px"></div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import Collapse from '../collapse/index.vue'
+import type { IProductTableItem } from '../../api/product'
+import { ref, reactive, computed, watch } from 'vue'
+import { useVModel } from '@vueuse/core'
+import api from '../../api/product-setting'
+import { createInjector } from '../../hooks/use-permission'
+import sdk from 'sdk'
+import Table from '@/components/Table/Table'
+import Text from '@/components/Text/Text'
+import { _t } from '../../app'
+import { getEnum } from '../../enum'
+import { useGlobalState } from '@/libs/Store/Store'
+import { orderSegMap } from '../../state'
+const { ORDER_ACTIONS_STATUS } = getEnum()
+
+const $props = defineProps<{
+ modelValue: any[]
+ tableHead: any[]
+ title: string
+ status: number
+ total: number
+ hiddenSort?: boolean
+ buttons: string[]
+ isStartFlushList: boolean
+}>()
+
+const emit = defineEmits(['onAction', 'page', 'emitSegment'])
+const tableRef = ref<any>()
+
+const { isHasPermission } = createInjector()
+const { systemConfig, productionLineList } = useGlobalState()
+const productionOptions = computed(() => {
+ return productionLineList.state.value?.map((item) => {
+ return item
+ })
+})
+// 1鑷姩灞忚斀锛�0鎵嬪姩淇濈暀
+const controlMode = computed(() => {
+ const { ExecuteMode } = systemConfig.state.value
+ return ExecuteMode == '0' && $props.status == 0
+})
+/**
+ * 浜х嚎娈�
+ */
+const hasProductionLineStructure = computed(() => {
+ const { ProductionLineStructure } = systemConfig.state.value
+ return ProductionLineStructure == 1
+})
+
+const tableSelectList = ref<IProductTableItem[]>([])
+const tableData: any = useVModel($props)
+const computedData: any = computed(() => {
+ let _list = tableData.value.map((item: any, idx: number) => ({
+ ...item,
+ seq:
+ (paginationConfig.currentPage - 1) * paginationConfig.pageSize + idx + 1,
+ }))
+ return _list
+})
+
+const columns = computed(() => {
+ const data = $props.tableHead.map((item: any) => {
+ return {
+ ...item,
+ title: item.label,
+ field: item.prop,
+ }
+ })
+ // 娉ㄦ剰涓嶈鐢ㄤ腑鏂囧悕浣滀负鍒ゆ柇
+ return $props.title == _t('鐢熶骇涓�')
+ ? [{ title: _t('搴忓彿'), field: 'seq', type: 'seq' }, ...data]
+ : [
+ { title: _t('搴忓彿'), field: 'seq', type: 'seq' },
+ {
+ title: _t('鎺掑簭'),
+ field: 'actionSort',
+ },
+ ...data,
+ ]
+})
+
+/**
+ *
+ * 杩囨护actionSort
+ **/
+const columnsSlots = computed(() => {
+ return columns.value.filter((item: any) => {
+ return item.field !== 'actionSort'
+ })
+})
+
+const currentSegment = computed(() => {
+ return (row: Record<string, any>) => {
+ const text = row?.segments
+ ?.map((v: { segmentName: string; segmentId: string }) => {
+ return v.segmentName
+ })
+ .join(',')
+ return text
+ }
+})
+
+const onChangeSegment = () => {
+ emit('emitSegment', {
+ status: $props.status,
+ id: orderSegMap.value[$props.status],
+ })
+}
+
+const onSort = (
+ row: IProductTableItem,
+ index: number,
+ type: 'top' | 'down'
+) => {
+ if (!isHasPermission('OrderManagement-actions-sort')) {
+ return
+ }
+
+ if (type === 'top') {
+ if (index === 0) {
+ throw new Error(_t('宸茬粡鏄涓�浣嶏紝鏃犳硶鍐嶅悜涓婅皟鏁存帓搴�'))
+ }
+
+ const temp = tableData.value[index - 1]
+ tableData.value[index - 1] = row
+ tableData.value[index] = temp
+ } else if (type === 'down') {
+ if (index === tableData.value.length - 1) {
+ throw new Error(_t('宸茬粡鏄渶鍚庝竴浣嶏紝鏃犳硶鍐嶅悜涓嬭皟鏁存帓搴�'))
+ }
+
+ const temp = tableData.value[index + 1]
+ tableData.value[index + 1] = row
+ tableData.value[index] = temp
+
+ // 鍚庣sort 浠�1寮�濮嬭绠楋紱鏁�+1锛涗笅绉诲彇褰撳墠搴忓彿鏁�+1锛屾晠+2
+ index = index + 2
+ }
+
+ const { id } = row
+
+ api.sortTable(id, index)
+}
+
+const handleSelectionChange = (val: IProductTableItem[]) => {
+ tableSelectList.value = val
+}
+
+// 鍒嗛〉閰嶇疆
+const paginationConfig = reactive<{
+ pageSize: number
+ currentPage: number
+ total: number
+}>({
+ pageSize: 10, // X鏉�/椤�
+ currentPage: 1, // 褰撳墠绗琗椤�
+ total: 0, // 鎬诲叡X椤�
+})
+
+const onAction = (type: string) => {
+ emit('onAction', {
+ type,
+ data: {
+ tableSelectList: tableSelectList.value,
+ },
+ status: $props.status,
+ })
+}
+const onImport = (file: any) => {
+ emit('onAction', {
+ type: ORDER_ACTIONS_STATUS.UPLOAD,
+ data: file,
+ status: $props.status,
+ })
+}
+const onPage = (current: number) => {
+ paginationConfig.currentPage = current
+ emit('page', {
+ currentPage: paginationConfig.currentPage,
+ status: $props.status,
+ segment: orderSegMap.value[$props.status],
+ })
+}
+const onClearAll = () => {
+ tableRef.value?.resetTable()
+}
+watch(tableData, () => {
+ if (!$props.isStartFlushList) {
+ onClearAll()
+ }
+})
+
+defineExpose({
+ onClearAll,
+ status: () => $props.status,
+})
+</script>
+
+<style lang="scss" scoped>
+.sortClass {
+ border-radius: 50%;
+ color: #fff;
+ border: 1px solid #c7c9cc;
+ background-color: #c7c9cc;
+ padding: 3px;
+ font-size: 14px;
+ cursor: pointer;
+ width: 20px;
+ display: flex;
+ height: 20px;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ &:last-child {
+ margin-left: 8px;
+ }
+
+ &:hover {
+ background: #5a84ff;
+ border: 1px solid #5a84ff;
+ }
+}
+
+.prohibit {
+ cursor: no-drop;
+
+ &:hover {
+ border: 1px solid #c7c9cc;
+ background-color: #c7c9cc;
+ }
+}
+
+.header-right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.import {
+ width: 65px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 10px;
+ border-radius: 6px 6px 6px 6px;
+ background-color: #ff9800;
+ border-color: #ff9800;
+ color: #fff;
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &.is-disabled {
+ background-color: #c2c2c2;
+ border-color: #d7d7d7;
+ color: #676767;
+ }
+}
+
+.export {
+ min-width: 80px;
+ padding: 0 5px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 10px;
+ border-radius: 6px 6px 6px 6px;
+ background-color: #35a020;
+ border-color: #35a020;
+ color: #fff;
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &.is-disabled {
+ background-color: #c2c2c2;
+ border-color: #d7d7d7;
+ color: #676767;
+ }
+}
+
+.deliver,
+.activation {
+ min-width: 65px;
+ height: 32px;
+ padding: 0 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 10px;
+ border-radius: 6px 6px 6px 6px;
+ background-color: #03b982;
+ border-color: #03b982;
+ color: #fff;
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &.is-disabled {
+ background-color: #c2c2c2;
+ border-color: #d7d7d7;
+ color: #676767;
+ }
+}
+
+.pause {
+ width: 65px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px 6px 6px 6px;
+ margin-left: 10px;
+ cursor: pointer;
+ background-color: #f3b367;
+ border-color: #f3b367;
+ color: #fff;
+
+ &:hover {
+ background-color: #fff;
+ border-color: #e0e1e7;
+ color: #333;
+ }
+
+ &.is-disabled {
+ background-color: #c2c2c2;
+ border-color: #d7d7d7;
+ color: #676767;
+ }
+}
+
+.delete {
+ width: 65px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px 6px 6px 6px;
+ margin-left: 10px;
+ cursor: pointer;
+ background-color: rgba(255, 255, 255, 0.9);
+ border: 1px solid #c8c8c8;
+ color: #35363b;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &.is-disabled {
+ background-color: #c2c2c2;
+ border: 1px solid #d7d7d7;
+ color: #676767;
+ }
+}
+
+.finished {
+ width: 65px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px 6px 6px 6px;
+ margin-left: 10px;
+ cursor: pointer;
+ background-color: #e57a74;
+ border-color: #e57a74;
+ color: #fff;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &.is-disabled {
+ background-color: #c2c2c2;
+ border-color: #d7d7d7;
+ color: #676767;
+ }
+}
+
+.edit,
+.complete,
+.revoke {
+ min-width: 65px;
+ padding: 0 5px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px 6px 6px 6px;
+ margin-left: 10px;
+ cursor: pointer;
+ background-color: #6384f6;
+ border-color: #6384f6;
+ color: #fff;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &.is-disabled {
+ background-color: #c2c2c2;
+ border-color: #d7d7d7;
+ color: #676767;
+ }
+}
+
+:deep(.el-table .cell) {
+ padding-left: 10px;
+}
+</style>
--
Gitblit v1.9.3