feat: 新增专家库页面，添加区域三级联动schema控件

config/routes/procurementRoute/callForBids.ts

@@ -220,6 +220,20 @@ export const callForBidsRoute =  [
         hideInMenu: true,
         noMargin: true,
       },
+      // 评标专家库
+      {
+        path: '/memberCenter/procurementAbility/callForBids/remarkBidExpert',
+        name: '评标专家库',
+        component: '@/pages/procurement/callForBids/remarkBidExpert',
+      },
+      // 评标专家库-新建
+      {
+        path: '/memberCenter/procurementAbility/callForBids/remarkBidExpert/add',
+        name: '新建评标专家库',
+        component: '@/pages/procurement/callForBids/addRemarkBidExpert',
+        hideInMenu: true,
+        noMargin: true,
+      },
     ]
   },
 ]

src/components/NiceForm/components/CustomAddress.tsx

+import React, { useRef, useEffect, useState } from 'react'
+import { Input, Row, Col, Select, Form, Button, message } from 'antd';
+import styled from 'styled-components'
+import { PublicApi } from '@/services/api';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+
+/**
+ * 自定义省市区/县三级联动 地址选择
+ */
+
+const RowStyleLayout = styled(props => <div {...props} />)`
+width: 100%;
+
+.formwrap {
+  position: relative;
+  .formbutton {
+    position: absolute;
+    right: -95px;
+    display: flex;
+    width: 90px;
+    :global {
+      .ant-form-item {
+        width: 32px;
+        margin-right: 10px;
+        .ant-btn {
+          width: 32px;
+          padding: 0;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+`
+
+const { Option } =  Select
+
+const MultAddress = (props) => {
+  const { value, mutators } = props
+
+  const {
+    placeholder = [],
+    warningText = '请完善相关信息',
+    ...rest
+  } = props.props["x-component-props"] || {}
+
+  const [code, setcode] = useState<any>([]);
+  const [province, setprovince] = useState<any>([]); // 省列表
+  const [city, setcity] = useState<any>([]); // 市列表
+  const [area, setarea] = useState<any>([]); // 区/县列表
+
+  useEffect(() => {
+    getAllAreaData().then(data => {
+      setprovince(data)
+    })
+  }, [])
+
+  const getAllAreaData = () => {
+    return new Promise(resolve => {
+      PublicApi.getManageAreaAll().then(res => {
+        if (res.code === 1000) {
+          resolve(res.data);
+        }
+      })
+    })
+  }
+
+  // 触发onChange改变值
+  const changeAddress = async (val: any, idx: number, num: number) => {
+    const result = [...value]
+    const cityCode: Array<any> = []
+    result.forEach((item: any) => {
+      if (item.cityCode) {
+        cityCode.push(item.cityCode)
+      }
+    })
+    setcode([...cityCode]);
+    if (num === 1) {
+      await province.forEach(item => {
+        if (item.code === val) {
+          PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
+            if (res.code === 1000) {
+              result[idx].provinceCode = val;
+              result[idx].province = item.name;
+              city[idx] = { citydata: res.data }
+              setcity([...city])
+            }
+          })
+        }
+      })
+    } else if(num === 2) {
+      await city[0].citydata.forEach(item => {
+        if(item.code === val) {
+          PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
+            if (res.code === 1000) {
+              result[idx].cityCode = val;
+              result[idx].city = item.name;
+              area[idx] = { areadata: res.data }
+              setarea([...area])
+            }
+          })
+        }
+      })
+    } else if(num === 3) {
+      console.log(area, 'area')
+      area[0].areadata.forEach(item => {
+        if (item.code === val) {
+          result[idx].areaCode = val;
+          result[idx].area = item.name;
+        }
+      })
+      setarea([...area])
+    }
+    mutators.change(result)
+  }
+
+  // 触发select下拉调用
+  const onDropdownVisibleChange = () => {
+    return new Promise(reslove => reslove(code)).then((res: any) => {
+      city.forEach((item: any) => {
+        item.citydata.filter(it => {
+          res.map(items => {
+            if (items === it.code) {
+              it.disabled = true
+            }
+          })
+        })
+      })
+      setcity([...city])
+    })
+  }
+
+  return (<RowStyleLayout>
+    {value.map((item: any, idx: number) => {
+
+      return (
+        <Row gutter={10} key={`paramAddress${idx}_`} className="formwrap">
+          <Col span={8}>
+            <Form.Item>
+              <Select
+                placeholder="请选择"
+                onDropdownVisibleChange={onDropdownVisibleChange}
+                onChange={(value) => {
+                  changeAddress(value, idx, 1)
+                }}
+                value={item.provinceCode}
+              >
+                {province.map(items => {
+                  return (
+                    <Option key={`${items.id}_${idx}_province`} value={items.code}>{items.name}</Option>
+                  )
+                })}
+              </Select>
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item>
+              <Select
+                placeholder="请选择"
+                onDropdownVisibleChange={onDropdownVisibleChange}
+                onChange={(value) => {
+                  changeAddress(value, idx, 2)
+                }}
+                value={item.cityCode}
+              >
+                {(item.provinceCode && city.length > 0 && city[idx]) && city[idx].citydata.map(items => {
+                  return (
+                    <Option disabled={items.disabled} key={`${items.id}_${idx}_city`} value={items.code}>{items.name}</Option>
+                  )
+                })}
+              </Select>
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item>
+              <Select
+                placeholder="请选择"
+                onDropdownVisibleChange={onDropdownVisibleChange}
+                onChange={(value) => {
+                  changeAddress(value, idx, 3)
+                }}
+                value={item.areaCode}
+              >
+                {(item.provinceCode && item.cityCode && area.length > 0 && area[idx]) && area[idx].areadata.map(items => {
+                  return (
+                    <Option disabled={items.disabled} key={`${items.id}_${idx}_area`} value={items.code}>{items.name}</Option>
+                  )
+                })}
+              </Select>
+            </Form.Item>
+          </Col>
+        </Row>
+      )
+    })}
+  </RowStyleLayout>
+  )
+}
+
+MultAddress.defaultProps = {}
+
+MultAddress.isFieldComponent = true;
+
+export default MultAddress

