tjy-uniapp/src/pages/pendingVerification/components/QueryView.vue

<template>
  <view class="query-view">
    <view class="query-content" :style="contentStyle">
      <view class="query-left">
        <InputCom
          ref="orderNoRef"
          title="任务单号："
          type="orderNo"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0 }"
          @change="handleChange('orderNo', $event)"
        />
        <CheckNatureCom
          ref="checkTypeRef"
          title="检验性质："
          type="checkType"
          :equip-type="equipType"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0 }"
          @change="handleChange('checkType', $event)"
        />
        <CheckDateCom
          ref="checkDateRef"
          title="检验时间："
          type="checkDate"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0 }"
          @change="handleChange('checkDate', $event)"
        />
        <CellCom
          ref="mainCheckerStrIdsRef"
          title="主检人："
          type="mainCheckerStrIds"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0, marginBottom: 0 }"
          @click="showUserListPopup('主检人', 'mainCheckerStrIds')"
        />
        <CellCom
          ref="managerIdRef"
          title="项目负责人："
          type="managerId"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0, marginBottom: 0 }"
          @click="showUserListPopup('项目负责人', 'managerId')"
        />
      </view>

      <view class="query-right">
        <CellCom
          ref="queryTypeRef"
          :title="queryTypeTitle"
          type="queryType"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0 }"
          :default-value="defaultValue"
          @click="showUserListPopup(queryTypeTitle, 'queryType')"
        />
        <InputCom
          v-if="equipType === EquipmentType.BOILER || equipType === EquipmentType.CONTAINER"
          ref="equipCodeRef"
          title="设备注册代码："
          type="equipCode"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0 }"
          @change="handleChange('equipCode', $event)"
        />
        <InputCom
          v-if="equipType === EquipmentType.PIPE"
          ref="projectNoRef"
          title="工程号："
          type="projectNo"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0 }"
          @change="handleChange('projectNo', $event)"
        />
        <InputCom
          ref="unitNameRef"
          title="单位名称："
          type="unitName"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0 }"
          @change="handleChange('unitName', $event)"
        />
        <CellCom
          ref="checkUserStrIdsRef"
          title="检验员："
          type="checkUserStrIds"
          :text-style="{ width: '100px' }"
          :style="{ marginLeft: 0, marginBottom: 0 }"
          @click="showUserListPopup('检验员', 'checkUserStrIds')"
        />

        <view class="btn-group">
          <button class="btn reset-btn" @click="reset">重置</button>
          <button class="btn query-btn" @click="query">查询</button>
        </view>
      </view>
    </view>

    <view class="query-toggle" @click="toggleFilter">
      <text class="query-toggle-text">查询</text>
      <image
        class="arrow-icon"
        :src="iconMap.ArrowDown"
        :class="{ 'arrow-rotate': isOpen }"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { useUserStore } from '@/store/user'
import iconMap from '@/utils/imagesMap'
import { EquipmentType } from '@/utils/dictMap'
import { InputCom } from '@/components/QueryViewItem'
import { CheckDateCom } from '@/components/QueryViewItem'
import { CheckNatureCom } from '@/components/QueryViewItem'
import { CellCom } from '@/components/QueryViewItem'

interface Props {
  equipType: EquipmentType
  queryType: { value: string; id: string }
}

const props = defineProps<Props>()

const emit = defineEmits<{
  queryAction: [params: Record<string, any>]
}>()

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const isOpen = ref(false)
const params = reactive<Record<string, any>>({
  orderNo: '',
  checkType: '',
  mainCheckerStrIds: '',
  queryType: '',
  checkDate: '',
  checkUserStrIds: '',
  equipCode: '',
  projectNo: '',
  unitName: '',
  managerId: '',
})

const defaultValue = computed(() => userInfo.value?.nickname || '')

const queryTypeTitle = computed(() => {
  return props.queryType.value + '：'
})

const contentStyle = computed(() => ({
  height: isOpen.value ? '220px' : '0',
  opacity: isOpen.value ? 1 : 0,
  overflow: 'hidden',
  transition: 'all 0.3s',
}))

const orderNoRef = ref<any>(null)
const checkTypeRef = ref<any>(null)
const checkDateRef = ref<any>(null)
const mainCheckerStrIdsRef = ref<any>(null)
const managerIdRef = ref<any>(null)
const queryTypeRef = ref<any>(null)
const equipCodeRef = ref<any>(null)
const projectNoRef = ref<any>(null)
const unitNameRef = ref<any>(null)
const checkUserStrIdsRef = ref<any>(null)

const toggleFilter = () => {
  isOpen.value = !isOpen.value
}

const handleChange = (propName: string, value: any) => {
  params[propName] = value
}

const reset = () => {
  orderNoRef.value?.reset()
  checkTypeRef.value?.reset()
  checkDateRef.value?.reset()
  mainCheckerStrIdsRef.value?.reset()
  managerIdRef.value?.reset()
  queryTypeRef.value?.reset()
  equipCodeRef.value?.reset()
  projectNoRef.value?.reset()
  unitNameRef.value?.reset()
  checkUserStrIdsRef.value?.reset()

  Object.assign(params, {
    orderNo: '',
    checkType: '',
    mainCheckerStrIds: '',
    queryType: '',
    checkDate: '',
    checkUserStrIds: '',
    equipCode: '',
    projectNo: '',
    unitName: '',
    managerId: '',
  })

  emit('queryAction', params)
}

const query = () => {
  Object.assign(params, {
    checkType: checkTypeRef.value?.inputContent,
    checkDate: checkDateRef.value?.inputContent,
    queryType: userInfo.value?.id || '',
  })
  emit('queryAction', params)
}

const showUserListPopup = (title: string, type: string) => {
  console.log('显示用户列表弹窗:', title, type)
}
</script>

<style lang="scss" scoped>
.query-view {
  width: 100%;
  background-color: #fff;
}

.query-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 15px;
}

.query-left,
.query-right {
  flex: 1;
  padding: 15px 0;
}

.query-right {
  margin-left: 10px;
}

.btn-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 10px;
  padding: 0 10%;
  gap: 10%;
}

.btn {
  padding: 0 15px;
  height: 30px;
  margin-left: 5px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  border: none;
}

.reset-btn {
  background-color: #fff;
  color: rgb(47, 142, 255);
  border: 1px solid rgb(47, 142, 255);
}

.query-btn {
  background-color: rgb(47, 142, 255);
  color: rgb(222, 238, 255);
}

.query-toggle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  border-top: 1px solid rgba(187, 187, 187, 0.8);
}

.query-toggle-text {
  color: rgb(51, 51, 51);
  font-size: 16px;
}

.arrow-icon {
  width: 21px;
  height: 21px;
  transition: transform 0.3s;
}

.arrow-rotate {
  transform: rotate(180deg);
}
</style>