企事业单位 页面修改

policeManagement/package.json

@@ -28,8 +28,9 @@
     "@amap/amap-jsapi-types": "^0.0.15",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.5.1",
+    "@types/react": "^18.3.12",
     "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.10",

policeManagement/src/router/staticRouters.ts

@@ -81,6 +81,10 @@ export const staticRouter: RouteRecordRaw[] =
                         keepalive: true
                     },
                     component: () => import('@/views/query/publicUnit.vue')
+                    // component: () => import('@/views/query/index.tsx')
+                    // component: () => import('@/views/query/EnterprisesUnit')
+
+
                 },
                 {
                     path: 'assessment-record',  // 这里使用相对路径而不是 '/register'

policeManagement/src/views/query/index.tsx

@@ -1,331 +0,0 @@
-import { TableProMaxProps, TableProMaxSlots } from '@/types/components/table'
-import { EnterprisesUnitPagerQueryParams, EnterprisesUnitPagerVo, EnterprisesUnitSaveOrUpdateParams, PoliceUnitPagerVo } from '@/types/views/unitManage/police/policeUnit.ts'
-import { ref } from 'vue'
-import { FormExpose } from 'ant-design-vue/es/form/Form'
-import { ComponentExposed } from 'vue-component-type-helpers'
-import MapContainer from '@/components/aMap/MapContainer.vue'
-import { FormProMaxItemOptions } from '@/types/components/form'
-import { dictSelectNodes } from '@/config/dict.ts'
-import { AutoComplete, Button, Input, message, Modal, Space } from 'ant-design-vue'
-import api from '@/axios'
-import TableProMax from '@/components/table/TableProMax.vue'
-import { deleteDataModal } from '@/components/tsx/ModalPro.tsx'
-import { PageParams } from '@/types/hooks/useTableProMax.ts'
-import FormProMax from '@/components/form/FormProMax.vue'
-import { debounce } from 'lodash-es'
-
-type _TableProps = TableProMaxProps<EnterprisesUnitPagerVo, EnterprisesUnitPagerQueryParams>
-type _FormType = EnterprisesUnitSaveOrUpdateParams & {
-  contactPersonInfoName?: string
-  contactPersonInfoTelephone?: string
-}
-const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
-  const _formRef = ref<FormExpose>(null)
-  const _mapRef = ref<ComponentExposed<typeof MapContainer>>(null)
-  const _formParams = ref<_FormType>({ ...params })
-
-  let city = ''
-  const initMarker = (map: AMap.Map) => {
-    //添加maker点 设置point
-    const maker = new AMap.Marker({
-      position: _formParams.value.point,
-      draggable: true,
-    })
-    maker.on('dragend', ({ lnglat }) => {
-      _formParams.value.point = lnglat
-    })
-    map.clearMap()
-    map.add(maker)
-    map.setFitView()
-  }
-  const autoAddress = ref<SelectNodeVo<string>[]>([])
-
-  const _formOptions = ref<FormProMaxItemOptions<_FormType>>({
-    name: {
-      type: 'custom',
-      label: '单位名称',
-      required: true,
-      customRender: () => {
-        return (
-          // AutoComplete 自动完成 组件
-          <AutoComplete
-            v-model:value={_formParams.value.name}
-            options={autoAddress.value}
-            onSelect={(_, options: SelectNodeVo<string>) => {
-              _formParams.value.point = options.extData?.location
-              _formParams.value.address = options.extData?.address
-              initMarker(_mapRef.value?.mapInstance)
-            }}
-            onSearch={debounce((val: string) => {
-              console.log('onSearch___________________', val)
-
-              //@ts-ignore
-              const auto = new AMap.AutoComplete({
-                city: city,
-                // input: 'tipinput',
-                citylimit: true,
-              })
-              auto.search(val, (status, result) => {
-                console.log('🚀 ~ auto.search ~ status, result:', status, result)
-                if (status === 'complete') {
-                  // 生成组件需要数据
-                  autoAddress.value = result.tips?.map((e) => {
-                    return {
-                      value: e.name,
-                      label: e.name,
-                      extData: {
-                        district: e.district,
-                        address: e.address,
-                        location: e.location,
-                      },
-                    } as SelectNodeVo<string>
-                  })
-                } else {
-                  autoAddress.value = []
-                }
-              })
-            }, 300)}
-            v-slots={{
-              option: (item: SelectNodeVo<string>) => {
-                return (
-                  <div>
-                    <p>{item.label}</p>
-                    <p style={{ color: '#9a9c9d' }}>
-                      {item.extData?.district} {item.extData?.address}
-                    </p>
-                  </div>
-                )
-              },
-            }}
-          >
-            <Input placeholder='请输入单位名称' />
-          </AutoComplete>
-        )
-      },
-    },
-    type: {
-      type: 'select',
-      label: '单位类型',
-      required: true,
-      options: dictSelectNodes('EnterprisesUnitType'),
-    },
-    administrativeDivisionCodes: {
-      type: 'administrativeDivisionTree',
-      label: '行政区划',
-      required: true,
-      componentsProps: {
-        displayRender: ({ labels }): string => {
-          city = labels[1]
-          return labels.join(' / ')
-        },
-      },
-    },
-    address: {
-      type: 'inputTextArea',
-      label: '详细地址',
-    },
-    map: {
-      type: 'custom',
-      label: '经纬度',
-      customRender: () => (
-        <MapContainer
-          ref={_mapRef}
-          plugins={['AMap.AutoComplete', 'AMap.PlaceSearch']}
-          style={{ width: '100%', height: '300px', position: 'relative' }}
-          initCallback={(map) => {
-            const contextMenu = new AMap.ContextMenu()
-            contextMenu.addItem(
-              '标记',
-              () => {
-                const { lng, lat } = contextMenu.getPosition()
-                _formParams.value.point = [lng, lat]
-                initMarker(map)
-              },
-              0
-            )
-            map.on('rightclick', ({ lnglat }) => {
-              contextMenu.open(map, lnglat)
-            })
-            if (_formParams.value.point) {
-              initMarker(map)
-            }
-          }}
-        ></MapContainer>
-      ),
-    },
-    contactPersonInfoName: {
-      type: 'input',
-      label: '联系人名称',
-    },
-    contactPersonInfoTelephone: {
-      type: 'input',
-      label: '联系人电话',
-    },
-    remark: {
-      type: 'inputTextArea',
-      label: '备注',
-    },
-  })
-  Modal.confirm({
-    title: params.snowFlakeId ? `【${params.name}】 信息编辑` : '新增企事业单位',
-    width: 600,
-    icon: ' ',
-    centered: true,
-    content: () => <FormProMax ref={_formRef} v-model:value={_formParams.value} formItemOptions={_formOptions.value} />,
-    onOk: async () => {
-      await _formRef.value?.validate()
-      const resp = await api.post('/enterprisesUnit/saveOrUpdate', {
-        ..._formParams.value,
-        contactPersonInfo: {
-          name: _formParams.value.contactPersonInfoName,
-          telephone: _formParams.value.contactPersonInfoTelephone,
-        },
-      })
-      message.success(resp.message)
-      callback && callback()
-    },
-  })
-}
-
-export const showEnterprisesUnit = (policeUnitPagerVo: PoliceUnitPagerVo) => {
-  const _tableRef = ref<ComponentExposed<typeof TableProMax>>(null)
-  const _columns: _TableProps['columns'] = [
-    {
-      dataIndex: 'name',
-      title: '名称',
-    },
-    {
-      dataIndex: 'type',
-      title: '类型',
-      customRender: ({ text }) => text?.label,
-    },
-    {
-      dataIndex: 'contactPersonInfo',
-      title: '联系人',
-      ellipsis: true,
-      customRender: ({ text }) => text?.name + '/' + text.telephone,
-    },
-    {
-      dataIndex: 'province',
-      title: '行政区划',
-      ellipsis: true,
-      customRender: ({ record }) => [record.provinceName, record.cityName, record.districtsName, record.streetName].filter(Boolean).join('/'),
-    },
-    {
-      dataIndex: 'address',
-      title: '详细地址',
-      ellipsis: true,
-    },
-    {
-      dataIndex: 'remark',
-      title: '备注',
-    },
-    {
-      dataIndex: 'createTime',
-      title: '创建时间',
-    },
-    {
-      dataIndex: 'opt',
-      title: '操作',
-      customRender: ({ record }) => (
-        <Space>
-          <Button
-            class='btn-warn'
-            onClick={() =>
-              saveOrUpdateEnterprisesUnit(
-                {
-                  snowFlakeId: record.snowFlakeId,
-                  policeUnitId: record.policeUnitId,
-                  name: record.name,
-                  type: record.type.value,
-                  administrativeDivisionCodes: [record.province, record.city, record.districts, record.street].filter(Boolean),
-                  address: record.address,
-                  point: record.point,
-                  contactPersonInfoName: record.contactPersonInfo?.name,
-                  contactPersonInfoTelephone: record.contactPersonInfo?.telephone,
-                  remark: record.remark,
-                },
-                _tableRef.value?.requestGetTableData
-              )
-            }
-          >
-            编辑
-          </Button>
-          <Button
-            class='btn-danger'
-            onClick={() =>
-              deleteDataModal(record.name, async () => {
-                const resp = await api.delete('/enterprisesUnit/deleteById', {
-                  enterprisesUnitId: record.snowFlakeId,
-                })
-                message.success(resp.message)
-                await _tableRef.value?.requestGetTableData()
-              })
-            }
-          >
-            删除
-          </Button>
-        </Space>
-      ),
-    },
-  ]
-  const _reqApi: _TableProps['requestApi'] = (params) => {
-    ;(params as PageParams<EnterprisesUnitPagerQueryParams>).params.policeUnitId = policeUnitPagerVo.snowFlakeId
-    return api.post('/enterprisesUnit/pager', params)
-  }
-  Modal.info({
-    title: `【${policeUnitPagerVo.name}】 管辖企事业单位`,
-    width: '80%',
-    centered: true,
-    maskClosable: true,
-    content: () => (
-      <TableProMax
-        ref={_tableRef}
-        size='small'
-        columns={_columns}
-        requestApi={_reqApi}
-        searchFormOptions={{
-          name: {
-            type: 'input',
-            label: '单位名称',
-          },
-          address: {
-            type: 'input',
-            label: '地址',
-          },
-          remark: {
-            type: 'input',
-            label: '备注',
-          },
-        }}
-        v-slots={
-          {
-            tableHeader: (_) => {
-              return (
-                <Space>
-                  <Button
-                    class='btn-success'
-                    onClick={() =>
-                      saveOrUpdateEnterprisesUnit(
-                        {
-                          name: undefined,
-                          type: 'party_government',
-                          policeUnitId: policeUnitPagerVo.snowFlakeId,
-                          administrativeDivisionCodes: [policeUnitPagerVo.province, policeUnitPagerVo.city, policeUnitPagerVo.districts, policeUnitPagerVo.street].filter(Boolean),
-                        },
-                        _tableRef.value?.requestGetTableData
-                      )
-                    }
-                  >
-                    新增
-                  </Button>
-                  <Button disabled>导入</Button>
-                </Space>
-              )
-            },
-          } as TableProMaxSlots<PoliceUnitPagerVo>
-        }
-      />
-    ),
-  })
-}

