IRS-ui-develop/src/views/workbench/my-initiated/index.vue

<template>
    <div class="layout-padding pending-items-page" style="position: unset;">
        <div class="layout-padding-auto layout-padding-view">
            <div class="pending-toolbar">
                <div class="pending-search-row">
                    <div class="pending-search">
                        <el-input v-model="keyword" :placeholder="t('workbenchPage.pending.searchPlaceholder')"
                            clearable @keyup.enter="handleSearch">
                            <template #append>
                                <el-button type="primary" @click="handleSearch">
                                    {{ t('workbenchPage.pending.searchButton') }}
                                </el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
                <div class="pending-filters-row">
                    <el-radio-group v-model="selectedCategory" class="pending-radio-group"
                        @change="handleCategoryChange">
                        <el-radio label="全部">
                            {{ t('workbenchPage.pending.filters.all') }}
                        </el-radio>
                        <el-radio v-for="option in flowNameOptions" :key="option.value" :label="option.value">
                            {{ t(`flowTypes.${option.label}`) }}
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>

            <el-card class="pending-card" shadow="never">
                <el-table
                    ref="dataTableRef"
                    v-loading="loading"
                    :data="state.dataList"
                    border
                    :cell-style="tableStyle.cellStyle"
                    :header-cell-style="tableStyle.headerCellStyle"
                >
                    <el-table-column type="index" :label="t('workbenchPage.pending.table.index')" width="80" />
                    <el-table-column prop="title" :label="t('workbenchPage.pending.table.title')" min-width="260">
                        <template #default="{ row }">
                            <el-link type="primary" :underline="false" @click="handleView(row)">
                                {{ row.title }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('workbenchPage.pending.table.initiator')"
                        min-width="140"
                    >
                        <template #default="{ row }">
                            {{ userInfos.user.username }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" :label="t('workbenchPage.pending.table.startTime')"
                        min-width="180" />
                    <el-table-column prop="updateTime" :label="t('workbenchPage.pending.table.processTime')"
                        min-width="180" />
                    <el-table-column prop="status" :label="t('workbenchPage.pending.table.status')" min-width="140">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 1" type="primary">进行中</el-tag>
                            <el-tag v-else type="success">已结束</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="查看" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="handleView(row)">
                                {{ t('workbenchPage.pending.actions.view') }}
                            </el-button>
                            <!-- <el-button link type="primary" @click="handleReview(row)">
                                {{ t('workbenchPage.pending.actions.review') }}
                            </el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
			    <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"></pagination>
            </el-card>
        </div>
<!--			<el-dialog v-model="visible" width="80%" title="流程节点">-->
<!--				<flow-node-format :selectUserNodeId="flowUserData.root.map(item => item.id)" :flow-id="flowIdCon" ref="flowNodeFormatRef"></flow-node-format>-->
<!--			</el-dialog>-->
<!--		 v-if="visible" 确保关闭时销毁组件	-->
			<el-drawer v-model="visible" v-if="visible" direction="rtl" size="600px">
				<template #header>
					<h3>{{ currentData?.name }}</h3>
				</template>
				<template #default>
					<el-card class="box-card">
						<FormCreate :rule="rule" v-model="formData" v-model:api="fApi" />
					</el-card>
					<flow-node-format
							:disableSelect="true"
							:processInstanceId="currentData.processInstanceId"
							:flow-id="currentData.flowId"
							ref="flowNodeFormatRef"
							:disabled="true"
					></flow-node-format>
				</template>
			</el-drawer>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { queryMineStarted } from '/@/api/flow/task';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useUserInfo } from '/@/stores/userInfo';
import { flowNameOptions } from '/@/hooks/enums';
import { getProcessInfoByIdAPI } from '/@/api/workbench/miOwLibr/ownershipCreate';
import FlowNodeFormat from "/@/views/flow/form/tools/FlowNodeFormatData.vue";
import FormCreate from "/@/views/flow/workflow/components/FormCreate.vue";

const { t } = useI18n();
const message = useMessage();
const loading = ref(false);
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: queryMineStarted,
	queryForm: {
        title: '',
		processName: '',
        // status: 2,
		taskTime: undefined,
        flowType: ''
	},
});
const { tableStyle, getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state);

const selectedCategory = ref('全部');
const keyword = ref('');

const handleCategoryChange = () => {
    state.queryForm.flowType = selectedCategory.value === '全部' ? '' : selectedCategory.value
    getDataList(true)
};

const handleSearch = () => {
    state.queryForm.title = keyword.value
    getDataList(true)
};
const currentData = ref<any>(null);
const visible = ref(false);
/**查看流程*/ 
const handleView = (row: any) => {
	getProcessInfoByIdAPI(row.id).then(res =>{
		currentData.value = {
			name: res.data.name,
			processInstanceId: res.data.processInstanceId,
			flowId: res.data.flowId
		}
		visible.value = true
	})
};

const handleReview = (row: any) => {
    message.info(`${row.title} ${t('workbenchPage.pending.messages.reviewPlaceholder')}`);
};

onMounted(() => {
    getDataList()
})
</script>

<style scoped>
.pending-items-page .pending-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.pending-search-row {
    display: flex;
    justify-content: flex-end;
}

.pending-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pending-radio-group :deep(.el-radio) {
    margin-right: 0;
}

.pending-search {
    width: 320px;
    min-width: 240px;
}

.pending-filters-row {
    width: 100%;
}

.pending-card {
    padding: 0 0 12px;
}

.pending-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 0;
}

.total-text {
    color: var(--el-text-color-regular);
}
</style>