<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { ref } from 'vue';
|
|
import { useGlobSetting, useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { usePopup } from '@jnpf/ui/popup';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import dayjs from 'dayjs';
|
|
import { delProject, getProjectList } from '#/api/extend/projectGantt';
|
import { $t } from '#/locales';
|
|
import Form from './Form.vue';
|
import Task from './Task.vue';
|
|
defineOptions({ name: 'ExtendProjectGantt' });
|
|
const { createMessage } = useMessage();
|
const globSetting = useGlobSetting();
|
const apiUrl = ref(globSetting.apiURL);
|
const columns: BasicColumn[] = [
|
{ title: '项目名称/项目编码', dataIndex: 'fullName', width: 200, slots: { default: 'fullName' } },
|
{ title: '开始日期/结束日期', dataIndex: 'startTime', width: 160, slots: { default: 'startTime' } },
|
{ title: '项目工期/完成进度', dataIndex: 'schedule', width: 160, slots: { default: 'schedule' } },
|
{ title: '状态', dataIndex: 'state', width: 100, slots: { default: 'state' } },
|
{ title: '参与人员', dataIndex: 'managersInfo', minWidth: 200, slots: { default: 'managersInfo' } },
|
];
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const [registerTask, { openPopup: openTaskPopup }] = usePopup();
|
const [registerTable, { reload }] = useVxeTable({
|
api: getProjectList,
|
columns,
|
useSearchForm: true,
|
showOverflow: false,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
},
|
actionColumn: {
|
width: 150,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
});
|
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.editText'),
|
onClick: addOrUpdateHandle.bind(null, record.id),
|
},
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
modelConfirm: {
|
onOk: handleDelete.bind(null, record.id),
|
},
|
},
|
{
|
label: '项目任务',
|
onClick: handleTask.bind(null, record),
|
},
|
];
|
}
|
function addOrUpdateHandle(id = '') {
|
openFormModal(true, { id });
|
}
|
function handleDelete(id) {
|
delProject(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handleTask(row) {
|
openTaskPopup(true, row);
|
}
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $t('common.addText') }}</a-button>
|
</template>
|
<template #fullName="{ record }">
|
<p>{{ record.fullName }}</p>
|
<p class="text-grey">{{ record.enCode }}</p>
|
</template>
|
<template #startTime="{ record }">
|
<p>{{ dayjs(record.startTime).format('YYYY-MM-DD') }}</p>
|
<p class="text-grey">{{ dayjs(record.endTime).format('YYYY-MM-DD') }}</p>
|
</template>
|
<template #schedule="{ record }">
|
<p>{{ record.timeLimit }}天</p>
|
<a-progress :percent="record.schedule" />
|
</template>
|
<template #state="{ record }">
|
<a-tag color="success" v-if="record.schedule === 100">已完成</a-tag>
|
<template v-else>
|
<a-tag color="processing" v-if="record.state === 1">进行中</a-tag>
|
<a-tag color="error" v-if="record.state === 2">已暂停</a-tag>
|
</template>
|
</template>
|
<template #managersInfo="{ record }">
|
<a-tag color="success" v-if="record.schedule === 100">已完成</a-tag>
|
<a-avatar :size="30" :src="apiUrl + img.headIcon" v-for="(img, i) in record.managersInfo" :key="i" :title="img.account" class="!mr-6px" />
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reload" />
|
<Task @register="registerTask" />
|
</div>
|
</template>
|