src/components/NiceForm/index.tsx

@@ -35,6 +35,7 @@ import AntUpload from './components/AntUpload';
 import { useLinkComponentProps } from './linkages/linkComponentProps';
 import Loading from '../Loading';
 import MultAddress from './components/MultAddress';
+import CustomAddress from './components/CustomAddress';
 
 export interface NiceFormProps extends IAntdSchemaFormProps {
   loading?: boolean
@@ -113,6 +114,7 @@ export const componentExport = {
   RadioGroup: Radio.Group,
   AntUpload,
   MultAddress,
+  CustomAddress,
 }
 const NiceForm: React.FC<NiceFormProps> = props => {
   const { children, components, effects, expressionScope, loading = false, ...reset } = props;

src/pages/procurement/callForBids/addRemarkBidExpert/index.less

+.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;
+}

src/pages/procurement/callForBids/addRemarkBidExpert/index.tsx

+import React, { useRef, useState, useEffect, useContext } from 'react'
+import { history } from 'umi'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import ReutrnEle from '@/components/ReturnEle'
+import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
+import { Button, Card } from 'antd'
+import { createFormActions } from '@formily/antd'
+import { LinkOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons'
+import NiceForm from '@/components/NiceForm'
+import './index.less'
+import { formSchema } from './schema'
+import { Input, ArrayTable } from '@formily/antd-components'
+
+export interface AddRemarkBidExpertProps {}
+
+const addSchemaAction = createFormActions()
+
+// 新增评标专家库. 包含新增和编辑
+const AddRemarkBidExpert:React.FC<AddRemarkBidExpertProps> = (props) => {
+
+  const [formLoading, setFormLoading] = useState(false)
+  const [btnLoading, setBtnLoading] = useState(false)
+  const [initFormValue, setInitFormValue] = useState<any>({})
+
+  const {
+    id,
+    preview,
+    pageStatus
+  } = usePageStatus()
+
+
+  const handleSubmit = async (value) => {
+    console.log(value)
+  }
+
+  const handleSelectExpert = () => {
+    console.log('选择专家')
+  }
+
+  const selectButton = pageStatus === PageStatus.ADD && <div className='connectBtn' onClick={handleSelectExpert}><LinkOutlined style={{marginRight: 4}}/>选择</div>
+
+
+  return (
+    <PageHeaderWrapper
+      style={{margin: 0}}
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回"/>}
+      title="新建评标模板"
+      extra={[
+        <Button key="1" onClick={() => addSchemaAction.submit()} loading={btnLoading} type="primary" icon={<SaveOutlined />}>
+          保存
+        </Button>,
+      ]}
+    >
+      <Card>
+        <NiceForm
+          loading={formLoading}
+          previewPlaceholder=' '
+          // editable={pageStatus !== PageStatus.PREVIEW}
+          value={initFormValue}
+          actions={addSchemaAction}
+          schema={formSchema}
+          onSubmit={handleSubmit}
+          components={{
+            ArrayTable
+          }}
+          effects={($, ctx) => {
+            $('onFormMount').subscribe(() => {
+
+            })
+          }}
+          expressionScope={{
+            selectButton
+          }}
+        />
+        <Button>保存</Button>
+        <Button>取消</Button>
+      </Card>
+
+    </PageHeaderWrapper>
+  )
+}
+
+AddRemarkBidExpert.defaultProps = {}
+
+export default AddRemarkBidExpert

src/pages/procurement/callForBids/addRemarkBidExpert/schema/index.ts

+import React from 'react'
+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+
+
+export const formSchema: ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT_0: {
+      type: 'object',
+      "x-component": 'mega-layout',
+      "x-component-props": {
+        labelCol: 4,
+        wrapperCol: 8,
+        labelAlign: 'left'
+      },
+      properties: {
+        expertName: {
+          type: 'string',
+          title: '专家名称',
+          "x-mega-props": {
+            full: true
+          },
+         "x-component-props": {
+            disabled: true,
+            addonAfter: "{{selectButton}}"
+          },
+          required: true
+        },
+        institution: {
+          type: 'string',
+          title: '所属机构',
+          readOnly: true,
+        },
+        post: {
+          type: 'string',
+          title: '职位',
+          readOnly: true,
+        },
+        major: {
+          type: 'string',
+          title: '专业类别',
+          enum: ['搬砖', '和水泥', '拉网线'],
+          "x-component-props": {
+            placeholder: '请选择专业类别'
+          },
+          required: true,
+        },
+        qualification: {
+          type: 'string',
+          title: '资格证书',
+          "x-component-props": {
+            placeholder: '请输入资格证书'
+          },
+          required: true,
+        },
+        qualificationNo: {
+          type: 'string',
+          title: '证书编号',
+          "x-component-props": {
+            placeholder: '请输入资格证书编号'
+          },
+          required: true,
+        },
+        postTitle: {
+          type: 'string',
+          title: '专业职称',
+          "x-component-props": {
+            placeholder: '请输入专业职称'
+          },
+          required: true,
+        },
+        timeLine: {
+          type: 'string',
+          title: '从事年限',
+          "x-component-props": {
+            placeholder: '请输入从事年限'
+          },
+          required: true,
+        },
+        industry: {
+          type: 'string',
+          title: '所属行业',
+          "x-component-props": {
+            placeholder: '请输入所属行业'
+          },
+          required: true,
+        },
+        address: {
+          type: 'array',
+          title: '所在地区',
+          'x-component': 'CustomAddress',
+          'x-component-props': {
+            placeholder: '选择区域',
+            warningText: '请完善所在地区',
+          },
+          default: [{ provinceCode: null, province: null, cityCode: null, city: null, areaCode: null, area: null }],
+          required: true,
+        },
+        unit: {
+          type: 'string',
+          title: '工作单位',
+          "x-component-props": {
+            placeholder: '请输入工作单位'
+          },
+          required: true,
+        },
+        remark: {
+          type: 'textarea',
+          title: '备注说明',
+          "x-component-props": {
+            placeholder: '最长100个字符，50字汉字'
+          },
+          "x-rules": [
+            {
+              limitByte: true,
+              maxByte: 100
+            },
+          ]
+        },
+        joinTime: {
+          type: 'string',
+          title: '加入日期',
+          readOnly: true,
+        },
+        removeTime: {
+          type: 'string',
+          title: '移除日期',
+          readOnly: true,
+        },
+      }
+    }
+  }
+}

