| | |
| | | import { optionsListApi } from '@/api/demo/select'; |
| | | import { FormProps, FormSchema, BasicColumn } from '@/components/Table'; |
| | | import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable'; |
| | | import { ref } from 'vue'; |
| | | import {Input} from 'ant-design-vue'; |
| | | |
| | | import { FormProps, BasicColumn } from '@/components/Table'; |
| | | import {treeOptionsListApi} from "@/api/demo/tree"; |
| | | |
| | | export function getEditCellColumns(): BasicColumn[] { |
| | | return [ |
| | | { |
| | | title: '公司名称', |
| | | dataIndex: 'name', |
| | | edit: true, |
| | | title: '线索名称', |
| | | // defaultHidden: true, |
| | | dataIndex: 'cluesName', |
| | | sorter: true, |
| | | editComponentProps: { |
| | | prefix: '$', |
| | | }, |
| | | width: 200, |
| | | // filters:{ |
| | | // text: '公司名称', |
| | | // value: 'name', |
| | | // } |
| | | // filterSearch: true, |
| | | width: 200 |
| | | }, |
| | | { |
| | | title: '客户标签', |
| | | dataIndex: 'tags', |
| | | edit: true, |
| | | // editComponent: 'ApiSelect', |
| | | // editComponentProps: { |
| | | // api: optionsListApi, |
| | | // resultField: 'list', |
| | | // labelField: 'name', |
| | | // valueField: 'id', |
| | | // }, |
| | | width: 200, |
| | | // editRender: ({ text }) => { |
| | | // return h(Tag, { percent: Number(text) }); |
| | | // }, |
| | | }, |
| | | { |
| | | title: '主要联系人', |
| | | dataIndex: 'name1', |
| | | edit: true, |
| | | // 默认必填校验 |
| | | editRule: true, |
| | | title: '存档时间', |
| | | dataIndex: 'archiveTime', |
| | | sorter: true, |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '最近动态', |
| | | dataIndex: 'name2', |
| | | title: '状态id', |
| | | dataIndex: 'statusId', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '状态内容', |
| | | dataIndex: 'status', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '跟进时间', |
| | | dataIndex: 'followUpTime', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '无效类型', |
| | | dataIndex: 'failType', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '无效状态', |
| | | dataIndex: 'failStatus', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '无效状态内容', |
| | | dataIndex: 'failStatusName', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '无效原因', |
| | | dataIndex: 'failReason', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '进入私海时间', |
| | | dataIndex: 'privateTime', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '进入公海时间', |
| | | dataIndex: 'publicTime', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '是否为公海线索', |
| | | dataIndex: 'isPublic', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '评分', |
| | | dataIndex: 'star', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '下次跟进时间', |
| | | dataIndex: 'nextFollowUpTime', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '是否有重复内容', |
| | | dataIndex: 'duplicateFlag', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '标签', |
| | | dataIndex: 'tagList', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '公司网址', |
| | | dataIndex: 'homepage', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '线索来源', |
| | | dataIndex: 'originList', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '简称', |
| | | dataIndex: 'shortName', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '国家', |
| | | dataIndex: 'country', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '省份', |
| | | dataIndex: 'province', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '地区', |
| | | dataIndex: 'city', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '公司名称', |
| | | dataIndex: 'corporate', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '公司类型', |
| | | dataIndex: 'bizType', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '地区号', |
| | | dataIndex: 'telAreaCode', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '座机', |
| | | dataIndex: 'tel', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '采购意向', |
| | | dataIndex: 'intentionLevel', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '年采购额', |
| | | dataIndex: 'annualProcurement', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '时区', |
| | | dataIndex: 'timezone', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '详细地址', |
| | | dataIndex: 'address', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '搜索关键字', |
| | | dataIndex: 'adKeyword', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '图片', |
| | | dataIndex: 'imageList', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '线索备注', |
| | | dataIndex: 'hdmeno', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '规模', |
| | | dataIndex: 'scaleId', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '业务员', |
| | | dataIndex: 'seller', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '访问来源', |
| | | dataIndex: 'inquiryOrigin', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '主营产品', |
| | | dataIndex: 'categoryIds', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '访问IP所在地', |
| | | dataIndex: 'inquiryCountry', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '是否已关注', |
| | | dataIndex: 'pinFlag', |
| | | width: 200, |
| | | }, |
| | | |
| | | { |
| | | title: '最近联系人', |
| | | dataIndex: 'id', |
| | |
| | | |
| | | |
| | | |
| | | export function getBasicColumns(): BasicColumn[] { |
| | | return [ |
| | | { |
| | | title: 'ID', |
| | | dataIndex: 'id', |
| | | fixed: 'left', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '姓名', |
| | | dataIndex: 'name', |
| | | width: 150, |
| | | filters: [ |
| | | { text: 'Male', value: 'male' }, |
| | | { text: 'Female', value: 'female' }, |
| | | ], |
| | | }, |
| | | { |
| | | title: '地址', |
| | | dataIndex: 'address', |
| | | }, |
| | | { |
| | | title: '编号', |
| | | dataIndex: 'no', |
| | | width: 150, |
| | | sorter: true, |
| | | defaultHidden: true, |
| | | }, |
| | | { |
| | | title: '开始时间', |
| | | width: 150, |
| | | sorter: true, |
| | | dataIndex: 'beginTime', |
| | | }, |
| | | { |
| | | title: '结束时间', |
| | | width: 150, |
| | | sorter: true, |
| | | dataIndex: 'endTime', |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | export function getBasicShortColumns(): BasicColumn[] { |
| | | return [ |
| | | { |
| | | title: 'ID', |
| | | width: 150, |
| | | dataIndex: 'id', |
| | | sorter: true, |
| | | sortOrder: 'ascend', |
| | | }, |
| | | { |
| | | title: '姓名', |
| | | dataIndex: 'name', |
| | | width: 120, |
| | | }, |
| | | { |
| | | title: '地址', |
| | | dataIndex: 'address', |
| | | }, |
| | | { |
| | | title: '编号', |
| | | dataIndex: 'no', |
| | | width: 80, |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | export function getMultipleHeaderColumns(): BasicColumn[] { |
| | | const testRef = ref('姓名:'); |
| | | return [ |
| | | { |
| | | title: 'ID', |
| | | dataIndex: 'id', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '姓名', |
| | | customHeaderRender() { |
| | | return ( |
| | | <Input placeholder="输入值 更新 自定义title" size="small" v-model:value={testRef.value} /> |
| | | ); |
| | | }, |
| | | dataIndex: 'name', |
| | | width: 120, |
| | | }, |
| | | { |
| | | title: '地址', |
| | | dataIndex: 'address', |
| | | sorter: true, |
| | | children: [ |
| | | { |
| | | title: '编号', |
| | | customHeaderRender(column) { |
| | | // 【自定义渲染的】 |
| | | return ( |
| | | <div> |
| | | _ <span style="background: #f00; color: #fff;">{testRef.value}</span> _ |
| | | {column.customTitle} |
| | | </div> |
| | | ); |
| | | }, |
| | | dataIndex: 'no', |
| | | width: 120, |
| | | filters: [ |
| | | { text: 'Male', value: 'male', children: [] }, |
| | | { text: 'Female', value: 'female', children: [] }, |
| | | ], |
| | | }, |
| | | |
| | | { |
| | | title: '开始时间', |
| | | dataIndex: 'beginTime', |
| | | width: 120, |
| | | }, |
| | | { |
| | | title: '结束时间', |
| | | dataIndex: 'endTime', |
| | | width: 120, |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | export function getCustomHeaderColumns(): BasicColumn[] { |
| | | return [ |
| | | { |
| | | title: 'ID', |
| | | dataIndex: 'id', |
| | | helpMessage: 'headerHelpMessage方式1', |
| | | width: 200, |
| | | }, |
| | | { |
| | | // title: '姓名', |
| | | dataIndex: 'name', |
| | | width: 120, |
| | | }, |
| | | { |
| | | // title: '地址', |
| | | dataIndex: 'address', |
| | | width: 120, |
| | | sorter: true, |
| | | }, |
| | | |
| | | { |
| | | title: '编号', |
| | | dataIndex: 'no', |
| | | width: 120, |
| | | filters: [ |
| | | { text: 'Male', value: 'male', children: [] }, |
| | | { text: 'Female', value: 'female', children: [] }, |
| | | ], |
| | | }, |
| | | { |
| | | title: '开始时间', |
| | | dataIndex: 'beginTime', |
| | | width: 120, |
| | | }, |
| | | { |
| | | title: '结束时间', |
| | | dataIndex: 'endTime', |
| | | width: 120, |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | const cellContent = (_, index) => ({ |
| | | colSpan: index === 9 ? 0 : 1, |
| | | }); |
| | | |
| | | export function getMergeHeaderColumns(): BasicColumn[] { |
| | | return [ |
| | | { |
| | | title: 'ID', |
| | | dataIndex: 'id', |
| | | width: 300, |
| | | customCell: (_, index) => ({ |
| | | colSpan: index === 9 ? 6 : 1, |
| | | }), |
| | | }, |
| | | { |
| | | title: '姓名', |
| | | dataIndex: 'name', |
| | | width: 300, |
| | | customCell: cellContent, |
| | | }, |
| | | { |
| | | title: '地址', |
| | | dataIndex: 'address', |
| | | colSpan: 2, |
| | | width: 120, |
| | | sorter: true, |
| | | customCell: (_, index) => ({ |
| | | rowSpan: index === 2 ? 2 : 1, |
| | | colSpan: index === 3 || index === 9 ? 0 : 1, |
| | | }), |
| | | }, |
| | | { |
| | | title: '编号', |
| | | dataIndex: 'no', |
| | | colSpan: 0, |
| | | filters: [ |
| | | { text: 'Male', value: 'male', children: [] }, |
| | | { text: 'Female', value: 'female', children: [] }, |
| | | ], |
| | | customCell: cellContent, |
| | | }, |
| | | { |
| | | title: '开始时间', |
| | | dataIndex: 'beginTime', |
| | | width: 200, |
| | | customCell: cellContent, |
| | | }, |
| | | { |
| | | title: '结束时间', |
| | | dataIndex: 'endTime', |
| | | width: 200, |
| | | customCell: cellContent, |
| | | }, |
| | | ]; |
| | | } |
| | | export const getAdvanceSchema = (itemNumber = 6): FormSchema[] => { |
| | | const arr: FormSchema[] = []; |
| | | for (let index = 0; index < itemNumber; index++) { |
| | | arr.push({ |
| | | field: `field${index}`, |
| | | label: `字段${index}`, |
| | | component: 'Input', |
| | | colProps: { |
| | | xl: 12, |
| | | xxl: 8, |
| | | }, |
| | | }); |
| | | } |
| | | return arr; |
| | | }; |
| | | export function getFormConfig(): Partial<FormProps> { |
| | | return { |
| | | labelWidth: 100, |
| | | layout: 'horizontal', |
| | | rowProps: { |
| | | justify: 'end', |
| | | }, |
| | | showResetButton: false, |
| | | showSubmitButton: false, |
| | | schemas: [ |
| | | ...getAdvanceSchema(5), |
| | | { |
| | | field: `field11`, |
| | | label: ``, |
| | | slot: 'custom', |
| | | label: `搜索`, |
| | | component: 'Input', |
| | | colProps: { |
| | | xl: 12, |
| | | xxl: 8, |
| | |
| | | ], |
| | | }; |
| | | } |
| | | export function getBasicData() { |
| | | return (() => { |
| | | const arr: any = []; |
| | | for (let index = 0; index < 40; index++) { |
| | | arr.push({ |
| | | id: `${index}`, |
| | | name: 'John Brown', |
| | | age: `1${index}`, |
| | | no: `${index + 10}`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | }); |
| | | } |
| | | return arr; |
| | | })(); |
| | | } |
| | | |
| | | export function getTreeTableData() { |
| | | return (() => { |
| | | const arr: any = []; |
| | | for (let index = 0; index < 40; index++) { |
| | | arr.push({ |
| | | id: `${index}`, |
| | | name: 'John Brown', |
| | | age: `1${index}`, |
| | | no: `${index + 10}`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | children: [ |
| | | { |
| | | id: `l2-${index}-1`, |
| | | name: 'John Brown', |
| | | age: `1`, |
| | | no: `${index + 10}`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | children: [ |
| | | { |
| | | id: `l3-${index}-1-1`, |
| | | name: 'John Brown', |
| | | age: `11`, |
| | | no: `11`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | }, |
| | | { |
| | | id: `l3-${index}-1-2`, |
| | | name: 'John Brown', |
| | | age: `12`, |
| | | no: `12`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: `l2-${index}-2`, |
| | | name: 'John Brown', |
| | | age: `2`, |
| | | no: `${index + 10}`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | children: [ |
| | | { |
| | | id: `l3-${index}-2-1`, |
| | | name: 'John Brown', |
| | | age: `21`, |
| | | no: `21`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | }, |
| | | { |
| | | id: `l3-${index}-2-2`, |
| | | name: 'John Brown', |
| | | age: `22`, |
| | | no: `22`, |
| | | address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', |
| | | beginTime: new Date().toLocaleString(), |
| | | endTime: new Date().toLocaleString(), |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }); |
| | | } |
| | | return arr; |
| | | })(); |
| | | } |
| | | |
| | | export const vxeTableColumns: VxeGridPropTypes.Columns = [ |
| | | { |
| | | title: '序号', |
| | | type: 'seq', |
| | | fixed: 'left', |
| | | width: '50', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '固定列', |
| | | field: 'name', |
| | | width: 150, |
| | | showOverflow: 'tooltip', |
| | | fixed: 'left', |
| | | }, |
| | | { |
| | | title: '自适应列', |
| | | field: 'address', |
| | | }, |
| | | { |
| | | title: '自定义列(自定义导出)', |
| | | field: 'no', |
| | | width: 200, |
| | | showOverflow: 'tooltip', |
| | | align: 'center', |
| | | slots: { |
| | | default: ({ row }) => { |
| | | const text = `自定义${row.no}`; |
| | | return [<div class="text-red-500">{text}</div>]; |
| | | }, |
| | | }, |
| | | exportMethod: ({ row }) => { |
| | | return `自定义${row.no}导出`; |
| | | }, |
| | | }, |
| | | { |
| | | title: '自定义编辑', |
| | | width: 150, |
| | | field: 'name1', |
| | | align: 'center', |
| | | editRender: { |
| | | name: 'AInput', |
| | | placeholder: '请点击输入', |
| | | }, |
| | | }, |
| | | { |
| | | title: '开始时间', |
| | | width: 150, |
| | | field: 'beginTime', |
| | | showOverflow: 'tooltip', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | title: '结束时间', |
| | | width: 150, |
| | | field: 'endTime', |
| | | showOverflow: 'tooltip', |
| | | align: 'center', |
| | | }, |
| | | { |
| | | width: 160, |
| | | title: '操作', |
| | | align: 'center', |
| | | slots: { default: 'action' }, |
| | | fixed: 'right', |
| | | }, |
| | | ]; |
| | | |
| | | export const vxeTableFormSchema: VxeFormItemProps[] = [ |
| | | { |
| | | field: 'field0', |
| | | title: 'field0', |
| | | itemRender: { |
| | | name: 'AInput', |
| | | }, |
| | | span: 6, |
| | | }, |
| | | { |
| | | field: 'field1', |
| | | title: 'field1', |
| | | itemRender: { |
| | | name: 'AApiSelect', |
| | | props: { |
| | | api: optionsListApi, |
| | | resultField: 'list', |
| | | labelField: 'name', |
| | | valueField: 'id', |
| | | }, |
| | | }, |
| | | span: 6, |
| | | }, |
| | | { |
| | | span: 12, |
| | | align: 'right', |
| | | className: '!pr-0', |
| | | itemRender: { |
| | | name: 'AButtonGroup', |
| | | children: [ |
| | | { |
| | | props: { type: 'primary', content: '查询', htmlType: 'submit' }, |
| | | attrs: { class: 'mr-2' }, |
| | | }, |
| | | { props: { type: 'default', htmlType: 'reset', content: '重置' } }, |
| | | ], |
| | | }, |
| | | }, |
| | | ]; |