完善页面

2024-03-18 18:50:36 +08:00 · 2024-03-18 18:50:36 +08:00 · ba054a7448
commit ba054a7448
parent c18cc21a8c
14 changed files with 228 additions and 122 deletions
--- a/src/assets/no-data.png
+++ b/src/assets/no-data.png
--- a/src/components/card/CardAgent.tsx
+++ b/src/components/card/CardAgent.tsx
@ -6,24 +6,24 @@ import {AgentMedalEnum, IAgent} from "../../interfaces/card/ICardProj.ts";
 export default function CardAgent(props: IAgent) {

    const renderMedal = () => {
-        if(props.medal == AgentMedalEnum.GOLD) {
+        if (props.medal == AgentMedalEnum.GOLD) {
            return <span className="card-agent-medal gold">金牌</span>;
        }
-        if(props.medal == AgentMedalEnum.SILVER) {
+        if (props.medal == AgentMedalEnum.SILVER) {
            return <span className="card-agent-medal silver">银牌</span>;
        }
-        if(props.medal == AgentMedalEnum.BRONZE) {
+        if (props.medal == AgentMedalEnum.BRONZE) {
            return <span className="card-agent-medal bronze">铜牌</span>;
        }
        return <span className="card-agent-medal">普通</span>;
    }

    return (
-        <div className="card-agent" onClick={() => {
+        <div className={props.selected ? 'card-agent selected' : 'card-agent'} onClick={() => {
            props.handleSelect();
        }}>
            <div className="card-agent-head">
-                {props.logo ? <Image width={30} src={props.logo} fallback={errorImage} /> : <></>}
+                {props.logo ? <Image width={30} src={props.logo} fallback={errorImage}/> : <></>}
                <span className="card-agent-title">{props.name}</span>
                {renderMedal()}
            </div>
--- a/src/components/card/CardProj.tsx
+++ b/src/components/card/CardProj.tsx
@ -1,18 +1,6 @@
 import './card-proj.css';
-import {DownOutlined, EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined} from '@ant-design/icons';
-import {MenuProps} from 'antd';
-import {Dropdown, Space} from 'antd';
-
-const items: MenuProps['items'] = [
-    {
-        key: '1',
-        label: (
-            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
-                1st menu item
-            </a>
-        ),
-    },
-];
+import {EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined, SettingOutlined, DownloadOutlined} from '@ant-design/icons';
+import {Button, ConfigProvider, Tag} from 'antd';

 export default function CardProj() {
    return (
@ -49,30 +37,37 @@ export default function CardProj() {
                    </div>
                </div>
                <div className="line">
-                    <div className="left">
-                        <span>
-                            <Dropdown menu={{items}}>
-                                <a onClick={(e) => e.preventDefault()}>
-                                <Space> 功能管理 <DownOutlined/></Space>
-                                </a>
-                            </Dropdown>
-                        </span>
-                        <span>
-                            <Dropdown menu={{items}}>
-                                <a onClick={(e) => e.preventDefault()}>
-                                <Space> 资料下载 <DownOutlined/></Space>
-                                </a>
-                            </Dropdown>
-                        </span>
-                    </div>
+                    <div className="left"></div>
                    <div className="right">
                        <span>
-                            <FolderOutlined />
+                            <FolderOutlined/>
                            <a href="/#">目录</a>
                        </span>
                    </div>
                </div>
            </div>
+            <hr/>
+            <div className="foot">
+                <ConfigProvider theme={{
+                    components: {
+                        Button: {
+                            contentFontSizeSM: 12,
+                        }
+                    }
+                }}>
+                    <div className="option">
+                        <Button size="small" type="text"><SettingOutlined/> 登录界面设置</Button>
+                        <Button size="small" type="text"><SettingOutlined/> 系统菜单管理(0)</Button>
+                        <Button size="small" type="text"><SettingOutlined/> 菜单排序(0)</Button>
+                    </div>
+                    <div className="option">
+                        <Button size="small" type="text"><DownloadOutlined/> 申请表</Button>
+                        <Button size="small" type="text"><DownloadOutlined/> 操作手册</Button>
+                        <Button size="small" type="text"><DownloadOutlined/> 代码压缩包</Button>
+                        <Button size="small" type="text"><DownloadOutlined /> 代码文档</Button>
+                    </div>
+                </ConfigProvider>
+            </div>
        </div>
    )
 }
--- a/src/components/card/card-agent.css
+++ b/src/components/card/card-agent.css
@ -1,6 +1,23 @@
 .card-agent {
 }

+.selected {
+    position: relative;
+}
+
+.selected:before {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border: 5px solid var(--color-red);
+    z-index: 10;
+    top: 0;
+    right: 0;
+    border-left: transparent;
+    border-bottom: transparent;
+}
+
 .card-agent .card-agent-head {
    padding: 10px 10px 5px 10px;
    display: flex;
--- a/src/components/card/card-proj-type.css
+++ b/src/components/card/card-proj-type.css
@ -83,13 +83,13 @@
 }

 .proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner {
-    border-color: var(--color-orange);
+    border-color: var(--color-primary);
 }

 .proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner,
 .proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
-    border-color: var(--color-orange);
-    background-color: var(--color-orange);
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
 }

 .proj .proj-foot {
@ -103,7 +103,7 @@
    text-align: center;
    margin: 0 5px;
    padding: 10px 0;
-    background-color: var(--color-orange);
+    background-color: var(--color-primary);
    color: var(--color-light);
    flex-basis: 100%;
 }
--- a/src/components/card/card-proj.css
+++ b/src/components/card/card-proj.css
@ -74,3 +74,10 @@
    margin-left: 5px;
 }

+.card-proj .foot {
+    position: unset;
+    background-color: transparent;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
--- a/src/components/list/list-proj-agent.css
+++ b/src/components/list/list-proj-agent.css
@ -41,8 +41,8 @@
 }

 .list-proj-agent .body .page .ant-pagination-item-active {
-    border-color: var(--color-orange);
-    background-color: var(--color-orange);
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
 }

 .list-proj-agent .body .page .ant-pagination-item-active a {
--- a/src/components/list/list-proj.css
+++ b/src/components/list/list-proj.css
@ -41,8 +41,8 @@
 }

 .list-proj .body .page .ant-pagination-item-active {
-    border-color: var(--color-orange);
-    background-color: var(--color-orange);
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
 }

 .list-proj .body .page .ant-pagination-item-active a {
--- a/src/components/step/step-proj-edit.css
+++ b/src/components/step/step-proj-edit.css
@ -23,13 +23,13 @@
 }

 .step-proj .step .complete {
-    border: 1px solid var(--color-blue);
-    color: var(--color-blue);
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
 }

 .step-proj .step .processing {
-    border: 1px solid var(--color-blue);
-    background-color: var(--color-blue);
+    border: 1px solid var(--color-primary);
+    background-color: var(--color-primary);
    color: var(--color-light);
 }

@ -77,7 +77,7 @@
 }

 .step-proj .step-line-complete {
-    border-color: var(--color-blue);
+    border-color: var(--color-primary);
 }

 .step-proj .step-card {
--- a/src/index.css
+++ b/src/index.css
@ -2,7 +2,7 @@
    --color-border: rgba(206, 206, 206, 0.4);
    --color-box-shadow: rgba(206, 206, 206, 0.4);
    --color-red: #ff5722;
-    --color-orange: rgba(252, 189, 0, 1);
+    --color-primary: rgba(252, 189, 0, 1);
    --color-green: rgba(129, 179, 55, 1);
    --color-blue: rgba(64, 149, 229, 1);
    --color-purple: #a233c6;
@ -55,7 +55,7 @@ ul {
 }

 .btn-orange {
-    background-color: var(--color-orange);
+    background-color: var(--color-primary);
    color: var(--color-light);
 }

--- a/src/route/agent/AgentSelect.tsx
+++ b/src/route/agent/AgentSelect.tsx
@ -5,6 +5,7 @@ import CardAgent from "../../components/card/CardAgent.tsx";
 import {errorImage} from "../../util/CommonUtil.ts";
 import {useState} from "react";
 import {AgentMedalEnum} from "../../interfaces/card/ICardProj.ts";
+import NoData from '../../assets/no-data.png';

 export default function AgentSelect() {
    const [value, setValue] = useState(1);
@ -12,6 +13,121 @@ export default function AgentSelect() {
    // const params = useParams();
    const height = window.innerHeight - 150;

+    const [selectedAgentId, setSelectedAgentId] = useState('0');
+    const [selectedAgent, setSelectedAgent] = useState({});
+
+    // 列表
+    const [agentList, setAgentList] = useState([{
+        id: '1',
+        logo: '1',
+        name: '标题1',
+        desc: '描述1',
+        medal: AgentMedalEnum.GOLD,
+        certificateImg: '1',
+        selected: false
+    }, {
+        id: '2',
+        logo: '2',
+        name: '标题2',
+        desc: '描述2',
+        medal: AgentMedalEnum.GOLD,
+        certificateImg: '1',
+        selected: false
+    }]);
+
+    const renderAgent = () => {
+        return agentList.map((item, index) => {
+            return (
+                <CardAgent key={`agent${index}`} logo={item.logo}
+                           name={item.name}
+                           desc={item.desc}
+                           medal={item.medal}
+                           certificateImg={item.certificateImg}
+                           selected={selectedAgentId == item.id}
+                           handleSelect={() => {
+                               setSelectedAgentId(item.id);
+                               setSelectedAgent(item);
+                           }}
+                />
+            )
+        })
+    }
+
+    const renderSelectedAgent = () => {
+        if (Object.keys(selectedAgent).length == 0) {
+            return (
+                <>
+                    <div className="no-data">
+                        <Image src={NoData}/>
+                        <span>请选择左侧机构</span>
+                    </div>
+                </>
+            )
+        }
+        return (
+            <>
+                <div className="agent-info">
+                    <div className="agent-title">机构信息</div>
+                    <div className="agent-body">
+                        <div className="agent-name">北京九思恒源科技有限公司</div>
+                        <div className="agent-desc">
+                            雄厚的技术与人才实力，赢得了客户的深厚信赖，获得了政府部门的高度认可，公司先后荣获“全国重合同守信用单位”、“先进施工企业”、“长沙市利税大户”等诸多荣誉称号。与此同时，公司承建的湖南中联重科起重机厂钢结构厂房、三一重工娄底基地车间、北京资源集团宁乡基地车间、双胞胎饲料集团长沙基地厂房、南昌西客站高铁钢结构候客大厅、江西送变电建设中超公司厂房等一大批各类钢结构优质工程，缔造了“鼎盛钢构”卓尔不群的品牌知名度和美誉度。
+                        </div>
+                        <Divider dashed style={{
+                            marginTop: '10px',
+                            marginBottom: '10px'
+                        }}/>
+                        <div className="agent-img-title">机构证书</div>
+                        <div className="agent-img-list">
+                            <Image width={270}
+                                   height={170}
+                                   fallback={errorImage}
+                            />
+                            <Image width={270}
+                                   height={170}
+                                   fallback={errorImage}
+                            />
+                            <Image width={270}
+                                   height={170}
+                                   fallback={errorImage}
+                            />
+                            <Image width={270}
+                                   height={170}
+                                   fallback={errorImage}
+                            />
+                        </div>
+                        <Divider dashed style={{
+                            marginTop: '10px',
+                            marginBottom: '10px'
+                        }}/>
+                        <div className="agent-contact">
+                            <div className="line">
+                                <span>联系人：XXXXXX</span>
+                                <span>联系电话：13888888888</span>
+                            </div>
+                            <div className="line">
+                                <span>联系地址：内蒙古呼和浩特新城区XXXXXX</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="agent-price">
+                    <span className="label">价格种类：</span>
+                    <Radio.Group onChange={(e: RadioChangeEvent) => {
+                        console.log('radio checked', e.target.value);
+                        setValue(e.target.value);
+                    }} value={value}>
+                        <Radio value={1}>普通件：200</Radio>
+                        <Radio value={2}>加急件：400</Radio>
+                    </Radio.Group>
+                </div>
+                <div style={{marginTop: '15px', textAlign: 'center'}}>
+                    <Button type="primary" style={{backgroundColor: 'var(--color-primary)'}}>选择</Button>
+                </div>
+            </>
+        )
+    }
+
    return (
        <>
            <Breadcrumb
@ -31,78 +147,27 @@ export default function AgentSelect() {
                <div className="agent-select-left">
                    <div className="list">
                        <div className="list-item">
-                            <CardAgent logo="1"
-                                       name="标题标题"
-                                       desc="描述描述试试少时诵诗书"
-                                       medal={AgentMedalEnum.NORMAL}
-                                       certificateImg="1"
-                                       handleSelect={() => {
-                                           console.log('1')
-                                       }}
-                            />
+                            {renderAgent()}
                        </div>
                        <div className="load">
-                            <Button type="text">加载更多...</Button>
+                            <Button type="text" onClick={() => {
+                                setAgentList([
+                                    ...agentList,
+                                    {
+                                        id: '3',
+                                        logo: '3',
+                                        name: '标题3',
+                                        desc: '描述3',
+                                        medal: AgentMedalEnum.SILVER,
+                                        certificateImg: '3',
+                                        selected: false
+                                    }
+                                ])
+                            }}>加载更多...</Button>
                        </div>
                    </div>
                </div>
-                <div className="agent-select-right">
-                    <div className="agent-info">
-                        <div className="agent-title">机构信息</div>
-                        <div className="agent-body">
-                            <div className="agent-name">北京九思恒源科技有限公司</div>
-                            <div className="agent-desc">
-                                雄厚的技术与人才实力，赢得了客户的深厚信赖，获得了政府部门的高度认可，公司先后荣获“全国重合同守信用单位”、“先进施工企业”、“长沙市利税大户”等诸多荣誉称号。与此同时，公司承建的湖南中联重科起重机厂钢结构厂房、三一重工娄底基地车间、北京资源集团宁乡基地车间、双胞胎饲料集团长沙基地厂房、南昌西客站高铁钢结构候客大厅、江西送变电建设中超公司厂房等一大批各类钢结构优质工程，缔造了“鼎盛钢构”卓尔不群的品牌知名度和美誉度。
-                            </div>
-                            <Divider dashed style={{
-                                marginTop: '10px',
-                                marginBottom: '10px'
-                            }}/>
-                            <div className="agent-img-title">机构证书</div>
-                            <div className="agent-img-list">
-                                <Image width={270}
-                                       height={170}
-                                       fallback={errorImage}
-                                />
-                                <Image width={270}
-                                       height={170}
-                                       fallback={errorImage}
-                                />
-                                <Image width={270}
-                                       height={170}
-                                       fallback={errorImage}
-                                />
-                                <Image width={270}
-                                       height={170}
-                                       fallback={errorImage}
-                                />
-                            </div>
-                            <Divider dashed style={{
-                                marginTop: '10px',
-                                marginBottom: '10px'
-                            }}/>
-                            <div className="agent-contact">
-                                <div className="line">
-                                    <span>联系人：XXXXXX</span>
-                                    <span>联系电话：13888888888</span>
-                                </div>
-                                <div className="line">
-                                    <span>联系地址：内蒙古呼和浩特新城区XXXXXX</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="agent-price">
-                        <span className="label">价格种类：</span>
-                        <Radio.Group onChange={(e: RadioChangeEvent) => {
-                            console.log('radio checked', e.target.value);
-                            setValue(e.target.value);
-                        }} value={value}>
-                            <Radio value={1}>普通件：200</Radio>
-                            <Radio value={2}>加急件：400</Radio>
-                        </Radio.Group>
-                    </div>
-                </div>
+                <div className="agent-select-right">{renderSelectedAgent()}</div>
            </div>
        </>

--- a/src/route/agent/agent-select.css
+++ b/src/route/agent/agent-select.css
@ -48,13 +48,27 @@
    padding: 15px;
    height: calc(100% - 30px);
    overflow: auto;
+    width: 840px;
+}
+
+.agent-select .agent-select-right .no-data {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.agent-select .agent-select-right .no-data span {
+    margin-top: 15px;
+    color: var(--color-dark);
 }

 .agent-select .agent-select-right .agent-info .agent-title {
    border: 1px solid var(--color-border);
    background-color: rgba(228,229,238,0.5);
    padding: 5px 15px;
-    font-weight: 600;
+    font-weight: bold;
 }

 .agent-select .agent-select-right .agent-info .agent-body {
@ -65,7 +79,7 @@

 .agent-select .agent-select-right .agent-info .agent-body .agent-name {
    padding: 5px 0;
-    font-weight: 500;
+    font-weight: bold;
 }

 .agent-select .agent-select-right .agent-info .agent-body .agent-desc {
@ -103,6 +117,14 @@
    padding: 15px;
 }

+.agent-select .agent-select-right .agent-price .ant-radio-inner {
+    border: 1px solid var(--color-primary);
+}
+
+.agent-select .agent-select-right .agent-price .ant-radio-checked .ant-radio-inner {
+    background-color: var(--color-primary);
+}
+
 .agent-select .agent-select-right .agent-price .label {
    font-weight: bold;
 }
--- a/src/route/proj/ProjEdit.tsx
+++ b/src/route/proj/ProjEdit.tsx
@ -74,7 +74,7 @@ export default function ProjEdit() {
                </StepProjEdit>
            </div>
            <div className="btn-container">
-                <Button size="large" style={{width: '200px', fontSize: '14px', backgroundColor: 'var(--color-blue)', color: 'var(--color-light)'}} onClick={() => {
+                <Button size="large" style={{width: '200px', fontSize: '14px', backgroundColor: 'var(--color-primary)', color: 'var(--color-light)'}} onClick={() => {
                    nav(-1);
                }}>返回</Button>
            </div>
--- a/src/route/proj/ProjNew.tsx
+++ b/src/route/proj/ProjNew.tsx
@ -80,7 +80,7 @@ export default function ProjNew() {

                            <Form.Item>
                                <Flex align="center" justify="center" gap="large">
-                                    <Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-orange)'}}>
+                                    <Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-primary)'}}>
                                        提交并付款
                                    </Button>
                                    <Button type="default" htmlType="button" onClick={onBack}>