fix: '消息平台编辑界面样式重构'

src/pages/platformCenter/messageManage/projectManage/ProjectManage.jsx

@@ -85,9 +85,7 @@ const ProjectManage = props => {
           ) : (
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <Tooltip title={text}>
-                <AlertTwoTone
-                  style={{ fontSize: '16px', marginRight: '0.1rem' }}
-                />
+                <AlertTwoTone style={{ fontSize: '16px', marginRight: '0.1rem' }} />
               </Tooltip>
               {searchStyle(text)}
             </div>
@@ -140,24 +138,20 @@ const ProjectManage = props => {
             />
           </Tooltip>
 
-          {record.name != '通用报警' &&
-            record.name != '工单提醒' &&
-            record.name != '系统通知' && (
-              <div onClick={e => e.stopPropagation()}>
-                <Popconfirm
-                  title="是否删除方案？"
-                  okText="确认"
-                  cancelText="取消"
-                  onConfirm={() => {
-                    DeleteProject(record);
-                  }}
-                >
-                  <DeleteOutlined
-                    style={{ fontSize: '16px', color: '#e86060' }}
-                  />
-                </Popconfirm>
-              </div>
-            )}
+          {record.name != '通用报警' && record.name != '工单提醒' && record.name != '系统通知' && (
+            <div onClick={e => e.stopPropagation()}>
+              <Popconfirm
+                title="是否删除方案？"
+                okText="确认"
+                cancelText="取消"
+                onConfirm={() => {
+                  DeleteProject(record);
+                }}
+              >
+                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
+              </Popconfirm>
+            </div>
+          )}
         </Space>
       ),
     },
