<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { onMounted, reactive } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import dayjs from 'dayjs';
|
|
import { delTable, getTableList, updateTableRow } from '#/api/extend/table';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
|
import Form from '../commonForm/index.vue';
|
|
defineOptions({ name: 'ExtendTableDemoRedactTable' });
|
|
interface State {
|
industryTypeList: any[];
|
tabClickId: string;
|
}
|
|
const state = reactive<State>({
|
industryTypeList: [],
|
tabClickId: '',
|
});
|
const baseStore = useBaseStore();
|
const { createMessage, createConfirm } = useMessage();
|
const columns: BasicColumn[] = [
|
{ title: '项目名称', dataIndex: 'projectName', width: 200, slots: { default: 'projectName' } },
|
{ title: '项目编码', dataIndex: 'projectCode', width: 160, slots: { default: 'projectCode' } },
|
{ title: '项目类型', dataIndex: 'projectType', width: 120, slots: { default: 'projectType' } },
|
{ title: '项目阶段', dataIndex: 'projectPhase', width: 120, slots: { default: 'projectPhase' } },
|
{ title: '客户名称', dataIndex: 'customerName', width: 200, slots: { default: 'customerName' } },
|
{ title: '负责人', dataIndex: 'principal', width: 80, slots: { default: 'principal' } },
|
{ title: '立项人', dataIndex: 'jackStands', width: 80, slots: { default: 'jackStands' } },
|
{ title: '交互时间', dataIndex: 'interactionDate', width: 150, slots: { default: 'interactionDate' } },
|
{ title: '费用金额', dataIndex: 'costAmount', width: 100, slots: { default: 'costAmount' } },
|
{ title: '已用金额', dataIndex: 'tunesAmount', width: 100, slots: { default: 'tunesAmount' } },
|
{ title: '预计收入', dataIndex: 'projectedIncome', width: 100, slots: { default: 'projectedIncome' } },
|
{ title: '登记人', dataIndex: 'registrant', width: 120 },
|
{ title: '登记时间', dataIndex: 'registerDate', width: 150, format: 'date|YYYY-MM-DD HH:mm' },
|
{ title: '备注', dataIndex: 'description', width: 100, slots: { default: 'description' } },
|
{ title: '操作', dataIndex: 'action', width: 100, slots: { default: 'action' } },
|
];
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const [registerTable, { reload }] = useVxeTable({
|
api: getTableList,
|
columns,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
},
|
});
|
function handleRowClick(item) {
|
state.tabClickId = item.rowid;
|
}
|
function handleUpdate(row) {
|
updateTableRow(row).then((res) => {
|
createMessage.success(res.msg);
|
state.tabClickId = '';
|
});
|
}
|
function handleDel(id) {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: $t('common.tipTitle'),
|
onOk: () => {
|
delTable(id).then((res) => {
|
reload();
|
createMessage.success(res.msg);
|
});
|
},
|
});
|
}
|
function getTableActions(record): ActionItem[] {
|
return [
|
{ label: '保存', onClick: handleUpdate.bind(null, record) },
|
{ label: '删除', color: 'error', onClick: handleDel.bind(null, record.id) },
|
];
|
}
|
function addOrUpdateHandle(id = '') {
|
openFormModal(true, { id, industryTypeList: state.industryTypeList });
|
}
|
async function init() {
|
state.industryTypeList = (await baseStore.getDictionaryData('IndustryType')) as any[];
|
}
|
|
onMounted(() => init());
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @cell-click="handleRowClick" @register="registerTable">
|
<template #tableTitle>
|
<a-button pre-icon="icon-ym icon-ym-btn-add" type="primary" @click="addOrUpdateHandle()">新建</a-button>
|
</template>
|
<template v-for="column in columns" :key="column.dataIndex" #[column.dataIndex]="{ record }">
|
<template v-if="state.tabClickId == record.id">
|
<jnpf-date-picker v-if="column.dataIndex === 'interactionDate'" v-model:value="record[column.dataIndex]" allow-clear format="YYYY-MM-DD" />
|
<span v-else-if="column.dataIndex === 'registrant'">{{ record[column.dataIndex] }}</span>
|
<span v-else-if="column.dataIndex === 'registerDate'">
|
{{ record[column.dataIndex] ? dayjs(record[column.dataIndex]).format('YYYY-MM-DD HH:mm:ss') : '' }}</span
|
>
|
<jnpf-select
|
v-else-if="column.dataIndex === 'projectType'"
|
v-model:value="record[column.dataIndex]"
|
:options="state.industryTypeList"
|
class="!w-full" />
|
<template v-else-if="column.dataIndex === 'action'">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
<a-input v-else v-model:value="record[column.dataIndex]" />
|
</template>
|
<template v-else>
|
<span v-if="column.dataIndex === 'interactionDate'">{{
|
record[column.dataIndex] ? dayjs(record[column.dataIndex]).format('YYYY-MM-DD') : ''
|
}}</span>
|
<span v-else-if="column.dataIndex === 'registerDate'">{{
|
record[column.dataIndex] ? dayjs(record[column.dataIndex]).format('YYYY-MM-DD HH:mm:ss') : ''
|
}}</span>
|
<span v-else-if="column.dataIndex === 'projectType'">
|
{{
|
state.industryTypeList.filter((o) => o.id == record.projectType)[0]
|
? state.industryTypeList.filter((o) => o.id == record.projectType)[0].fullName
|
: ''
|
}}
|
</span>
|
<span v-else>{{ record[column.dataIndex] }}</span>
|
</template>
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reload" />
|
</div>
|
</template>
|
