From 214aa83760339a8ad7a360110a75336e13873322 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Fri, 1 Apr 2022 23:13:55 +0800
Subject: [PATCH] =?UTF-8?q?U=20=E4=BC=98=E5=8C=96=E5=85=8B=E9=9A=86?=
 =?UTF-8?q?=E5=8F=91=E5=B8=83=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/pages/deploy/app/CloneConfirm.js | 102 ++++++++----------
 spug_web/src/pages/deploy/app/Table.js        |  13 ++-
 2 files changed, 51 insertions(+), 64 deletions(-)

diff --git a/spug_web/src/pages/deploy/app/CloneConfirm.js b/spug_web/src/pages/deploy/app/CloneConfirm.js
index 2d139ce..77dd912 100644
--- a/spug_web/src/pages/deploy/app/CloneConfirm.js
+++ b/spug_web/src/pages/deploy/app/CloneConfirm.js
@@ -3,68 +3,56 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Cascader, Form, Alert } from 'antd';
+import { Select, Form } from 'antd';
 import envStore from 'pages/config/environment/store';
+import { includes } from 'libs';
 import store from './store';
 import lds from 'lodash';
-import { toJS } from "mobx";
 
-@observer
-class CloneConfirm extends React.Component {
-  handleLoadData = (selectedOptions) => {
-    const targetOption = selectedOptions[selectedOptions.length - 1];
-    if (targetOption.deploys === undefined) {
-      targetOption.loading = true;
-      store.loadDeploys(targetOption.value).then(() => targetOption.loading = false)
+export default observer(function (props) {
+  const [form] = Form.useForm()
+  const [apps] = useState(Object.values(store.records))
+  const [appId, setAppId] = useState()
+  const [deploys, setDeploys] = useState([])
+
+  useEffect(() => {
+    if (appId) {
+      props.onChange(null)
+      form.setFieldsValue({env_id: undefined})
+      store.loadDeploys(appId)
+        .then(res => setDeploys(res))
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appId])
+
+  function handleChange(deployId) {
+    const deploy = lds.find(deploys, {id: deployId})
+    props.onChange(deploy)
   }
 
-  handleData = records => {
-    return records.map(x => {
-      const option = {
-        label: x.name,
-        value: x.id,
-        deploys: x.deploys,
-        isLeaf: false
-      }
-      if (x.children) {
-        option.children = x.children
-      } else if (x.deploys) {
-        option.children = x.deploys.map(item => ({
-          label: lds.get(envStore.idMap, `${item.env_id}.name`),
-          value: JSON.stringify(item),
-          id: `${x.id},${item.env_id}`,
-        }))
-      }
-      return option
-    })
-  }
-
-  filter = (inputValue, path) => {
-    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
-  }
-
-  render() {
-    const options = this.handleData(Object.values(toJS(store.records)));
-    return (
-      <Form layout="vertical" style={{marginTop: 24}}>
-        <Form.Item
-          required
-          label="应用及环境"
-          help="克隆配置，将基于选择对象的配置来创建新的发布配置。"
-          extra={<Alert showIcon type="warning" message="使用搜索进行选择时可能需要选择两次。"/>}>
-          <Cascader
-            options={options}
-            placeholder="请选择目标应用及环境"
-            loadData={this.handleLoadData}
-            onChange={this.props.onChange}
-            showSearch={{filter: this.filter}}/>
-        </Form.Item>
-      </Form>
-    )
-  }
-}
-
-export default CloneConfirm
\ No newline at end of file
+  return (
+    <Form form={form} layout="vertical" style={{marginTop: 24}}>
+      <Form.Item required label="克隆的应用">
+        <Select showSearch filterOption={(i, o) => includes(o.children, i)} placeholder="请选择要克隆的应用" onChange={setAppId}>
+          {apps.map(item => (
+            <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+      <Form.Item required name="env_id" label="克隆的环境">
+        <Select
+          showSearch
+          filterOption={(i, o) => includes(o.children, i)}
+          placeholder="请选择要克隆的环境"
+          disabled={deploys.length === 0}
+          onChange={handleChange}>
+          {deploys.map(item => (
+            <Select.Option key={item.id} value={item.id}>{envStore.idMap[item.env_id]?.name}</Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+    </Form>
+  )
+})
\ No newline at end of file
diff --git a/spug_web/src/pages/deploy/app/Table.js b/spug_web/src/pages/deploy/app/Table.js
index a08d289..b8d538e 100644
--- a/spug_web/src/pages/deploy/app/Table.js
+++ b/spug_web/src/pages/deploy/app/Table.js
@@ -24,19 +24,18 @@ import lds from 'lodash';
 function ComTable() {
   function handleClone(e, id) {
     e.stopPropagation();
-    let cloneObj = null;
+    let deploy = null;
     Modal.confirm({
       icon: <ExclamationCircleOutlined/>,
       title: '选择克隆对象',
-      content: <CloneConfirm onChange={v => cloneObj = v[1]}/>,
+      content: <CloneConfirm onChange={v => deploy = v}/>,
       onOk: () => {
-        if (!cloneObj) {
-          message.error('请选择目标应用及环境')
+        if (!deploy) {
+          message.error('请选择要克隆的应用及环境')
           return Promise.reject()
         }
-        const info = JSON.parse(cloneObj);
-        info.env_id = undefined;
-        store.showExtForm(null, id, info, true)
+        deploy.env_id = undefined;
+        store.showExtForm(null, id, deploy, true)
       },
     })
   }