Sanakey
3 天以前 b5c1614fe473330ceca8b7cff0f1802e19bd5039
src/views/customer/components/tableData.tsx
@@ -1,56 +1,208 @@
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',
@@ -97,253 +249,20 @@
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示例`,
        slot: 'custom',
        label: `搜索`,
        component: 'Input',
        colProps: {
          xl: 12,
          xxl: 8,
@@ -352,206 +271,3 @@
    ],
  };
}
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: '重置' } },
      ],
    },
  },
];