src/pages/procurement/callForBids/remarkBidExpert/index.tsx

+import React, { useRef } from 'react'
+import { history } from 'umi'
+import { Card, Button, Space } from 'antd'
+import { StandardTable } from 'god'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { PublicApi } from '@/services/api'
+import { useSelfTable } from './model/useSelfTable'
+import { PlusCircleOutlined } from '@ant-design/icons'
+import { tableListSchema } from './schema'
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
+import { FORM_FILTER_PATH } from '@/formSchema/const'
+import Submit from '@/components/NiceForm/components/Submit'
+import DateRangePickerUnix from '@/components/NiceForm/components/DateRangePickerUnix'
+
+// 评标专家库 招标
+
+export interface RemarkBidExpertProps {}
+
+const fetchTableData = async (params) => {
+  const { data } = await PublicApi.getOrderProcurementReviewedListOne(params)
+  return data
+}
+
+const RemarkBidExpert:React.FC<RemarkBidExpertProps> = (props) => {
+  const {
+    columns,
+    ref,
+  } = useSelfTable()
+
+
+  return <PageHeaderWrapper>
+    <Card>
+      <StandardTable
+        fetchTableData={params => fetchTableData(params)}
+        columns={columns}
+        currentRef={ref}
+        rowKey={'id'}
+        formilyLayouts={{
+          justify: 'space-between'
+        }}
+        formilyProps={{
+          ctx: {
+            inline: false,
+            schema: tableListSchema,
+            effects: ($, actions) => {
+              useStateFilterSearchLinkageEffect(
+                $,
+                actions,
+                'orderNo',
+                FORM_FILTER_PATH,
+              );
+            },
+            components: {
+              DateRangePickerUnix,
+              Submit
+            }
+          },
+          layouts: {
+            order: 2,
+            span: 24
+          }
+        }}
+        formilyChilds={{
+          children: <Space>
+            <Button
+              icon={<PlusCircleOutlined/>}
+              type='primary'
+              onClick={() => history.push('/memberCenter/procurementAbility/callForBids/remarkBidExpert/add')}
+            >
+              新建
+            </Button>
+            <Button>导入</Button>
+          </Space>,
+          layouts: {
+            span: 8
+          }
+        }}
+      />
+    </Card>
+  </PageHeaderWrapper>
+}
+
+RemarkBidExpert.defaultProps = {}
+
+export default RemarkBidExpert

