初始化

ny

昨天 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<script lang="ts" setup>
import type { BasicColumn } from '@jnpf/ui/vxeTable';
 
import { onMounted, reactive } from 'vue';
 
import { useModal } from '@jnpf/ui/modal';
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
 
import { getTableList } from '#/api/extend/table';
import { $t } from '#/locales';
import { useBaseStore } from '#/store';
 
import Form from './Form.vue';
 
defineOptions({ name: 'ExtendTableDemoPostilTable' });
 
interface State {
  industryTypeList: any[];
}
 
const state = reactive<State>({
  industryTypeList: [],
});
const baseStore = useBaseStore();
const columns: BasicColumn[] = [
  { title: '项目名称', dataIndex: 'projectName', width: 200 },
  { title: '项目编码', dataIndex: 'projectCode', width: 160 },
  {
    title: '项目类型',
    dataIndex: 'projectType',
    width: 120,
    customRender: ({ record }) => {
      const item = state.industryTypeList.find((o) => o.id == record.projectType);
      return item && item.fullName ? item.fullName : '';
    },
  },
  { title: '项目阶段', dataIndex: 'projectPhase', width: 120 },
  { title: '表格批注', dataIndex: 'postilCount', width: 100, slots: { default: 'postilCount' } },
  { title: '客户名称', dataIndex: 'customerName', width: 200 },
  { title: '负责人', dataIndex: 'principal', width: 80 },
  { title: '立项人', dataIndex: 'jackStands', width: 80 },
  { title: '交互时间', dataIndex: 'interactionDate', width: 100, format: 'date|YYYY-MM-DD' },
  { title: '费用金额', dataIndex: 'costAmount', width: 100 },
  { title: '已用金额', dataIndex: 'tunesAmount', width: 100 },
  { title: '预计收入', dataIndex: 'projectedIncome', width: 100 },
  { title: '登记人', dataIndex: 'registrant', width: 80 },
  { title: '登记时间', dataIndex: 'registerDate', width: 150, format: 'date|YYYY-MM-DD HH:mm' },
  { title: '备注', dataIndex: 'description', width: 100 },
];
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,
        },
      },
    ],
  },
});
const [registerForm, { openModal: openFormModal }] = useModal();
 
async function init() {
  state.industryTypeList = (await baseStore.getDictionaryData('IndustryType')) as any[];
}
function addOrUpdateHandle(id = '') {
  openFormModal(true, { id });
}
 
onMounted(() => init());
</script>
<template>
  <div class="jnpf-content-wrapper">
    <div class="jnpf-content-wrapper-center">
      <div class="jnpf-content-wrapper-content">
        <BasicVxeTable @register="registerTable">
          <template #postilCount="{ record }">
            <span class="cursor-pointer" style="color: #ff5b5b" @click="addOrUpdateHandle(record.id)">批注({{ record.postilCount || 0 }})</span>
          </template>
        </BasicVxeTable>
      </div>
    </div>
    <Form @register="registerForm" @reload="reload" />
  </div>
</template>