feat0806: 编辑诊所页面样式

hejianhao

2026-08-18 154bace0029461f71b04a28433a0633f8fdc865f

feat0806: 编辑诊所页面样式

 tcm-training-admin/src/pages/member/clinic/manage.less

@@ -1,10 +1,14 @@
.clinic-edit-page { min-height: 100%; padding: 24px; background: #f5f7fa; }
.clinic-edit-panel { max-width: 1040px; margin: 0 auto; padding: 24px 32px; background: #fff; border-radius: 4px; }
.clinic-edit-panel h2 { margin: 0 0 24px; font-size: 20px; }
.clinic-edit-panel .ant-form { max-width: 760px; }
.clinic-edit-panel .ant-form { max-width: 860px; }
.clinic-edit-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.clinic-edit-form .ant-form-item { margin-bottom: 20px; }
.clinic-edit-form__single { max-width: calc(50% - 16px); }
.clinic-edit-form__footer { display: flex; gap: 12px; margin-top: 8px; }
.clinic-edit-upload { display: flex; width: 104px; height: 104px; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed #d9d9d9; border-radius: 4px; background: #fafafa; cursor: pointer; }
.clinic-edit-upload--license { width: 208px; height: 128px; }
.clinic-edit-upload:hover { border-color: #409eff; }
.clinic-edit-upload img { width: 100%; height: 100%; object-fit: cover; }
.clinic-edit-upload > div { display: flex; flex-direction: column; gap: 8px; align-items: center; color: #909399; }
@media (max-width: 768px) { .clinic-edit-page { padding: 12px; } .clinic-edit-panel { padding: 20px 16px; } }
@media (max-width: 768px) { .clinic-edit-page { padding: 12px; } .clinic-edit-panel { padding: 20px 16px; } .clinic-edit-form__grid { grid-template-columns: 1fr; } .clinic-edit-form__single { max-width: none; } }

 tcm-training-admin/src/pages/member/clinic/manage.tsx

@@ -1,6 +1,6 @@
import { history, useAccess, useParams } from '@umijs/max';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Form, Image, Input, Select, Upload, message } from 'antd';
import { Button, Form, Image, Input, Radio, Select, Upload, message } from 'antd';
import React, { useEffect, useState } from 'react';
import RegionCascader from '@/components/RegionCascader';
import { getClinicDetail, getProvincialAgentOptions, updateClinic, uploadClinicImage } from './service';
@@ -26,7 +26,7 @@
    finally { setLoading(false); }
  };
  return <div className="clinic-edit-page"><div className="clinic-edit-panel"><h2>编辑诊所</h2>
    <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 10 }}>
    <Form form={form} layout="vertical" className="clinic-edit-form">
      <Form.Item label="头像" className="clinic-edit-upload-item">
        <Form.Item name="avatar" rules={[{ required: true, message: "请上传头像" }]} hidden><Input /></Form.Item>
        <Upload accept="image/*" showUploadList={false} customRequest={async (options) => {
@@ -37,6 +37,7 @@
        </Upload>
      </Form.Item>

      <div className="clinic-edit-form__grid">
      <Form.Item name="name" label="诊所名称"><Input maxLength={100} placeholder="请输入诊所名称" /></Form.Item>
      <Form.Item name="loginAccount" label="登录账号"><Input maxLength={50} placeholder="请输入登录账号" /></Form.Item>
      <Form.Item name="regionCodes" label="诊所地址"><RegionCascader placeholder="请选择省/市/区" /></Form.Item>
@@ -50,14 +51,16 @@
          <div className="clinic-edit-upload clinic-edit-upload--license">{uploadingLicense ? <span>上传中...</span> : businessLicenseUrl ? <Image src={businessLicenseUrl} width={208} height={128} preview={false} /> : <div><PlusOutlined /><span>上传营业执照</span></div>}</div>
        </Upload>
      </Form.Item>
      <Form.Item name="status" label="状态"><Select options={[{ label: "启用", value: 1 }, { label: "禁用", value: 0 }]} placeholder="请选择状态" /></Form.Item>
      <Form.Item name="agentId" label="所属省区代理"><Select allowClear showSearch optionFilterProp="label" options={agentOptions} placeholder="请选择省区代理" /></Form.Item>
      <Form.Item name="status" label="状态"><Radio.Group options={[{ label: "启用", value: 1 }, { label: "禁用", value: 0 }]} /></Form.Item>

      <Form.Item name="bankName" label="银行名称"><Input maxLength={100} placeholder="请输入银行名称" /></Form.Item>
      <Form.Item name="accountHolder" label="账号名称"><Input maxLength={50} placeholder="请输入账号名称" /></Form.Item>
      <Form.Item name="accountHolder" label="账户名称"><Input maxLength={50} placeholder="请输入账户名称" /></Form.Item>
      <Form.Item name="accountNumber" label="账号"><Input maxLength={30} placeholder="请输入账号" /></Form.Item>
      <Form.Item name="branchName" label="支行名称"><Input maxLength={100} placeholder="请输入支行名称" /></Form.Item>
      </div>
      <Form.Item name="agentId" label="所属区域代理" className="clinic-edit-form__single"><Select allowClear showSearch optionFilterProp="label" options={agentOptions} placeholder="请选择所属区域代理" /></Form.Item>

      <Form.Item wrapperCol={{ offset: 4 }}><Button onClick={() => history.back()}>取消</Button><Button type="primary" loading={loading} onClick={submit} style={{ marginLeft: 8 }}>保存</Button></Form.Item>
      <div className="clinic-edit-form__footer"><Button onClick={() => history.back()}>取消</Button><Button type="primary" loading={loading} onClick={submit}>保存</Button></div>
    </Form></div></div>;
};
export default ClinicManagePage;