Skip to content
On this page

字段类型列表

此处列出目前官方支持的全部字段类型

文本输入框

  • 字段类型: text | password | textarea
ts
import { uiContext } from "../../ui";
export default function () {
  const ui = uiContext.get();
  return {
    text: {
      form: {
        component: {
          // el-input, a-input
          name: ui.input.name,
          vModel: ui.textArea.modelValue,
          [ui.input.clearable]: true
        }
      }
    },
    password: {
      form: {
        component: {
          // el-input / a-input-password
          name: ui.inputPassword.name,
          vModel: ui.inputPassword.modelValue,
          ...ui.inputPassword.passwordType
        }
      }
    },
    textarea: {
      search: {
        component: {
          // el-input / a-input
          name: ui.input.name,
          type: "text",
          [ui.input.clearable]: true
        }
      },
      form: {
        component: {
          // el-input / a-textarea
          name: ui.textArea.name,
          type: ui.textArea.type,
          vModel: ui.textArea.modelValue,
          [ui.input.clearable]: true
        }
      }
    }
  };
}

基本组件

选择框

  • 字段类型 dict-select | dict-radio | dict-checkbox | dict-switch
ts
import { uiContext } from "../../ui";
export default function () {
  const ui = uiContext.get();
  return {
    select: {
      search: { autoSearchTrigger: "change" },
      form: {
        component: {
          name: ui.select.name,
          [ui.select.clearable]: true
        }
      }
    },
    "dict-select": {
      search: { autoSearchTrigger: "change" },
      column: { component: { name: "fs-values-format" } },
      form: {
        component: {
          name: "fs-dict-select",
          vModel: ui.select.modelValue,
          [ui.select.clearable]: true
        }
      }
    },
    "dict-radio": {
      search: {
        component: {
          name: "fs-dict-select",
          vModel: ui.select.modelValue,
          autoSearchTrigger: "change"
        }
      },
      form: {
        component: {
          name: "fs-dict-radio",
          vModel: ui.radioGroup.modelValue,
          [ui.select.clearable]: true
        }
      },
      column: { component: { name: "fs-values-format" } }
    },
    "dict-checkbox": {
      search: {
        component: { name: "fs-dict-select" },
        autoSearchTrigger: "change"
      },
      form: {
        component: {
          name: "fs-dict-checkbox",
          vModel: ui.radioGroup.modelValue,
          [ui.select.clearable]: true
        }
      },
      column: { component: { name: "fs-values-format" } }
    },
    "dict-switch": {
      search: {
        component: { name: "fs-dict-select", vModel: ui.select.modelValue },
        autoSearchTrigger: "change"
      },
      form: {
        component: {
          name: "fs-dict-switch",
          vModel: ui.switch.modelValue,
          [ui.select.clearable]: true
        }
      },
      column: { component: { name: "fs-values-format" } }
    }
  };
}
javascript
let column={
   type: 'dict-select',
   form: {
     component: {
         name:'fs-dict-select', 
         //支持fs-dict-select的参数,
         separator: ',' ,
         //由于fs-dict-select内部封装了a-select/el-select,所以也支持这两个组件的参数
         filterable: true,
         multiple: true,
         clearable: true
     }
   },
   component:{
     name:'fs-values-format',
     props:{
       multiple:true, //默认支持多选
       separator: ',' ,//多选时,value的分隔符
     }   
   }
}

级联

  • 类型
    type = dict-cascader
ts
import { uiContext } from "../../ui";

export default function () {
  const ui = uiContext.get();

  return {
    "dict-cascader": {
      search: {
        component: {
          clearable: true
        }
      },
      form: {
        component: {
          name: "fs-dict-cascader",
          vModel: ui.cascader.modelValue,
          [ui.cascader.clearable]: true
        }
      },
      column: {
        component: { name: "fs-dict-cascader-format" }
      }
    }
  };
}

日期时间选择

  • type = datetime | date | time | daterange | datetimerange
ts
import { daterangeFormatter, datetimerangeFormatter, shortcuts } from "../functions";
import { uiContext } from "../../ui";

export default function () {
  const ui = uiContext.get();
  return {
    datetime: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("datetime"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        width: "170px",
        component: { name: "fs-date-format" }
      }
    },
    date: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("date"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        align: "center",
        width: 120,
        component: { name: "fs-date-format", format: "YYYY-MM-DD" }
      }
    },
    daterange: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("daterange"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: { width: 210, formatter: daterangeFormatter }
    },
    datetimerange: {
      form: {
        component: {
          ...ui.datePicker.buildDateType("datetimerange"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        width: 340,
        formatter: datetimerangeFormatter
      }
    },
    time: {
      form: {
        component: {
          //el-time-picker,a-time-picker
          name: ui.timePicker.name,
          vModel: ui.timePicker.modelValue
        }
      },
      column: {
        width: 100,
        align: "center",
        component: { name: "fs-date-format", format: "HH:mm:ss" }
      }
    }
  };
}

