FastCrud

Appearance

字段类型列表 ​

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

文本输入框 ​

  • 字段类型: 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
        }
      },
      search: {
        autoSearchTrigger: "enter"
      }
    },
    password: {
      form: {
        component: {
          // el-input / a-input-password
          name: ui.inputPassword.name,
          vModel: ui.inputPassword.modelValue,
          ...ui.inputPassword.passwordType
        }
      },
      search: {
        autoSearchTrigger: "enter"
      }
    },
    textarea: {
      search: {
        component: {
          // el-input / a-input
          name: ui.input.name,
          type: "text",
          [ui.input.clearable]: true
        },
        autoSearchTrigger: "enter"
      },
      form: {
        component: {
          // el-input / a-textarea
          name: ui.textArea.name,
          type: ui.textArea.type,
          vModel: ui.textArea.modelValue,
          [ui.input.clearable]: true
        }
      }
    }
  };
}

基本组件 ​

选择框 ​

  • 字段类型 dict-select| table-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", vModel: "modelValue" } },
      form: {
        component: {
          name: "fs-dict-select",
          vModel: ui.select.modelValue,
          [ui.select.clearable]: true
        }
      }
    },
    "table-select": {
      column: { component: { name: "fs-values-format", vModel: "modelValue" } },
      form: {
        component: {
          name: "fs-table-select"
        }
      }
    },
    "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", vModel: "modelValue" } }
    },
    "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", vModel: "modelValue" } }
    },
    "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", vModel: "modelValue" } }
    }
  };
}
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 } from "../functions";
import { uiContext } from "../../ui";
import dayjs from "dayjs";
import weekOfYear from "dayjs/plugin/weekOfYear";
import { ColumnCompositionProps, ValueBuilderContext } from "../../d";
import weekday from "dayjs/plugin/weekday";
import localeData from "dayjs/plugin/localeData";

dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.extend(weekOfYear);

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

  function buildDateValue(scope: ValueBuilderContext) {
    const { row, key, value } = scope;
    if (value != null) {
      if (ui.type === "naive") {
        row[key] = dayjs(value).valueOf();
      } else if (ui.type === "antdv" && ui.version === "4") {
      } else if (ui.type === "element") {
        // row[key] = dayjs(value).valueOf();
      }
    }
  }

  const types: Record<string, ColumnCompositionProps> = {
    datetime: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("datetime"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        width: 170,
        component: { name: "fs-date-format" }
      },
      valueBuilder(scope) {
        buildDateValue(scope);
      }
    },
    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" }
      },
      valueBuilder(scope) {
        buildDateValue(scope);
      }
    },
    daterange: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("daterange"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: { width: 210, formatter: daterangeFormatter },
      valueBuilder({ row, key, value }) {
        if (value != null && Array.isArray(value) && value.length === 2) {
          if (value != null) {
            if (ui.type === "naive") {
              row[key] = [dayjs(value[0]).valueOf(), dayjs(value[1]).valueOf()];
            } else {
              row[key] = [dayjs(value[0]), dayjs(value[1])];
            }
          }
        }
      }
    },
    datetimerange: {
      form: {
        component: {
          ...ui.datePicker.buildDateType("datetimerange"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        width: 340,
        formatter: datetimerangeFormatter
      },
      valueBuilder({ row, key, value }) {
        if (value != null && Array.isArray(value) && value.length === 2) {
          if (ui.type === "naive") {
            row[key] = [dayjs(value[0]).valueOf(), dayjs(value[1]).valueOf()];
          } else {
            row[key] = [dayjs(value[0]), dayjs(value[1])];
          }
        }
      }
    },
    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" }
      },
      valueBuilder(scope) {
        buildDateValue(scope);
      }
    },
    month: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("month"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        align: "center",
        width: 120,
        component: { name: "fs-date-format", format: "YYYY-MM" }
      },
      valueBuilder(scope) {
        buildDateValue(scope);
      }
    },
    week: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("week"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        align: "center",
        width: 120,
        component: { name: "fs-date-format", format: "YYYY-ww[周]" }
      },
      valueBuilder(scope) {
        buildDateValue(scope);
      }
    },
    quarter: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("quarter"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        align: "center",
        width: 120,
        component: { name: "fs-date-format", format: "YYYY-[Q]Q" }
      },
      valueBuilder(scope) {
        buildDateValue(scope);
      }
    },
    year: {
      form: {
        component: {
          //el-date-picker,a-date-picker
          ...ui.datePicker.buildDateType("year"),
          vModel: ui.datePicker.modelValue
        }
      },
      column: {
        align: "center",
        width: 120,
        component: { name: "fs-date-format", format: "YYYY" }
      },
      valueBuilder(scope) {
        buildDateValue(scope);
      }
    }
  };
  return types;
}

数字输入 ​

  • 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 (头像裁剪上传)
tsx
import { AllUploadSuccessValidator } from "./validators";
import { uiContext, useI18n, ValueResolveContext } 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"),
            trigger: "blur"
          }
        ]
      },
      column: {
        component: {
          name: "fs-images-format",
          style: "width:30px",
          previewTeleported: true,
          // @ts-ignore
          previewMask: () => <div class={`ant-mask-info`}>{<fs-icon icon={ui.icons.eye} />}</div>
        }
      },
      viewForm: {
        component: { height: 100, width: 100 }
      }
    },
    "avatar-uploader": {
      form: {
        [ui.formItem.rules]: [
          {
            validator: AllUploadSuccessValidator(),
            message: t("fs.extends.fileUploader.hasUploading"),
            trigger: "blur"
          }
        ],
        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 }: ValueResolveContext) {
        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"),
            trigger: "blur"
          }
        ]
      },
      column: {
        component: { name: "fs-files-format" }
      }
    },
    "cropper-uploader": {
      form: {
        component: {
          name: "fs-cropper-uploader",
          accept: ".png,.jpeg,.jpg,.ico,.bmp,.gif,.svg,.webp",
          cropper: { aspectRatio: 1, autoCropArea: 1, viewMode: 0 }
        },
        [ui.formItem.rules]: [
          {
            validator: AllUploadSuccessValidator(),
            message: t("fs.extends.fileUploader.hasUploading"),
            trigger: "blur"
          }
        ]
      },
      column: {
        align: "center",
        component: { name: "fs-images-format", style: "width:30px", previewTeleported: true }
      },
      viewForm: {
        component: { height: 100, width: 100 }
      }
    }
  };
}

富文本 ​

  • 类型
    • editor-wang5
ts
export default function () {
  return {
    "editor-wang": {
      form: { component: { name: "fs-editor-wang" } }
    },
    "editor-wang5": {
      form: { component: { name: "fs-editor-wang5", style: { zIndex: 800 }, toolbarAttrs: { style: { zIndex: 800 } } } }
    }
  };
}

json ​

  • 类型
    • json
ts
export default function () {
  return {
    json: {
      form: {
        component: {
          name: "fs-json-editor"
        }
      }
    }
  };
}

copyable ​

  • 类型
    • copyable
ts
export default function () {
  return {
    copyable: {
      column: {
        component: {
          name: "fs-copyable",
          vModel: "modelValue"
        }
      }
    }
  };
}

time ​

  • 类型

    • time-humanize(人性化时间格式) <<< @/../../packages/fast-extends/src/time/type/types.ts

  • 示例：antdv | element

  • 相关组件文档：

辅助类型 ​

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

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

/**
 * 辅助type 即将废弃，antdv已经有更好的方式做跨列配置
 */
export default function () {
  const { ui } = useUi();
  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)
      }
    }
  };
}