policeManagement/src/views/query/publicUnit.vue

@@ -1,46 +1,46 @@
 <template>
   <div>
-    <!-- 企事业单位 -->
     <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions" :scroll="{ x }">
-      <!-- <template #tableHeader>
+      <template #tableHeader>
         <a-space>
-          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
+          <a-button type="primary" @click="saveOrUpdateEnterprisesUnit">新增企事业单位</a-button>
         </a-space>
-      </template> -->
+      </template>
     </TableProMax>
-    <a-modal v-model:open="visible" :title="title" @ok="submit" @cancel="closeModal">
-      <!-- <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions" /> -->
-    </a-modal>
   </div>
 </template>
 
 <script setup lang="tsx">
-// import { storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
+import { deleteDataModal } from '@/components/tsx/ModalPro.tsx'
+import { EnterprisesUnitSaveOrUpdateParams } from '@/types/views/unitManage/police/policeUnit.ts'
+import MapContainer from '@/components/aMap/MapContainer.vue'
+import { AutoComplete, Button, Input, message, Modal, Space } from 'ant-design-vue'
+import { debounce } from 'lodash-es'
+import FormProMax from '@/components/form/FormProMax.vue'
 import api from '@/axios'
 import { ref, reactive } from 'vue'
 import TableProMax from '@/components/table/TableProMax.vue'
 import { TableProMaxProps } from '@/types/components/table/index.ts'
 import { ComponentExposed } from 'vue-component-type-helpers'
 import { dictSelectNodes } from '@/config/dict.ts'
