ball_admin/src/pages/user/user_config.tsx

import { FormType } from "@/components/form/interface";
import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
import { Avatar, Image, Tooltip } from "antd";
import { getAgeByIDCard, getBirthDateAndGender } from "@/util/util";
export const defaultConfig = (team, per) => [
  {
    type: FormType.input,
    label: "用户名",
    name: "user_name",
    value: "",
    rules: [{ required: true, message: "请输入用户名称!" }],
  },
  {
    type: FormType.radio,
    label: "性别",
    name: "sex",
    radioData: [
      {
        key: "男",
        val: 1,
      },
      {
        key: "女",
        val: 2,
      },
    ],
    value: 0,
    rules: [{ required: true, message: "请选择性别" }],
  },
  {
    type: FormType.radio,
    label: "视频查看权限",
    name: "video_permission",
    radioData: [
      {
        key: "有",
        val: 1,
      },
      {
        key: "无",
        val: 2,
      },
    ],
    value: 0,
    rules: [{ required: true, message: "视频查看权限" }],
  },
  {
    type: FormType.radio,
    label: "是否网格员",
    name: "grid_user",
    radioData: [
      {
        key: "是",
        val: 1,
      },
      {
        key: "否",
        val: 2,
      },
    ],
    value: 0,
    rules: [{ required: true, message: "请选择是否网格员" }],
  },
  {
    type: FormType.radio,
    label: "是否微网格员",
    name: "grid_letter_user",
    radioData: [
      {
        key: "是",
        val: 1,
      },
      {
        key: "否",
        val: 2,
      },
    ],
    value: 0,
    rules: [{ required: true, message: "是否微网格员" }],
  },
  {
    type: FormType.radio,
    label: "是否两委人员",
    name: "two_committees",
    radioData: [
      {
        key: "是",
        val: 1,
      },
      {
        key: "否",
        val: 2,
      },
    ],
    value: 0,
    rules: [],
  },
  {
    type: FormType.radio,
    label: "是否为巡防大队",
    name: "patrol_user",
    radioData: [
      {
        key: "是",
        val: 1,
      },
      {
        key: "否",
        val: 2,
      },
    ],
    value: 0,
    rules: [{ required: true, message: "请选择是否为巡防大队" }],
  },
  {
    type: FormType.radio,
    label: "是否民兵",
    name: "militia",
    radioData: [
      {
        key: "是",
        val: 1,
      },
      {
        key: "否",
        val: 2,
      },
    ],
    value: 0,
    rules: [{ required: true, message: "请选择是否民兵" }],
  },

  {
    type: FormType.input,
    label: "身份证",
    name: "id_card",
    value: "",
    rules: [{ required: true, message: "请输入身份证" }],
  },
  {
    type: FormType.input,
    label: "登录账号",
    name: "account",
    value: "",
    rules: [{ required: true, message: "请输入登录账号" }],
  },

  {
    type: FormType.input,
    label: "联系电话",
    name: "tel",
    value: "",
    rules: [{ required: true, message: "请填写联系电话" }],
  },
  {
    type: FormType.cehckboxGroup,
    label: "所属队伍",
    name: "team_link_user",
    checkboxData: team,
    value: "",
    rules: [{ required: true, message: "请选择所属队伍" }],
  },
  {
    type: FormType.cehckboxGroup,
    label: "个人身份属性",
    name: "pers_link_user",
    checkboxData: per,
    value: "",
    rules: [{ required: true, message: "请选择个人身份属性" }],
  },
  {
    type: FormType.radio,
    label: "是否退役军人",
    name: "vet",
    value: 0,
    radioData: [
      {
        key: "是",
        val: 1,
      },
      {
        key: "否",
        val: 2,
      },
    ],
    rules: [{ required: true, message: "是否退役军人不能为空" }],
  },
  {
    type: FormType.input,
    label: "家庭住址",
    name: "home_addr",
    value: "",
  },
  {
    type: FormType.input,
    label: "担任职务",
    name: "pos_held",
    value: "",
  },
  {
    type: FormType.input,
    label: "通讯地址",
    name: "mail_addr",
    value: "",
  },

  {
    type: FormType.date,
    label: "入伍时间",
    name: "vet_in_time",
    value: "",
  },
  {
    type: FormType.date,
    label: "退伍时间",
    name: "vet_out_time",
    value: "",
  },
  {
    type: FormType.input,
    label: "服役部队",
    name: "serv_unit",
    value: "",
  },

  {
    type: FormType.input,
    label: "专业特长",
    name: "spec",
    value: "",
  },

  {
    type: FormType.input,
    label: "邮箱",
    name: "email",
    value: "",
  },
  {
    type: FormType.textarea,
    label: "描述",
    name: "remark",
    value: "",
  },
  {
    type: FormType.upload,
    label: "头像",
    name: "head_img",
    value: [],
  },
];

export const userSerchConfig = [
  {
    type: FormType.input,
    label: "用户名",
    name: "user_name",
    value: "",
    rules: [],
  },
  {
    type: FormType.input,
    label: "身份证号",
    name: "id_card",
    value: "",
    rules: [],
  },
];
export const columns: ColumnsType<UserDataType> = [
  {
    title: "用户名",
    dataIndex: "user_name",
    width: 100,
    fixed: "left",
  },
  {
    title: "性别",
    width: 100,
    render: (render) => (
      <span>{getBirthDateAndGender(render.id_card)?.gender}</span>
    ),
  },
  {
    title: "年龄",
    width: 100,
    render: (render) => <span>{getAgeByIDCard(render.id_card)}岁</span>,
  },
  {
    title: "头像",
    dataIndex: "head_img",
    width: 150,
    render: (head_img) => {
      return (
        <Avatar size={64} shape="square" src={<Image src={head_img}></Image>} />
      );
    },
  },
  {
    title: "登录账号",
    width: 150,
    dataIndex: "account",
  },
  {
    title: "家庭住址",
    width: 150,
    dataIndex: "home_addr",
  },
  {
    title: "身份证",
    width: 150,
    dataIndex: "id_card",
  },
  {
    title: "担任职务",
    width: 150,
    dataIndex: "pos_held",
  },

  {
    title: "邮箱",
    width: 150,
    dataIndex: "email",
  },
  {
    title: "联系电话",
    width: 150,
    dataIndex: "tel",
  },
  {
    title: "党员",
    width: 100,
    dataIndex: "p_member",
    render: (p_member) => <span>{p_member === 1 ? "是" : "否"}</span>,
  },
  {
    title: "退役军人",
    width: 100,
    dataIndex: "vet",
    render: (vet) => <span>{vet === 1 ? "是" : "否"}</span>,
  },
  {
    title: "两委人员",
    dataIndex: "two_committees",
    width: 100,
    render: (vet) => <span>{vet === 1 ? "是" : "否"}</span>,
  },
  {
    title: "微网格员",
    dataIndex: "grid_letter_user",
    width: 100,
    render: (vet) => <span>{vet === 1 ? "是" : "否"}</span>,
  },
  {
    title: "备注",
    dataIndex: "remark",
    ellipsis: {
      showTitle: false,
    },
    width:200,
    render: (remark) => (
      <Tooltip placement="topLeft" title={remark}>
        {remark}
      </Tooltip>
    ),
  },
];