@@ -167,10 +161,7 @@ const ProjectManage = props => {
   const searchStyle = val => {
     let n;
     if (showSearchStyle) {
-      n = val.replace(
-        new RegExp(value, 'g'),
-        `<span style='color:red'>${value}</span>`,
-      );
+      n = val.replace(new RegExp(value, 'g'), `<span style='color:red'>${value}</span>`);
     } else {
       n = val;
     }

src/pages/platformCenter/messageManage/schemeDetail/schemeDetail.jsx

@@ -11,6 +11,8 @@ import {
   message,
   Button,
   Card,
+  Row,
+  Col,
   Switch as Switchs,
 } from 'antd';
 import BaseForm from '@/components/BaseForm/index';
@@ -384,12 +386,13 @@ const EditModal = props => {
 
   return (
     <div className={styles.editModal_container}>
-      <Form form={form} {...layout} onFinish={onSubmit}>
+      <Form form={form} onFinish={onSubmit}>
         <div className={styles.content}>
           <Card title="方案" style={{ width: '100%' }}>
             <Item
               label="方案名称"
               name="name"
+              labelAlign="right"
               rules={[
                 {
                   required: true,
@@ -404,7 +407,7 @@ const EditModal = props => {
                 onChange={onNameChange}
               />
             </Item>
-            <Item label="方案类型">
+            <Item label="方案类型" labelAlign="right" style={{ marginLeft: '12px' }}>
               <div className={styles.cardList}>
                 {listType.map(item => (
                   <div key={item.title} className={styles.cardListItem}>
@@ -425,7 +428,11 @@ const EditModal = props => {
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 <Item labelCol={{ span: 6 }}>
                   <div style={{ display: 'flex' }}>
-                    <Item label="推送组" name="to_person" style={{ marginTop: '50px' }}>
+                    <Item
+                      label="推送组"
+                      name="to_person"
+                      style={{ marginTop: '50px', marginLeft: '32px' }}
+                    >
                       <Input disabled />
                     </Item>
                     <IdcardOutlined
@@ -480,173 +487,175 @@ const EditModal = props => {
             </Card>
           )}
           <div className={styles.push_trench}>
-            {
-              <div className={styles.trench_card}>
-                <div className={styles.card_title}>
-                  <div className={styles.lable}>APP</div>
-                  <Switchs
-                    onChange={e => onTypeChange(e, 'isAPPShow')}
-                    checked={currentTrench.isAPPShow}
-                  />
-                </div>
-                <div className={styles.card_body}>
-                  <Item label="模板" labelAlign="left" name="app_template" labelCol={{ span: 3 }}>
-                    <Select style={{ width: '97%' }} disabled={!currentTrench.isAPPShow}>
-                      {APP_ITEMS.map((item, idx) => (
-                        <Select.Option value={item.Id} key={idx}>
-                          {item.LikeName}
-                        </Select.Option>
-                      ))}
-                    </Select>
-                  </Item>
-                  <Item label="功能路径" name="app_path" labelAlign="left" labelCol={{ span: 3 }}>
-                    <TextArea
-                      rows={4}
-                      style={{ width: '97%' }}
-                      disabled={!currentTrench.isAPPShow}
-                      placeholder="请输入功能路径"
-                    />
-                  </Item>
-                </div>
-              </div>
-            }
-            {
-              <div className={styles.trench_card}>
-                <div className={styles.card_title}>
-                  <div className={styles.lable}>公众号</div>
-                  <Switchs
-                    onChange={e => onTypeChange(e, 'isWXShow')}
-                    checked={currentTrench.isWXShow}
-                  />
-                </div>
-                <div className={styles.card_body}>
-                  <Item label="模板" name="wx_template" labelAlign="left" labelCol={{ span: 4 }}>
-                    <Select style={{ width: '97%' }} disabled={!currentTrench.isWXShow}>
-                      {WX_ITEMS.map((item, idx) => (
-                        <Select.Option value={item.Id} key={idx}>
-                          {item.LikeName}
-                        </Select.Option>
-                      ))}
-                    </Select>
-                  </Item>
-                  <Item label="H5路由" name="h5_path" labelAlign="left" labelCol={{ span: 4 }}>
-                    <Input
-                      style={{ width: '97%' }}
-                      disabled={!currentTrench.isWXShow}
-                      placeholder="请输入功能路径"
-                    />
-                  </Item>
-                  <Item
-                    label="小程序路由"
-                    name="miniprogram_path"
-                    labelAlign="left"
-                    labelCol={{ span: 4 }}
-                  >
-                    <Input
-                      style={{ width: '97%' }}
-                      disabled={!currentTrench.isWXShow}
-                      placeholder="请输入功能路径"
-                    />
-                  </Item>
-                </div>
-              </div>
-            }
-            {
-              <div className={styles.trench_card}>
-                <div className={styles.card_title}>
-                  <div className={styles.lable}>WEB</div>
-                  <Switchs
-                    onChange={e => onTypeChange(e, 'isWEBShow')}
-                    checked={currentTrench.isWEBShow}
-                  />
-                </div>
-                <div className={styles.card_body}>
-                  <Item label="模板" name="web_template" labelCol={{ span: 3 }} labelAlign="left">
-                    <Select style={{ width: '97%' }} disabled={!currentTrench.isWEBShow}>
-                      {WEB_ITEMS.map((item, idx) => (
-                        <Select.Option value={item.Id} key={idx}>
-                          {item.LikeName}
-                        </Select.Option>
-                      ))}
-                    </Select>
-                  </Item>
-                  <Item label="功能路径" name="web_path" labelAlign="left" labelCol={{ span: 3 }}>
-                    <TextArea
-                      rows={4}
-                      style={{ width: '97%' }}
-                      disabled={!currentTrench.isWEBShow}
-                      placeholder="请输入功能路径"
-                    />
-                  </Item>
-                </div>
-              </div>
-            }
-
-            {
-              <div className={styles.trench_card}>
-                <div className={styles.card_title}>
-                  <div className={styles.lable}>短信推送</div>
-                  <Switchs
-                    onChange={e => onTypeChange(e, 'isMessageShow')}
-                    checked={currentTrench.isMessageShow}
-                  />
-                </div>
-                <div className={styles.card_body}>
-                  <Item
-                    label="模板"
-                    labelAlign="left"
-                    name="message_template"
-                    labelCol={{ span: 2 }}
-                  >
-                    <Select style={{ width: '97%' }} disabled={!currentTrench.isMessageShow}>
-                      {MES_ITEMS.map((item, idx) => (
-                        <Select.Option value={item.Id} key={idx}>
-                          {item.LikeName}
-                        </Select.Option>
-                      ))}
-                    </Select>
-                  </Item>
-                </div>
-              </div>
-            }
-
-            {
-              <div className={styles.trench_card}>
-                <div className={styles.card_title}>
-                  <div className={styles.lable}>企业微信</div>
-                  <Switchs
-                    onChange={e => onTypeChange(e, 'isEnterpriseWXShow')}
-                    checked={currentTrench.isEnterpriseWXShow}
-                  />
-                </div>
-                <div className={styles.card_body}>
-                  <Item
-                    label="模板"
-                    labelAlign="left"
-                    name="enterprise_template"
-                    labelCol={{ span: 2 }}
-                  >
-                    <Select style={{ width: '97%' }} disabled={!currentTrench.isEnterpriseWXShow}>
-                      {EN_ITEMS.map((item, idx) => (
-                        <Select.Option value={item.Id} key={idx}>
-                          {item.LikeName}
-                        </Select.Option>
-                      ))}
-                    </Select>
-                  </Item>
-                </div>
-              </div>
-            }
+            <Row>
+              <Col xxl={8} xl={12} sm={24} xs={24}>
+                {
+                  <div className={styles.trench_card}>
+                    <div className={styles.card_title}>
+                      <div className={styles.lable}>APP</div>
+                      <Switchs
+                        onChange={e => onTypeChange(e, 'isAPPShow')}
+                        checked={currentTrench.isAPPShow}
+                      />
+                    </div>
+                    <div className={styles.card_body}>
+                      <Item label="模板" name="app_template" labelCol={{ span: 6 }}>
+                        <Select style={{ width: '97%' }} disabled={!currentTrench.isAPPShow}>
+                          {APP_ITEMS.map((item, idx) => (
+                            <Select.Option value={item.Id} key={idx}>
+                              {item.LikeName}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </Item>
+                      <Item label="功能路径" name="app_path" labelCol={{ span: 6 }}>
+                        <TextArea
+                          rows={1}
+                          style={{ width: '97%' }}
+                          disabled={!currentTrench.isAPPShow}
+                          placeholder="请输入功能路径"
+                        />
+                      </Item>
+                    </div>
+                  </div>
+                }
+              </Col>
+              <Col xxl={8} xl={12} sm={24} xs={24}>
+                {
+                  <div className={styles.trench_card}>
+                    <div className={styles.card_title}>
+                      <div className={styles.lable}>公众号</div>
+                      <Switchs
+                        onChange={e => onTypeChange(e, 'isWXShow')}
+                        checked={currentTrench.isWXShow}
+                      />
+                    </div>
+                    <div className={styles.card_body}>
+                      <Item label="模板" name="wx_template" labelCol={{ span: 6 }}>
+                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWXShow}>
+                          {WX_ITEMS.map((item, idx) => (
+                            <Select.Option value={item.Id} key={idx}>
+                              {item.LikeName}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </Item>
+                      <Item label="H5路由" name="h5_path" labelCol={{ span: 6 }}>
+                        <Input
+                          style={{ width: '97%' }}
+                          disabled={!currentTrench.isWXShow}
+                          placeholder="请输入功能路径"
+                        />
+                      </Item>
+                      <Item label="小程序路由" name="miniprogram_path" labelCol={{ span: 6 }}>
+                        <Input
+                          style={{ width: '97%' }}
+                          disabled={!currentTrench.isWXShow}
+                          placeholder="请输入功能路径"
+                        />
+                      </Item>
+                    </div>
+                  </div>
+                }
+              </Col>
+              <Col xxl={8} xl={12} sm={24} xs={24}>
+                {
+                  <div className={styles.trench_card}>
+                    <div className={styles.card_title}>
+                      <div className={styles.lable}>WEB</div>
+                      <Switchs
+                        onChange={e => onTypeChange(e, 'isWEBShow')}
+                        checked={currentTrench.isWEBShow}
+                      />
+                    </div>
+                    <div className={styles.card_body}>
+                      <Item label="模板" name="web_template" labelCol={{ span: 6 }}>
+                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWEBShow}>
+                          {WEB_ITEMS.map((item, idx) => (
+                            <Select.Option value={item.Id} key={idx}>
+                              {item.LikeName}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </Item>
+                      <Item label="功能路径" name="web_path" labelCol={{ span: 6 }}>
+                        <TextArea
+                          rows={1}
+                          style={{ width: '97%' }}
+                          disabled={!currentTrench.isWEBShow}
+                          placeholder="请输入功能路径"
+                        />
+                      </Item>
+                    </div>
+                  </div>
+                }
+              </Col>
+              <Col xxl={8} xl={12} sm={24} xs={24}>
+                {
+                  <div className={styles.trench_card}>
+                    <div className={styles.card_title}>
+                      <div className={styles.lable}>短信推送</div>
+                      <Switchs
+                        onChange={e => onTypeChange(e, 'isMessageShow')}
+                        checked={currentTrench.isMessageShow}
+                      />
+                    </div>
+                    <div className={styles.card_body}>
+                      <Item label="模板" name="message_template" labelCol={{ span: 6 }}>
+                        <Select style={{ width: '97%' }} disabled={!currentTrench.isMessageShow}>
+                          {MES_ITEMS.map((item, idx) => (
+                            <Select.Option value={item.Id} key={idx}>
+                              {item.LikeName}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </Item>
+                    </div>
+                  </div>
+                }
+              </Col>
+              <Col xxl={8} xl={12} sm={24} xs={24}>
+                {
+                  <div className={styles.trench_card}>
+                    <div className={styles.card_title}>
+                      <div className={styles.lable}>企业微信</div>
+                      <Switchs
+                        onChange={e => onTypeChange(e, 'isEnterpriseWXShow')}
+                        checked={currentTrench.isEnterpriseWXShow}
+                      />
+                    </div>
+                    <div className={styles.card_body}>
+                      <Item label="模板" name="enterprise_template" labelCol={{ span: 6 }}>
+                        <Select
+                          style={{ width: '97%' }}
+                          disabled={!currentTrench.isEnterpriseWXShow}
+                        >
+                          {EN_ITEMS.map((item, idx) => (
+                            <Select.Option value={item.Id} key={idx}>
+                              {item.LikeName}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </Item>
+                    </div>
+                  </div>
+                }
+              </Col>
+            </Row>
           </div>
         </div>
-        <Item {...tailLayout} style={{ marginTop: '1rem' }}>
-          <Button htmlType="button" onClick={back} style={{ marginRight: '2rem' }}>
-            返回
-          </Button>
-          <Button type="primary" htmlType="submit">
-            确定
-          </Button>
-        </Item>
+        <Row>
+          <Col span={24}>
+            <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
+              <Button htmlType="button" onClick={back} style={{ marginRight: '2rem' }}>
+                返回
+              </Button>
+              <Button type="primary" htmlType="submit">
+                确定
+              </Button>
+            </div>
+          </Col>
+        </Row>
       </Form>
       <div />
       <RoleModal

src/pages/platformCenter/messageManage/schemeDetail/schemeDetail.less

-.editModal_container{
-    width: 100%;
-    overflow-y: hidden;
-    height: calc(100% - 20px);
+.editModal_container {
+  width: 100%;
+  overflow-y: hidden;
+  height: calc(100% - 20px);
+  display: flex;
+  flex-direction: column;
+  button[ant-click-animating-without-extra-node]:after {
+    border: 0 none;
+
+    opacity: 0;
+
+    animation: none 0 ease 0 1 normal;
+  }
+  .content {
+    height: calc(100vh - 140px);
+    overflow-y: scroll;
+  }
+  .cardList {
     display: flex;
-    flex-direction: column;
-    button[ant-click-animating-without-extra-node]:after {
-        border: 0 none;
-        
-        opacity: 0;
-        
-        animation:none 0 ease 0 1 normal;
-        
-        }
-    .content{
-        height: calc(100vh - 140px);
-        overflow-y: scroll;
+    flex-wrap: wrap;
+    .cardListItem {
+      width: 50%;
+      margin-bottom: 1rem;
     }
-    .cardList{
+  }
+  .ant-card-bordered {
+    border-right: none;
+  }
+  .push_trench {
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    .trench_card {
+      margin-top: 1rem;
+      margin-right: 0.5rem;
+      min-width: 400px;
+      border-width: 1px;
+      border-color: #eeeeee;
+      border-style: solid;
+      border-radius: 5px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: #ffffff;
+      .card_title {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: #f6f7f9;
+        height: 50px;
+        width: 100%;
         display: flex;
-        flex-wrap: wrap;
-        .cardListItem{
-            width: 50%;
-            margin-bottom: 1rem;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 0 24px;
+        align-items: center;
+        .lable {
+          font-size: large;
+          margin-left: 10px;
         }
- 
-    }
-    .ant-card-bordered {
-        border-right: none;
-    }
-    .push_trench{
+      }
+      .card_body {
+        margin-top: 10px;
         width: 100%;
-        height: fit-content;
+        padding: 10px;
+        height: 12rem;
         display: flex;
-        flex-direction:row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        .trench_card{
-            margin-top: 1rem;
-            margin-right: 0.5rem;
-            width: 32%;
-            border-width: 1px;
-            border-color: #EEEEEE;
-            border-style: solid;
-            border-radius: 5px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background-color: #ffffff;
-            .card_title{
-                border-bottom-style: solid;
-                border-bottom-width: 1px;
-                border-bottom-color:#F6F7F9;
-                height:50px;
-                width: 100%;
-                display: flex;
-                flex-direction: row;
-                justify-content:space-between;
-                padding: 0 24px;
-                align-items: center;
-                .lable{
-                    font-size: large;
-                    margin-left: 10px;
-                }
-            }
-            .card_body{
-                margin-top: 10px;
-                width: 100%;
-                padding: 10px;
-                height: 12rem;
-                display: flex;
-                flex-direction: column;
-            }
-            .ant-switch{
-                margin-right: 0.5rem;
-            }
-            .ant-form-item{
-                margin-left: 1.3rem;
-            }
-            
-        }
-
+        flex-direction: column;
+      }
+      .ant-switch {
+        margin-right: 0.5rem;
+      }
+      .ant-form-item {
+        margin-left: 1.3rem;
+      }
     }
-}
\ No newline at end of file
+  }
+}