修改数据

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('-') }];
+    },
 };

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',
+    },
 };

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,
 };

components/apolloTable/component/base/detail/region/index.less

+.text {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

components/apolloTable/component/base/detail/region/index.tsx

+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 <div className={styles.text}>{text}</div>;
+        }
+    }
+    return '数据错误';
+};

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,
 };

components/apolloTable/component/base/edit/region/_utils.ts

+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,
+        };
+    });
+};

components/apolloTable/component/base/edit/region/index.tsx

+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 (
+        <Cascader
+            placeholder="请选择"
+            {...props}
+
+            value={val}
+            options={citys}
+            onChange={onChange}
+            onFocus={onFocus}
+        />
+    );
+};
+export default Picker;

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 });