ant-vue-admin/src/views/money/bill/data.ts

import { FormProps, BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Form/index';
import { adapt } from '/@/utils/adapt';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import CustomInput from './customCom/CustomInput.vue';
import YearPicker from './customCom/YearPicker.vue';
import moment from 'moment';
import { getYearFee } from '/@/api/sys/money';
import { useMessage } from '/@/hooks/web/useMessage';
import UploadFile from '/@/views/general/config/customComponents/UploadFile.vue';

const { createMessage } = useMessage();
const { error } = createMessage;
const adaptWidth = adapt();

export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    editComponentProps: {
      prefix: '$',
    },
    width: 100,
    sorter: true,
  },
  {
    title: '交易类型',
    dataIndex: 'type',
    width: 130,
    // customRender({ record }) {
    //   const options = ['会费', '收入', '支出', '内部转账'];
    //   return options[record['type.in_out']];
    // },
    customRender({ record }) {
      const inOut = record.type;
      let color = 'red';
      let text = '会费';
      switch (inOut) {
        case 0:
          text = '会费';
          color = 'red';
          break;
        case 1:
          text = '收入';
          color = 'green';
          break;
        case 2:
          text = '支出';
          color = 'red';
          break;
        case 3:
          text = '内部转账';
          color = 'blue';
          break;
      }
      return h(Tag, { color: color }, () => text);
    },
    sorter: true,
  },
  {
    title: '交易名称',
    dataIndex: 'typename',
    width: 160,
    sorter: true,
  },
  {
    title: '交易账户',
    dataIndex: 'account',
    width: 160,
    sorter: true,
  },
  {
    title: '金额',
    dataIndex: 'money',
    width: 160,
    sorter: true,
  },
  {
    title: '相关会员',
    dataIndex: 'member',
    width: 160,
    sorter: true,
  },
  {
    title: '是否开票',
    dataIndex: 'isCode',
    width: 130,
    customRender({ record }) {
      const options = ['否', '是'];
      return options[record.isCode];
    },
    sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 160,
    sorter: true,
  },
  {
    title: '交易日期',
    dataIndex: 'tradetime',
    width: 200,
    customRender({ record }) {
      return moment(record.tradetime).format('YYYY-MM-DD');
    },
    sorter: true,
  },
];

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    schemas: [
      {
        field: `id`,
        label: `ID`,
        component: 'Input',
        componentProps: {
          placeholder: 'ID',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `type`,
        label: `交易类型`,
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '收入',
              value: 1,
            },
            {
              label: '支出',
              value: 2,
            },
            {
              label: '内部转账',
              value: 3,
            },
          ],
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `typename`,
        label: `交易名称`,
        component: 'Input',
        componentProps: {
          placeholder: '交易名称',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `account`,
        label: `交易账户`,
        component: 'Input',
        componentProps: {
          placeholder: '交易账户',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `money`,
        label: `金额`,
        component: 'Input',
        componentProps: {
          placeholder: '金额',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `member`,
        label: `相关会员`,
        component: 'Input',
        componentProps: {
          placeholder: '相关会员',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `isCode`,
        label: `是否开票`,
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '否',
              value: 0,
            },
            {
              label: '是',
              value: 1,
            },
          ],
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `remark`,
        label: `备注`,
        component: 'Input',
        componentProps: {
          placeholder: '备注',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `tradetime`,
        label: `交易日期`,
        component: 'DatePicker',
        componentProps: {
          placeholder: '交易日期',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
    ],
  };
}

// =================popup================================
export const schemas: FormSchema[] = [
  {
    field: 'type',
    label: '交易类型',
    component: 'RadioButtonGroup',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      options: [
        { label: '收入', value: 1 },
        { label: '支出', value: 2 },
        { label: '内部转账', value: 3 },
      ],
    },
    defaultValue: 1,
    required: true,
  },
  {
    field: 'typename',
    component: 'Select',
    label: '交易名称',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.typename,
        year: model.year,
        type: model.type,
        placeholder: '交易名称',
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'account',
    component: 'Select',
    label: '交易账户',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.account,
        placeholder: '添加账户',
        onChange(value) {
          if (model.type === 3 && model.inaccount && value.id === model.inaccount.id) {
            error('交易账户不能是流入账户！');
            return;
          }
          model[field] = value;
        },
      });
    },
    required: true,
  },
  {
    field: 'inaccount',
    component: 'Select',
    label: '流入账户',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.inaccount,
        placeholder: '添加账户',
        onChange(value) {
          if (model.type === 3 && model.account && value.id === model.account.id) {
            error('交易账户不能是流入账户！');
            return;
          }
          model[field] = value;
        },
      });
    },
    show: ({ values }) => {
      if (values.type == 3) {
        return true;
      }
      return false;
    },
    required: ({ values }) => {
      if (values.type == 3) {
        return true;
      }
      return false;
    },
  },
  {
    field: 'year',
    component: 'Input',
    label: '会员年份',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(YearPicker, {
        value: model.year,
        onChange(value) {
          model[field] = value;
          if (model.member && model.member.id && model.year) {
            let year = 0;
            if (model.year.year) {
              year = model.year.year;
            } else {
              year = model.year;
            }
            getYearFee({ member_id: model.member.id, year }).then((res) => {
              if (res.money) {
                model.money = res.money;
              }
            });
          }
        },
      });
    },
    show: ({ values }) => {
      if (values.typename === '会费' || (values.typename && values.typename.name === '会费')) {
        return true;
      }
      return false;
    },
    required: ({ values }) => {
      if (values.typename === '会费' || (values.typename && values.typename.name === '会费')) {
        return true;
      }
      return false;
    },
  },
  {
    field: 'member',
    component: 'Select',
    label: '相关会员',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.member,
        placeholder: '添加会员',
        onChange(value) {
          model[field] = value;
          if (model.member.id && model.year) {
            let year = 0;
            if (model.year.year) {
              year = model.year.year;
            } else {
              year = model.year;
            }
            getYearFee({ member_id: model.member.id, year }).then((res) => {
              if (res.money) {
                model.money = res.money;
              }
            });
          }
        },
      });
    },
    required: true,
  },
  {
    field: 'money',
    component: 'Input',
    label: '金额',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      type: 'number',
      placeholder: '金额',
    },
    required: true,
  },
  {
    field: 'isCode',
    label: '是否开票',
    component: 'RadioButtonGroup',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      options: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
      ],
    },
    defaultValue: 0,
    required: true,
  },
  {
    field: 'code',
    component: 'Input',
    label: '发票号',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    show: ({ values }) => {
      if (values.isCode) {
        return true;
      }
      return false;
    },
    componentProps: {
      placeholder: '发票号',
    },
  },
  {
    field: 'attachment',
    component: 'Select',
    label: '附件',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(UploadFile, {
        value: model.attachment,
        type: 'files',
        style: { width: '100%' },
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'remark',
    component: 'InputTextArea',
    label: '备注',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    defaultValue: '',
    componentProps: {
      placeholder: '备注',
    },
  },
];