umi初始化配置+form.list-1

飞去杳无人烟
106 阅读1分钟

1.配置layout

export default defineConfig({
  layout: {
    name: 'compass',
    logo: '/images/logo.png',
    // 开启之后，Menu的路由配置name国际化会生效
    locale: true,
    navTheme: 'light',
    layout: 'mix',
    contentWidth: 'Fluid',
    fixedHeader: true,
    fixSiderbar: true,
    pwa: false,
    headerHeight: 48,
    splitMenus: true,
  },
})

2.配置locale

export default defineConfig({
  locale: {
    default: 'zh-CN',
    antd: true,
    // 菜单中的title国际化生效
    title: true,
    // 识别系统的语言
    baseNavigator: true,
    // 细分语言的连接符号
    baseSeparator: '-',
  },
})

3.配置theme主题

export default defineConfig({
  配置全局antd组件的样式
  theme: {
    'primary-color': '#ff6a00',
    'border-radius-base': '0px',
  },
})

4.配置dva

export default defineConfig({
   dva: {
     // 开启immer修改对象数据
    immer: true,
     // 开启热更新模块
    hmr: true,
    disableModelsReExport: false,
     // 开启数据懒加载
    lazyLoad: true,
  },
})
// 使用国际化渲染显示的两种方式
// 方式一
<Button type="primary">
  {intl.formatMessage({ id: 'name' }, { name: '旅行者' })}
</Button>
// 方式二
<div>
  <FormattedMessage id="navbar.lang" />
</div>

5.配置菜单路由及配套国际化

const routes = [
  {
    path: '/config',
    // 国际化对象中menu.CustomerManagement对应的值
    name: 'CustomerManagement',
    title: 'CustomerManagement',
    icon: 'FormOutlined',
    // 头部和导航菜单主题
    headerTheme: 'light',
    navTheme: 'light',
    // 开启头部侧部混合模式
    layout: 'mix',
    routes: [
      {
        path: '/config/resource-marking',
        name: 'CustomerRight',
        title: 'CustomerRight',
        component: '@/pages/config/resource-marking',
      },
    ],
  },
]

6.双层Form.List嵌套

<Form.List name="ruleList">
  {(fields, { add, remove }) => (
    <>
      <Row
        justify="end"
        align="middle"
        gutter={8}
        style={{ marginBottom: 24 }}
      >
        <Col>
          <Tooltip title="如不添加任何打标维度，则默认对全部实例打标">
            <QuestionCircleOutlined />
          </Tooltip>
        </Col>
        <Col>
          <Button
            type="primary"
            onClick={() => add()}
            icon={<PlusOutlined />}
          >
            增加一个打标维度
          </Button>
        </Col>
      </Row>
      {fields.map((field, index) => (
        <div key={field.key}>
          <Form.Item
            {...layout}
            {...field}
            label="实例名称筛选规则"
            name={[field.name, 'resourceNameFilter']}
            // rules={[{ required: true, message: '请输入实例名称筛选规则' }]}
            key="resourceIdFilter"
          >
            <Input allowClear placeholder="支持LIKE匹配填写的关键词" />
          </Form.Item>
          <Form.Item
            {...field}
            label="资源组筛选规则"
            name={[field.name, 'resourceGroupIdFilter']}
            // rules={[{ required: true, message: '请选择资源组筛选规则' }]}
            key="resourceGroupFilter"
          >
            <Select
              allowClear
              showSearch
              mode="multiple"
              optionFilterProp="children"
              filterOption={(input, option) =>
                (option!.children as any).includes(input)
              }
              placeholder="请选择资源组标识"
              dropdownMatchSelectWidth={false}
              loading={loadingResourceGroup}
            >
              {resourceGroups?.resourceGroups?.map((item: any) => (
                <Option value={item?.id} key={item?.id}>
                  {item?.displayName}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.List {...field} name={[field.name, 'resourceTagFilterArr']} initialValue={[{ resourceTagKey: undefined }]}>
            {
              (fields, { add, remove }) => (
                <>
                  <Form.Item
                    {...layout}
                    label="标签筛选规则"
                    key="resourceTagFilter"
                    style={{ marginBottom: 0 }}
                  >
                    {
                      fields.map((f, i) => (
                        <div key={f.key} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                          <Input.Group
                            style={{
                              display: 'flex',
                              justifyContent: 'space-between',
                            }}
                          >
                            <Form.Item
                              // {...layout}
                              {...f}
                              name={[f.name, 'resourceTagKey']}
                              // fieldKey={[f.fieldKey, 'resourceTagKey']}
                              style={{ width: 175 }}
                              key="resourceTagKey"
                            // rules={[{ required: true, message: '请选择标签KEY' }]}
                            >
                              <Select
                                mode="tags"
                                allowClear
                                onChange={(value) => handleChange(value, index)}
                                tokenSeparators={[',']}
                                options={tagsKeyList?.map((item: any) => ({
                                  label: item,
                                  key: item,
                                  value: item,
                                }))}
                                placeholder="请选择或自定义标签KEY"
                                loading={loadingTagsKeyList}
                                dropdownMatchSelectWidth={false}
                                dropdownStyle={{ maxWidth: 355 }}
                              />
                            </Form.Item>
                            <Form.Item
                              // {...layout}
                              {...f}
                              name={[f.name, 'resourceTagValue']}
                              // fieldKey={[f.fieldKey, 'resourceTagKey']}
                              style={{ width: 175 }}
                              key="resourceTagValue"
                            // rules={[{ required: true, message: '请选择标签VALUE' }]}
                            >
                              <Select
                                mode="tags"
                                allowClear
                                tokenSeparators={[',']}
                                options={tagsValueList?.map((item: any) => ({
                                  label: item,
                                  key: item,
                                  value: item,
                                }))}
                                placeholder={(!form.getFieldValue(['ruleList'])[index]?.resourceTagKey || form.getFieldValue(['ruleList'])[index]?.resourceTagKey?.length < 1) ? '请先选择左侧KEY' : '请选择标签VALUE'}
                                loading={loadingTagsValueList}
                                dropdownMatchSelectWidth={false}
                                dropdownStyle={{ maxWidth: 355 }}
                              />
                            </Form.Item>
                          </Input.Group>
                          {i === 0 ? <PlusCircleOutlined onClick={() => add()} style={{ margin: 5 }} /> : <MinusCircleOutlined onClick={() => remove(f.name)} style={{ margin: 5 }} />}


                        </div>
                      ))
                    }
                  </Form.Item>

                </>

              )
            }
          </Form.List>
          <Form.Item
            {...field}
            name={[field.name, 'isEvery']}
            rules={[{ required: true, message: '请选择标签筛选规则' }]}
            key="isEvery"
            labelCol={{ span: 7 }}
            wrapperCol={{ offset: 7, span: 17 }}
            initialValue={true}
          >
            <Select placeholder="请选择标签筛选规则">
              <Option key="rule1" value={true}>
                多个条件同时满足才筛选出打标资源
              </Option>
              <Option key="rule2" value={false}>
                只要满足一个条件就筛选出打标资源
              </Option>
            </Select>
          </Form.Item>
          <Row
            justify="end"
            align="middle"
            style={{ marginBottom: 20 }}
          >
            {/* <MinusCircleOutlined onClick={() => remove(field.name)} /> */}
            <Button type="default" icon={<DeleteOutlined />} danger onClick={() => remove(field.name)}>删除</Button>
          </Row>
        </div>
      ))}
    </>
  )}
</Form.List>
avatar
文章
阅读
粉丝