iot-device-management-frontend/apps/web-ele/src/components/form-create/rules/data.ts

/* eslint-disable no-template-curly-in-string */
const selectRule = [
  {
    type: 'select',
    field: 'selectType',
    title: '选择器类型',
    value: 'select',
    options: [
      { label: '下拉框', value: 'select' },
      { label: '单选框', value: 'radio' },
      { label: '多选框', value: 'checkbox' },
    ],
    // 参考 https://www.form-create.com/v3/guide/control 组件联动，单选框和多选框不需要多选属性
    control: [
      {
        value: 'select',
        condition: '==',
        method: 'hidden',
        rule: [
          'multiple',
          'clearable',
          'collapseTags',
          'multipleLimit',
          'allowCreate',
          'filterable',
          'noMatchText',
          'remote',
          'remoteMethod',
          'reserveKeyword',
          'defaultFirstOption',
          'automaticDropdown',
        ],
      },
    ],
  },
  {
    type: 'switch',
    field: 'filterable',
    title: '是否可搜索',
  },
  { type: 'switch', field: 'multiple', title: '是否多选' },
  {
    type: 'switch',
    field: 'disabled',
    title: '是否禁用',
  },
  { type: 'switch', field: 'clearable', title: '是否可以清空选项' },
  {
    type: 'switch',
    field: 'collapseTags',
    title: '多选时是否将选中值按文字的形式展示',
  },
  {
    type: 'inputNumber',
    field: 'multipleLimit',
    title: '多选时用户最多可以选择的项目数，为 0 则不限制',
    props: { min: 0 },
  },
  {
    type: 'input',
    field: 'autocomplete',
    title: 'autocomplete 属性',
  },
  { type: 'input', field: 'placeholder', title: '占位符' },
  { type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
  {
    type: 'input',
    field: 'noMatchText',
    title: '搜索条件无匹配时显示的文字',
  },
  { type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
  {
    type: 'switch',
    field: 'reserveKeyword',
    title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词',
  },
  {
    type: 'switch',
    field: 'defaultFirstOption',
    title: '在输入框按下回车，选择第一个匹配项',
  },
  {
    type: 'switch',
    field: 'popperAppendToBody',
    title: '是否将弹出框插入至 body 元素',
    value: true,
  },
  {
    type: 'switch',
    field: 'automaticDropdown',
    title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单',
  },
];

const apiSelectRule = [
  {
    type: 'input',
    field: 'url',
    title: 'url 地址',
    props: {
      placeholder: '/system/user/simple-list',
    },
  },
  {
    type: 'select',
    field: 'method',
    title: '请求类型',
    value: 'GET',
    options: [
      { label: 'GET', value: 'GET' },
      { label: 'POST', value: 'POST' },
    ],
    control: [
      {
        value: 'GET',
        condition: '!=',
        method: 'hidden',
        rule: [
          {
            type: 'input',
            field: 'data',
            title: '请求参数 JSON 格式',
            props: {
              autosize: true, // 特殊：ele 里是 autosize，antd 里是 autoSize
              type: 'textarea',
              placeholder: '{"type": 1}',
            },
          },
        ],
      },
    ],
  },
  {
    type: 'input',
    field: 'labelField',
    title: 'label 属性',
    info: '可以使用 el 表达式：${属性}，来实现复杂数据组合。如：${nickname}-${id}',
    props: {
      placeholder: 'nickname',
    },
  },
  {
    type: 'input',
    field: 'valueField',
    title: 'value 属性',
    info: '可以使用 el 表达式：${属性}，来实现复杂数据组合。如：${nickname}-${id}',
    props: {
      placeholder: 'id',
    },
  },
  {
    type: 'input',
    field: 'parseFunc',
    title: '选项解析函数',
    info: `data 为接口返回值,需要写一个匿名函数解析返回值为选择器 options 列表
    (data: any)=>{ label: string; value: any }[]`,
    props: {
      autosize: true, // 特殊：ele 里是 autosize，antd 里是 autoSize
      rows: { minRows: 2, maxRows: 6 },
      type: 'textarea',
      placeholder: `
        function (data) {
            console.log(data)
            return data.list.map(item=> ({label: item.nickname,value: item.id}))
        }`,
    },
  },
  {
    type: 'switch',
    field: 'remote',
    info: '是否可搜索',
    title: '其中的选项是否从服务器远程加载',
  },
  {
    type: 'input',
    field: 'remoteField',
    title: '请求参数',
    info: '远程请求时请求携带的参数名称，如：name',
  },
];

export { apiSelectRule, selectRule };