Skip to content

C
CivManage
Commit dcd38827 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

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

parent cf0ce85a
Pipeline #43019 skipped with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 266 additions and 271 deletions
          src/pages/platformCenter/messageManage/projectManage/ProjectManage.jsx
          View file @ dcd38827
          ...@@ -85,9 +85,7 @@ const ProjectManage = props => { ...@@ -85,9 +85,7 @@ const ProjectManage = props => {
          ) : ( ) : (
          <div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
          <Tooltip title={text}> <Tooltip title={text}>
          <AlertTwoTone <AlertTwoTone style={{ fontSize: '16px', marginRight: '0.1rem' }} />
          style={{ fontSize: '16px', marginRight: '0.1rem' }}
          />
          </Tooltip> </Tooltip>
          {searchStyle(text)} {searchStyle(text)}
          </div> </div>
          ...@@ -140,24 +138,20 @@ const ProjectManage = props => { ...@@ -140,24 +138,20 @@ const ProjectManage = props => {
          /> />
          </Tooltip> </Tooltip>
          {record.name != '通用报警' && {record.name != '通用报警' && record.name != '工单提醒' && record.name != '系统通知' && (
          record.name != '工单提醒' && <div onClick={e => e.stopPropagation()}>
          record.name != '系统通知' && ( <Popconfirm
          <div onClick={e => e.stopPropagation()}> title="是否删除方案？"
          <Popconfirm okText="确认"
          title="是否删除方案？" cancelText="取消"
          okText="确认" onConfirm={() => {
          cancelText="取消" DeleteProject(record);
          onConfirm={() => { }}
          DeleteProject(record); >
          }} <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
          > </Popconfirm>
          <DeleteOutlined </div>
          style={{ fontSize: '16px', color: '#e86060' }} )}
          />
          </Popconfirm>
          </div>
          )}
          </Space> </Space>
          ), ),
          }, },
          ...@@ -167,10 +161,7 @@ const ProjectManage = props => { ...@@ -167,10 +161,7 @@ const ProjectManage = props => {
          const searchStyle = val => { const searchStyle = val => {
          let n; let n;
          if (showSearchStyle) { if (showSearchStyle) {
          n = val.replace( n = val.replace(new RegExp(value, 'g'), `<span style='color:red'>${value}</span>`);
          new RegExp(value, 'g'),
          `<span style='color:red'>${value}</span>`,
          );
          } else { } else {
          n = val; n = val;
          } }
          ......
          src/pages/platformCenter/messageManage/schemeDetail/schemeDetail.jsx
          View file @ dcd38827
          ...@@ -11,6 +11,8 @@ import { ...@@ -11,6 +11,8 @@ import {
          message, message,
          Button, Button,
          Card, Card,
          Row,
          Col,
          Switch as Switchs, Switch as Switchs,
          } from 'antd'; } from 'antd';
          import BaseForm from '@/components/BaseForm/index'; import BaseForm from '@/components/BaseForm/index';
          ...@@ -384,12 +386,13 @@ const EditModal = props => { ...@@ -384,12 +386,13 @@ const EditModal = props => {
          return ( return (
          <div className={styles.editModal_container}> <div className={styles.editModal_container}>
          <Form form={form} {...layout} onFinish={onSubmit}> <Form form={form} onFinish={onSubmit}>
          <div className={styles.content}> <div className={styles.content}>
          <Card title="方案" style={{ width: '100%' }}> <Card title="方案" style={{ width: '100%' }}>
          <Item <Item
          label="方案名称" label="方案名称"
          name="name" name="name"
          labelAlign="right"
          rules={[ rules={[
          { {
          required: true, required: true,
          ...@@ -404,7 +407,7 @@ const EditModal = props => { ...@@ -404,7 +407,7 @@ const EditModal = props => {
          onChange={onNameChange} onChange={onNameChange}
          /> />
          </Item> </Item>
          <Item label="方案类型"> <Item label="方案类型" labelAlign="right" style={{ marginLeft: '12px' }}>
          <div className={styles.cardList}> <div className={styles.cardList}>
          {listType.map(item => ( {listType.map(item => (
          <div key={item.title} className={styles.cardListItem}> <div key={item.title} className={styles.cardListItem}>
          ...@@ -425,7 +428,11 @@ const EditModal = props => { ...@@ -425,7 +428,11 @@ const EditModal = props => {
          <div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
          <Item labelCol={{ span: 6 }}> <Item labelCol={{ span: 6 }}>
          <div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
          <Item label="推送组" name="to_person" style={{ marginTop: '50px' }}> <Item
          label="推送组"
          name="to_person"
          style={{ marginTop: '50px', marginLeft: '32px' }}
          >
          <Input disabled /> <Input disabled />
          </Item> </Item>
          <IdcardOutlined <IdcardOutlined
          ...@@ -480,173 +487,175 @@ const EditModal = props => { ...@@ -480,173 +487,175 @@ const EditModal = props => {
          </Card> </Card>
          )} )}
          <div className={styles.push_trench}> <div className={styles.push_trench}>
          { <Row>
          <div className={styles.trench_card}> <Col xxl={8} xl={12} sm={24} xs={24}>
          <div className={styles.card_title}> {
          <div className={styles.lable}>APP</div> <div className={styles.trench_card}>
          <Switchs <div className={styles.card_title}>
          onChange={e => onTypeChange(e, 'isAPPShow')} <div className={styles.lable}>APP</div>
          checked={currentTrench.isAPPShow} <Switchs
          /> onChange={e => onTypeChange(e, 'isAPPShow')}
          </div> checked={currentTrench.isAPPShow}
          <div className={styles.card_body}> />
          <Item label="模板" labelAlign="left" name="app_template" labelCol={{ span: 3 }}> </div>
          <Select style={{ width: '97%' }} disabled={!currentTrench.isAPPShow}> <div className={styles.card_body}>
          {APP_ITEMS.map((item, idx) => ( <Item label="模板" name="app_template" labelCol={{ span: 6 }}>
          <Select.Option value={item.Id} key={idx}> <Select style={{ width: '97%' }} disabled={!currentTrench.isAPPShow}>
          {item.LikeName} {APP_ITEMS.map((item, idx) => (
          </Select.Option> <Select.Option value={item.Id} key={idx}>
          ))} {item.LikeName}
          </Select> </Select.Option>
          </Item> ))}
          <Item label="功能路径" name="app_path" labelAlign="left" labelCol={{ span: 3 }}> </Select>
          <TextArea </Item>
          rows={4} <Item label="功能路径" name="app_path" labelCol={{ span: 6 }}>
          style={{ width: '97%' }} <TextArea
          disabled={!currentTrench.isAPPShow} rows={1}
          placeholder="请输入功能路径" style={{ width: '97%' }}
          /> disabled={!currentTrench.isAPPShow}
          </Item> placeholder="请输入功能路径"
          </div> />
          </div> </Item>
          } </div>
          { </div>
          <div className={styles.trench_card}> }
          <div className={styles.card_title}> </Col>
          <div className={styles.lable}>公众号</div> <Col xxl={8} xl={12} sm={24} xs={24}>
          <Switchs {
          onChange={e => onTypeChange(e, 'isWXShow')} <div className={styles.trench_card}>
          checked={currentTrench.isWXShow} <div className={styles.card_title}>
          /> <div className={styles.lable}>公众号</div>
          </div> <Switchs
          <div className={styles.card_body}> onChange={e => onTypeChange(e, 'isWXShow')}
          <Item label="模板" name="wx_template" labelAlign="left" labelCol={{ span: 4 }}> checked={currentTrench.isWXShow}
          <Select style={{ width: '97%' }} disabled={!currentTrench.isWXShow}> />
          {WX_ITEMS.map((item, idx) => ( </div>
          <Select.Option value={item.Id} key={idx}> <div className={styles.card_body}>
          {item.LikeName} <Item label="模板" name="wx_template" labelCol={{ span: 6 }}>
          </Select.Option> <Select style={{ width: '97%' }} disabled={!currentTrench.isWXShow}>
          ))} {WX_ITEMS.map((item, idx) => (
          </Select> <Select.Option value={item.Id} key={idx}>
          </Item> {item.LikeName}
          <Item label="H5路由" name="h5_path" labelAlign="left" labelCol={{ span: 4 }}> </Select.Option>
          <Input ))}
          style={{ width: '97%' }} </Select>
          disabled={!currentTrench.isWXShow} </Item>
          placeholder="请输入功能路径" <Item label="H5路由" name="h5_path" labelCol={{ span: 6 }}>
          /> <Input
          </Item> style={{ width: '97%' }}
          <Item disabled={!currentTrench.isWXShow}
          label="小程序路由" placeholder="请输入功能路径"
          name="miniprogram_path" />
          labelAlign="left" </Item>
          labelCol={{ span: 4 }} <Item label="小程序路由" name="miniprogram_path" labelCol={{ span: 6 }}>
          > <Input
          <Input style={{ width: '97%' }}
          style={{ width: '97%' }} disabled={!currentTrench.isWXShow}
          disabled={!currentTrench.isWXShow} placeholder="请输入功能路径"
          placeholder="请输入功能路径" />
          /> </Item>
          </Item> </div>
          </div> </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.trench_card}>
          <div className={styles.lable}>WEB</div> <div className={styles.card_title}>
          <Switchs <div className={styles.lable}>WEB</div>
          onChange={e => onTypeChange(e, 'isWEBShow')} <Switchs
          checked={currentTrench.isWEBShow} onChange={e => onTypeChange(e, 'isWEBShow')}
          /> checked={currentTrench.isWEBShow}
          </div> />
          <div className={styles.card_body}> </div>
          <Item label="模板" name="web_template" labelCol={{ span: 3 }} labelAlign="left"> <div className={styles.card_body}>
          <Select style={{ width: '97%' }} disabled={!currentTrench.isWEBShow}> <Item label="模板" name="web_template" labelCol={{ span: 6 }}>
          {WEB_ITEMS.map((item, idx) => ( <Select style={{ width: '97%' }} disabled={!currentTrench.isWEBShow}>
          <Select.Option value={item.Id} key={idx}> {WEB_ITEMS.map((item, idx) => (
          {item.LikeName} <Select.Option value={item.Id} key={idx}>
          </Select.Option> {item.LikeName}
          ))} </Select.Option>
          </Select> ))}
          </Item> </Select>
          <Item label="功能路径" name="web_path" labelAlign="left" labelCol={{ span: 3 }}> </Item>
          <TextArea <Item label="功能路径" name="web_path" labelCol={{ span: 6 }}>
          rows={4} <TextArea
          style={{ width: '97%' }} rows={1}
          disabled={!currentTrench.isWEBShow} style={{ width: '97%' }}
          placeholder="请输入功能路径" disabled={!currentTrench.isWEBShow}
          /> placeholder="请输入功能路径"
          </Item> />
          </div> </Item>
          </div> </div>
          } </div>
          }
          { </Col>
          <div className={styles.trench_card}> <Col xxl={8} xl={12} sm={24} xs={24}>
          <div className={styles.card_title}> {
          <div className={styles.lable}>短信推送</div> <div className={styles.trench_card}>
          <Switchs <div className={styles.card_title}>
          onChange={e => onTypeChange(e, 'isMessageShow')} <div className={styles.lable}>短信推送</div>
          checked={currentTrench.isMessageShow} <Switchs
          /> onChange={e => onTypeChange(e, 'isMessageShow')}
          </div> checked={currentTrench.isMessageShow}
          <div className={styles.card_body}> />
          <Item </div>
          label="模板" <div className={styles.card_body}>
          labelAlign="left" <Item label="模板" name="message_template" labelCol={{ span: 6 }}>
          name="message_template" <Select style={{ width: '97%' }} disabled={!currentTrench.isMessageShow}>
          labelCol={{ span: 2 }} {MES_ITEMS.map((item, idx) => (
          > <Select.Option value={item.Id} key={idx}>
          <Select style={{ width: '97%' }} disabled={!currentTrench.isMessageShow}> {item.LikeName}
          {MES_ITEMS.map((item, idx) => ( </Select.Option>
          <Select.Option value={item.Id} key={idx}> ))}
          {item.LikeName} </Select>
          </Select.Option> </Item>
          ))} </div>
          </Select> </div>
          </Item> }
          </div> </Col>
          </div> <Col xxl={8} xl={12} sm={24} xs={24}>
          } {
          <div className={styles.trench_card}>
          { <div className={styles.card_title}>
          <div className={styles.trench_card}> <div className={styles.lable}>企业微信</div>
          <div className={styles.card_title}> <Switchs
          <div className={styles.lable}>企业微信</div> onChange={e => onTypeChange(e, 'isEnterpriseWXShow')}
          <Switchs checked={currentTrench.isEnterpriseWXShow}
          onChange={e => onTypeChange(e, 'isEnterpriseWXShow')} />
          checked={currentTrench.isEnterpriseWXShow} </div>
          /> <div className={styles.card_body}>
          </div> <Item label="模板" name="enterprise_template" labelCol={{ span: 6 }}>
          <div className={styles.card_body}> <Select
          <Item style={{ width: '97%' }}
          label="模板" disabled={!currentTrench.isEnterpriseWXShow}
          labelAlign="left" >
          name="enterprise_template" {EN_ITEMS.map((item, idx) => (
          labelCol={{ span: 2 }} <Select.Option value={item.Id} key={idx}>
          > {item.LikeName}
          <Select style={{ width: '97%' }} disabled={!currentTrench.isEnterpriseWXShow}> </Select.Option>
          {EN_ITEMS.map((item, idx) => ( ))}
          <Select.Option value={item.Id} key={idx}> </Select>
          {item.LikeName} </Item>
          </Select.Option> </div>
          ))} </div>
          </Select> }
          </Item> </Col>
          </div> </Row>
          </div>
          }
          </div> </div>
          </div> </div>
          <Item {...tailLayout} style={{ marginTop: '1rem' }}> <Row>
          <Button htmlType="button" onClick={back} style={{ marginRight: '2rem' }}> <Col span={24}>
          返回 <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
          </Button> <Button htmlType="button" onClick={back} style={{ marginRight: '2rem' }}>
          <Button type="primary" htmlType="submit"> 返回
          确定 </Button>
          </Button> <Button type="primary" htmlType="submit">
          </Item> 确定
          </Button>
          </div>
          </Col>
          </Row>
          </Form> </Form>
          <div /> <div />
          <RoleModal <RoleModal
          ......
          src/pages/platformCenter/messageManage/schemeDetail/schemeDetail.less
          View file @ dcd38827
          .editModal_container{ .editModal_container {
          width: 100%; width: 100%;
          overflow-y: hidden; overflow-y: hidden;
          height: calc(100% - 20px); 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; display: flex;
          flex-direction: column; flex-wrap: wrap;
          button[ant-click-animating-without-extra-node]:after { .cardListItem {
          border: 0 none; width: 50%;
          margin-bottom: 1rem;
          opacity: 0;
          animation:none 0 ease 0 1 normal;
          }
          .content{
          height: calc(100vh - 140px);
          overflow-y: scroll;
          } }
          .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; display: flex;
          flex-wrap: wrap; flex-direction: row;
          .cardListItem{ justify-content: space-between;
          width: 50%; padding: 0 24px;
          margin-bottom: 1rem; align-items: center;
          .lable {
          font-size: large;
          margin-left: 10px;
          } }
          }
          } .card_body {
          .ant-card-bordered { margin-top: 10px;
          border-right: none;
          }
          .push_trench{
          width: 100%; width: 100%;
          height: fit-content; padding: 10px;
          height: 12rem;
          display: flex; display: flex;
          flex-direction:row; flex-direction: column;
          flex-wrap: wrap; }
          justify-content: flex-start; .ant-switch {
          .trench_card{ margin-right: 0.5rem;
          margin-top: 1rem; }
          margin-right: 0.5rem; .ant-form-item {
          width: 32%; margin-left: 1.3rem;
          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;
          }
          }
          } }
          } }
          \ No newline at end of file }
          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