A8000/src/pages/Index/Settings/Lis.vue

<template>
  <div v-if="!lisVisible" class="lis-setting">
    <div class="setting-item">
      <span class="label">类型</span>
      <div class="options">
        {{ LISTypeMap[lisSettings && lisSettings.lisType || ''] }}
      </div>
    </div>

    <div class="setting-item">
      <span class="label">自动上报</span>
      <div class="options">
        {{ lisSettings?.lisAutoExport ? '开启' : '关闭' }}
      </div>
    </div>

    <div class="setting-item">
      <span class="label">协议</span>
      <div class="options">
        Boditech
      </div>
    </div>
    <div class="setting-item">
      <span class="label">接口</span>
      <div class="options">
        {{ LISInterfaceMap[lisSettings && lisSettings.lisIf || ''] }}
      </div>
    </div>
    <div
      v-if="lisSettings && lisSettings.lisIf === 'NETWORK'"
      class="setting-item"
    >
      <span class="label">Host's IP</span>
      <div class="options">
        {{ lisSettings.lisNetIp }}
      </div>
    </div>
    <div
      v-if="lisSettings && lisSettings.lisIf === 'NETWORK'"
      class="setting-item"
    >
      <span class="label">Host's Port</span>
      <div class="options">
        {{ lisSettings.LISNetPortStr }}
      </div>
    </div>
    <div
      v-if="lisSettings && lisSettings.lisIf === 'SERIAL'"
      class="setting-item"
    >
      <span class="label">传输速度</span>
      <div class="options">
        {{ LISSerialBaudrateMap[lisSettings && lisSettings.lisSerialBaudrate || '']}}
      </div>
    </div>
    <div class="lis-btn">
      <button class="edit-lis"  @click="onEditList" >
        编辑LIS
      </button>
    </div>
  </div>
  <EditLis v-else @save-success="saveSuccess" @close="onCloseDialog"/>
  <!-- 键盘 -->
  <transition name="slide-up">
    <div class="keyboard" v-if="keyboardVisible">
      <SoftKeyboard
        ref="softKeyboardRef"
        v-model="inputValue"
        :is-visible="keyboardVisible"
        :keyboard-type="keyboardType"
        @update-keyboard-visible="(visible) => keyboardVisible = visible"
        @confirm="()=>{}"
        @close="keyboardVisible = false"
      />
    </div>
  </transition>
</template>

<script setup lang="ts">
import {
  getLISSetting,
  LISInterfaceMap,
  LISSerialBaudrateMap,
  LISSettings,
  LISTypeMap,
} from '@/services'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import SoftKeyboard from '@/components/SoftKeyboard.vue'
import EditLis from '@/pages/Index/Settings/EditLis.vue'

const inputValue = ref('')
const keyboardType = ref<'text' | 'number'>('number')
const softKeyboardRef = ref()
const lisVisible = ref(false)
const lisSettings = ref<(LISSettings & { LISNetPortStr: string, lisAutoExport: boolean }) | undefined>(
  undefined,
)
const getLisSetting = async () => {
  const res = await getLISSetting()
  if (res && res.success) {
    lisSettings.value = {
      ...res.data,
      LISNetPortStr: res.data.lisNetPort.toString(),
    }

  }
}


onMounted(() => {
  console.log()
  getLisSetting()
})
// 键盘相关状态
const keyboardVisible = ref(false)
const currentInputValue = ref('')
const currentInputField = ref<'ip' | 'port' | ''>('')

// 处理键盘输入
const handleKeyboardInput = (value: string) => {
  if (!inputValue.value) return
  // 更新当前输入值
  inputValue.value = value
  // 更新对应字段的值
  if (currentInputField.value === 'ip') {
    lisSettings.value!.lisNetIp = value
  } else {
    lisSettings.value!.LISNetPortStr = value
  }
}


watch(inputValue, (newVal: string) => {
  if(newVal){
    handleKeyboardInput(newVal)
  }
})

// 隐藏键盘
const hideKeyboard = () => {
  keyboardVisible.value = false
  currentInputField.value = ''
  currentInputValue.value = ''
}

const onEditList = () => {
  lisVisible.value = true
}

const saveSuccess = () => {
  onCloseDialog()
  getLisSetting()
}


const onCloseDialog = () => {
  lisVisible.value = false
}

// 在组件卸载时清理状态
onUnmounted(() => {
  hideKeyboard()
})
</script>

<style lang="less" scoped>
.lis-setting {
  background-color: #f5f7fa;
  width: 100%;
  height: 87vh;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .setting-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 4rem;
    .label {
      font-size: 28px;
      font-weight: 500;
      color: #303133;
    }

    input {
      padding: 8px;
      border: 1px solid #ccc;
      font-size: 30px;
      transition: box-shadow 0.2s ease;
      border-radius: 10px;
    }

    .options {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 1.75rem;
      button {
        min-width: 120px;
        height: 56px;
        padding: 0 24px;
        border: 1px solid #dcdfe6;
        background-color: #fff;
        border-radius: 8px;
        font-size: 24px;
        color: #606266;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active {
          color: #fff;
          background-color: #409eff;
          border-color: #409eff;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        }
      }
    }
  }
}
.edit-lis{
  width: 100vw;
  height: 5rem;
  padding: 0 24px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  background-color: #409eff;
}
.lis-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #f5f7fa;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
// 键盘动画
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease;
}
.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}
</style>