style: lint格式化文件
This commit is contained in:
@ -1,370 +1,338 @@
|
||||
<template>
|
||||
<PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
|
||||
<BasicTableErp
|
||||
@register="registerTable"
|
||||
:row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }"
|
||||
>
|
||||
<template #toolbar>
|
||||
<template v-for="button in tableButtonConfig" :key="button.code">
|
||||
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
|
||||
<template #icon><Icon :icon="button.icon" /></template>
|
||||
{{ button.name }}
|
||||
</a-button>
|
||||
<a-button v-else type="primary">
|
||||
<template #icon><Icon :icon="button.icon" /></template>
|
||||
{{ button.name }}
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'applyDetail'">
|
||||
<a-dropdown v-if="record.applyDetail">
|
||||
<span>
|
||||
{{ record.applyDetail.split(',')[0]?.split(':')[0] }}
|
||||
<DownOutlined />
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="(item, index) in record.applyDetail.split(',')" :key="index">
|
||||
<a href="javascript:;">{{ item }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
|
||||
<BasicTableErp @register="registerTable" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }">
|
||||
<template #toolbar>
|
||||
<template v-for="button in tableButtonConfig" :key="button.code">
|
||||
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
|
||||
<template #icon><Icon :icon="button.icon" /></template>
|
||||
{{ button.name }}
|
||||
</a-button>
|
||||
<a-button v-else type="primary">
|
||||
<template #icon><Icon :icon="button.icon" /></template>
|
||||
{{ button.name }}
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<TableAction :actions="getActions(record)" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTableErp>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'applyDetail'">
|
||||
<a-dropdown v-if="record.applyDetail">
|
||||
<span>
|
||||
{{ record.applyDetail.split(',')[0]?.split(':')[0] }}
|
||||
<DownOutlined />
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="(item, index) in record.applyDetail.split(',')" :key="index">
|
||||
<a href="javascript:;">{{ item }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<TableAction :actions="getActions(record)" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTableErp>
|
||||
|
||||
<LookProcess
|
||||
v-if="visibleLookProcessRef"
|
||||
:taskId="taskIdRef"
|
||||
:processId="processIdRef"
|
||||
@close="visibleLookProcessRef = false"
|
||||
:visible="visibleLookProcessRef"
|
||||
/>
|
||||
<LaunchProcess
|
||||
v-if="visibleLaunchProcessRef"
|
||||
:schemaId="schemaIdRef"
|
||||
:form-data="formDataRef"
|
||||
:form-id="formIdComputedRef"
|
||||
@close="handleCloseLaunch"
|
||||
/>
|
||||
<ApprovalProcess
|
||||
v-if="visibleApproveProcessRef"
|
||||
:taskId="taskIdRef"
|
||||
:processId="processIdRef"
|
||||
:schemaId="schemaIdRef"
|
||||
@close="handleCloseApproval"
|
||||
:visible="visibleApproveProcessRef"
|
||||
/>
|
||||
<ApplyModal @register="registerModal" @success="handleSuccess" />
|
||||
<ApplyCheckInfo @register="registerInfoModal" />
|
||||
</PageWrapper>
|
||||
<LookProcess v-if="visibleLookProcessRef" :taskId="taskIdRef" :processId="processIdRef" @close="visibleLookProcessRef = false" :visible="visibleLookProcessRef" />
|
||||
<LaunchProcess v-if="visibleLaunchProcessRef" :schemaId="schemaIdRef" :form-data="formDataRef" :form-id="formIdComputedRef" @close="handleCloseLaunch" />
|
||||
<ApprovalProcess v-if="visibleApproveProcessRef" :taskId="taskIdRef" :processId="processIdRef" :schemaId="schemaIdRef" @close="handleCloseApproval" :visible="visibleApproveProcessRef" />
|
||||
<ApplyModal @register="registerModal" @success="handleSuccess" />
|
||||
<ApplyCheckInfo @register="registerInfoModal" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, createVNode } from 'vue';
|
||||
import { ref, computed, createVNode } from 'vue';
|
||||
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
|
||||
import { useTable, TableAction, ActionItem } from '/@/components/Table';
|
||||
import BasicTableErp from '/@/components/Table/src/BasicTableErp.vue';
|
||||
import {
|
||||
getCaseErpApplyPage,
|
||||
deleteCaseErpApply,
|
||||
exportCaseErpApply,
|
||||
} from '/@/api/erp/purchase/apply';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
|
||||
import { useTable, TableAction, ActionItem } from '/@/components/Table';
|
||||
import BasicTableErp from '/@/components/Table/src/BasicTableErp.vue';
|
||||
import { getCaseErpApplyPage, deleteCaseErpApply, exportCaseErpApply } from '/@/api/erp/purchase/apply';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
|
||||
import LookProcess from '/@/views/workflow/task/components/LookProcess.vue';
|
||||
import LaunchProcess from '/@/views/workflow/task/components/LaunchProcess.vue';
|
||||
import ApprovalProcess from '/@/views/workflow/task/components/ApprovalProcess.vue';
|
||||
import { getFormExecuteWorkflow } from '/@/api/form/execute';
|
||||
import LookProcess from '/@/views/workflow/task/components/LookProcess.vue';
|
||||
import LaunchProcess from '/@/views/workflow/task/components/LaunchProcess.vue';
|
||||
import ApprovalProcess from '/@/views/workflow/task/components/ApprovalProcess.vue';
|
||||
import { getFormExecuteWorkflow } from '/@/api/form/execute';
|
||||
|
||||
import ApplyModal from './components/ApplyModal.vue';
|
||||
import ApplyCheckInfo from './components/ApplyCheckInfo.vue';
|
||||
import ApplyModal from './components/ApplyModal.vue';
|
||||
import ApplyCheckInfo from './components/ApplyCheckInfo.vue';
|
||||
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
|
||||
import { columns } from './components/config';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
import { columns } from './components/config';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
defineEmits(['register']);
|
||||
const { filterColumnAuth, filterButtonAuth } = usePermission();
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
defineEmits(['register']);
|
||||
const { filterColumnAuth, filterButtonAuth } = usePermission();
|
||||
|
||||
const filterColumns = filterColumnAuth(columns);
|
||||
//展示在列表内的按钮
|
||||
const actionButtons = ref<string[]>(['view', 'edit', 'delete', 'startwork']);
|
||||
const buttonConfigs = computed(() => {
|
||||
const list = [
|
||||
{ isUse: true, name: '查看', code: 'view', icon: 'ant-design:eye-outlined', isDefault: true },
|
||||
{ isUse: true, name: '新增', code: 'add', icon: 'ant-design:plus-outlined', isDefault: true },
|
||||
{
|
||||
isUse: true,
|
||||
name: '编辑',
|
||||
code: 'edit',
|
||||
icon: 'ant-design:form-outlined',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
isUse: true,
|
||||
name: '删除',
|
||||
code: 'delete',
|
||||
icon: 'ant-design:delete-outlined',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
isUse: true,
|
||||
name: '快速导出',
|
||||
code: 'export',
|
||||
icon: 'ant-design:export-outlined',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
isUse: true,
|
||||
name: '发起审批',
|
||||
code: 'startwork',
|
||||
icon: 'ant-design:form-outlined',
|
||||
isDefault: true,
|
||||
},
|
||||
];
|
||||
return filterButtonAuth(list);
|
||||
});
|
||||
|
||||
const tableButtonConfig = computed(() => {
|
||||
return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
|
||||
});
|
||||
|
||||
const actionButtonConfig = computed(() => {
|
||||
return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
|
||||
});
|
||||
|
||||
const btnEvent = {
|
||||
view: handleView,
|
||||
add: handleAdd,
|
||||
edit: handleEdit,
|
||||
delete: handleDelete,
|
||||
export: handleExport,
|
||||
startwork: handleStartwork,
|
||||
};
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
const formIdComputedRef = computed(() => currentRoute.value.meta.formId as string);
|
||||
|
||||
const visibleLookProcessRef = ref(false);
|
||||
const processIdRef = ref('');
|
||||
|
||||
const visibleLaunchProcessRef = ref(false);
|
||||
const schemaIdRef = ref('');
|
||||
const formDataRef = ref();
|
||||
|
||||
const visibleApproveProcessRef = ref(false);
|
||||
const taskIdRef = ref('');
|
||||
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const selectedRowsData = ref<any[]>([]);
|
||||
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerInfoModal, { openModal: openInfoModal }] = useModal();
|
||||
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: '采购申请',
|
||||
api: getCaseErpApplyPage,
|
||||
rowKey: 'id',
|
||||
columns: filterColumns,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
|
||||
},
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 160,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
customRow,
|
||||
});
|
||||
|
||||
function buttonClick(code) {
|
||||
btnEvent[code]();
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
const filterColumns = filterColumnAuth(columns);
|
||||
//展示在列表内的按钮
|
||||
const actionButtons = ref<string[]>(['view', 'edit', 'delete', 'startwork']);
|
||||
const buttonConfigs = computed(() => {
|
||||
const list = [
|
||||
{ isUse: true, name: '查看', code: 'view', icon: 'ant-design:eye-outlined', isDefault: true },
|
||||
{ isUse: true, name: '新增', code: 'add', icon: 'ant-design:plus-outlined', isDefault: true },
|
||||
{
|
||||
isUse: true,
|
||||
name: '编辑',
|
||||
code: 'edit',
|
||||
icon: 'ant-design:form-outlined',
|
||||
isDefault: true
|
||||
},
|
||||
{
|
||||
isUse: true,
|
||||
name: '删除',
|
||||
code: 'delete',
|
||||
icon: 'ant-design:delete-outlined',
|
||||
isDefault: true
|
||||
},
|
||||
{
|
||||
isUse: true,
|
||||
name: '快速导出',
|
||||
code: 'export',
|
||||
icon: 'ant-design:export-outlined',
|
||||
isDefault: true
|
||||
},
|
||||
{
|
||||
isUse: true,
|
||||
name: '发起审批',
|
||||
code: 'startwork',
|
||||
icon: 'ant-design:form-outlined',
|
||||
isDefault: true
|
||||
}
|
||||
];
|
||||
return filterButtonAuth(list);
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
const tableButtonConfig = computed(() => {
|
||||
return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
deleteList([record.id]);
|
||||
}
|
||||
|
||||
function deleteList(ids) {
|
||||
Modal.confirm({
|
||||
title: '提示信息',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '是否确认删除？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
deleteCaseErpApply(ids).then((_) => {
|
||||
reload();
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('删除成功！'),
|
||||
});
|
||||
});
|
||||
},
|
||||
onCancel() {},
|
||||
const actionButtonConfig = computed(() => {
|
||||
return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
|
||||
});
|
||||
}
|
||||
|
||||
function onSelectChange(selectedRowKeys: [], selectedRows) {
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
selectedRowsData.value = selectedRows;
|
||||
}
|
||||
|
||||
function customRow(record: Recordable) {
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...selectedKeys.value];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
}
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
},
|
||||
const btnEvent = {
|
||||
view: handleView,
|
||||
add: handleAdd,
|
||||
edit: handleEdit,
|
||||
delete: handleDelete,
|
||||
export: handleExport,
|
||||
startwork: handleStartwork
|
||||
};
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
reload();
|
||||
}
|
||||
const { currentRoute } = useRouter();
|
||||
const formIdComputedRef = computed(() => currentRoute.value.meta.formId as string);
|
||||
|
||||
function handleView(record: Recordable) {
|
||||
openInfoModal(true, {
|
||||
id: record.id,
|
||||
processId: record.workflowData?.processId,
|
||||
const visibleLookProcessRef = ref(false);
|
||||
const processIdRef = ref('');
|
||||
|
||||
const visibleLaunchProcessRef = ref(false);
|
||||
const schemaIdRef = ref('');
|
||||
const formDataRef = ref();
|
||||
|
||||
const visibleApproveProcessRef = ref(false);
|
||||
const taskIdRef = ref('');
|
||||
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const selectedRowsData = ref<any[]>([]);
|
||||
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerInfoModal, { openModal: openInfoModal }] = useModal();
|
||||
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: '采购申请',
|
||||
api: getCaseErpApplyPage,
|
||||
rowKey: 'id',
|
||||
columns: filterColumns,
|
||||
beforeFetch: (params) => {
|
||||
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
|
||||
},
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 160,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
},
|
||||
customRow
|
||||
});
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
const res = await exportCaseErpApply({ isTemplate: false });
|
||||
downloadByData(
|
||||
res.data,
|
||||
'采购申请.xlsx',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
);
|
||||
}
|
||||
function buttonClick(code) {
|
||||
btnEvent[code]();
|
||||
}
|
||||
|
||||
function getActions(record: Recordable): ActionItem[] {
|
||||
let actionsList: ActionItem[] = [];
|
||||
let editAndDelBtn: ActionItem[] = [];
|
||||
actionButtonConfig.value?.map((button) => {
|
||||
if (button.code === 'view') {
|
||||
actionsList.push({
|
||||
icon: button?.icon,
|
||||
tooltip: button?.name,
|
||||
onClick: handleView.bind(null, record),
|
||||
function handleAdd() {
|
||||
openModal(true, {
|
||||
isUpdate: false
|
||||
});
|
||||
}
|
||||
if (['edit', 'delete'].includes(button.code)) {
|
||||
editAndDelBtn.push({
|
||||
icon: button?.icon,
|
||||
tooltip: button?.name,
|
||||
color: button.code === 'delete' ? 'error' : undefined,
|
||||
onClick: btnEvent[button.code].bind(null, record),
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
}
|
||||
});
|
||||
if (record.workflowData.enabled) {
|
||||
//与工作流有关联的表单
|
||||
if (record.workflowData.status) {
|
||||
//如果是本人需要审批的数据 就会有taskIds 所以需要修改绑定事件
|
||||
const act: ActionItem = {};
|
||||
if (record.workflowData.taskIds) {
|
||||
act.tooltip = '查看流程(待审批)';
|
||||
act.icon = 'daishenpi|svg';
|
||||
act.onClick = handleApproveProcess.bind(null, record);
|
||||
}
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
deleteList([record.id]);
|
||||
}
|
||||
|
||||
function deleteList(ids) {
|
||||
Modal.confirm({
|
||||
title: '提示信息',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '是否确认删除？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
deleteCaseErpApply(ids).then((_) => {
|
||||
reload();
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('删除成功！')
|
||||
});
|
||||
});
|
||||
},
|
||||
onCancel() {}
|
||||
});
|
||||
}
|
||||
|
||||
function onSelectChange(selectedRowKeys: [], selectedRows) {
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
selectedRowsData.value = selectedRows;
|
||||
}
|
||||
|
||||
function customRow(record: Recordable) {
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...selectedKeys.value];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
}
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
reload();
|
||||
}
|
||||
|
||||
function handleView(record: Recordable) {
|
||||
openInfoModal(true, {
|
||||
id: record.id,
|
||||
processId: record.workflowData?.processId
|
||||
});
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
const res = await exportCaseErpApply({ isTemplate: false });
|
||||
downloadByData(res.data, '采购申请.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
||||
}
|
||||
|
||||
function getActions(record: Recordable): ActionItem[] {
|
||||
let actionsList: ActionItem[] = [];
|
||||
let editAndDelBtn: ActionItem[] = [];
|
||||
actionButtonConfig.value?.map((button) => {
|
||||
if (button.code === 'view') {
|
||||
actionsList.push({
|
||||
icon: button?.icon,
|
||||
tooltip: button?.name,
|
||||
onClick: handleView.bind(null, record)
|
||||
});
|
||||
}
|
||||
if (['edit', 'delete'].includes(button.code)) {
|
||||
editAndDelBtn.push({
|
||||
icon: button?.icon,
|
||||
tooltip: button?.name,
|
||||
color: button.code === 'delete' ? 'error' : undefined,
|
||||
onClick: btnEvent[button.code].bind(null, record)
|
||||
});
|
||||
}
|
||||
});
|
||||
if (record.workflowData.enabled) {
|
||||
//与工作流有关联的表单
|
||||
if (record.workflowData.status) {
|
||||
//如果是本人需要审批的数据 就会有taskIds 所以需要修改绑定事件
|
||||
const act: ActionItem = {};
|
||||
if (record.workflowData.taskIds) {
|
||||
act.tooltip = '查看流程(待审批)';
|
||||
act.icon = 'daishenpi|svg';
|
||||
act.onClick = handleApproveProcess.bind(null, record);
|
||||
} else {
|
||||
act.tooltip = '查看流程' + (record.workflowData.status === 'ACTIVE' ? '(审批中)' : '(已完成)');
|
||||
act.icon = record.workflowData.status === 'ACTIVE' ? 'jinshenpi|svg' : 'shenpiwancheng|svg';
|
||||
act.onClick = handleStartwork.bind(null, record);
|
||||
}
|
||||
actionsList.unshift(act);
|
||||
} else {
|
||||
actionsList.unshift({
|
||||
icon: 'faqishenpi|svg',
|
||||
tooltip: '发起审批',
|
||||
onClick: handleLaunchProcess.bind(null, record)
|
||||
});
|
||||
actionsList = actionsList.concat(editAndDelBtn);
|
||||
}
|
||||
} else {
|
||||
act.tooltip =
|
||||
'查看流程' + (record.workflowData.status === 'ACTIVE' ? '(审批中)' : '(已完成)');
|
||||
act.icon =
|
||||
record.workflowData.status === 'ACTIVE' ? 'jinshenpi|svg' : 'shenpiwancheng|svg';
|
||||
act.onClick = handleStartwork.bind(null, record);
|
||||
if (!record.workflowData.processId) {
|
||||
//与工作流没有关联的表单并且在当前页面新增的数据 如选择编辑、删除按钮则加上
|
||||
actionsList = actionsList.concat(editAndDelBtn);
|
||||
}
|
||||
}
|
||||
actionsList.unshift(act);
|
||||
} else {
|
||||
actionsList.unshift({
|
||||
icon: 'faqishenpi|svg',
|
||||
tooltip: '发起审批',
|
||||
onClick: handleLaunchProcess.bind(null, record),
|
||||
});
|
||||
actionsList = actionsList.concat(editAndDelBtn);
|
||||
}
|
||||
} else {
|
||||
if (!record.workflowData.processId) {
|
||||
//与工作流没有关联的表单并且在当前页面新增的数据 如选择编辑、删除按钮则加上
|
||||
actionsList = actionsList.concat(editAndDelBtn);
|
||||
}
|
||||
return actionsList;
|
||||
}
|
||||
return actionsList;
|
||||
}
|
||||
|
||||
function handleStartwork(record: Recordable) {
|
||||
if (record.workflowData) {
|
||||
visibleLookProcessRef.value = true;
|
||||
processIdRef.value = record.workflowData.processId;
|
||||
function handleStartwork(record: Recordable) {
|
||||
if (record.workflowData) {
|
||||
visibleLookProcessRef.value = true;
|
||||
processIdRef.value = record.workflowData.processId;
|
||||
}
|
||||
}
|
||||
}
|
||||
async function handleLaunchProcess(record: Recordable) {
|
||||
if (record.workflowData) {
|
||||
const result = await getFormExecuteWorkflow({
|
||||
formId: formIdComputedRef.value,
|
||||
id: record['id'],
|
||||
});
|
||||
async function handleLaunchProcess(record: Recordable) {
|
||||
if (record.workflowData) {
|
||||
const result = await getFormExecuteWorkflow({
|
||||
formId: formIdComputedRef.value,
|
||||
id: record['id']
|
||||
});
|
||||
|
||||
visibleLaunchProcessRef.value = true;
|
||||
schemaIdRef.value = record.workflowData.schemaId;
|
||||
formDataRef.value = result;
|
||||
visibleLaunchProcessRef.value = true;
|
||||
schemaIdRef.value = record.workflowData.schemaId;
|
||||
formDataRef.value = result;
|
||||
}
|
||||
}
|
||||
function handleApproveProcess(record: Recordable) {
|
||||
visibleApproveProcessRef.value = true;
|
||||
schemaIdRef.value = record.workflowData.schemaId;
|
||||
processIdRef.value = record.workflowData.processId;
|
||||
taskIdRef.value = record.workflowData.taskIds[0];
|
||||
}
|
||||
function handleCloseLaunch() {
|
||||
visibleLaunchProcessRef.value = false;
|
||||
reload();
|
||||
}
|
||||
function handleCloseApproval() {
|
||||
visibleApproveProcessRef.value = false;
|
||||
reload();
|
||||
}
|
||||
}
|
||||
function handleApproveProcess(record: Recordable) {
|
||||
visibleApproveProcessRef.value = true;
|
||||
schemaIdRef.value = record.workflowData.schemaId;
|
||||
processIdRef.value = record.workflowData.processId;
|
||||
taskIdRef.value = record.workflowData.taskIds[0];
|
||||
}
|
||||
function handleCloseLaunch() {
|
||||
visibleLaunchProcessRef.value = false;
|
||||
reload();
|
||||
}
|
||||
function handleCloseApproval() {
|
||||
visibleApproveProcessRef.value = false;
|
||||
reload();
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-table-selection-col) {
|
||||
width: 50px;
|
||||
}
|
||||
:deep(.ant-table-selection-col) {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,251 +1,247 @@
|
||||
<template>
|
||||
<PageWrapper dense fixedHeight contentFullHeight>
|
||||
<BasicTableErp @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate"> {{ t('新增') }} </a-button>
|
||||
<a-button type="primary" @click="handleExport"> {{ t('导出') }} </a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'state'">
|
||||
<a-switch v-model:checked="record.state" :checkedValue="1" :unCheckedValue="0" disabled />
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'purchaseDetail'">
|
||||
<a-dropdown v-if="record.purchaseDetail">
|
||||
<span>
|
||||
{{ record.purchaseDetail.split(',')[0]?.split(':')[0] }}
|
||||
<DownOutlined />
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="(item, index) in record.purchaseDetail.split(',')" :key="index">
|
||||
<a href="javascript:;">{{ item }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<PageWrapper dense fixedHeight contentFullHeight>
|
||||
<BasicTableErp @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate"> {{ t('新增') }} </a-button>
|
||||
<a-button type="primary" @click="handleExport"> {{ t('导出') }} </a-button>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-if="['inStoreState', 'ticketState', 'payState'].includes(column.dataIndex)">
|
||||
<Icon icon="ant-design:check-circle-filled" :size="20" v-if="record[column.dataIndex]" />
|
||||
<Icon icon="ant-design:exclamation-circle-filled" color="#FF1A2E" :size="20" v-else />
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'ant-design:eye-outlined',
|
||||
onClick: handleView.bind(null, record),
|
||||
},
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTableErp>
|
||||
<OrderModal @register="registerModal" @success="reload" />
|
||||
<OrderInfoModal @register="registerInfoModal" />
|
||||
</PageWrapper>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'state'">
|
||||
<a-switch v-model:checked="record.state" :checkedValue="1" :unCheckedValue="0" disabled />
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'purchaseDetail'">
|
||||
<a-dropdown v-if="record.purchaseDetail">
|
||||
<span>
|
||||
{{ record.purchaseDetail.split(',')[0]?.split(':')[0] }}
|
||||
<DownOutlined />
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="(item, index) in record.purchaseDetail.split(',')" :key="index">
|
||||
<a href="javascript:;">{{ item }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-if="['inStoreState', 'ticketState', 'payState'].includes(column.dataIndex)">
|
||||
<Icon icon="ant-design:check-circle-filled" :size="20" v-if="record[column.dataIndex]" />
|
||||
<Icon icon="ant-design:exclamation-circle-filled" color="#FF1A2E" :size="20" v-else />
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'ant-design:eye-outlined',
|
||||
onClick: handleView.bind(null, record)
|
||||
},
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleEdit.bind(null, record)
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record)
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTableErp>
|
||||
<OrderModal @register="registerModal" @success="reload" />
|
||||
<OrderInfoModal @register="registerInfoModal" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { createVNode } from 'vue';
|
||||
import { useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
|
||||
import BasicTableErp from '/@/components/Table/src/BasicTableErp.vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { getPurchasePageList, deletePurchase, exportInfo } from '/@/api/erp/purchase/order';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import OrderModal from './components/OrderModal.vue';
|
||||
import OrderInfoModal from './components/OrderInfoModal.vue';
|
||||
import { createVNode } from 'vue';
|
||||
import { useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
|
||||
import BasicTableErp from '/@/components/Table/src/BasicTableErp.vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { getPurchasePageList, deletePurchase, exportInfo } from '/@/api/erp/purchase/order';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import OrderModal from './components/OrderModal.vue';
|
||||
import OrderInfoModal from './components/OrderInfoModal.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '采购编码',
|
||||
dataIndex: 'purchaseNumber',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '采购订单名称',
|
||||
dataIndex: 'theme',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '供应商',
|
||||
dataIndex: 'supplierName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '采购日期',
|
||||
dataIndex: 'purchaseDate',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '采购部门',
|
||||
dataIndex: 'purchaseDeptName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '采购人员',
|
||||
dataIndex: 'purchasePersonName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '采购物品',
|
||||
dataIndex: 'purchaseDetail',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
dataIndex: 'amountSum',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '已收金额',
|
||||
dataIndex: 'alreadyAmount',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '已到票金额',
|
||||
dataIndex: 'alreadyTicket',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '入库',
|
||||
dataIndex: 'inStoreState',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
title: '到票',
|
||||
dataIndex: 'ticketState',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
title: '付款',
|
||||
dataIndex: 'payState',
|
||||
width: 70,
|
||||
},
|
||||
];
|
||||
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'theme',
|
||||
label: '订单名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
placeholder: '请输入订单名称',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const { notification } = useMessage();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerInfoModal, { openModal: openInfoModal }] = useModal();
|
||||
|
||||
const customRow = (record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...getSelectRowKeys()];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '采购编码',
|
||||
dataIndex: 'purchaseNumber',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '采购订单名称',
|
||||
dataIndex: 'theme',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '供应商',
|
||||
dataIndex: 'supplierName',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '采购日期',
|
||||
dataIndex: 'purchaseDate',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '采购部门',
|
||||
dataIndex: 'purchaseDeptName',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '采购人员',
|
||||
dataIndex: 'purchasePersonName',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '采购物品',
|
||||
dataIndex: 'purchaseDetail',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
dataIndex: 'amountSum',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '已收金额',
|
||||
dataIndex: 'alreadyAmount',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '已到票金额',
|
||||
dataIndex: 'alreadyTicket',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '入库',
|
||||
dataIndex: 'inStoreState',
|
||||
width: 70
|
||||
},
|
||||
{
|
||||
title: '到票',
|
||||
dataIndex: 'ticketState',
|
||||
width: 70
|
||||
},
|
||||
{
|
||||
title: '付款',
|
||||
dataIndex: 'payState',
|
||||
width: 70
|
||||
}
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
];
|
||||
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'theme',
|
||||
label: '订单名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
placeholder: '请输入订单名称'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const { notification } = useMessage();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerInfoModal, { openModal: openInfoModal }] = useModal();
|
||||
|
||||
const customRow = (record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...getSelectRowKeys()];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
}
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
const [registerTable, { reload, setSelectedRowKeys, getSelectRowKeys }] = useTable({
|
||||
title: '采购订单',
|
||||
api: getPurchasePageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
},
|
||||
customRow,
|
||||
});
|
||||
|
||||
const handleCreate = () => {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
const [registerTable, { reload, setSelectedRowKeys, getSelectRowKeys }] = useTable({
|
||||
title: '采购订单',
|
||||
api: getPurchasePageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16
|
||||
},
|
||||
schemas: searchFormSchema
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox'
|
||||
},
|
||||
customRow
|
||||
});
|
||||
};
|
||||
|
||||
const handleView = (record) => {
|
||||
openInfoModal(true, {
|
||||
id: record.id,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEdit = (record) => {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
Modal.confirm({
|
||||
title: t('提示信息'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('是否确认删除？'),
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消'),
|
||||
async onOk() {
|
||||
await deletePurchase(record.id);
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功'),
|
||||
const handleCreate = () => {
|
||||
openModal(true, {
|
||||
isUpdate: false
|
||||
});
|
||||
reload();
|
||||
},
|
||||
onCancel() {},
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
if (!getSelectRowKeys().length) {
|
||||
notification.warning({
|
||||
message: 'Tip',
|
||||
description: '请选择需要导出的数据',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
const res = await exportInfo(getSelectRowKeys());
|
||||
downloadByData(
|
||||
res.data,
|
||||
'采购订单.xlsx',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
);
|
||||
};
|
||||
const handleView = (record) => {
|
||||
openInfoModal(true, {
|
||||
id: record.id
|
||||
});
|
||||
};
|
||||
|
||||
const handleEdit = (record) => {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
Modal.confirm({
|
||||
title: t('提示信息'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('是否确认删除？'),
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消'),
|
||||
async onOk() {
|
||||
await deletePurchase(record.id);
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功')
|
||||
});
|
||||
reload();
|
||||
},
|
||||
onCancel() {}
|
||||
});
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
if (!getSelectRowKeys().length) {
|
||||
notification.warning({
|
||||
message: 'Tip',
|
||||
description: '请选择需要导出的数据'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
const res = await exportInfo(getSelectRowKeys());
|
||||
downloadByData(res.data, '采购订单.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,189 +1,177 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
title="查看采购申请"
|
||||
:width="1000"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="info-box">
|
||||
<div class="sub-title">基础信息</div>
|
||||
<a-row>
|
||||
<a-col :span="12">申请单号：{{ baseInfo?.applyNumber }}</a-col>
|
||||
<a-col :span="12">申请主题：{{ baseInfo?.theme }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">申请日期：{{ baseInfo?.applyDate }}</a-col>
|
||||
<a-col :span="12">申请部门：{{ baseInfo?.applyDepName }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">申请人员：{{ baseInfo?.applyUserNames }}</a-col>
|
||||
<a-col :span="12">关联项目：{{ baseInfo?.relatedProjectName }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">申请单号：{{ baseInfo?.applyNumber }}</a-col>
|
||||
<a-col :span="12">申请主题：{{ baseInfo?.theme }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="24">备注：{{ baseInfo?.remark }}</a-col>
|
||||
</a-row>
|
||||
<BasicTable @register="registerTable" />
|
||||
<div class="table-bottom">
|
||||
<span>合计</span>
|
||||
<div>
|
||||
<span>
|
||||
总量：
|
||||
<span class="price">{{ baseInfo?.countSum }}</span>
|
||||
</span>
|
||||
<span>
|
||||
总金额：
|
||||
<span class="price">{{ baseInfo?.amountSum }}</span>
|
||||
</span>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="查看采购申请" :width="1000" @cancel="handleCancel">
|
||||
<div class="info-box">
|
||||
<div class="sub-title">基础信息</div>
|
||||
<a-row>
|
||||
<a-col :span="12">申请单号：{{ baseInfo?.applyNumber }}</a-col>
|
||||
<a-col :span="12">申请主题：{{ baseInfo?.theme }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">申请日期：{{ baseInfo?.applyDate }}</a-col>
|
||||
<a-col :span="12">申请部门：{{ baseInfo?.applyDepName }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">申请人员：{{ baseInfo?.applyUserNames }}</a-col>
|
||||
<a-col :span="12">关联项目：{{ baseInfo?.relatedProjectName }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">申请单号：{{ baseInfo?.applyNumber }}</a-col>
|
||||
<a-col :span="12">申请主题：{{ baseInfo?.theme }}</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="24">备注：{{ baseInfo?.remark }}</a-col>
|
||||
</a-row>
|
||||
<BasicTable @register="registerTable" />
|
||||
<div class="table-bottom">
|
||||
<span>合计</span>
|
||||
<div>
|
||||
<span>
|
||||
总量：
|
||||
<span class="price">{{ baseInfo?.countSum }}</span>
|
||||
</span>
|
||||
<span>
|
||||
总金额：
|
||||
<span class="price">{{ baseInfo?.amountSum }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-title">附件</div>
|
||||
<Upload v-if="baseInfo?.filePath" v-model:value="baseInfo.filePath" listType="dragger" :style="{ width: '200px', display: 'none' }" :showRemoveIcon="false" />
|
||||
<div style="height: 100px" v-else></div>
|
||||
<div class="sub-title">审批记录</div>
|
||||
<FlowRecord v-if="isReady" :list="workflowList" :processId="processId" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-title">附件</div>
|
||||
<Upload
|
||||
v-if="baseInfo?.filePath"
|
||||
v-model:value="baseInfo.filePath"
|
||||
listType="dragger"
|
||||
:style="{ width: '200px', display: 'none' }"
|
||||
:showRemoveIcon="false"
|
||||
/>
|
||||
<div style="height: 100px" v-else></div>
|
||||
<div class="sub-title">审批记录</div>
|
||||
<FlowRecord v-if="isReady" :list="workflowList" :processId="processId" />
|
||||
</div>
|
||||
</BasicModal>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import Upload from '/@/components/Form/src/components/Upload.vue';
|
||||
import FlowRecord from '/@/views/workflow/task/components/flow/FlowRecord.vue';
|
||||
import { getCaseErpApply } from '/@/api/erp/purchase/apply';
|
||||
import { getRecordList } from '/@/api/erp/purchase/order';
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import Upload from '/@/components/Form/src/components/Upload.vue';
|
||||
import FlowRecord from '/@/views/workflow/task/components/flow/FlowRecord.vue';
|
||||
import { getCaseErpApply } from '/@/api/erp/purchase/apply';
|
||||
import { getRecordList } from '/@/api/erp/purchase/order';
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '物料编码',
|
||||
dataIndex: 'code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '物料名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
dataIndex: 'model',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'unitName',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '预计单价',
|
||||
dataIndex: 'price',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '申请数量',
|
||||
dataIndex: 'count',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '预计金额',
|
||||
dataIndex: 'amount',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '交付日期',
|
||||
dataIndex: 'payDate',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '用途',
|
||||
dataIndex: 'purpose',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '物料编码',
|
||||
dataIndex: 'code',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '物料名称',
|
||||
dataIndex: 'name',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
dataIndex: 'model',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'unitName',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '预计单价',
|
||||
dataIndex: 'price',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '申请数量',
|
||||
dataIndex: 'count',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '预计金额',
|
||||
dataIndex: 'amount',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '交付日期',
|
||||
dataIndex: 'payDate',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '用途',
|
||||
dataIndex: 'purpose',
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const rowId = ref('');
|
||||
const processId = ref('');
|
||||
const workflowList = ref();
|
||||
const baseInfo = ref();
|
||||
const isReady = ref(false);
|
||||
const rowId = ref('');
|
||||
const processId = ref('');
|
||||
const workflowList = ref();
|
||||
const baseInfo = ref();
|
||||
const isReady = ref(false);
|
||||
|
||||
const [registerTable, { setTableData }] = useTable({
|
||||
title: '物品明细',
|
||||
columns,
|
||||
bordered: true,
|
||||
pagination: false,
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
destroyOnClose: true,
|
||||
footer: null,
|
||||
showCancelBtn: false,
|
||||
showOkBtn: false,
|
||||
const [registerTable, { setTableData }] = useTable({
|
||||
title: '物品明细',
|
||||
columns,
|
||||
bordered: true,
|
||||
pagination: false
|
||||
});
|
||||
|
||||
rowId.value = data.id;
|
||||
processId.value = data.processId;
|
||||
if (processId.value) {
|
||||
const res = await getRecordList(processId.value);
|
||||
workflowList.value = [
|
||||
{
|
||||
records: res.taskRecords,
|
||||
schemaName: '当前流程',
|
||||
},
|
||||
];
|
||||
}
|
||||
isReady.value = true;
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
destroyOnClose: true,
|
||||
footer: null,
|
||||
showCancelBtn: false,
|
||||
showOkBtn: false
|
||||
});
|
||||
|
||||
const record = await getCaseErpApply(data.id);
|
||||
baseInfo.value = record;
|
||||
setTableData(record.caseErpApplyDetailList || []);
|
||||
});
|
||||
rowId.value = data.id;
|
||||
processId.value = data.processId;
|
||||
if (processId.value) {
|
||||
const res = await getRecordList(processId.value);
|
||||
workflowList.value = [
|
||||
{
|
||||
records: res.taskRecords,
|
||||
schemaName: '当前流程'
|
||||
}
|
||||
];
|
||||
}
|
||||
isReady.value = true;
|
||||
|
||||
const handleCancel = () => {
|
||||
isReady.value = false;
|
||||
workflowList.value = [];
|
||||
};
|
||||
const record = await getCaseErpApply(data.id);
|
||||
baseInfo.value = record;
|
||||
setTableData(record.caseErpApplyDetailList || []);
|
||||
});
|
||||
|
||||
const handleCancel = () => {
|
||||
isReady.value = false;
|
||||
workflowList.value = [];
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.info-box {
|
||||
padding: 0 16px;
|
||||
.info-box {
|
||||
padding: 0 16px;
|
||||
|
||||
:deep(.vben-basic-table) {
|
||||
height: 300px;
|
||||
:deep(.vben-basic-table) {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.ant-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-weight: bold;
|
||||
margin: 15px 0 20px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.table-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
|
||||
& > div > span {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-weight: bold;
|
||||
margin: 15px 0 20px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.table-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
|
||||
& > div > span {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,126 +1,118 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:title="getTitle"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleClose"
|
||||
:paddingRight="15"
|
||||
:bodyStyle="{ minHeight: '400px !important' }"
|
||||
>
|
||||
<SimpleForm ref="formRef" :formProps="formProps" :formModel="state.formModel" />
|
||||
</BasicModal>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
|
||||
<SimpleForm ref="formRef" :formProps="formProps" :formModel="state.formModel" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
import { addCaseErpApply, getCaseErpApply, updateCaseErpApply } from '/@/api/erp/purchase/apply';
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
import { addCaseErpApply, getCaseErpApply, updateCaseErpApply } from '/@/api/erp/purchase/apply';
|
||||
|
||||
import { formProps } from './config';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
|
||||
import { formProps } from './config';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { notification } = useMessage();
|
||||
const { filterFormSchemaAuth } = usePermission();
|
||||
const formRef = ref();
|
||||
formProps.schemas = filterFormSchemaAuth(formProps.schemas!);
|
||||
const state = reactive({
|
||||
formModel: {},
|
||||
isUpdate: true,
|
||||
isView: false,
|
||||
rowId: '',
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
state.isUpdate = !!data?.isUpdate;
|
||||
state.isView = !!data?.isView;
|
||||
|
||||
setModalProps({
|
||||
destroyOnClose: true,
|
||||
maskClosable: false,
|
||||
showCancelBtn: !state.isView,
|
||||
showOkBtn: !state.isView,
|
||||
canFullscreen: true,
|
||||
width: 1200,
|
||||
const { notification } = useMessage();
|
||||
const { filterFormSchemaAuth } = usePermission();
|
||||
const formRef = ref();
|
||||
formProps.schemas = filterFormSchemaAuth(formProps.schemas!);
|
||||
const state = reactive({
|
||||
formModel: {},
|
||||
isUpdate: true,
|
||||
isView: false,
|
||||
rowId: ''
|
||||
});
|
||||
const viewformProps = cloneDeep(formProps);
|
||||
setDisabled(viewformProps.schemas);
|
||||
formRef.value.setProps(state.isView ? viewformProps : formProps);
|
||||
if (state.isUpdate || state.isView) {
|
||||
state.rowId = data.id;
|
||||
const record = await getCaseErpApply(data.id);
|
||||
formRef.value.setFieldsValue(record);
|
||||
} else {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
|
||||
const { t } = useI18n();
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
state.isUpdate = !!data?.isUpdate;
|
||||
state.isView = !!data?.isView;
|
||||
|
||||
function setDisabled(schemas) {
|
||||
const layoutComponents = ['tab', 'grid', 'card'];
|
||||
schemas?.map((info) => {
|
||||
if (layoutComponents.includes(info.type!)) {
|
||||
info.children?.map((childInfo) => {
|
||||
childInfo.list.map((com) => {
|
||||
if (layoutComponents.includes(com.type)) {
|
||||
setDisabled(childInfo.list);
|
||||
setModalProps({
|
||||
destroyOnClose: true,
|
||||
maskClosable: false,
|
||||
showCancelBtn: !state.isView,
|
||||
showOkBtn: !state.isView,
|
||||
canFullscreen: true,
|
||||
width: 1200
|
||||
});
|
||||
const viewformProps = cloneDeep(formProps);
|
||||
setDisabled(viewformProps.schemas);
|
||||
formRef.value.setProps(state.isView ? viewformProps : formProps);
|
||||
if (state.isUpdate || state.isView) {
|
||||
state.rowId = data.id;
|
||||
const record = await getCaseErpApply(data.id);
|
||||
formRef.value.setFieldsValue(record);
|
||||
} else {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
|
||||
|
||||
function setDisabled(schemas) {
|
||||
const layoutComponents = ['tab', 'grid', 'card'];
|
||||
schemas?.map((info) => {
|
||||
if (layoutComponents.includes(info.type!)) {
|
||||
info.children?.map((childInfo) => {
|
||||
childInfo.list.map((com) => {
|
||||
if (layoutComponents.includes(com.type)) {
|
||||
setDisabled(childInfo.list);
|
||||
} else {
|
||||
com.dynamicDisabled = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else if (info.type == 'one-for-one') {
|
||||
setDisabled(info.componentProps.childSchemas);
|
||||
} else {
|
||||
com.dynamicDisabled = true;
|
||||
info.dynamicDisabled = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else if (info.type == 'one-for-one') {
|
||||
setDisabled(info.componentProps.childSchemas);
|
||||
} else {
|
||||
info.dynamicDisabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await formRef.value?.validate();
|
||||
//添加隐藏组件
|
||||
if (formProps.hiddenComponent?.length) {
|
||||
formProps.hiddenComponent.forEach((component) => {
|
||||
values[component.bindField] = component.value;
|
||||
});
|
||||
}
|
||||
setModalProps({ confirmLoading: true });
|
||||
|
||||
// TODO custom api
|
||||
if (!state.isUpdate) {
|
||||
//false 新增
|
||||
await addCaseErpApply(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('新增成功！'),
|
||||
}); //提示消息
|
||||
} else {
|
||||
values.id = state.rowId;
|
||||
await updateCaseErpApply(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('修改成功！'),
|
||||
}); //提示消息
|
||||
}
|
||||
|
||||
closeModal();
|
||||
formRef.value.resetFields();
|
||||
emit('success');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await formRef.value?.validate();
|
||||
//添加隐藏组件
|
||||
if (formProps.hiddenComponent?.length) {
|
||||
formProps.hiddenComponent.forEach((component) => {
|
||||
values[component.bindField] = component.value;
|
||||
});
|
||||
}
|
||||
setModalProps({ confirmLoading: true });
|
||||
|
||||
// TODO custom api
|
||||
if (!state.isUpdate) {
|
||||
//false 新增
|
||||
await addCaseErpApply(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('新增成功！')
|
||||
}); //提示消息
|
||||
} else {
|
||||
values.id = state.rowId;
|
||||
await updateCaseErpApply(values);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: t('修改成功！')
|
||||
}); //提示消息
|
||||
}
|
||||
|
||||
closeModal();
|
||||
formRef.value.resetFields();
|
||||
emit('success');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user