From 2663914eb4b80b2dc141b4712c32d1b76bfbeb2f Mon Sep 17 00:00:00 2001 From: manzhenhua Date: Mon, 8 Jun 2020 21:31:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/base/_utils/setFormatter.tsx | 10 +++++ .../apolloTable/component/base/config.tsx | 10 +++++ .../component/base/detail/index.tsx | 2 + .../component/base/detail/region/index.less | 6 +++ .../component/base/detail/region/index.tsx | 14 +++++++ .../apolloTable/component/base/edit/index.ts | 2 + .../component/base/edit/region/_utils.ts | 24 +++++++++++ .../component/base/edit/region/index.tsx | 42 +++++++++++++++++++ components/apolloTable/editFormV3/index.tsx | 7 ++-- 9 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 components/apolloTable/component/base/detail/region/index.less create mode 100644 components/apolloTable/component/base/detail/region/index.tsx create mode 100644 components/apolloTable/component/base/edit/region/_utils.ts create mode 100644 components/apolloTable/component/base/edit/region/index.tsx diff --git a/components/apolloTable/component/base/_utils/setFormatter.tsx b/components/apolloTable/component/base/_utils/setFormatter.tsx index 9a6526f..ebf3490 100644 --- a/components/apolloTable/component/base/_utils/setFormatter.tsx +++ b/components/apolloTable/component/base/_utils/setFormatter.tsx @@ -185,4 +185,14 @@ export const SetFormatter = { } return val; }, + REGION: (val) => { + if (!val || !Array.isArray(val)) return val; + const textArr: any = []; + const valueArr: any = []; + val.forEach((ls: any) => { + textArr.push(ls.label); + valueArr.push(ls.value); + }); + return [{ text: textArr.filter((ls) => { return ls; }).join('-'), value: valueArr.filter((ls) => { return ls; }).join('-') }]; + }, }; diff --git a/components/apolloTable/component/base/config.tsx b/components/apolloTable/component/base/config.tsx index 7fb324a..aec65c4 100644 --- a/components/apolloTable/component/base/config.tsx +++ b/components/apolloTable/component/base/config.tsx @@ -20,6 +20,7 @@ import { ApolloUpload, ApolloTextArea, ApolloDateRange, + ApolloRegion, } from './edit'; import { ApolloInputDetail, @@ -40,6 +41,7 @@ import { ApolloUploadDetail, ApolloDateRangeDetail, ApolloTextLinkDetail, + ApolloRegionDetail, } from './detail'; import CellContainer from './edit/container'; @@ -250,4 +252,12 @@ export const config: any = { detailComp: ApolloDateRangeDetail, icon: 'iconziduan-riqi', }, + 22: { + name: '地区选择控件', + editComp: ApolloRegion, + detailComp: ApolloRegionDetail, + setFormatter: SetFormatter.REGION, + // getFormatter: GetFormatter.REGION, + icon: 'iconziduan-lianxiangdanxuan', + }, }; diff --git a/components/apolloTable/component/base/detail/index.tsx b/components/apolloTable/component/base/detail/index.tsx index 20a46c0..b8283db 100644 --- a/components/apolloTable/component/base/detail/index.tsx +++ b/components/apolloTable/component/base/detail/index.tsx @@ -16,6 +16,7 @@ import { ApolloTreeSelectDetail } from './tree-select'; import { ApolloUploadDetail } from './upload'; import { ApolloDateRangeDetail } from './dateRange'; import { ApolloTextLinkDetail } from './text-link'; +import { ApolloRegionDetail } from './region'; export { ApolloInputDetail, @@ -36,4 +37,5 @@ export { ApolloUploadDetail, ApolloDateRangeDetail, ApolloTextLinkDetail, + ApolloRegionDetail, }; diff --git a/components/apolloTable/component/base/detail/region/index.less b/components/apolloTable/component/base/detail/region/index.less new file mode 100644 index 0000000..59c3d5a --- /dev/null +++ b/components/apolloTable/component/base/detail/region/index.less @@ -0,0 +1,6 @@ +.text { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} diff --git a/components/apolloTable/component/base/detail/region/index.tsx b/components/apolloTable/component/base/detail/region/index.tsx new file mode 100644 index 0000000..13abd1d --- /dev/null +++ b/components/apolloTable/component/base/detail/region/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './index.less'; + +export const ApolloRegionDetail = (props) => { + const { value } = props; + + if (typeof value === 'object') { + if (Array.isArray(value)) { + const text = value[0] && value[0].text; + return
{text}
; + } + } + return '数据错误'; +}; diff --git a/components/apolloTable/component/base/edit/index.ts b/components/apolloTable/component/base/edit/index.ts index a86e78c..f25cedc 100644 --- a/components/apolloTable/component/base/edit/index.ts +++ b/components/apolloTable/component/base/edit/index.ts @@ -15,6 +15,7 @@ import { ApolloTextArea } from './textarea'; import { ApolloTreeSelect } from './tree-select'; import { ApolloUpload } from './upload'; import { ApolloDateRange } from './dateRange'; +import ApolloRegion from './region'; export { ApolloInput, @@ -34,4 +35,5 @@ export { ApolloUpload, ApolloTextArea, ApolloDateRange, + ApolloRegion, }; diff --git a/components/apolloTable/component/base/edit/region/_utils.ts b/components/apolloTable/component/base/edit/region/_utils.ts new file mode 100644 index 0000000..2c7cf9f --- /dev/null +++ b/components/apolloTable/component/base/edit/region/_utils.ts @@ -0,0 +1,24 @@ +export const getCityOps = ([pId, cityId, countyId]: any, citys) => { + const priviceObj = citys.find((ls: any) => { return ls.value === pId; }) || {}; + const cityObj = (priviceObj.children || []).find((ls: any) => { return ls.value === cityId; }) || {}; + const countryObj = (cityObj.children || []).find((ls: any) => { return ls.value === countyId; }) || {}; + return [priviceObj, cityObj, countryObj].filter((ls: any) => { return ls && ls.value; }).map((ls) => { return { value: ls.code, label: ls.label }; }); +}; +export const formateCity = (arr: any) => { + if (!arr || arr.length === 0) return []; + return arr.map((ls: any) => { + if (ls.cityList || ls.areaList) { + return { + ...ls, + label: ls.name, + value: ls.code, + children: formateCity(ls.cityList || ls.areaList), + }; + } + return { + ...ls, + label: ls.name, + value: ls.code, + }; + }); +}; diff --git a/components/apolloTable/component/base/edit/region/index.tsx b/components/apolloTable/component/base/edit/region/index.tsx new file mode 100644 index 0000000..22a73c0 --- /dev/null +++ b/components/apolloTable/component/base/edit/region/index.tsx @@ -0,0 +1,42 @@ +import React, { useState, useEffect } from 'react'; +import { Cascader } from 'antd'; +import { getCitys } from '@/services/api'; +import { formateCity, getCityOps } from './_utils'; + +const formateVal = (value) => { + if (!Array.isArray(value)) return []; + return value.map((ls) => { return ls.value; }); +}; +const Picker = (props) => { + const [citys, saveCitys] = useState([]); + const [val, saveVal] = useState(formateVal(props.value)); + useEffect(() => { saveVal(formateVal(props.value)); }, [props.value]); + const getAllCity = async () => { + if (citys && citys.length > 0) return; + let city = await getCitys(); + city = Array.isArray(city) ? city : []; + city = formateCity(city); + saveCitys(city); + }; + const onChange = (v) => { + const val = getCityOps(v, citys); + if (props.onChange) { + props.onChange(val); + } + }; + const onFocus = () => { + getAllCity(); + }; + return ( + + ); +}; +export default Picker; diff --git a/components/apolloTable/editFormV3/index.tsx b/components/apolloTable/editFormV3/index.tsx index 1924835..348fc10 100644 --- a/components/apolloTable/editFormV3/index.tsx +++ b/components/apolloTable/editFormV3/index.tsx @@ -29,14 +29,15 @@ class FormWrap extends Component { form.validateFieldsAndScroll((err, values) => { if (!err) { const newValues: any[] = []; + debugger _.keys(values).map((key) => { const item = data.find((temp: any) => { return temp.columnName === key; }); const { columnType, renderEditForm, readOnlyFlag, dynamicCellConfigDTO } = item; - if (readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag)) { - return; - } + // if (readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag)) { + // return; + // } let detailConfig: any; if (typeof renderEditForm === 'function') { detailConfig = renderEditForm({ cellData: values[key], rowData, columnConfig: item }); -- 2.21.0