代码对照 ​

改造前
<script lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, provide, ref, watch } from 'vue'
import { MessageO, useHttp } from '@monorepo/vue-use'
import TheInputQuery from '../components/the-input-query.vue'
import TheDrawerRelate from '../components/the-drawer-relate/index.vue'
import vInfo from './info.vue'
import { useRelate } from './hooks'
import { BlockO } from './schema'
// drawerParams 传递 地块拾取的后的参数 控制右侧面板显示
const props = defineProps<{
  hash?: string
  drawerParams: any
}>()
const emit = defineEmits(['cmd', 'query'])


// 查询面板与业务信息
const panelToggle = ref(false)//
const visibleRight = ref(false)
provide('right-panel', {
  visible: visibleRight,
})
interface InfoEntity {
  lx: string // 前端新增
  gllx: string
  bzm: string
  bzmGgSl: string
}
interface Params {
  category: string // 前端新增
  hash: string
  bzm?: string
  bzmGgSl: string
}
// 业务信息
const infoEntity = ref<InfoEntity | undefined>()
// 弹窗参数
const params: Ref<Params | undefined> = ref()
watch(() => props.drawerParams, (val) => {
  params.value = val
})
// 业务信息 -> 关联地块建设项目
function onRelate(evt: InfoEntity) {
  params.value = {
    category: evt.gllx === '地块' ? 'dk' : 'xm',
    hash: evt.bzm,
    bzmGgSl: evt.bzmGgSl,
  }
}
// 打开右侧弹窗
function onRowInfo(evt: InfoEntity) {
  params.value = {
    category: evt.lx === '地块' ? 'dk' : 'xm',
    hash: evt.bzm,
    bzmGgSl: evt.bzmGgSl,
  }
}
const infoElementRef = ref<HTMLElement>()
const formEntity = ref<any>({ keyword: '' })
const share = { query: {} }
const queryEl = ref()
function onAutoInput(key: string, evt: any) {
  // console.log(key, evt)
  if (key === 'query') {
    // 确定按钮 发起查询
    formEntity.value = evt
    const p = { ...evt }


if (Array.isArray(evt?.slSj))
      Object.assign(p, { slsjS: evt.slSj[0], slsjE: evt.slSj[1] })


Reflect.deleteProperty(p, 'slSj')


share.query = p


queryEl.value.query(p)
  }
  else if (key === 'reset') {
    console.log(queryEl.value)
    queryEl.value.reset()
  }
}
// 联级字典
const conH = useHttp('/onemap/cgjk/cgjkywgl/findYwZdsj')
const assign = ref<any[]>([])
//
onMounted(() => {
  conH.get().then((x) => {
    assign.value = [{ prop: 'cascader', options: x }]
  })
})


const conPage = useHttp('/onemap/cgjk/cgjkywgl/findByPage')
function setInfoEntity(val: InfoEntity) {
  // 切换面板, 给面板传递数据
  panelToggle.value = true
  const gllx = val.gllx === '地块' ? 'dk' : 'xm'
  console.log(val)
  //
  infoEntity.value = { ...val, lx: gllx === 'xm' ? 'dk' : 'xm' }
}
// 路由入口
watch(() => props.hash, (val) => {
  val && conPage.get({ key: val }).then(({ records }: any) => {
    if (records.length === 1)
      setInfoEntity(records[0])


else
      MessageO.info('数据异常！')
  })
}, { immediate: true })
//
function onQueryRow({ row }: any) {
  setInfoEntity(row)
}
const relateState = ref(-1)
//
function onRealatePanel(key: string, evt: any) {
  if (key === 'clear') {
    visibleRight.value = false
  }
  else if (key === 'dk') {
    params.value = { category: key, ...evt }
  }


else if (key === 'dk-new') {
    // 启用关联
    relateState.value = 1
    //
    params.value = {
      category: 'dk-new',
      hash: '',
      bzmGgSl: infoEntity.value!.bzmGgSl,
    }
  }
}
function onMapQuery(key: string, evt: any) {
  emit('query', key, evt)
}
const conRelate = useHttp('/onemap/cgjk/cgjkywgl')
// 重新判断按钮状态 关联/取消关联
function fetchRelate({ category, bzm }: any) {
  const url = category === 'xm' ? 'findXmxxByBzm' : 'findDkinfoByBzm'


conRelate.get(url, { bzm, bzmGgSl: infoEntity.value!.bzmGgSl }).then((x) => {
    relateState.value = x.glzt
  })
}
const { onExecuteRelate } = useRelate({ infoEntity })
// 关联与取消关联
function onDrawerRelate(key, evt) {
  onExecuteRelate(key, evt, (resp: Params) => {
    //  重新拉取数据
    params.value = resp
    fetchRelate(resp)
  })
}
// 双击打开右侧弹窗
function onDrawer(key: string, evt: any) {
  if (key === 'fetch-relate') {
    // console.log('onDrawer', evt)
    // console.log(cat, params.value.category)
    const cat = infoEntity.value!.gllx === '地块' ? 'dk' : 'xm'


if (cat === evt.category) {
      fetchRelate(evt)
    }
    else {
      // 设置关联状态
      relateState.value = 2
    }
  }


else if (key === 'query') {
    infoElementRef.value!.fetch()
  }
}
const drawerRef = ref()
function onInfoClose() {
  queryEl.value.fetch(share.query)
  panelToggle.value = false
  drawerRef.value.setDialog(false)
}
defineExpose({
  setDialog(flag) {
    drawerRef.value.setDialog(flag)
  },
})
</script>

改造后
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { MessageO, useHttp } from '@monorepo/vue-use'
import TheInputQuery from '../components/the-input-query.vue'
import TheDrawerRelate from '../components/the-drawer-relate/index.vue'
import vInfo from './info.vue'
import { useDrawer, usePanel, useQuery, useRelate } from './hooks'
import { BlockO } from './schema'
// drawerParams 传递 地块拾取的后的参数 控制右侧面板显示
const props = defineProps<{
  hash?: string
  drawerParams: any
}>()
const emit = defineEmits(['cmd', 'query'])


// 查询条件
const { assign, queryEl, formEntity, queryRequest, onAutoInput, queryFetch } = useQuery()
// 面板
const { panelToggle, infoEntity, setInfoEntity, onQueryRow } = usePanel()
//
const conPage = useHttp('/onemap/cgjk/cgjkywgl/findByPage')


// 路由入口
watch(() => props.hash, (val) => {
  val && conPage.get({ key: val }).then(({ records }: any) => {
    if (records.length === 1)
      setInfoEntity(records[0])


else
      MessageO.info('数据异常！')
  })
}, { immediate: true })


// 地块查询
function onMapQuery(key: string, evt: any) {
  emit('query', key, evt)
}


// 关联取消关联
const {
  params,
  relateState,
  onRelate,
  onRowInfo,
  onRealatePanel,
} = useRelate(props, { infoEntity })
const infoElementRef = ref<HTMLElement>()


// 弹窗面板
const {
  drawerRef, setDialog,
  onDrawerRelate, onDrawer,
} = useDrawer({
  params,
  relateState,
  infoEntity,
  onQuery() {
    // 弹窗中发起的查询事件
    infoElementRef.value!.fetch()
  },
})


function onInfoClose() {
  queryFetch()
  panelToggle.value = false
  setDialog(false)
}


defineExpose({ setDialog })
</script>