Skip to content

C
CivManage
Commit a1fd5035 authored by Maofei94's avatar Maofei94
Browse files
Options

style: 相册样式修改

parent bba774f2
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 132 deletions
src/components/Upload/index.less
View file @ a1fd5035
...@@ -28,16 +28,21 @@ ...@@ -28,16 +28,21 @@
flex-wrap: wrap; flex-wrap: wrap;
max-height: 520px; max-height: 520px;
overflow: auto; overflow: auto;
.imgItem { .imgItem {
flex: 0 0 50px;
position: relative; position: relative;
margin-right: 16px; // margin-right: 16px;
margin-bottom: 16px; // margin-bottom: 16px;
width: 320px; margin: 10px;
max-height: 220px; width: 50px;
max-height: 50px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
background-color: rgba(238,238,238,1);
img { img {
width: 100%; width: 100%;
height: 100%;
} }
&:hover, &:hover,
&.seleted { &.seleted {
...@@ -49,8 +54,8 @@ ...@@ -49,8 +54,8 @@
.iconBtn { .iconBtn {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
top: 6px; top: -10px;
right: 10px; right: 0px;
font-size: 18px; font-size: 18px;
color: rgb(8, 156, 8); color: rgb(8, 156, 8);
} }
......
src/pages/mobileConfig/SiteConfig.jsx
View file @ a1fd5035
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Form, Select, Input, Button, Radio, notification } from 'antd'; import { Form, Select, Input, Button, Radio, notification, Spin } from 'antd';
import { editWebsite, getWebsite } from '@/services/mobileConfig/api'; import { editWebsite, getWebsite } from '@/services/mobileConfig/api';
import PicturesWall from '@/components/Upload/index'; import PicturesWall from '@/components/Upload/index';
const { Item } = Form; const { Item } = Form;
const { Option } = Select; const { Option } = Select;
const SiteConfig = props => { const SiteConfig = props => {
const { miniTitle } = props; const { miniTitle, submitCallback } = props;
const [config, setConfig] = useState(''); // 网站配置信息 const [config, setConfig] = useState(''); // 网站配置信息
const [loginList, setLoginList] = useState([ const [loginList, setLoginList] = useState([
{ text: '默认界面', value: 'default' }, { text: '默认界面', value: 'default' },
...@@ -17,7 +17,7 @@ const SiteConfig = props => { ...@@ -17,7 +17,7 @@ const SiteConfig = props => {
const [themeList, setThemeList] = useState([ const [themeList, setThemeList] = useState([
{ text: '默认皮肤', value: 'default' }, { text: '默认皮肤', value: 'default' },
]); // 系统皮肤 ]); // 系统皮肤
const [loading, setLoading] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const layout = { const layout = {
layout: 'horizontal', layout: 'horizontal',
...@@ -25,21 +25,28 @@ const SiteConfig = props => { ...@@ -25,21 +25,28 @@ const SiteConfig = props => {
wrapperCol: { span: 14 }, wrapperCol: { span: 14 },
}; };
useEffect(() => { useEffect(() => {
console.log(miniTitle, 'miniTitle');
if (!miniTitle) { if (!miniTitle) {
return; return;
} }
setLoading(true);
getWebsite({ getWebsite({
_version: 9999, _version: 9999,
_dc: Date.now(), _dc: Date.now(),
title: miniTitle, title: miniTitle,
}).then(res => { })
let obj = { ...form.getFieldsValue() }; .then(res => {
let arr = Object.keys({ ...form.getFieldsValue() }); setLoading(false);
arr.map(k => { let obj = { ...form.getFieldsValue() };
obj[k] = res[k]; let arr = Object.keys({ ...form.getFieldsValue() });
arr.map(k => {
obj[k] = res[k];
});
form.setFieldsValue(obj);
})
.catch(err => {
setLoading(false);
}); });
form.setFieldsValue(obj);
});
}, [miniTitle]); }, [miniTitle]);
// 单选值改变 // 单选值改变
const radioChange = e => {}; const radioChange = e => {};
...@@ -47,131 +54,140 @@ const SiteConfig = props => { ...@@ -47,131 +54,140 @@ const SiteConfig = props => {
const submit = value => { const submit = value => {
form.validateFields().then(valid => { form.validateFields().then(valid => {
if (valid) { if (valid) {
setLoading(true);
const obj = { ...form.getFieldsValue() }; const obj = { ...form.getFieldsValue() };
let params = { ...obj, mode: 'single', client: 'miniapp' }; let params = { ...obj, mode: 'single', client: 'miniapp' };
editWebsite(params, { editWebsite(params, {
headers: { headers: {
'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8', 'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
}, },
}).then(res => { })
if (res.success) { .then(res => {
notification.success({ setLoading(false);
message: '提示', if (res.success) {
duration: 3, submitCallback();
description: '编辑成功', notification.success({
}); message: '提示',
} else { duration: 3,
notification.error({ description: '编辑成功',
message: '提示', });
duration: 3, } else {
description: res.message || '编辑失败', notification.error({
}); message: '提示',
} duration: 3,
console.log(res, 'res'); description: res.message || '编辑失败',
}); });
}
console.log(res, 'res');
})
.catch(err => {
setLoading(false);
});
} }
}); });
}; };
return ( return (
<Form form={form} {...layout}> <Spin spinning={loading} tip="loading...">
<Item <Form form={form} {...layout}>
label="应用名称：" <Item
name="title" label="应用名称："
rules={[ name="title"
{ rules={[
required: true, {
message: '请输入应用名称', required: true,
}, message: '请输入应用名称',
]} },
> ]}
<Input placeholder="请输入应用名称" allowClear /> >
</Item> <Input placeholder="请输入应用名称" allowClear />
</Item>
<Item <Item
label="系统图标：" label="系统图标："
name="shortcutIcon" name="shortcutIcon"
rules={[ rules={[
{ {
required: true, required: true,
message: '请选择系统图标', message: '请选择系统图标',
}, },
]} ]}
> >
<Input placeholder="请输入系统图标名称" allowClear /> <Input placeholder="请输入系统图标名称" allowClear />
</Item> </Item>
<Item label="系统图标预览："> <Item label="系统图标预览：">
<PicturesWall /> <PicturesWall />
</Item> </Item>
<Item <Item
label="登陆页面：" label="登陆页面："
name="loginTemplate" name="loginTemplate"
rules={[ rules={[
{ {
required: true, required: true,
message: '请选择登陆页面', message: '请选择登陆页面',
}, },
]} ]}
> >
<Select placeholder="请选择登陆页面"> <Select placeholder="请选择登陆页面">
{loginList && {loginList &&
loginList.map((item, index) => ( loginList.map((item, index) => (
<Option value={item.value} key={`item${index}`}> <Option value={item.value} key={`item${index}`}>
{item.text} {item.text}
</Option> </Option>
))} ))}
</Select> </Select>
</Item> </Item>
<Item <Item
label="系统皮肤：" label="系统皮肤："
name="theme" name="theme"
rules={[ rules={[
{ {
required: true, required: true,
message: '请选择系统皮肤', message: '请选择系统皮肤',
}, },
]} ]}
> >
<Select placeholder="请选择系统皮肤"> <Select placeholder="请选择系统皮肤">
{themeList && {themeList &&
themeList.map((item, index) => ( themeList.map((item, index) => (
<Option value={item.value} key={`item${index}`}> <Option value={item.value} key={`item${index}`}>
{item.text} {item.text}
</Option> </Option>
))} ))}
</Select> </Select>
</Item> </Item>
<Item <Item
label="系统风格：" label="系统风格："
name="style" name="style"
rules={[ rules={[
{ {
required: true, required: true,
message: '请选择系统风格', message: '请选择系统风格',
}, },
]} ]}
> >
<Select placeholder="请选择系统风格"> <Select placeholder="请选择系统风格">
{styleList && {styleList &&
styleList.map((item, index) => ( styleList.map((item, index) => (
<Option value={item.value} key={`item${index}`}> <Option value={item.value} key={`item${index}`}>
{item.text} {item.text}
</Option> </Option>
))} ))}
</Select> </Select>
</Item> </Item>
<Item label="开启云登陆：" name="cloudLogin"> <Item label="开启云登陆：" name="cloudLogin">
<Radio.Group onChange={radioChange}> <Radio.Group onChange={radioChange}>
<Radio value>是</Radio> <Radio value>是</Radio>
<Radio value={false}>否</Radio> <Radio value={false}>否</Radio>
</Radio.Group> </Radio.Group>
</Item> </Item>
<Item style={{ textAlign: 'center' }}> <Item style={{ textAlign: 'center' }}>
<Button type="primary" onClick={submit}> <Button type="primary" onClick={submit}>
提交 提交
</Button> </Button>
</Item> </Item>
</Form> </Form>
</Spin>
); );
}; };
export default SiteConfig; export default SiteConfig;
src/pages/mobileConfig/index.js
View file @ a1fd5035
...@@ -11,6 +11,7 @@ const MobileConfigPage = props => { ...@@ -11,6 +11,7 @@ const MobileConfigPage = props => {
const [miniTitle, setMiniTitle] = useState(''); const [miniTitle, setMiniTitle] = useState('');
const [flag, setFlag] = useState(1); const [flag, setFlag] = useState(1);
useEffect(() => { useEffect(() => {
console.log(33, '33');
miniAppSiteTree({ miniAppSiteTree({
userMode: 'admin', userMode: 'admin',
select: '', select: '',
...@@ -29,11 +30,16 @@ const MobileConfigPage = props => { ...@@ -29,11 +30,16 @@ const MobileConfigPage = props => {
const handleChange = key => { const handleChange = key => {
setActiveKey(key); setActiveKey(key);
}; };
const submitCallback = () => {
setFlag(flag + 1);
};
const tabArr = [ const tabArr = [
{ {
title: '网站配置', title: '网站配置',
key: '0', key: '0',
component: <SiteConfig miniTitle={miniTitle} />, component: (
<SiteConfig miniTitle={miniTitle} submitCallback={submitCallback} />
),
}, },
{ {
title: '菜单管理', title: '菜单管理',
......
src/pages/mobileConfig/menuconfig/LeftPart.jsx
View file @ a1fd5035
...@@ -495,7 +495,7 @@ const LeftPart = () => { ...@@ -495,7 +495,7 @@ const LeftPart = () => {
<Input placeholder="请输入菜单图标" /> <Input placeholder="请输入菜单图标" />
</Form.Item> </Form.Item>
<Form.Item label="图标预览"> <Form.Item label="图标预览">
<PicturesWall maxLen={3} /> <PicturesWall maxLen={1} />
</Form.Item> </Form.Item>
{nodeType === 1 && ( {nodeType === 1 && (
<> <>
...@@ -507,7 +507,7 @@ const LeftPart = () => { ...@@ -507,7 +507,7 @@ const LeftPart = () => {
<Input placeholder="请输入离线图标" /> <Input placeholder="请输入离线图标" />
</Form.Item> </Form.Item>
<Form.Item label="图标预览"> <Form.Item label="图标预览">
<PicturesWall maxLen={3} /> <PicturesWall maxLen={1} />
</Form.Item> </Form.Item>
</> </>
)} )}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment