@cloudbase/weda-ui 0.2.9 → 0.2.13

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

@@ -0,0 +1,729 @@
+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>
+  );
+}