src/pages/procurement/callForBids/remarkBidExpert/model/useSelfTable.tsx

+import React, { useRef } from 'react'
+import { Button } from 'antd'
+import StatusSwitch from '@/components/StatusSwitch'
+
+// 评标专家库 招标
+export const useSelfTable = () => {
+  const ref = useRef<any>({})
+
+//   id: 1418
+// interiorState: 2
+// invoiceNumber: null
+// isDefault: 1
+// logisticsId: null
+// memberId: null
+// memberName: "昊嘉网络有限公司"
+// memberRoleId: null
+// orderDeliveryDetailsId: null
+// orderNo: "CGRJ96524"
+// orderThe: "白搞了"
+// phone: "13615020201"
+// procurementEevaluateState: 0
+// purchaseEevaluateState: 0
+// purchaseOrderInteriorState: null
+// receiverName: "菜鸡驿站"
+// receivingTimes: null
+// shipmentBatch: 0
+// signatureLogId: null
+// sum: 2
+// sumPrice: 0
+
+  const baseBidListColumns: any[] = [
+    {
+      title: '序号',
+      align: 'center',
+      dataIndex: 'id',
+      key: 'id',
+      render: (t, r, i) => ++i
+    },
+    {
+      title: '专家',
+      align: 'center',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+    },
+    {
+      title: '所属机构',
+      align: 'center',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '职位',
+      align: 'center',
+      dataIndex: 'supplyMembersName',
+      key: 'supplyMembersName',
+    },
+    {
+      title: '专业类别',
+      align: 'center',
+      dataIndex: 'receiverName',
+      key: 'receiverName',
+    },
+    {
+      title: '资格证书',
+      align: 'center',
+      dataIndex: 'purchaseEevaluateState',
+      key: 'purchaseEevaluateState',
+    },
+    {
+      title: '专业职称',
+      align: 'center',
+      dataIndex: 'shipmentBatch',
+      key: 'shipmentBatch',
+    },
+    {
+      title: '从事年限',
+      align: 'center',
+      dataIndex: 'invoiceNumber',
+      key: 'invoiceNumber',
+    },
+    {
+      title: '专家类型',
+      align: 'center',
+      dataIndex: 'sum',
+      key: 'sum',
+    },
+    {
+      title: '状态',
+      align: 'center',
+      dataIndex: 'externalState',
+      key: 'externalState',
+      render: (text: any, record: any) => (
+        <StatusSwitch
+          handleConfirm={() => handleUpdateState(record)}
+          record={record}
+          fieldNames="isEnable"
+          expectTrueValue={true}
+        />
+      ),
+    },
+  ]
+
+  const handleUpdateState = (record) => {
+    console.log(record, 'update')
+  }
+
+
+  const secondColumns: any[] = baseBidListColumns.concat([
+    {
+      title: '操作',
+      align: 'center',
+      dataIndex: 'ctl',
+      key: 'ctl',
+      render: (text, record) => <>
+        <Button type='link'>编辑</Button>
+        <Button type='link'>删除</Button>
+      </>
+    }
+  ])
+
+  return {
+    columns: secondColumns,
+    ref,
+  }
+}