数字输入

  • type = number
ts
import { uiContext } from "../../ui";
export default function () {
  const ui = uiContext.get();
  return {
    number: {
      form: {
        component: {
          // el-input-number,a-input-number
          name: ui.number.name,
          vModel: ui.modelValue
        }
      }
    }
  };
}

扩展组件

文件上传,裁剪上传

  • 类型
    • file-uploader(文件上传) | image-uploader(图片上传) | avatar-uploader(头像上传,单图片)
    • avatar-cropper (头像裁剪上传)
js
import { AllUploadSuccessValidator } from "./validators";
import { uiContext, useI18n } from "@fast-crud/fast-crud";
export default function () {
  const { t } = useI18n();
  const ui = uiContext.get();
  return {
    "image-uploader": {
      form: {
        component: {
          name: "fs-file-uploader",
          listType: ui.upload.typeImageCard,
          accept: ".png,.jpeg,.jpg,.ico,.bmp,.gif,.webp,.svg"
        },
        [ui.formItem.rules]: [
          {
            validator: AllUploadSuccessValidator(),
            message: t("fs.extends.fileUploader.hasUploading")
          }
        ]
      },
      column: {
        component: { name: "fs-images-format", style: "width:30px", previewTeleported: true }
      },
      viewForm: {
        component: { height: 100, width: 100 }
      }
    },
    "avatar-uploader": {
      form: {
        [ui.formItem.rules]: [
          {
            validator: AllUploadSuccessValidator(),
            message: t("fs.extends.fileUploader.hasUploading")
          }
        ],
        component: {
          name: "fs-file-uploader",
          limit: 1,
          listType: ui.upload.typeImageCard,
          accept: ".png,.jpeg,.jpg,.ico,.bmp,.gif,.webp,.svg",
        }
      },
      column: {
        align: "center",
        component: { name: "fs-images-format", style: "width:30px", previewTeleported: true }
      },
      viewForm: {
        component: { height: 100, width: 100 }
      },
      valueResolve({ row, key }) {
        const value = row[key];
        if (value != null && value instanceof Array) {
          if (value.length >= 0) {
            row[key] = value[0].url;
          } else {
            row[key] = null;
          }
        }
      }
    },
    "file-uploader": {
      form: {
        component: {
          name: "fs-file-uploader",
          listType: "text"
        },
        [ui.formItem.rules]: [
          {
            validator: AllUploadSuccessValidator(),
            message: t("fs.extends.fileUploader.hasUploading")
          }
        ]
      },
      column: {
        component: { name: "fs-files-format" }
      }
    },
    "cropper-uploader": {
      form: {
        component: {
          name: "fs-cropper-uploader",
          accept: ".png,.jpeg,.jpg,.ico,.bmp,.gif,.svg,.webp",
          cropper: { viewMode: 1 }
        },
        [ui.formItem.rules]: [
          {
            validator: AllUploadSuccessValidator(),
            message: t("fs.extends.fileUploader.hasUploading")
          }
        ]
      },
      column: {
        align: "center",
        component: { name: "fs-images-format", style: "width:30px", previewTeleported: true }
      },
      viewForm: {
        component: { height: 100, width: 100 }
      }
    }
  };
}

富文本

  • 类型
    • file-uploader(文件上传) | image-uploader(图片上传) | avatar-uploader(头像上传,单图片)
    • cropper-uploader (头像裁剪上传)
js
export default function () {
  return {
    "editor-wang": {
      form: { component: { name: "fs-editor-wang" } }
    },
    "editor-quill": {
      form: { component: { name: "fs-editor-quill" } }
    }
  };
}

辅助类型

ts
import { uiContext } from "../../ui";

function antdvColspan(ui, labelSpan) {
  return ui.type !== "antdv" ? {} : { labelCol: { span: labelSpan }, wrapperCol: { span: 23 - labelSpan } };
}

/**
 * 辅助type
 */
export default function () {
  const ui = uiContext.get();
  return {
    colspan: {
      //跨列
      form: {
        col: { span: 24 },
        ...antdvColspan(ui, 2)
      }
    },
    colspan3: {
      //跨列
      form: {
        col: { span: 24 },
        ...antdvColspan(ui, 3)
      }
    },
    colspan4: {
      //跨列
      form: {
        col: { span: 24 },
        ...antdvColspan(ui, 4)
      }
    }
  };
}