mirror of https://github.com/openspug/spug
100 lines
3.5 KiB
JavaScript
100 lines
3.5 KiB
JavaScript
/**
|
||
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
|
||
* Copyright (c) <spug.dev@gmail.com>
|
||
* Released under the AGPL-3.0 License.
|
||
*/
|
||
import React, { useState } from 'react';
|
||
import { observer } from 'mobx-react';
|
||
import { Modal, Form, Input, Checkbox, Switch, Row, Col, message } from 'antd';
|
||
import http from 'libs/http';
|
||
import store from './store';
|
||
import envStore from '../environment/store'
|
||
import styles from './index.module.css';
|
||
import lds from 'lodash';
|
||
|
||
export default observer(function () {
|
||
const isModify = store.record.id !== undefined;
|
||
const [form] = Form.useForm();
|
||
const [loading, setLoading] = useState(false);
|
||
const [envs, setEnvs] = useState(isModify ? [store.env.id] : []);
|
||
|
||
function handleSubmit() {
|
||
setLoading(true);
|
||
const formData = form.getFieldsValue();
|
||
formData['is_public'] = store.type === 'src' ? false : formData['is_public'];
|
||
let request;
|
||
if (isModify) {
|
||
formData['id'] = store.record.id;
|
||
request = http.patch('/api/config/', formData)
|
||
} else {
|
||
formData['type'] = store.type;
|
||
formData['o_id'] = store.id;
|
||
formData['envs'] = envs;
|
||
request = http.post('/api/config/', formData)
|
||
}
|
||
request.then(res => {
|
||
message.success('操作成功');
|
||
store.formVisible = false;
|
||
store.fetchRecords()
|
||
}, () => setLoading(false))
|
||
}
|
||
|
||
function handleEnvCheck(id) {
|
||
if (!isModify) {
|
||
const tmp = lds.clone(envs);
|
||
const index = tmp.indexOf(id);
|
||
if (index !== -1) {
|
||
tmp.splice(index, 1)
|
||
} else {
|
||
tmp.push(id)
|
||
}
|
||
setEnvs(tmp)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
visible
|
||
width={800}
|
||
maskClosable={false}
|
||
title={store.record.id ? '更新配置' : '新增配置'}
|
||
onCancel={() => store.formVisible = false}
|
||
confirmLoading={loading}
|
||
onOk={handleSubmit}>
|
||
<Form form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
|
||
<Form.Item required name="key" label="Key">
|
||
<Input disabled={isModify} placeholder="请输入"/>
|
||
</Form.Item>
|
||
<Form.Item name="value" label="Value">
|
||
<Input.TextArea placeholder="请输入"/>
|
||
</Form.Item>
|
||
<Form.Item name="desc" label="备注">
|
||
<Input.TextArea placeholder="请输入备注信息"/>
|
||
</Form.Item>
|
||
{store.type === 'app' && (
|
||
<Form.Item
|
||
label="类型"
|
||
name="is_public"
|
||
valuePropName="checked"
|
||
initialValue={store.record.is_public === undefined || store.record.is_public}
|
||
tooltip={<a target="_blank" rel="noopener noreferrer" href="https://spug.cc/docs/conf-app">什么是公共/私有配置？</a>}>
|
||
<Switch checkedChildren="公共" unCheckedChildren="私有"/>
|
||
</Form.Item>
|
||
)}
|
||
<Form.Item label="选择环境" style={{lineHeight: '40px'}}>
|
||
{envStore.records.map((item, index) => (
|
||
<Row
|
||
key={item.id}
|
||
onClick={() => handleEnvCheck(item.id)}
|
||
style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
|
||
<Col span={2}><Checkbox disabled={isModify} checked={envs.includes(item.id)}/></Col>
|
||
<Col span={4} className={styles.ellipsis}>{item.key}</Col>
|
||
<Col span={9} className={styles.ellipsis}>{item.name}</Col>
|
||
<Col span={9} className={styles.ellipsis}>{item.desc}</Col>
|
||
</Row>
|
||
))}
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
)
|
||
}) |