src/pages/procurement/callForBids/remarkBidExpert/schema/index.ts

+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { OrderTypeMap, PurchaseOrderInsideWorkStateTexts, PurchaseOrderOutWorkStateTexts } from '@/constants';
+
+/**
+ * 除了订单必填字段, 默认
+ */
+export const tableListSchema: ISchema = {
+  type: 'object',
+  properties: {
+    orderNo: {
+      type: 'string',
+      "x-component": 'SearchFilter',
+      'x-component-props': {
+        placeholder: '请输入订单编号',
+        align: 'flex-end',
+      },
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      'x-component': 'flex-layout',
+      'x-component-props': {
+        inline: true,
+        colStyle: {
+          marginLeft: 20
+        }
+      },
+      properties: {
+        orderThe: {
+          type: 'string',
+          'x-component-props': {
+            placeholder: '请输入订单摘要',
+          }
+        },
+        "supplyMembersName": {
+          type: 'string',
+          "x-component-props": {
+            placeholder: '请输入供应会员名称'
+          }
+        },
+        "type": {
+          type: 'string',
+          "x-component-props": {
+            placeholder: '请选择订单类型'
+          },
+          enum: Object.keys(OrderTypeMap).map(item => ({
+            label: OrderTypeMap[item],
+            value: item,
+          }))
+        },
+        "[startCreateTime,endCreateTime]": {
+          type: 'array',
+          "x-component": 'DateRangePickerUnix',
+          'x-component-props': {
+            placeholder: ['开始时间','结束时间'],
+          },
+        },
+        submit: {
+          'x-component': 'Submit',
+          'x-component-props': {
+            children: '查询',
+          },
+        },
+      },
+    },
+  }
+}