代码对照 ​

v1  2023-11-9
<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>

v2 2024-1-3
<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 type { InfoEntity } from './type'
import { useDrawer, usePanel, useQuery, useRelate, useResult } from './hooks/index'
import { BlockO } from './schema'
const props = defineProps<{
  has: string
  hash?: string
  drawerParams: any
}>()
//
const emit = defineEmits(['cmd', 'query', 'sidebar'])
//
const hasInRef = ref('edit')
//
watch(() => props.has, (val) => {
  hasInRef.value = val
}, { immediate: true })
// 查询条件
// assign 联级字典
const { assign, queryEl, formEntity, queryRequest, onAutoInput, queryFetch } = useQuery()
/**
 * 切换面板 查询条件/信息显示
 */
const { panelToggle, infoEntity, setInfoEntity, onQueryRow } = usePanel()
//
const conPage = useHttp('/onemap/cgjk/cgjkywgl/getBySlh')
//
let hash = ''
// 获取
function fetchInfoEntity(slh) {
  hash = slh
  conPage.get({ slh }).then((data: any) => {
    if (data?.slh) {
      // 切换面板, 给面板传递数据
      panelToggle.value = true
      setInfoEntity(data)
    } else {
      MessageO.error('数据异常，请联系管理员！')
      //
      emit('sidebar', '')
    }
  })
}
// 路由入口
watch(() => props.hash, (slh) => {
  slh && fetchInfoEntity(slh)
}, { immediate: true })
// 地块拾取
function onMapQuery(key: string, evt: any) {
  emit('query', key, evt)
}
// 显示地块拾取查询结果面板
const {
  params, onResult, onResultCancel,
  executeByDrawerParams, isResult, resultEntity,
} = useResult(props, { infoEntity })
// 监听弹窗的参数
watch(() => props.drawerParams, executeByDrawerParams)
// 关联取消关联
const { relateState, onRelate, onRowInfo, onRealatePanel } = useRelate({ params, infoEntity })
// 监听 infoEntity 是否赋值，浅响应
watch(infoEntity, (val: InfoEntity) => {
  if (!val)
    return
  hash = val.slh
  const list = ['已关联', 0]
  list.includes(val?.glzt) && onRelate(val)
}, { immediate: true })
//
const infoElementRef = ref<any>()
/**
 * 右侧弹窗：打开、关联取消关联
 */
const { drawerRef, setDialog, onDrawerRelate, onDrawer } = useDrawer({
  params,
  relateState,
  infoEntity,
  onQuery() {
    // 弹窗中发起的查询事件
    infoElementRef.value!.fetch()
  },
  fetchInfoEntity() {
    fetchInfoEntity(hash)
  },
})
//
function onInfoClose() {
  queryFetch()
  panelToggle.value = false
  setDialog(false)
  hasInRef.value = 'edit'
}
// 暴露方法
defineExpose({ setDialog })
</script>