first commit
This commit is contained in:
180
src/views/workbench/my-initiated/index.vue
Normal file
180
src/views/workbench/my-initiated/index.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<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="t('workbenchPage.pending.table.actions')" 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>
|
||||
</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';
|
||||
|
||||
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 handleView = (row: any) => {
|
||||
message.info(`${row.title} ${t('workbenchPage.pending.messages.viewPlaceholder')}`);
|
||||
};
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user