-import { publicUnitPagerQueryParams, FromItem } from '@/types/views/publicUnit.ts'
+import { publicUnitPagerQueryParams } from '@/types/views/publicUnit.ts'
-// import FormProMax from '@/components/form/FormProMax.vue'
 import { FormProMaxItemOptions } from '@/types/components/form//index.ts'
 import { FormExpose } from 'ant-design-vue/es/form/Form'
-import { showEnterprisesUnit } from './index'
+type _FormType = EnterprisesUnitSaveOrUpdateParams & {
-const formRef = ref<FormExpose>(null)
+  contactPersonInfoName?: string
+  contactPersonInfoTelephone?: string
+}
 type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
-const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
-const reqApi: TableProps['requestApi'] = (params) => api.post('/enterprisesUnit/pager', params) //分页
 
+// const reqApi: TableProps['requestApi'] = (params) => api.post('/enterprisesUnit/pager', params) //分页
+const reqApi: TableProps['requestApi'] = (params) => api.post('/eu/pager', params) //分页
+const tableRef = ref<ComponentExposed<typeof TableProMax>>(null)
 const columns: TableProps['columns'] = [
   {
     dataIndex: 'name',
     title: '单位名称',
   },
-  // {
+
-  //   dataIndex: 'code',
-  //   title: '单位代码',
-  // },
   {
     dataIndex: 'provinceName',
     title: '行政区划',
@@ -49,19 +49,6 @@ const columns: TableProps['columns'] = [
     },
   },
 
-  // {
-  //   dataIndex: 'isEnable',
-  //   title: '是否启用',
-  //   customRender: ({ text }) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
-  //   width: 150,
-  // },
-  // {
-  //   dataIndex: 'checkStatus',
-  //   title: '是否审核',
-  //   customRender: ({ record }) => {
-  //     return record.checkStatus?.extData?.color === 'success' ? <a-tag color='green'>{record?.checkStatus?.label}</a-tag> : <a-tag color='#f50'>{record?.checkStatus?.label}</a-tag>
-  //   },
-  // },
   {
     dataIndex: 'address',
     title: '详细地址',
@@ -92,45 +79,225 @@ const columns: TableProps['columns'] = [
   {
     dataIndex: 'opt',
     title: '操作',
-    customRender({ record }) {
+    customRender: ({ record }) => (
-      return (
+      <Space>
-        <a-space>
+        <Button
-          <a-button class='btn-success' onClick={() => showEnterprisesUnit(record)}>
+          class='btn-warn'
-            企事业单位
+          onClick={() =>
-          </a-button>
+            saveOrUpdateEnterprisesUnit(
-        </a-space>
+              {
-      )
+                snowFlakeId: record.snowFlakeId,
+                policeUnitId: record.policeUnitId,
+                name: record.name,
+                type: record.type.value,
+                administrativeDivisionCodes: [record.province, record.city, record.districts, record.street].filter(Boolean),
+                address: record.address,
+                point: record.point,
+                contactPersonInfoName: record.contactPersonInfo?.name,
+                contactPersonInfoTelephone: record.contactPersonInfo?.telephone,
+                remark: record.remark,
               },
+              tableRef.value?.requestGetTableData
+            )
+          }
+        >
+          编辑
+        </Button>
+        <Button
+          class='btn-danger'
+          onClick={() =>
+            deleteDataModal(record.name, async () => {
+              // const resp = await api.delete('/enterprisesUnit/deleteById', {
+              const resp = await api.delete('/eu/del_id', {
+                enterprisesUnitId: record.snowFlakeId,
+              })
+              message.success(resp.message)
+              await tableRef.value?.requestGetTableData()
+            })
+          }
+        >
+          删除
+        </Button>
+      </Space>
+    ),
   },
 ]
 const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
-const visible = ref(false)
+
-const title = ref('新增用户')
+const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
-const addUserManagement = () => {
+  const _formRef = ref<FormExpose>(null)
-  visible.value = true
+  const _mapRef = ref<ComponentExposed<typeof MapContainer>>(null)
-  title.value = ''
+  const _formParams = ref<_FormType>({ ...params })
+
+  let city = ''
+  const initMarker = (map: AMap.Map) => {
+    //添加maker点 设置point
+    const maker = new AMap.Marker({
+      position: _formParams.value.point,
+      draggable: true,
+    })
+    maker.on('dragend', ({ lnglat }) => {
+      _formParams.value.point = lnglat
+    })
+    map.clearMap()
+    map.add(maker)
+    map.setFitView()
+  }
+  const autoAddress = ref<SelectNodeVo<string>[]>([])
+
+  const _formOptions = ref<FormProMaxItemOptions<_FormType>>({
+    name: {
+      type: 'custom',
+      label: '单位名称',
+      required: true,
+      customRender: () => {
+        return (
+          // AutoComplete 自动完成 组件
+          <AutoComplete
+            v-model:value={_formParams.value.name}
+            options={autoAddress.value}
+            onSelect={(_, options: SelectNodeVo<string>) => {
+              _formParams.value.point = options.extData?.location
+              _formParams.value.address = options.extData?.address
+              initMarker(_mapRef.value?.mapInstance)
+            }}
+            onSearch={debounce((val: string) => {
+              console.log('onSearch___________________', val)
+
+              //@ts-ignore
+              const auto = new AMap.AutoComplete({
+                city: city,
+                // input: 'tipinput',
+                citylimit: true,
+              })
+              auto.search(val, (status, result) => {
+                console.log('🚀 ~ auto.search ~ status, result:', status, result)
+                if (status === 'complete') {
+                  // 生成组件需要数据
+                  autoAddress.value = result.tips?.map((e) => {
+                    return {
+                      value: e.name,
+                      label: e.name,
+                      extData: {
+                        district: e.district,
+                        address: e.address,
+                        location: e.location,
+                      },
+                    } as SelectNodeVo<string>
+                  })
+                } else {
+                  autoAddress.value = []
+                }
+              })
+            }, 300)}
+            v-slots={{
+              option: (item: SelectNodeVo<string>) => {
+                return (
+                  <div>
+                    <p>{item.label}</p>
+                    <p style={{ color: '#9a9c9d' }}>
+                      {item.extData?.district} {item.extData?.address}
+                    </p>
+                  </div>
+                )
+              },
+            }}
+          >
+            <Input placeholder='请输入单位名称' />
+          </AutoComplete>
+        )
+      },
+    },
+    type: {
+      type: 'select',
+      label: '单位类型',
+      required: true,
+      // @ts-ignore
+      options: dictSelectNodes('EnterprisesUnitType'),
+    },
+    administrativeDivisionCodes: {
+      type: 'administrativeDivisionTree',
+      label: '行政区划',
+      required: true,
+      componentsProps: {
+        // @ts-ignore
+        displayRender: ({ labels }): string => {
+          city = labels[1]
+          return labels.join(' / ')
+        },
+      },
+    },
+    address: {
+      type: 'inputTextArea',
+      label: '详细地址',
+    },
+    map: {
+      type: 'custom',
+      label: '经纬度',
+      customRender: () => (
+        <MapContainer
+          ref={_mapRef}
+          plugins={['AMap.AutoComplete', 'AMap.PlaceSearch']}
+          style={{ width: '100%', height: '300px', position: 'relative' }}
+          initCallback={(map) => {
+            const contextMenu = new AMap.ContextMenu()
+            contextMenu.addItem(
+              '标记',
+              () => {
+                const { lng, lat } = contextMenu.getPosition()
+                _formParams.value.point = [lng, lat]
+                initMarker(map)
+              },
+              0
+            )
+            map.on('rightclick', ({ lnglat }) => {
+              contextMenu.open(map, lnglat)
+            })
+            if (_formParams.value.point) {
+              initMarker(map)
+            }
+          }}
+        ></MapContainer>
+      ),
+    },
+    contactPersonInfoName: {
+      type: 'input',
+      label: '联系人名称',
+    },
+    contactPersonInfoTelephone: {
+      type: 'input',
+      label: '联系人电话',
+    },
+    remark: {
+      type: 'inputTextArea',
+      label: '备注',
+    },
+  })
+  Modal.confirm({
+    title: params.snowFlakeId ? `【${params.name}】 信息编辑` : '新增企事业单位',
+    width: 600,
+    icon: ' ',
+    centered: true,
+    content: () => <FormProMax ref={_formRef} v-model:value={_formParams.value} formItemOptions={_formOptions.value} />,
+    onOk: async () => {
+      await _formRef.value?.validate()
+      // const resp = await api.post('/enterprisesUnit/saveOrUpdate', {
+      const resp = await api.post('/eu/add_upd', {
+        ..._formParams.value,
+        contactPersonInfo: {
+          name: _formParams.value.contactPersonInfoName,
+          telephone: _formParams.value.contactPersonInfoTelephone,
+        },
+      })
+      message.success(resp.message)
+      await tableRef.value?.requestGetTableData()
+
+      // reqApi(params)
+      callback && callback()
+    },
+  })
 }
 
-// const getTree = async () => {
-//   // 先尝试从缓存中加载数据
-//   const cachedData = await loadTreeFromCache()
-//   if (cachedData) {
-//     console.log('未发请求')
-//     // 如果缓存存在，直接使用缓存数据
-//     return cachedData
-//   } else {
-//     console.log('发起了请求')
-//     // 如果缓存不存在，发起 API 请求
-//     const res = await api.get<any>('/common/administrativeDivisionTree')
-//     await storeTreeData(res.data)
-//     return res.data
-//   }
-// }
-// const loadOptions = async () => {
-//   const treeData = await getTree()
-//   searchFormOptions.treeSelect.options = treeData
-// }
-// loadOptions()
 const searchFormOptions = reactive<TableProps['searchFormOptions']>({
   name: {
     type: 'input',
@@ -145,65 +312,5 @@ const searchFormOptions = reactive<TableProps['searchFormOptions']>({
     type: 'input',
     label: '手机号',
   },
-  // isEnable: {
-  //   type: 'select',
-  //   label: '是否启用',
-  //   options: [
-  //     {
-  //       value: null,
-  //       label: '全部',
-  //     },
-  //     ...dictSelectNodes('IsEnable'),
-  //   ],
-  // },
-})
-
-const formParams = ref<{
-  snowFlakeId?: string
-  name: string
-  sex: number
-  telephone: string
-  isEnable: any
-  remark?: string
-}>({
-  name: '',
-  sex: 0,
-  telephone: '',
-  isEnable: 0,
-})
-
-const submit = async () => {
-  // await formRef.value.validate()
-}
-const closeModal = () => {
-  visible.value = false
-}
-const formItemOptions = ref<FormProMaxItemOptions<FromItem>>({
-  name: {
-    type: 'input',
-    label: '姓名',
-    required: true,
-  },
-  sex: {
-    type: 'radioGroup',
-    label: '性别',
-    options: dictSelectNodes('Sex'),
-    required: true,
-  },
-  telephone: {
-    type: 'input',
-    label: '手机号',
-    required: true,
-  },
-  isEnable: {
-    type: 'radioGroup',
-    label: '启用状态',
-    options: dictSelectNodes('IsEnable'),
-    required: true,
-  },
-  remark: {
-    type: 'inputTextArea',
-    label: '备注',
-  },
 })
 </script>