gphm_web/src/views/manage/instructionInfo/components/index.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :title="parameter.title"
    :destroy-on-close="true"
    :fullscreen="parameter.fullscreen"
    draggable
  >
    <div class="params-box">
      <el-descriptions title="">
        <div v-for="item in airResult" :key="item.code">
          <el-descriptions-item :label="getTitle(item.code)">
            <el-switch v-model="item.value" disabled active-value="1" inactive-value="0" />
          </el-descriptions-item>
        </div>
      </el-descriptions>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="airResult">
import { ref, computed, onMounted } from 'vue'
import { useAirStore } from '@/stores/modules/air'
import { getDictsApi } from '@/api/modules/system/dictData'
import { useUserStore } from '@/stores/modules/user'
import { initWebSocket } from '@/utils/websocket'
onMounted(() => {
  const userStore = useUserStore()
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
  // initWebSocket(protocol + 'localhost:8089' + '/resource/websocket')
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_API_URL + '/websocket/message/' + userStore.name)
})
let paramsDicts = ref()
getDictsApi('air_order_result').then(res => {
  paramsDicts.value = res.data
})
export interface ParameterProps {
  title: string // 标题
  fullscreen?: boolean // 是否全屏
  sortieNo?: any
  parameters?: any[]
}
const airResult = computed(() => {
  return useAirStore().airResult.params
})
const getTitle = val => {
  // console.log(val)
  // console.log('paramsDict', paramsDicts.value)

  const item = paramsDicts.value.filter(item => {
    // console.log('item.dictValue', item.dictValue)
    // console.log('item.dictValue == val', item.dictValue == val)

    return item.dictValue == val
  })
  // paramsDict
  return item[0].dictLabel
}
// dialog状态
const dialogVisible = ref(false)
const butLoading = ref(false)
// 父组件传过来的参数
const parameter = ref<ParameterProps>({
  title: '',
  fullscreen: true
})

// 取消按钮，重置表单，关闭弹框
const handleCancel = () => {
  dialogVisible.value = false
}

// 接收父组件参数
const openDialog = async (params: ParameterProps) => {
  parameter.value = { ...parameter.value, ...params }
  butLoading.value = false
  dialogVisible.value = true
}

defineExpose({
  openDialog
})
</script>
<style scoped lang="scss">
.params-box {
  min-height: 500px;
}
.dialog-footer {
  margin-bottom: 20px;
}
</style>