@cloudbase/weda-ui 0.2.11 → 0.2.15

package/src/web/wedatheme/src/routes/wedatheme-index/Form.jsx

@@ -1,729 +0,0 @@
-import React, { useState, Fragment, useRef, useCallback } from 'react';
-import {
-  Card,
-  ExternalLink,
-  Layout,
-  Stepper,
-  FormAction,
-  Button,
-  Form,
-  Input,
-  Radio,
-  Select,
-  SelectMultiple,
-  Bubble,
-  Icon,
-  Segment,
-  Badge,
-  Text,
-  Table,
-  Row,
-  Col,
-  Pagination,
-  Justify,
-  Checkbox,
-  useClassNames,
-  useConfig,
-  InputNumber,
-  LoadingTip,
-  Tooltip,
-  Tag,
-  Dropdown,
-  List,
-} from '@tencent/tea-component';
-import { sortable, stylize, filterable } from '@tencent/tea-component/lib/table/addons';
-
-const { Content } = Layout;
-const steps = [
-  { id: 'prepare', label: '基础信息' },
-  { id: 'info', label: '函数配置' },
-];
-
-const alertOriTable = [
-  { name: '张三', age: 8, stage: 'teenager', edit: false },
-  { name: '李四', age: 18, stage: 'youth', edit: false },
-  { name: '王五', age: 28, stage: 'youth', edit: false },
-  { name: '六六', age: 28, stage: 'youth', edit: false },
-];
-export default function StepForm() {
-  const { classPrefix } = useConfig();
-  const { Margin } = useClassNames();
-  const [roleRadio, setRoleRadio] = useState(null);
-  const [roleCheckbox, setRoleCheckbox] = useState([]);
-  const [current, setCurrent] = useState('prepare');
-  const [MasterValue, setMasterValue] = useState(1);
-  const [tier, setTier] = useState(null);
-  const [InputNumberValue, setInputNumberValue] = useState(0);
-  const [alertTable, setAlertTable] = useState(alertOriTable);
-  const [sorts, setSorts] = useState([]);
-  const [stage, setStage] = useState(ALL_VALUE);
-
-  const ALL_VALUE = '__ALL__';
-
-  // ip地址
-  const editorRef = useRef(null);
-  const [ready, setReady] = useState(false);
-  const [editorValue, setEditorValue] = useState('');
-
-  const currentIndex = current ? steps.findIndex(x => x.id === current) : -1;
-
-  const next = current && steps[currentIndex + 1];
-  const prev = current ? steps[currentIndex - 1] : steps[steps.length - 1];
-  const roleSelect = [
-    { value: 'tencent', text: 'cloud.tencent.com/music', tooltip: 'cloud.tencent.com/music' },
-    { value: 'qq', text: 'cloud.qq.com/music', tooltip: 'cloud.qq.com/music' },
-    { value: 'tt', text: 'cloud.tt.com/music', tooltip: 'cloud.tt.com/music' },
-    { value: 'bb', text: 'cloud.bb.com/music', tooltip: 'cloud.bb.com/music' },
-  ];
-  const options = [
-    { value: 'physics', text: '物理机层级', tooltip: 'cloud.tencent.com/music' },
-    { value: 'rack', text: '交换机层级', tooltip: 'cloud.qq.com/music' },
-    { value: 'change', text: '机架层级', tooltip: 'cloud.tt.com/music' },
-  ];
-  // onReady 的时候可以拿到编辑器实例引用，可以用 Ref 保存起来
-  const onReady = useCallback((instance) => {
-    editorRef.current = instance;
-    setReady(true);
-  }, []);
-  // onEdit 的时候也可以拿到实例
-  const onEdit = useCallback((instance) => {
-    // getValue() 是个异步方法，返回 Promise
-    instance.getValue().then(value => setEditorValue(value));
-  }, []);
-  return (
-
-        <Card>
-          <Card.Body>
-            <Stepper className={Margin.Bottom['5n']} steps={steps} current={current}></Stepper>
-            <Form style={currentIndex === 0 ? {} : { display: 'none' }}>
-                <Form.Item label="函数名">
-                  <Form.Text>Hellocloud_test03</Form.Text>
-                </Form.Item>
-                <Form.Item label="描述">
-                  <Input multiline size="l"></Input>
-                </Form.Item>
-                <Form.Item label="执行角色">
-                  <Radio.Group
-                    value={roleRadio}
-                    onChange={value => setRoleRadio(value)}
-                  >
-                    <Radio name="currole">选择现有角色</Radio>
-                    <Radio name="newrole">通过已有策略模版创建新角色</Radio>
-                  </Radio.Group>
-                  <div className={`${classPrefix}-mt-2n`}>
-                    {/* <Select appearance="button"
-
-                    boxSizeSync
-                  type="simulate" size="l" options={roleSelect}></Select> */}
-                    <Dropdown
-                      clickClose={false}
-                      style={{ marginRight: 10 }}
-                      button="按钮样式"
-                      appearance="button"
-                      onOpen={() => console.log('open')}
-                      onClose={() => console.log('close')}
-                      boxSizeSync
-                    >
-                      <List type="option">
-                        <List.Item onClick={close}>预付费</List.Item>
-                        <List.Item onClick={close}>后付费</List.Item>
-                        <List.SubMenu label="更多">
-                          <List type="option">
-                            <List.Item disabled>订阅</List.Item>
-                            <List.Item onClick={close}>朋友代付</List.Item>
-                          </List>
-                        </List.SubMenu>
-                        <List.SubMenu label="更多">
-                          <List type="option">
-                            <List.Item disabled>订阅</List.Item>
-                            <List.Item onClick={close}>朋友代付</List.Item>
-                          </List>
-                        </List.SubMenu>
-                      </List>
-                    </Dropdown>
-                  </div>
-                </Form.Item>
-                <Form.Item label="执行角色">
-                  <Checkbox.Group
-                    value={roleCheckbox}
-                    onChange={value => setRoleCheckbox(value) }
-                  >
-                    <Checkbox name="currole">选择现有角色</Checkbox>
-                    <Checkbox name="newrole">通过已有策略模版创建新角色</Checkbox>
-                  </Checkbox.Group>
-
-                </Form.Item>
-                <Form.Item label="提交方法">
-                  <Select
-                  appearance="button"
-                    boxSizeSync
-                  type="simulate"
-                  size="l"
-                  options={roleSelect}>
-
-                  </Select>
-                </Form.Item>
-                <Form.Item label="方法多选">
-                  <SelectMultiple
-                  staging={false}
-                  size="l"
-                  appearance="button"
-                    boxSizeSync
-                  type="simulate"
-                  options={[
-                    { value: 'gz', text: '瓜子', tooltip: '百煮入味香' },
-                    {
-                      value: 'hs',
-                      text: '花生',
-                      tooltip: '花生已售罄',
-                    },
-                    { value: 'bmf', text: '爆米花', tooltip: '焦糖味' },
-                    { value: 'kl', text: '可乐', tooltip: '肥宅快乐水' },
-                    { value: 'pj', text: '啤酒' },
-                    { value: 'kqs', text: '矿泉水' },
-                    { value: 'bbz', text: '八宝粥' },
-                  ]}
-                  allOption={{
-                    value: 'all',
-                    text: '全选',
-                    tooltip: '我都要',
-                  }}
-                  button={options => (options.length ? (
-                      <Tooltip title={options.map(o => o.text).join(', ')}>
-                        <div>
-                          <Tag.Group>
-                            {options.map(o => (
-                              <Tag onClose={() => console.log('close')}  key={o.value}>{o.text}</Tag>
-                            ))}
-                          </Tag.Group>
-                        </div>
-                      </Tooltip>
-                  ) : (
-                    '请选择'
-                  ))
-                  }
-                  >
-
-                  </SelectMultiple>
-                </Form.Item>
-                <Form.Item
-                  label={
-                    <>
-                      执行方法
-                      <Bubble content="此域名是加速域名 CNAME 到 CDN 节点上的地址">
-                        <Icon type="info" />
-                      </Bubble>
-                    </>
-                  }
-                >
-                  <Input size="l" value="idcbar_delw_mian"></Input>
-                </Form.Item>
-                <Form.Item label="代码详情">
-                  <Input multiline size="l"></Input>
-                </Form.Item>
-                <Form.Item label="功能" required>
-                  <Segment
-                    value={MasterValue.toString()}
-                    onChange={value => setMasterValue(parseInt(value, 10))}
-                    options={[{ text: '数据同步', value: '1' }]}
-                  ></Segment>
-                </Form.Item>
-                <Form.Item
-                  label="Master"
-                  message={
-                    <>
-                      默认集群的Master、Etcd等组件由腾讯云提供维护和服务；为了方便管理，您也可以购买CVM部署Master，详情请参考
-                      <ExternalLink href="www.qcloud.com">
-                        《集群托管模式说明》
-                      </ExternalLink>
-                    </>
-                  }
-                >
-                  <Segment
-                    value={MasterValue.toString()}
-                    onChange={value => setMasterValue(parseInt(value, 10))}
-                    options={[
-                      { text: '托管', value: '1' },
-                      { text: '独立部署', value: '2' },
-                    ]}
-                  ></Segment>
-                </Form.Item>
-                <Form.Item label="xxxx">
-                  <Segment
-                    value={MasterValue.toString()}
-                    onChange={value => setMasterValue(parseInt(value, 10))}
-                    options={[
-                      { text: '数据同步', value: '1' },
-                      {
-                        text: (
-                          <>
-                            半年
-                            <Badge theme="warning" dark>
-                              8.8折
-                            </Badge>
-                          </>
-                        ),
-                        value: '6',
-                      },
-                    ]}
-                  ></Segment>
-                </Form.Item>
-                <Form.Item
-                  label="网络类型"
-                  message={
-                    <>
-                      你还可以去&nbsp;
-                      <ExternalLink href="https://cloud.tencent.com">
-                        控制台
-                      </ExternalLink>
-                      &nbsp;或&nbsp;
-                      <ExternalLink
-                        href="https://cloud.tencent.com"
-                        style={{ marginRight: 10 }}
-                      >
-                        新建子网
-                      </ExternalLink>
-                    </>
-                  }
-                  align="middle"
-                >
-                  <>
-                    <Segment
-                      value={MasterValue.toString()}
-                      onChange={value => setMasterValue(parseInt(value, 10))}
-                      options={[
-                        { text: '私有网络', value: '1' },
-                        { text: '基础网络', value: '2' },
-                      ]}
-                    ></Segment>
-                    <div className={`${classPrefix}-mt-2n`}>
-                      <Select
-                        appearance="button"
-                    boxSizeSync
-                        type="simulate"
-                        size="m"
-                        options={options}
-                        value={tier}
-                        onChange={value => setTier(value)}
-                        className={`${classPrefix}-mr-1n`}
-                      />
-                      <Select
-                        appearance="button"
-                    boxSizeSync
-                        type="simulate"
-                        size="m"
-                        options={options}
-                        value={tier}
-                        onChange={value => setTier(value)}
-                        className={`${classPrefix}-mr-1n`}
-                      />
-                      <Text
-                        reset={true}
-                        className={`${classPrefix}-align-middle`}
-                      >
-                        共有3000个子网IP,剩下190个可用
-                      </Text>
-                      <Button
-                        type="icon"
-                        icon="refresh"
-                        className={`${classPrefix}-ml-1n`}
-                      ></Button>
-                    </div>
-                  </>
-                </Form.Item>
-
-                <Form.Item label="Node机型" align="middle">
-                  <Form className={`${classPrefix}-bg-layout`}>
-                    <Form.Item label="Pod数量上限/节点">
-                      <Select appearance="button"
-                    boxSizeSync
-                  type="simulate" options={roleSelect}></Select>
-                    </Form.Item>
-                    <Form.Item label="CIDR">
-                      <Input></Input>
-                    </Form.Item>
-                  </Form>
-                </Form.Item>
-              </Form>
-            <Form style={currentIndex === 1 ? {} : { display: 'none' }}>
-              <Form.Item
-                  label="域名和转移码"
-                  align="middle"
-                  suffix={
-                    <Fragment>
-                      <ExternalLink
-                        href="https://cloud.tencent.com"
-                        style={{ marginRight: 10 }}
-                      >
-                        支持转入的后缀及价格
-                      </ExternalLink>
-                      <ExternalLink href="https://console.cloud.tencent.com">
-                        如何获取转移密码
-                      </ExternalLink>
-                    </Fragment>
-                  }
-                >
-                  <Input multiline placeholder="例如:" />
-                </Form.Item>
-
-                <Form.Item label="告警策略" align="middle">
-                  <div className={`${classPrefix}-bg-layout`}>
-                    <Justify
-                      className={`${classPrefix}-mb-2n`}
-                      left={
-                        <>
-                          <Select
-                          appearance="button"
-
-                  type="simulate"
-                            className=" "
-                            size="auto"
-                            options={[
-                              {
-                                value: 'one',
-                                text: '接收请求平均耗时',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'two',
-                                text: '接收请求失败率',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'three',
-                                text: '接收请求量',
-                                tooltip: '',
-                              },
-                            ]}
-                          ></Select>
-                          <Select
-                          appearance="button"
-
-                          type="simulate"
-                            className={`${classPrefix}-ml-1n`}
-                            size="auto"
-                            options={[
-                              {
-                                value: 'one',
-                                text: '统计周期1分钟',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'two',
-                                text: '统计周期5分钟',
-                                tooltip: '',
-                              },
-                            ]}
-                          ></Select>
-                          <Select
-                          appearance="button"
-                          boxSizeSync
-                          type="simulate"
-                            className={`${classPrefix}-ml-1n`}
-                            size="auto"
-                            options={[
-                              { value: 'one', text: '>', tooltip: '' },
-                              { value: 'two', text: '>=', tooltip: '' },
-                              { value: 'thre', text: '<', tooltip: '' },
-                              { value: 'fore', text: '<=', tooltip: '' },
-                              { value: 'five', text: '=', tooltip: '' },
-                              { value: 'six', text: '!=', tooltip: '' },
-                            ]}
-                          ></Select>
-                          <InputNumber
-                            className={`${classPrefix}-ml-1n`}
-                            style={{ marginLeft: '4px' }}
-                            value={InputNumberValue}
-                            onChange={(value) => {
-                              console.log('InputNumber.onChange(%d)', value);
-                              setInputNumberValue(value);
-                            }}
-                            min={0}
-                            max={10}
-                            step={1}
-                            unit="次"
-                          />
-                          <Select
-                          appearance="button"
-
-                          type="simulate"
-                            className={`${classPrefix}-ml-1n`}
-                            size="auto"
-                            options={[
-                              {
-                                value: 'one',
-                                text: '持续1个周期',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'two',
-                                text: '持续2ssss个周期',
-                                tooltip: '',
-                              },
-                            ]}
-                          ></Select>
-                        </>
-                      }
-                      right={
-                        <>
-                          <Bubble content="重复通知: 可选定以一定时间周期重复发送告警通知周期指数递增通知: 告警持续时长到达告警统计周期的1，2，4，8，16，32...倍时发送告警通知">
-                            <Icon type="info" />
-                          </Bubble>
-                          <Button type="icon">
-                            <Icon type="dismiss"></Icon>
-                          </Button>
-                        </>
-                      }
-                    ></Justify>
-                    <Justify
-                      left={
-                        <>
-                          <Select
-                          appearance="button"
-
-                          type="simulate"
-                            className=" "
-                            size="auto"
-                            options={[
-                              {
-                                value: 'one',
-                                text: '接收请求平均耗时',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'two',
-                                text: '接收请求失败率',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'three',
-                                text: '接收请求量',
-                                tooltip: '',
-                              },
-                            ]}
-                          ></Select>
-                          <Select
-                          appearance="button"
-
-                          type="simulate"
-                            className={`${classPrefix}-ml-1n`}
-                            size="auto"
-                            options={[
-                              {
-                                value: 'one',
-                                text: '统计周期1分钟',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'two',
-                                text: '统计周期5分钟',
-                                tooltip: '',
-                              },
-                            ]}
-                          ></Select>
-                          <Select
-                          appearance="button"
-                          boxSizeSync
-                          type="simulate"
-                            className={`${classPrefix}-ml-1n`}
-                            size="auto"
-                            options={[
-                              { value: 'one', text: '>', tooltip: '' },
-                              { value: 'two', text: '>=', tooltip: '' },
-                              { value: 'thre', text: '<', tooltip: '' },
-                              { value: 'fore', text: '<=', tooltip: '' },
-                              { value: 'five', text: '=', tooltip: '' },
-                              { value: 'six', text: '!=', tooltip: '' },
-                            ]}
-                          ></Select>
-                          <InputNumber
-                            className={`${classPrefix}-ml-1n`}
-                            style={{ marginLeft: '4px' }}
-                            value={InputNumberValue}
-                            onChange={(value) => {
-                              console.log('InputNumber.onChange(%d)', value);
-                              setInputNumberValue(value);
-                            }}
-                            min={0}
-                            max={10}
-                            step={1}
-                            unit="次"
-                          />
-                          <Select
-                          appearance="button"
-
-                          type="simulate"
-                            className={`${classPrefix}-ml-1n`}
-                            size="auto"
-                            options={[
-                              {
-                                value: 'one',
-                                text: '持续1个周期',
-                                tooltip: '',
-                              },
-                              {
-                                value: 'two',
-                                text: '持续2ssss个周期',
-                                tooltip: '',
-                              },
-                            ]}
-                          ></Select>
-                        </>
-                      }
-                      right={
-                        <>
-                          <Bubble content="重复通知: 可选定以一定时间周期重复发送告警通知周期指数递增通知: 告警持续时长到达告警统计周期的1，2，4，8，16，32...倍时发送告警通知">
-                            <Icon type="info" />
-                          </Bubble>
-                          <Button type="icon">
-                            <Icon type="dismiss"></Icon>
-                          </Button>
-                        </>
-                      }
-                    ></Justify>
-                  </div>
-                  <Button type="link" className={`${classPrefix}-mt-2n`}>
-                    添加
-                  </Button>
-                </Form.Item>
-                <Form.Item label="告警渠道">
-                  <Checkbox.Group layout="column">
-                    <Checkbox name="message">短信</Checkbox>
-                    <Checkbox name="email">邮件 </Checkbox>
-                    <Checkbox name="wechat">
-                      微信
-                      <span className={`${classPrefix}-text-label`}>
-                        （ 关注腾讯云公众号后才能接受告警通知）
-                      </span>
-                    </Checkbox>
-                    <Checkbox name="phone">电话 </Checkbox>
-                  </Checkbox.Group>
-                  <div
-                    className={`${classPrefix}-bg-layout ${classPrefix}-mt-2n`}
-                  >
-                    <Form style={{ padding: 0 }}>
-                      <Form.Item
-                        label="轮询次数"
-                        message="单次告警在无人接听时，将对告警接受人逐一轮拨打电话告警"
-                      >
-                        <Select
-                        appearance="button"
-                    boxSizeSync
-                        type="simulate"
-                          size="s"
-                          options={[
-                            { value: 'one', text: '1次', tooltip: '' },
-                            { value: 'two', text: '2次', tooltip: '' },
-                            { value: 'three', text: '3次', tooltip: '' },
-                            { value: 'four', text: '4次', tooltip: '' },
-                          ]}
-                        ></Select>
-                      </Form.Item>
-                      <Form.Item label="轮询顺序">
-                        <Form.Text>电话告警按照接收人顺序轮询拨打 </Form.Text>
-                        <Table
-                          bordered
-                          columns={[
-                            {
-                              key: 'name',
-                              header: '接收人',
-                              render: (record) => {
-                                if (record.edit) {
-                                  return <Input value={record.name} />;
-                                }
-                                return record.name;
-                              },
-                            },
-                            {
-                              key: 'stage',
-                              header: '所属用户组',
-                              render: (record) => {
-                                if (record.edit) {
-                                  return <Input value={record.stage} />;
-                                }
-                                return record.stage;
-                              },
-                            },
-                          ]}
-                          records={alertTable}
-                          bottomTip={
-                            <Button
-                              type="link"
-                              onClick={() => {
-                                const tmp = alertOriTable;
-                                tmp.push({
-                                  name: '234234',
-                                  age: 0,
-                                  stage: '3333',
-                                  edit: false,
-                                });
-                                setAlertTable(alertOriTable);
-                              }}
-                            >
-                              新增
-                            </Button>
-                          }
-                          addons={[
-                            stylize({
-                              className: `${classPrefix}-ml-1n`,
-                            }),
-                            sortable({
-                              columns: [
-                                'stage',
-                              ],
-                              value: sorts,
-                              onChange: value => setSorts(value),
-                            }),
-                            filterable({
-                              type: 'single',
-                              column: 'name',
-                              value: stage,
-                              onChange: value => setStage(value),
-                              // 增加 "全部" 选项
-                              // all: {
-                              //   value: ALL_VALUE,
-                              //   text: "全部",
-                              // },
-                              // 选项列表
-                              options: [
-                                { value: 'teenager', text: '少年' },
-                                { value: 'youth', text: '青年' },
-                                { value: 'middle-aged', text: '中年' },
-                                { value: 'elder', text: '老年' },
-                              ],
-                            }),
-                          ]}
-                        ></Table>
-                        <Pagination
-                          recordCount={1000}
-                          stateTextVisible
-                          pageSizeVisible
-                          pageIndexVisible
-                          jumpVisible
-                          endJumpVisible
-                        />
-                      </Form.Item>
-                    </Form>
-                  </div>
-                </Form.Item>
-                </Form>
-            <FormAction>
-              <Button
-                disabled={!prev}
-                onClick={() => setCurrent(prev.id)}
-                tooltip={prev ? `上一步：${prev.label}` : '已经在第一步'}
-              >
-                上一步
-              </Button>
-              <Button
-                type="primary"
-                disabled={!next && !current}
-                onClick={() => setCurrent(next ? next.id : null)}
-              >
-                {next ? `下一步：${next.label}` : '完成'}
-              </Button>
-            </FormAction>
-          </Card.Body>
-        </Card>
-  );
-}