Skip to content

J
jinfa-platform
Commit d923106a authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

fix: 修复 Select label内容过长导致变形的问题

parent fa5f2b97
Hide whitespace changes
Inline Side-by-side
Showing with 988 additions and 978 deletions
src/global/styles/global.less
View file @ d923106a
/********************************** 布局 ******************************************/
@import './mixins/layout.less';
@import './index.less';
@import '../../theme/style/colors.less';
@makeCenters : text,
block,
flex,
flexAlign,
flexJustify,
absolute,
fixed,
margin;
@makeCentersLen: length(@makeCenters);
.loopCenter(@list, @i: 1, @val: extract(@list, @i)) when (@i < @makeCentersLen + 1) {
.center-@{val} {
.make-center(@val);
}
.loopCenter(@list, @i + 1)
}
;
.loopCenter(@makeCenters);
.hide {
display: none;
}
// antd default
h1,
h2,
h3,
h4,
h5,
h6 {
color: #909399;
}
a {
&:hover {
color: var(--mall_main_color);
}
}
::-webkit-scrollbar {
height: 8px;
width: 6px;
background: #f0f2f5;
border-radius: 5px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb {
width: 8px;
min-height: 15px;
background: rgba(0,0,0,.2);
border-radius: 5px;
}
.tb_bg {
background-color: #FAFBFC;
}
.noMarginBottom {
margin-bottom: 0;
}
.common_tb {
.ant-table-thead>tr>th {
background-color: #FFF;
color: #303133;
}
tr.ant-table-expanded-row>td,
tr.ant-table-expanded-row:hover>td {
background: #FFF;
}
.ant-table-tbody>tr.ant-table-row-selected>td {
background-color: #fff;
}
.ant-table-tbody>tr.ant-table-row-selected.tb_bg>td {
background-color: #FAFBFC;
}
}
.@{prefix}-margin_content {
.center-margin;
width: 1190px;
}
.@{prefix}-content1024 {
.center-margin;
width: 1024px;
}
// 公共的title伪类竖线
.commonPanelTitle {
padding-left: 8px;
position: relative;
&::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
margin-top: -.42667rem;
width: 2px;
height: .85333rem;
background-color: @primary-color;
box-shadow: 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
border-radius: 1px;
}
}
// 公共显示隐藏处理
.commonShowBlock {
display: block;
}
.commonShow {
display: inline-block;
}
.commonHide {
display: none;
}
// 公共着色 主体颜色
.commonPickColor {
color: @main-color;
cursor: pointer;
}
.padLeft0 {
padding-left: 0 !important;
}
// 公共状态 圆点
.commonStatus {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
}
.commonStatusStop {
.commonStatus();
background-color: @status-stop; // 停用
}
.mall_container {
width: 1200px;
position: relative;
margin: 0 auto;
}
.commonStatusModify {
.commonStatus();
background-color: @status-modify; // 已修改
}
.commonStatusValid {
.commonStatus();
background-color: @status-valid; // 已生成，有效、审核通过
}
.commonStatusInvalid {
.commonStatus();
background-color: @status-invalid; // 未生成，无效、待审核
}
.commonStatusNoPass {
.commonStatus();
background-color: @status-nopass; // 审核不通过
}
.mb-30 {
margin-bottom: 30px;
}
.sc-fzpans {
display: block;
width: 100%;
}
.mr_t-40 {
margin-top: 40px;
}
#registerForm {
.ant-input-group-addon {
padding: 0;
border: none;
background: none;
}
}
.white-wrapper {
background-color: #fff;
}
//addonAfter 有选择弹窗时
.input_addonAfter {
.ant-input-group-addon {
padding: 0 !important;
}
}
/* 有关联或选择按钮的input输入框 */
// 此样式用于input的父级以上元素
.useConnectBtnWrapper {
.ant-input-group-addon {
padding: 0;
border: none;
}
.connectBtn {
width: 80px;
height: 32px;
line-height: 32px;
background: #909399;
color: #fff;
text-align: center;
cursor: pointer;
}
}
/* 带树的模态框 */
// 此样式用于模态框上面
.useTreeModalWrapper {
.ant-tree .ant-tree-treenode {
padding-bottom: 0;
padding-right: 16px;
background: @tree-node;
border: 1px solid @tree-node-border;
margin-bottom: 4px;
align-items: center;
height: 32px;
&.ant-tree-treenode-selected {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode:hover {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode-selected {
.tree-node-circle {
background: @main-color;
}
}
}
.tree-node-circle {
width: 4px;
height: 4px;
border-radius: 50%;
margin-right: 12px;
background: @status-stop;
}
.ant-tree .ant-tree-checkbox {
margin: 0;
}
.ant-tree .ant-tree-node-content-wrapper:hover {
background: none;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
background: none;
}
.ant-tree .ant-tree-switcher {
width: 28px;
height: 28px;
line-height: 32px;
}
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon {
font-size: 12px;
}
.black-tabs {
&.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
margin-right: 0;
}
}
}
// 可编辑表格项公用样式
.editable-cell {
position: relative;
}
.editable-cell-value-wrap {
padding: 5px 12px;
min-height: 32px;
cursor: pointer;
}
.editable-row:hover .editable-cell-value-wrap {
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 4px 11px;
}
.editable-row .ant-form-item-explain {
position: absolute;
top: 100%;
font-size: 12px;
}
// 强制覆盖下拉框固定位置
.fixed-ant-selected-down {
.ant-select-dropdown {
top: 36px !important;
}
}
// 强制块级标签居中
.global-block-center {
margin-left: auto !important;
margin-right: auto !important;
}
// 重置Card样式
.ant-card {
border-radius: 8px !important;
.ant-card-head {
border-bottom: none;
.ant-card-head-title {
// line-height: 24px;
// padding-bottom: 0;
font-size: 16px;
font-weight: 500;
color: #343031;
}
}
/********************************** 布局 ******************************************/
@import './mixins/layout.less';
@import './index.less';
@import '../../theme/style/colors.less';
@makeCenters : text,
block,
flex,
flexAlign,
flexJustify,
absolute,
fixed,
margin;
@makeCentersLen: length(@makeCenters);
.loopCenter(@list, @i: 1, @val: extract(@list, @i)) when (@i < @makeCentersLen + 1) {
.center-@{val} {
.make-center(@val);
}
.loopCenter(@list, @i + 1)
}
;
.loopCenter(@makeCenters);
.hide {
display: none;
}
// antd default
h1,
h2,
h3,
h4,
h5,
h6 {
color: #909399;
}
a {
&:hover {
color: var(--mall_main_color);
}
}
::-webkit-scrollbar {
height: 8px;
width: 6px;
background: #f0f2f5;
border-radius: 5px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb {
width: 8px;
min-height: 15px;
background: rgba(0,0,0,.2);
border-radius: 5px;
}
.tb_bg {
background-color: #FAFBFC;
}
.noMarginBottom {
margin-bottom: 0;
}
.common_tb {
.ant-table-thead>tr>th {
background-color: #FFF;
color: #303133;
}
tr.ant-table-expanded-row>td,
tr.ant-table-expanded-row:hover>td {
background: #FFF;
}
.ant-table-tbody>tr.ant-table-row-selected>td {
background-color: #fff;
}
.ant-table-tbody>tr.ant-table-row-selected.tb_bg>td {
background-color: #FAFBFC;
}
}
.@{prefix}-margin_content {
.center-margin;
width: 1190px;
}
.@{prefix}-content1024 {
.center-margin;
width: 1024px;
}
// 公共的title伪类竖线
.commonPanelTitle {
padding-left: 8px;
position: relative;
&::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
margin-top: -.42667rem;
width: 2px;
height: .85333rem;
background-color: @primary-color;
box-shadow: 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
border-radius: 1px;
}
}
// 公共显示隐藏处理
.commonShowBlock {
display: block;
}
.commonShow {
display: inline-block;
}
.commonHide {
display: none;
}
// 公共着色 主体颜色
.commonPickColor {
color: @main-color;
cursor: pointer;
}
.padLeft0 {
padding-left: 0 !important;
}
// 公共状态 圆点
.commonStatus {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
}
.commonStatusStop {
.commonStatus();
background-color: @status-stop; // 停用
}
.mall_container {
width: 1200px;
position: relative;
margin: 0 auto;
}
.commonStatusModify {
.commonStatus();
background-color: @status-modify; // 已修改
}
.commonStatusValid {
.commonStatus();
background-color: @status-valid; // 已生成，有效、审核通过
}
.commonStatusInvalid {
.commonStatus();
background-color: @status-invalid; // 未生成，无效、待审核
}
.commonStatusNoPass {
.commonStatus();
background-color: @status-nopass; // 审核不通过
}
.mb-30 {
margin-bottom: 30px;
}
.sc-fzpans {
display: block;
width: 100%;
}
.mr_t-40 {
margin-top: 40px;
}
#registerForm {
.ant-input-group-addon {
padding: 0;
border: none;
background: none;
}
}
.white-wrapper {
background-color: #fff;
}
//addonAfter 有选择弹窗时
.input_addonAfter {
.ant-input-group-addon {
padding: 0 !important;
}
}
/* 有关联或选择按钮的input输入框 */
// 此样式用于input的父级以上元素
.useConnectBtnWrapper {
.ant-input-group-addon {
padding: 0;
border: none;
}
.connectBtn {
width: 80px;
height: 32px;
line-height: 32px;
background: #909399;
color: #fff;
text-align: center;
cursor: pointer;
}
}
/* 带树的模态框 */
// 此样式用于模态框上面
.useTreeModalWrapper {
.ant-tree .ant-tree-treenode {
padding-bottom: 0;
padding-right: 16px;
background: @tree-node;
border: 1px solid @tree-node-border;
margin-bottom: 4px;
align-items: center;
height: 32px;
&.ant-tree-treenode-selected {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode:hover {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode-selected {
.tree-node-circle {
background: @main-color;
}
}
}
.tree-node-circle {
width: 4px;
height: 4px;
border-radius: 50%;
margin-right: 12px;
background: @status-stop;
}
.ant-tree .ant-tree-checkbox {
margin: 0;
}
.ant-tree .ant-tree-node-content-wrapper:hover {
background: none;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
background: none;
}
.ant-tree .ant-tree-switcher {
width: 28px;
height: 28px;
line-height: 32px;
}
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon {
font-size: 12px;
}
.black-tabs {
&.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
margin-right: 0;
}
}
}
// 可编辑表格项公用样式
.editable-cell {
position: relative;
}
.editable-cell-value-wrap {
padding: 5px 12px;
min-height: 32px;
cursor: pointer;
}
.editable-row:hover .editable-cell-value-wrap {
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 4px 11px;
}
.editable-row .ant-form-item-explain {
position: absolute;
top: 100%;
font-size: 12px;
}
// 强制覆盖下拉框固定位置
.fixed-ant-selected-down {
.ant-select-dropdown {
top: 36px !important;
}
}
// 强制块级标签居中
.global-block-center {
margin-left: auto !important;
margin-right: auto !important;
}
// 重置Card样式
.ant-card {
border-radius: 8px !important;
.ant-card-head {
border-bottom: none;
.ant-card-head-title {
// line-height: 24px;
// padding-bottom: 0;
font-size: 16px;
font-weight: 500;
color: #343031;
}
}
}
.ant-form-horizontal .ant-form-item-control {
overflow: hidden;
}
\ No newline at end of file
src/global/styles/reset.less
View file @ d923106a
@import './mixins/layout.less';
#root {
// 去除input type为number时的箭头
.ant-input-number-handler-wrap {
display: none;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.ant-page-header {
padding: 8px 24px;
}
.common_checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
.ant-checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox .ant-checkbox-indeterminate {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
background-color: transparent;
}
.ant-checkbox-indeterminate .ant-checkbox-inner {
&:hover,
&:active,
&:focus {
border-color: var(--mall_main_color);
}
&::after {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
// 去除数字输入框的箭头
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.identityRadio {
display: flex;
flex-direction: column;
margin: 0 auto;
.make-center(text);
& label {
width: 320px;
height: 48px;
.make-center-space(margin, 12);
vertical-align: middle;
line-height: 48px;
}
}
.businessRadio {
display: flex;
flex-wrap: wrap;
width: 320px;
.make-center(margin);
.make-center(text);
& label {
width: 148px;
height: 32px;
line-height: 32px;
margin: 8px 0;
border-top-width: 1px;
border-left-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& label:nth-child(odd) {
margin-right: 24px;
}
}
// 去除sogou浏览器自动加的密码软盘图标
input::-webkit-input-safebox-button{
display: none;
}
// 设置formitem的*号到字段label前
.ant-form-item-label>label.ant-form-item-required::before {
order: 10;
margin-left: -6px;
}
// 处理ant tree组件
// .ant-tree-checkbox {
// order: 10;
// }
.ant-tree .ant-tree-treenode {
padding-bottom: 0;
padding-right: 16px;
background: @tree-node;
border: 1px solid @tree-node-border;
margin-bottom: 4px;
align-items: center;
height: 32px;
&.ant-tree-treenode-selected {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode:hover {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode-selected {
.tree-node-circle {
background: @main-color;
}
}
}
.tree-node-circle {
width: 4px;
height: 4px;
border-radius: 50%;
margin-right: 12px;
background: @status-stop;
}
.ant-tree .ant-tree-checkbox {
margin: 0;
}
.ant-tree .ant-tree-node-content-wrapper:hover {
background: none;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
background: none;
}
.ant-tree .ant-tree-switcher {
width: 28px;
height: 28px;
line-height: 32px;
}
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon {
font-size: 12px;
}
.black-tabs {
&.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
margin-right: 0;
}
}
.ant-badge-count {
z-index: 1;
}
.ant-input-textarea {
width: 100%;
}
}
@import './mixins/layout.less';
#root {
// 去除input type为number时的箭头
.ant-input-number-handler-wrap {
display: none;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.ant-page-header {
padding: 8px 24px;
}
.common_checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
.ant-checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox .ant-checkbox-indeterminate {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
background-color: transparent;
}
.ant-checkbox-indeterminate .ant-checkbox-inner {
&:hover,
&:active,
&:focus {
border-color: var(--mall_main_color);
}
&::after {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
// 去除数字输入框的箭头
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.identityRadio {
display: flex;
flex-direction: column;
margin: 0 auto;
.make-center(text);
& label {
width: 320px;
height: 48px;
.make-center-space(margin, 12);
vertical-align: middle;
line-height: 48px;
}
}
.businessRadio {
display: flex;
flex-wrap: wrap;
width: 320px;
.make-center(margin);
.make-center(text);
& label {
width: 148px;
height: 32px;
line-height: 32px;
margin: 8px 0;
border-top-width: 1px;
border-left-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& label:nth-child(odd) {
margin-right: 24px;
}
}
// 去除sogou浏览器自动加的密码软盘图标
input::-webkit-input-safebox-button{
display: none;
}
// 设置formitem的*号到字段label前
.ant-form-item-label>label.ant-form-item-required::before {
order: 10;
margin-left: -6px;
}
// 处理ant tree组件
// .ant-tree-checkbox {
// order: 10;
// }
.ant-tree .ant-tree-treenode {
padding-bottom: 0;
padding-right: 16px;
background: @tree-node;
border: 1px solid @tree-node-border;
margin-bottom: 4px;
align-items: center;
height: 32px;
&.ant-tree-treenode-selected {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode:hover {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode-selected {
.tree-node-circle {
background: @main-color;
}
}
}
.tree-node-circle {
width: 4px;
height: 4px;
border-radius: 50%;
margin-right: 12px;
background: @status-stop;
}
.ant-tree .ant-tree-checkbox {
margin: 0;
}
.ant-tree .ant-tree-node-content-wrapper:hover {
background: none;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
background: none;
}
.ant-tree .ant-tree-switcher {
width: 28px;
height: 28px;
line-height: 32px;
}
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon {
font-size: 12px;
}
.black-tabs {
&.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
margin-right: 0;
}
}
.ant-badge-count {
z-index: 1;
}
.ant-input-textarea {
width: 100%;
}
}
src/pages/afterService/components/ManualDeliveryModal/index.tsx
View file @ d923106a
/*
* @Author: XieZhiXiong
* @Date: 2020-11-09 10:48:12
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-14 18:33:19
* @Description: 手动发货弹窗
*/
import React from 'react';
import { Modal } from 'antd';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import { DatePicker } from '@formily/antd-components';
import moment from 'moment';
import NiceForm from '@/components/NiceForm';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import { PublicApi } from '@/services/api';
import { useLinkageUtils } from '@/utils/formEffectUtils';
import { schema } from './schema';
const modalFormActions = createFormActions();
const {
onFieldValueChange$,
onFieldInputChange$,
onFormInit$,
} = FormEffectHooks;
interface VerifyModalProps {
visible: boolean;
confirmLoading: boolean;
onSubmit: (values: {[key: string]: any}) => void;
onVisible: (flag: boolean) => void;
// 是否编辑的
isEdit?: boolean;
title?: string;
value?: {[key: string]: any};
};
const VerifyModal: React.FC<VerifyModalProps> = ({
visible,
confirmLoading,
onSubmit,
onVisible,
isEdit = true,
title = '换货发货处理',
value = {},
}) => {
const handleSubmit = values => {
const {
deliveryAddress,
deliveryAddressTxt,
deliveryTime,
logisticsName,
logisticsNameTxt,
...rest
} = values;
if (onSubmit) {
onSubmit(isEdit ? {
deliveryAddress: deliveryAddressTxt,
logisticsName: logisticsNameTxt,
deliveryTime: deliveryTime ? deliveryTime.format('YYYY-MM-DD HH:mm:ss') : '',
...rest,
} : null);
}
};
// 获取发货地址
const fetchShipperAddress = (): Promise<any[]> => {
return new Promise((resolve, reject) => {
PublicApi.getLogisticsSelectListShipperAddress().then(res => {
if (res.code === 1000) {
const options =
res.data ?
res.data.map(item => ({
label: `${item.fullAddress}/${item.shipperName}/${item.phone}`,
value: item.id,
...item,
})) :
[];
resolve(options);
}
reject();
}).catch(() => {
reject();
});
});
};
// 获取物流公司
const fetchLogisticsCompany = (): Promise<any[]> => {
return new Promise((resolve, reject) => {
PublicApi.getLogisticsSelectListCompany({
cooperateType: '2', // 1-平台物流服务商，2-商户合作物流公司
}).then(res => {
if (res.code === 1000) {
const options =
res.data ?
res.data.map(item => ({
label: item.name,
value: item.id,
})) :
[];
resolve(options);
}
reject();
}).catch(() => {
reject();
});
});
};
const LogisticsOrderNo = (
<a
href={`https://www.kuaidi100.com/chaxun?nu=${value.logisticsOrderNo}`}
target="_blank"
>
{value.logisticsOrderNo}
</a>
);
return (
<Modal
title={title}
visible={visible}
confirmLoading={confirmLoading}
onOk={() => modalFormActions.submit()}
onCancel={() => onVisible(false)}
destroyOnClose
>
<NiceForm
effects={($, { setFieldState, setFieldValue }) => {
const linkage = useLinkageUtils();
useAsyncSelect('deliveryAddress', fetchShipperAddress, ['label', 'value']);
useAsyncSelect('logisticsName', fetchLogisticsCompany, ['label', 'value']);
onFieldInputChange$('deliveryAddress').subscribe(state => {
const { originAsyncData, value } = state;
const current = originAsyncData.find(item => item.value === value);
if (current) {
setFieldValue('deliveryAddressTxt', current.fullAddress);
}
});
onFieldInputChange$('logisticsName').subscribe(state => {
const { originAsyncData, value } = state;
const current = originAsyncData.find(item => item.value === value);
if (current) {
setFieldValue('logisticsNameTxt', current.label);
}
});
onFormInit$().subscribe(() => {
if (!isEdit) {
linkage.hide('*(deliveryAddress,logisticsName,logisticsOrderNo)');
linkage.show('*(logisticsOrderNoTxt)');
setFieldState('*(deliveryAddressTxt,logisticsNameTxt)', state => {
state.display = true;
});
}
});
}}
initialValues={{
deliveryTime: moment(),
...value,
}}
components={{
DatePicker,
}}
expressionScope={{
LogisticsOrderNo,
}}
editable={isEdit}
actions={modalFormActions}
schema={schema}
onSubmit={handleSubmit}
/>
</Modal>
);
};
/*
* @Author: XieZhiXiong
* @Date: 2020-11-09 10:48:12
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-31 10:48:22
* @Description: 手动发货弹窗
*/
import React from 'react';
import { Modal } from 'antd';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import { DatePicker } from '@formily/antd-components';
import moment from 'moment';
import NiceForm from '@/components/NiceForm';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import { PublicApi } from '@/services/api';
import { useLinkageUtils } from '@/utils/formEffectUtils';
import { schema } from './schema';
const modalFormActions = createFormActions();
const {
onFieldValueChange$,
onFieldInputChange$,
onFormInit$,
} = FormEffectHooks;
interface VerifyModalProps {
visible: boolean;
confirmLoading: boolean;
onSubmit: (values: {[key: string]: any}) => void;
onVisible: (flag: boolean) => void;
// 是否编辑的
isEdit?: boolean;
title?: string;
value?: {[key: string]: any};
};
const VerifyModal: React.FC<VerifyModalProps> = ({
visible,
confirmLoading,
onSubmit,
onVisible,
isEdit = true,
title = '换货发货处理',
value = {},
}) => {
const handleSubmit = values => {
const {
deliveryAddress,
deliveryAddressTxt,
deliveryTime,
logisticsName,
logisticsNameTxt,
...rest
} = values;
if (onSubmit) {
onSubmit(isEdit ? {
deliveryAddress: deliveryAddressTxt,
logisticsName: logisticsNameTxt,
deliveryTime: deliveryTime ? deliveryTime.format('YYYY-MM-DD HH:mm:ss') : '',
...rest,
} : null);
}
};
// 获取发货地址
const fetchShipperAddress = (): Promise<any[]> => {
return new Promise((resolve, reject) => {
PublicApi.getLogisticsSelectListShipperAddress().then(res => {
if (res.code === 1000) {
const options =
res.data ?
res.data.map(item => ({
label: `${item.fullAddress}/${item.shipperName}/${item.phone}`,
value: item.id,
...item,
})) :
[];
resolve(options);
}
reject();
}).catch(() => {
reject();
});
});
};
// 获取物流公司
const fetchLogisticsCompany = (): Promise<any[]> => {
return new Promise((resolve, reject) => {
PublicApi.getLogisticsSelectListCompany({
cooperateType: '2', // 1-平台物流服务商，2-商户合作物流公司
}).then(res => {
if (res.code === 1000) {
const options =
res.data ?
res.data.map(item => ({
label: item.name,
value: item.id,
})) :
[];
resolve(options);
}
reject();
}).catch(() => {
reject();
});
});
};
const LogisticsOrderNo = (
<a
href={`https://www.kuaidi100.com/chaxun?nu=${value.logisticsOrderNo}`}
target="_blank"
>
{value.logisticsOrderNo}
</a>
);
return (
<Modal
title={title}
visible={visible}
confirmLoading={confirmLoading}
onOk={() => modalFormActions.submit()}
onCancel={() => onVisible(false)}
destroyOnClose
>
<NiceForm
effects={($, { setFieldState, setFieldValue }) => {
const linkage = useLinkageUtils();
useAsyncSelect('deliveryAddress', fetchShipperAddress, ['label', 'value']);
useAsyncSelect('logisticsName', fetchLogisticsCompany, ['label', 'value']);
onFieldInputChange$('deliveryAddress').subscribe(state => {
const { originAsyncData, value } = state;
const current = originAsyncData.find(item => item.value === value);
if (current) {
setFieldValue('deliveryAddressTxt', current.fullAddress);
}
});
onFieldInputChange$('logisticsName').subscribe(state => {
const { originAsyncData, value } = state;
const current = originAsyncData.find(item => item.value === value);
if (current) {
setFieldValue('logisticsNameTxt', current.label);
}
});
onFormInit$().subscribe(() => {
if (!isEdit) {
linkage.hide('*(deliveryAddress,logisticsName,logisticsOrderNo)');
linkage.show('*(logisticsOrderNoTxt)');
setFieldState('*(deliveryAddressTxt,logisticsNameTxt)', state => {
state.display = true;
});
}
});
}}
initialValues={{
deliveryTime: moment(),
...value,
}}
components={{
DatePicker,
}}
expressionScope={{
LogisticsOrderNo,
}}
editable={isEdit}
actions={modalFormActions}
schema={schema}
onSubmit={handleSubmit}
/>
</Modal>
);
};
export default VerifyModal;
\ No newline at end of file
src/pages/afterService/components/ManualDeliveryModal/schema/index.ts
View file @ d923106a
/*
* @Author: XieZhiXiong
* @Date: 2020-11-09 10:50:43
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-14 18:34:12
* @Description:
*/
import { ISchema } from '@formily/antd';
export const schema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'top',
},
properties: {
deliveryAddress: {
type: 'string',
title: '发货地址',
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
deliveryAddressTxt: {
title: '发货地址',
type: 'string',
display: false,
},
deliveryTime: {
type: 'string',
title: '发货时间',
'x-component': 'DatePicker',
required: true,
'x-component-props': {
placeholder: '请选择',
showTime: true,
style: { width: '100%' },
},
},
logisticsOrderNo: {
type: 'string',
title: '发货单号',
required: true,
'x-component-props': {
placeholder: '请选择',
},
},
logisticsOrderNoTxt: {
type: 'string',
title: '发货单号',
visible: false,
'x-component': 'Children',
'x-component-props': {
children: '{{LogisticsOrderNo}}',
},
},
logisticsName: {
type: 'string',
title: '物流公司',
required: true,
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
logisticsNameTxt: {
title: '物流公司',
type: 'string',
display: false,
},
},
},
},
/*
* @Author: XieZhiXiong
* @Date: 2020-11-09 10:50:43
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-31 10:35:24
* @Description:
*/
import { ISchema } from '@formily/antd';
export const schema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'left',
},
properties: {
deliveryAddress: {
type: 'string',
title: '发货地址',
enum: [],
required: true,
'x-component-props': {
placeholder: '请选择',
},
},
deliveryAddressTxt: {
title: '发货地址',
type: 'string',
display: false,
},
deliveryTime: {
type: 'string',
title: '发货时间',
'x-component': 'DatePicker',
required: true,
'x-component-props': {
placeholder: '请选择',
showTime: true,
style: { width: '100%' },
},
},
logisticsOrderNo: {
type: 'string',
title: '发货单号',
required: true,
'x-component-props': {
placeholder: '请输入',
},
},
logisticsOrderNoTxt: {
type: 'string',
title: '发货单号',
visible: false,
'x-component': 'Children',
'x-component-props': {
children: '{{LogisticsOrderNo}}',
},
},
logisticsName: {
type: 'string',
title: '物流公司',
required: true,
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
logisticsNameTxt: {
title: '物流公司',
type: 'string',
display: false,
},
},
},
},
};
\ No newline at end of file
src/pages/afterService/exchangeApplication/exchangePrDeliver/verify.tsx
View file @ d923106a
import React, { useState } from 'react';
import { Button } from 'antd';
import { history } from 'umi';
import { PublicApi } from '@/services/api';
import { SettingOutlined } from '@ant-design/icons';
import { usePageStatus } from '@/hooks/usePageStatus';
import { EXCHANGE_GOODS_MANUAL_DELIVERY } from '../../constants';
import ManualDeliveryModal from '../../components/ManualDeliveryModal';
import DetailInfo from '../components/DetailInfo';
const ExchangePrDeliverVerify: React.FC = () => {
const { id, creditId } = usePageStatus();
const [modalVisible, setModalVisible] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const handleSubmit = values => {
if (!id) {
return;
}
setSubmitLoading(true);
PublicApi.postAsReplaceGoodsManualReturnDeliveryGoods({
dataId: id,
...values,
}).then(res => {
if (res.code === 1000) {
history.goBack();
}
}).finally(() => {
setSubmitLoading(false);
});
};
const handleVisible = flag => {
setModalVisible(!!flag);
};
return (
<>
<DetailInfo
id={id}
headExtra={info => (
<>
{(info && info.taskType === EXCHANGE_GOODS_MANUAL_DELIVERY) && (
<Button
type="default"
icon={<SettingOutlined />}
onClick={() => handleVisible(true)}
>
手工退货发货
</Button>
)}
</>
)}
/>
<ManualDeliveryModal
title="退货发货处理"
visible={modalVisible}
confirmLoading={submitLoading}
onSubmit={handleSubmit}
onVisible={handleVisible}
isEdit={true}
/>
</>
);
};
import React, { useState } from 'react';
import { Button } from 'antd';
import { history } from 'umi';
import { PublicApi } from '@/services/api';
import { SettingOutlined } from '@ant-design/icons';
import { usePageStatus } from '@/hooks/usePageStatus';
import { EXCHANGE_GOODS_MANUAL_DELIVERY } from '../../constants';
import ManualDeliveryModal from '../../components/ManualDeliveryModal';
import DetailInfo from '../components/DetailInfo';
const ExchangePrDeliverVerify: React.FC = () => {
const { id, creditId } = usePageStatus();
const [modalVisible, setModalVisible] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const handleSubmit = values => {
if (!id) {
return;
}
setSubmitLoading(true);
PublicApi.postAsReplaceGoodsManualReturnDeliveryGoods({
dataId: id,
...values,
}).then(res => {
if (res.code === 1000) {
history.goBack();
}
}).finally(() => {
setSubmitLoading(false);
});
};
const handleVisible = flag => {
setModalVisible(!!flag);
};
return (
<>
<DetailInfo
id={id}
headExtra={info => (
<>
{(info && info.taskType === EXCHANGE_GOODS_MANUAL_DELIVERY) && (
<Button
type="default"
icon={<SettingOutlined />}
onClick={() => handleVisible(true)}
>
手工退货发货
</Button>
)}
</>
)}
/>
<ManualDeliveryModal
title="退货发货处理"
visible={modalVisible}
confirmLoading={submitLoading}
onSubmit={handleSubmit}
onVisible={handleVisible}
isEdit={true}
/>
</>
);
};
export default ExchangePrDeliverVerify;
\ No newline at end of file
src/pages/afterService/exchangeApplication/exchangePrReceived/index.tsx
View file @ d923106a
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2020-11-06 16:30:44
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-19 18:19:21
* @LastEditTime: 2020-12-31 10:33:18
* @Description: 待换货收货
*/
import React, { useState, useRef } from 'react';
......
src/pages/afterService/exchangeApplication/exchangePrReceived/verify.tsx
View file @ d923106a
import React, { useState } from 'react';
import { Button } from 'antd';
import { history } from 'umi';
import { PublicApi } from '@/services/api';
import { SettingOutlined } from '@ant-design/icons';
import { usePageStatus } from '@/hooks/usePageStatus';
import { EXCHANGE_GOODS_MANUAL_DELIVERY } from '../../constants';
import ManualDeliveryModal from '../../components/ManualDeliveryModal';
import DetailInfo from '../components/DetailInfo';
const ExchangePrReceivedVerify: React.FC = () => {
const { id, creditId } = usePageStatus();
const [modalVisible, setModalVisible] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const handleSubmit = values => {
if (!id) {
return;
}
setSubmitLoading(true);
PublicApi.postAsReplaceGoodsConfirmManualReplaceReceiveGoods({
dataId: id,
}).then(res => {
if (res.code === 1000) {
history.goBack();
}
}).finally(() => {
setSubmitLoading(false);
});
};
const handleVisible = flag => {
setModalVisible(!!flag);
};
return (
<>
<DetailInfo
id={id}
headExtra={info => {
const detailed = info || {};
// @ts-ignore
const { manualReplaceGoodsAddress = {} } = detailed;
return (
<>
{(info && info.taskType === EXCHANGE_GOODS_MANUAL_DELIVERY) && (
<>
<Button
type="default"
icon={<SettingOutlined />}
onClick={() => handleVisible(true)}
>
手工确认换货收货
</Button>
<ManualDeliveryModal
key="2"
title="确认换货收货"
value={{
deliveryAddressTxt: manualReplaceGoodsAddress.deliveryAddress,
deliveryTime: manualReplaceGoodsAddress.deliveryTime,
logisticsOrderNo: manualReplaceGoodsAddress.logisticsOrderNo,
logisticsNameTxt: manualReplaceGoodsAddress.logisticsName,
}}
visible={modalVisible}
confirmLoading={submitLoading}
onSubmit={handleSubmit}
onVisible={handleVisible}
isEdit={false}
/>
</>
)}
</>
)
}}
/>
</>
);
};
import React, { useState } from 'react';
import { Button } from 'antd';
import { history } from 'umi';
import { PublicApi } from '@/services/api';
import { SettingOutlined } from '@ant-design/icons';
import { usePageStatus } from '@/hooks/usePageStatus';
import { EXCHANGE_GOODS_MANUAL_DELIVERY } from '../../constants';
import ManualDeliveryModal from '../../components/ManualDeliveryModal';
import DetailInfo from '../components/DetailInfo';
const ExchangePrReceivedVerify: React.FC = () => {
const { id, creditId } = usePageStatus();
const [modalVisible, setModalVisible] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const handleSubmit = values => {
if (!id) {
return;
}
setSubmitLoading(true);
PublicApi.postAsReplaceGoodsConfirmManualReplaceReceiveGoods({
dataId: id,
}).then(res => {
if (res.code === 1000) {
history.goBack();
}
}).finally(() => {
setSubmitLoading(false);
});
};
const handleVisible = flag => {
setModalVisible(!!flag);
};
return (
<>
<DetailInfo
id={id}
headExtra={info => {
const detailed = info || {};
// @ts-ignore
const { manualReplaceGoodsAddress = {} } = detailed;
return (
<>
{(info && info.taskType === EXCHANGE_GOODS_MANUAL_DELIVERY) && (
<>
<Button
type="default"
icon={<SettingOutlined />}
onClick={() => handleVisible(true)}
>
手工确认换货收货
</Button>
<ManualDeliveryModal
key="2"
title="确认换货收货"
value={{
deliveryAddressTxt: manualReplaceGoodsAddress.deliveryAddress,
deliveryTime: manualReplaceGoodsAddress.deliveryTime,
logisticsOrderNo: manualReplaceGoodsAddress.logisticsOrderNo,
logisticsNameTxt: manualReplaceGoodsAddress.logisticsName,
}}
visible={modalVisible}
confirmLoading={submitLoading}
onSubmit={handleSubmit}
onVisible={handleVisible}
isEdit={false}
/>
</>
)}
</>
)
}}
/>
</>
);
};
export default ExchangePrReceivedVerify;
\ 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