From 5c68383abbfa25292f3932e831339485fb30cd3e Mon Sep 17 00:00:00 2001 From: "sin-ning@aliyun.com" Date: Mon, 27 May 2019 00:23:52 +0800 Subject: [PATCH] =?UTF-8?q?-=20=E6=B7=BB=E5=8A=A0=20=E7=AD=BE=E5=90=8D?= =?UTF-8?q?=E3=80=81=E7=9F=AD=E4=BF=A1=E6=A8=A1=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/src/models/sms/smsTemplateList.js | 56 ++++ admin-web/src/pages/Sms/SignList.js | 7 +- admin-web/src/pages/Sms/SignList.less | 311 ------------------ .../{SignListUpdate.js => SignListModal.js} | 6 +- admin-web/src/pages/Sms/TemplateList.js | 264 ++++++++++++++- admin-web/src/pages/Sms/TemplateList.less | 311 ------------------ admin-web/src/pages/Sms/TemplateListModal.js | 101 ++++++ admin-web/src/pages/Sms/TemplateListSearch.js | 61 ++++ admin-web/src/services/sms.js | 26 ++ admin-web/src/utils/dictionary.js | 1 + 10 files changed, 514 insertions(+), 630 deletions(-) create mode 100644 admin-web/src/models/sms/smsTemplateList.js rename admin-web/src/pages/Sms/{SignListUpdate.js => SignListModal.js} (92%) create mode 100644 admin-web/src/pages/Sms/TemplateListModal.js create mode 100644 admin-web/src/pages/Sms/TemplateListSearch.js diff --git a/admin-web/src/models/sms/smsTemplateList.js b/admin-web/src/models/sms/smsTemplateList.js new file mode 100644 index 000000000..748fad7f4 --- /dev/null +++ b/admin-web/src/models/sms/smsTemplateList.js @@ -0,0 +1,56 @@ +import { pageTemplate, addTemplate, updateTemplate, deletedTemplate } from '../../services/sms'; + +export default { + namespace: 'smsTemplateList', + + state: { + list: [], + }, + + effects: { + *page({ payload }, { call, put }) { + const response = yield call(pageTemplate, payload); + if (response.code === 0) { + yield put({ + type: 'pageSuccess', + payload: response.data, + }); + } + }, + *add({ payload }, { call }) { + const { params, callback } = payload; + const response = yield call(addTemplate, params); + if (response.code === 0) { + if (callback) { + callback(response); + } + } + }, + *update({ payload }, { call }) { + const { params, callback } = payload; + const response = yield call(updateTemplate, params); + if (response.code === 0) { + if (callback) { + callback(response); + } + } + }, + *deleted({ payload }, { call }) { + const { params, callback } = payload; + const response = yield call(deletedTemplate, params); + if (callback) { + callback(response); + } + }, + }, + + reducers: { + pageSuccess(state, { payload }) { + const { data } = payload; + return { + ...state, + list: data, + }; + }, + }, +}; diff --git a/admin-web/src/pages/Sms/SignList.js b/admin-web/src/pages/Sms/SignList.js index cc14c9ea3..d10bc6625 100644 --- a/admin-web/src/pages/Sms/SignList.js +++ b/admin-web/src/pages/Sms/SignList.js @@ -7,7 +7,7 @@ import DictionaryText from '../../components/Dictionary/DictionaryText'; import dictionary from '../../utils/dictionary'; import styles from '../List/TableList.less'; import SignListSearch from './SignListSearch'; -import SignListUpdate from './SignListUpdate'; +import SignListModal from './SignListModal'; @connect(({ smsSignList, loading }) => ({ smsSignList, @@ -26,7 +26,7 @@ class SignList extends PureComponent { // init page 参数 this.current = 1; this.total = 0; - this.size = 20; + this.size = 10; this.searchParams = {}; // 查询 page @@ -80,7 +80,6 @@ class SignList extends PureComponent { okText: '确认', cancelText: '取消', onOk: () => { - console.log('OK'); dispatch({ type: 'smsSignList/deleted', payload: { @@ -249,7 +248,7 @@ class SignList extends PureComponent { /> - span { - display: inline-block; - margin-bottom: 4px; - color: @text-color-secondary; - font-size: @font-size-base; - line-height: 22px; - } - & > p { - margin: 0; - color: @heading-color; - font-size: 24px; - line-height: 32px; - } - & > em { - position: absolute; - top: 0; - right: 0; - width: 1px; - height: 56px; - background-color: @border-color-split; - } - } - .listContent { - display: flex; - flex: 1; - flex-direction: row; - font-size: 0; - - .listContentItem { - flex: 1; - margin-left: 40px; - color: @text-color-secondary; - font-size: @font-size-base; - vertical-align: middle; - > span { - line-height: 20px; - } - > p { - margin-top: 4px; - margin-bottom: 0; - line-height: 22px; - } - } - } - .extraContentSearch { - width: 272px; - margin-left: 16px; - } -} - -@media screen and (max-width: @screen-xs) { - .standardList { - :global { - .ant-list-item-content { - display: block; - flex: none; - width: 100%; - } - .ant-list-item-action { - margin-left: 0; - } - } - .listContent { - margin-left: 0; - & > div { - margin-left: 0; - } - } - .listCard { - :global { - .ant-card-head-title { - overflow: visible; - } - } - } - } -} - -@media screen and (max-width: @screen-sm) { - .standardList { - .extraContentSearch { - width: 100%; - margin-left: 0; - } - .headerInfo { - margin-bottom: 16px; - & > em { - display: none; - } - } - } -} - -@media screen and (max-width: @screen-md) { - .standardList { - .listContent { - & > div { - display: block; - } - & > div:last-child { - top: 0; - width: 100%; - } - } - } - .listCard { - :global { - .ant-radio-group { - display: block; - margin-bottom: 8px; - } - } - } -} - -@media screen and (max-width: @screen-lg) and (min-width: @screen-md) { - .standardList { - .listContent { - & > div { - display: block; - } - & > div:last-child { - top: 0; - width: 100%; - } - } - } -} - -@media screen and (max-width: @screen-xl) { - .standardList { - .listContent { - & > div { - margin-left: 24px; - } - & > div:last-child { - top: 0; - } - } - } -} - -@media screen and (max-width: 1400px) { - .standardList { - .listContent { - text-align: right; - & > div:last-child { - top: 0; - } - } - } -} - -.standardListForm { - :global { - .ant-form-item { - margin-bottom: 12px; - &:last-child { - margin-bottom: 32px; - padding-top: 4px; - } - } - } -} - -.formResult { - width: 100%; - [class^='title'] { - margin-bottom: 8px; - } -} - -.tableListForm { - :global { - .ant-form-item { - display: flex; - margin-right: 0; - margin-bottom: 24px; - > .ant-form-item-label { - width: auto; - padding-right: 8px; - line-height: 32px; - } - .ant-form-item-control { - line-height: 32px; - } - } - .ant-form-item-control-wrapper { - flex: 1; - } - } - .submitButtons { - display: block; - margin-bottom: 24px; - white-space: nowrap; - } -} - -@media screen and (max-width: @screen-lg) { - .tableListForm :global(.ant-form-item) { - margin-right: 24px; - } -} - -@media screen and (max-width: @screen-md) { - .tableListForm :global(.ant-form-item) { - margin-right: 8px; - } -} - -// 订单content -.orderGroup { - @padding-slid: 10px; - @solid-color: rgba(167, 157, 160, 0.92); - @header-background: rgba(210, 219, 238, 0.99); - - display: flex; - flex: 1; - flex-direction: column; - justify-content: flex-start; - - .header { - display: flex; - flex: 1; - justify-content: space-between; - padding-right: @padding-slid; - padding-left: @padding-slid; - font-weight: bold; - font-size: 15px; - line-height: 35px; - background-color: @header-background; - } - - .goodsContainer { - :first-child { - border-top: none; - border-bottom: none; - } - - :last-child { - border-bottom: none; - } - } - - .orderGoods { - display: flex; - flex: 2; - flex-direction: row; - width: 500px; - border: 1px solid @solid-color; - } - - .order { - display: flex; - flex: 1; - flex-direction: row; - padding-right: @padding-slid; - padding-left: @padding-slid; - line-height: 100px; - border: 1px solid @solid-color; - - .contentItem { - display: flex; - flex: 1; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - - > div { - line-height: 30px; - } - - .columnName { - font-weight: bold; - font-size: 12px; - } - } - - .image { - width: 80px; - height: 80px; - } - } -} diff --git a/admin-web/src/pages/Sms/SignListUpdate.js b/admin-web/src/pages/Sms/SignListModal.js similarity index 92% rename from admin-web/src/pages/Sms/SignListUpdate.js rename to admin-web/src/pages/Sms/SignListModal.js index 790ba0279..6cbd7bc6b 100644 --- a/admin-web/src/pages/Sms/SignListUpdate.js +++ b/admin-web/src/pages/Sms/SignListModal.js @@ -8,7 +8,7 @@ import dictionary from '../../utils/dictionary'; * * @type {React.ComponentClass>} */ -const SignListUpdate = Form.create()(props => { +const SignListModal = Form.create()(props => { const { onOk, onCancel, visible, title, form, initData = {} } = props; const { getFieldDecorator, validateFields } = props.form; @@ -57,7 +57,7 @@ const SignListUpdate = Form.create()(props => { message: '请选择平台', }, ], - initialValue: `${initData.platform}`, + initialValue: initData.platform, })()} @@ -65,4 +65,4 @@ const SignListUpdate = Form.create()(props => { ); }); -export default SignListUpdate; +export default SignListModal; diff --git a/admin-web/src/pages/Sms/TemplateList.js b/admin-web/src/pages/Sms/TemplateList.js index c5d30633a..ed032d9aa 100644 --- a/admin-web/src/pages/Sms/TemplateList.js +++ b/admin-web/src/pages/Sms/TemplateList.js @@ -1,10 +1,272 @@ import React, { PureComponent } from 'react'; +import { Card, Divider, Table, Modal, Button } from 'antd'; +import { connect } from 'dva'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; +import DictionaryText from '../../components/Dictionary/DictionaryText'; +import dictionary from '../../utils/dictionary'; +import styles from '../List/TableList.less'; +import TemplateListSearch from './TemplateListSearch'; +import TemplateListModal from './TemplateListModal'; +@connect(({ smsTemplateList, loading }) => ({ + smsTemplateList, + loading: loading.models.smsTemplateList, +})) class TemplateList extends PureComponent { + state = { + visible: false, + title: '添加模板', // 添加签名 修改签名 + type: 'add', // add update + id: '', + sign: {}, + }; + + componentDidMount() { + // init page 参数 + this.current = 1; + this.total = 0; + this.size = 10; + this.searchParams = {}; + + // 查询 page + this.queryPage(); + } + + queryPage = () => { + const { dispatch } = this.props; + const { current, total, size, searchParams } = this; + + dispatch({ + type: 'smsTemplateList/page', + payload: { + current, + total, + size, + ...searchParams, + }, + }); + }; + + handleSearch = searchParams => { + this.searchParams = searchParams; + this.queryPage(); + }; + + handleAddShow = () => { + this.setState({ + visible: true, + type: 'add', + title: '添加模板', + }); + }; + + handleUpdateShow = sign => { + const { id } = sign; + this.setState({ + visible: true, + type: 'update', + title: '更新模板', + id, + sign, + }); + }; + + handleDeleted = ({ id, sign }) => { + const { dispatch } = this.props; + Modal.confirm({ + title: `提示消息`, + content: `确认删除 ${sign} 签名吗`, + okText: '确认', + cancelText: '取消', + onOk: () => { + dispatch({ + type: 'smsTemplateList/deleted', + payload: { + params: { + id, + }, + callback: () => { + this.queryPage(); + }, + }, + }); + }, + onCancel() { + console.log('Cancel'); + }, + }); + }; + + handleCancel = () => { + this.setState({ + visible: false, + }); + }; + + handleOk = fields => { + const { dispatch } = this.props; + const { type, id } = this.state; + + if (type === 'add') { + dispatch({ + type: 'smsTemplateList/add', + payload: { + params: { + ...fields, + }, + callback: () => { + this.handleCancel(); + this.queryPage(); + }, + }, + }); + } else if (type === 'update') { + dispatch({ + type: 'smsTemplateList/update', + payload: { + params: { + id, + ...fields, + }, + callback: () => { + this.handleCancel(); + this.queryPage(); + }, + }, + }); + } + }; + + handleTableChange = pagination => { + const { pageSize, current } = pagination; + this.size = pageSize; + this.current = current; + this.queryPage(); + }; + render() { - return template-list; + // props + const { loading, smsTemplateList } = this.props; + const { list, total, index, size } = smsTemplateList; + const { visible, title, type, sign } = this.state; + + const columns = [ + { + title: 'ID', + dataIndex: 'id', + key: 'id', + }, + { + title: '签名', + dataIndex: 'sign', + key: 'sign', + // eslint-disable-next-line no-shadow + render({ sign }) { + return
{sign}
; + }, + }, + { + title: '签名', + dataIndex: 'template', + key: 'template', + }, + { + title: '短信平台', + dataIndex: 'platform', + key: 'platform', + render(platform) { + return ( +
+ +
+ ); + }, + }, + { + title: '审核状态', + dataIndex: 'applyStatus', + key: 'applyStatus', + render(applyStatus) { + return ( +
+ +
+ ); + }, + }, + { + title: '更新时间', + dataIndex: 'updateTime', + key: 'updateTime', + width: 200, + render(updateTime) { + return
{updateTime}
; + }, + }, + { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime', + width: 200, + render(createTime) { + return
{createTime}
; + }, + }, + { + title: '操作', + render: row => { + return ( +
+ 修改 + + 删除 +
+ ); + }, + }, + ]; + + const pagination = { + total, + index, + pageSize: size, + }; + + return ( + + +
+ +
+
+
+ +
+
+ + + + + + + ); } } diff --git a/admin-web/src/pages/Sms/TemplateList.less b/admin-web/src/pages/Sms/TemplateList.less index afe16ef56..027d7295e 100644 --- a/admin-web/src/pages/Sms/TemplateList.less +++ b/admin-web/src/pages/Sms/TemplateList.less @@ -1,313 +1,2 @@ @import '~antd/lib/style/themes/default.less'; @import '~@/utils/utils.less'; - -.standardList { - :global { - .ant-card-head { - border-bottom: none; - } - .ant-card-head-title { - padding: 24px 0; - line-height: 32px; - } - .ant-card-extra { - padding: 24px 0; - } - .ant-list-pagination { - margin-top: 24px; - text-align: right; - } - .ant-avatar-lg { - width: 48px; - height: 48px; - line-height: 48px; - } - } - .headerInfo { - position: relative; - text-align: center; - & > span { - display: inline-block; - margin-bottom: 4px; - color: @text-color-secondary; - font-size: @font-size-base; - line-height: 22px; - } - & > p { - margin: 0; - color: @heading-color; - font-size: 24px; - line-height: 32px; - } - & > em { - position: absolute; - top: 0; - right: 0; - width: 1px; - height: 56px; - background-color: @border-color-split; - } - } - .listContent { - display: flex; - flex: 1; - flex-direction: row; - font-size: 0; - - .listContentItem { - flex: 1; - margin-left: 40px; - color: @text-color-secondary; - font-size: @font-size-base; - vertical-align: middle; - > span { - line-height: 20px; - } - > p { - margin-top: 4px; - margin-bottom: 0; - line-height: 22px; - } - } - } - .extraContentSearch { - width: 272px; - margin-left: 16px; - } -} - -@media screen and (max-width: @screen-xs) { - .standardList { - :global { - .ant-list-item-content { - display: block; - flex: none; - width: 100%; - } - .ant-list-item-action { - margin-left: 0; - } - } - .listContent { - margin-left: 0; - & > div { - margin-left: 0; - } - } - .listCard { - :global { - .ant-card-head-title { - overflow: visible; - } - } - } - } -} - -@media screen and (max-width: @screen-sm) { - .standardList { - .extraContentSearch { - width: 100%; - margin-left: 0; - } - .headerInfo { - margin-bottom: 16px; - & > em { - display: none; - } - } - } -} - -@media screen and (max-width: @screen-md) { - .standardList { - .listContent { - & > div { - display: block; - } - & > div:last-child { - top: 0; - width: 100%; - } - } - } - .listCard { - :global { - .ant-radio-group { - display: block; - margin-bottom: 8px; - } - } - } -} - -@media screen and (max-width: @screen-lg) and (min-width: @screen-md) { - .standardList { - .listContent { - & > div { - display: block; - } - & > div:last-child { - top: 0; - width: 100%; - } - } - } -} - -@media screen and (max-width: @screen-xl) { - .standardList { - .listContent { - & > div { - margin-left: 24px; - } - & > div:last-child { - top: 0; - } - } - } -} - -@media screen and (max-width: 1400px) { - .standardList { - .listContent { - text-align: right; - & > div:last-child { - top: 0; - } - } - } -} - -.standardListForm { - :global { - .ant-form-item { - margin-bottom: 12px; - &:last-child { - margin-bottom: 32px; - padding-top: 4px; - } - } - } -} - -.formResult { - width: 100%; - [class^='title'] { - margin-bottom: 8px; - } -} - -.tableListForm { - :global { - .ant-form-item { - display: flex; - margin-right: 0; - margin-bottom: 24px; - > .ant-form-item-label { - width: auto; - padding-right: 8px; - line-height: 32px; - } - .ant-form-item-control { - line-height: 32px; - } - } - .ant-form-item-control-wrapper { - flex: 1; - } - } - .submitButtons { - display: block; - margin-bottom: 24px; - white-space: nowrap; - } -} - -@media screen and (max-width: @screen-lg) { - .tableListForm :global(.ant-form-item) { - margin-right: 24px; - } -} - -@media screen and (max-width: @screen-md) { - .tableListForm :global(.ant-form-item) { - margin-right: 8px; - } -} - -// 订单content -.orderGroup { - @padding-slid: 10px; - @solid-color: rgba(167, 157, 160, 0.92); - @header-background: rgba(210, 219, 238, 0.99); - - display: flex; - flex: 1; - flex-direction: column; - justify-content: flex-start; - - .header { - display: flex; - flex: 1; - justify-content: space-between; - padding-right: @padding-slid; - padding-left: @padding-slid; - font-weight: bold; - font-size: 15px; - line-height: 35px; - background-color: @header-background; - } - - .goodsContainer { - :first-child { - border-top: none; - border-bottom: none; - } - - :last-child { - border-bottom: none; - } - } - - .orderGoods { - display: flex; - flex: 2; - flex-direction: row; - width: 500px; - border: 1px solid @solid-color; - } - - .order { - display: flex; - flex: 1; - flex-direction: row; - padding-right: @padding-slid; - padding-left: @padding-slid; - line-height: 100px; - border: 1px solid @solid-color; - - .contentItem { - display: flex; - flex: 1; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - - > div { - line-height: 30px; - } - - .columnName { - font-weight: bold; - font-size: 12px; - } - } - - .image { - width: 80px; - height: 80px; - } - } -} diff --git a/admin-web/src/pages/Sms/TemplateListModal.js b/admin-web/src/pages/Sms/TemplateListModal.js new file mode 100644 index 000000000..a529d76f0 --- /dev/null +++ b/admin-web/src/pages/Sms/TemplateListModal.js @@ -0,0 +1,101 @@ +import React from 'react'; +import { Form, Input, Modal } from 'antd'; +import DictionarySelect from '../../components/Dictionary/DictionarySelect'; +import dictionary from '../../utils/dictionary'; + +/** + * table 查询 + * + * @type {React.ComponentClass>} + */ +const SignListModal = Form.create()(props => { + const { onOk, onCancel, visible, title, form, initData = {} } = props; + const { getFieldDecorator, validateFields } = props.form; + + function handleOk(e) { + e.preventDefault(); + + validateFields((err, fields) => { + const searchParams = fields; + if (onOk) { + onOk(searchParams); + form.resetFields(); + } + }); + } + + function handleCancel() { + if (onCancel) { + onCancel(); + } + } + + const formItemLayout = { + labelCol: { span: 4 }, + wrapperCol: { span: 18 }, + }; + + return ( + +
+ + {getFieldDecorator('smsSignId', { + rules: [ + { + required: true, + message: '请输入签名', + }, + ], + initialValue: initData.sign ? initData.sign.id : null, + })()} + + + {getFieldDecorator('smsType', { + rules: [ + { + required: true, + message: '请选择短信类型', + }, + ], + initialValue: initData.smsType, + })()} + + + {getFieldDecorator('platform', { + rules: [ + { + required: true, + message: '请选择平台', + }, + ], + initialValue: initData.platform, + })()} + + + {getFieldDecorator('templateCode', { + rules: [ + { + required: true, + message: '短信平台的Code', + }, + ], + initialValue: initData.templateCode, + })()} + + + {getFieldDecorator('template', { + rules: [ + { + required: true, + message: '请输入短信模板', + }, + ], + initialValue: initData.template, + })()} + + + + ); +}); + +export default SignListModal; diff --git a/admin-web/src/pages/Sms/TemplateListSearch.js b/admin-web/src/pages/Sms/TemplateListSearch.js new file mode 100644 index 000000000..3a65b18fb --- /dev/null +++ b/admin-web/src/pages/Sms/TemplateListSearch.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { Button, Col, Form, Input, Row } from 'antd'; + +const FormItem = Form.Item; + +/** + * table 查询 + * + * @type {React.ComponentClass>} + */ +const SignListSearch = Form.create()(props => { + const { handleSearch } = props; + const { getFieldDecorator, validateFields, form } = props.form; + + function onSubmit(e) { + e.preventDefault(); + + validateFields((err, fields) => { + const searchParams = fields; + if (handleSearch) { + handleSearch(searchParams); + } + }); + } + + function handleFormReset() { + form.resetFields(); + } + + return ( +
+ + + + {getFieldDecorator('id')()} + + + + + {getFieldDecorator('smsSignId')()} + + + + + + + + + + + + + + ); +}); + +export default SignListSearch; diff --git a/admin-web/src/services/sms.js b/admin-web/src/services/sms.js index 2d71721ef..67d65717c 100644 --- a/admin-web/src/services/sms.js +++ b/admin-web/src/services/sms.js @@ -26,3 +26,29 @@ export async function deletedSign(params) { method: 'DELETE', }); } + +// template + +export async function pageTemplate(params) { + return request(`/admin-api/admins/sms/template/page?${stringify(params)}`, { + method: 'GET', + }); +} + +export async function addTemplate(params) { + return request(`/admin-api/admins/sms/template/add?${stringify(params)}`, { + method: 'POST', + }); +} + +export async function updateTemplate(params) { + return request(`/admin-api/admins/sms/template/update?${stringify(params)}`, { + method: 'PUT', + }); +} + +export async function deletedTemplate(params) { + return request(`/admin-api/admins/sms/template/deleted?${stringify(params)}`, { + method: 'DELETE', + }); +} diff --git a/admin-web/src/utils/dictionary.js b/admin-web/src/utils/dictionary.js index e642abe75..f4460d880 100644 --- a/admin-web/src/utils/dictionary.js +++ b/admin-web/src/utils/dictionary.js @@ -12,6 +12,7 @@ const DictionaryConstants = { ORDER_RETURN_SERVICE_TYPE: 'order_return_service_type', // sms + SMS_TYPE: 'sms_type', SMS_PLATFORM: 'sms_platform', SMS_APPLY_STATUS: 'sms_apply_status', };