ghjg-digital-twin/src/views/ssky/cpns/LshbDialog.vue

<template>
  <div class="container">
    <i class="close-btn" @click="$emit('closeDialog')"></i>
    <span class="dialog-title" v-if="isNew">临时航班申请</span>
    <span class="dialog-title" v-else>临时航班申请详情</span>
    <form class="form">
      <div>
        <label for="sqdw" class="form-label">申请单位</label>
        <input name="sqdw" class="form-input" type="text" v-model="form.sqdw" :disabled="!isNew">
      </div>
      <div>
        <label for="hbxz" class="form-label">航班性质</label>
        <span v-for="item in radioDataHbxz" :key="item.value" class="form-radio">
          <input
            :value="item.value"
            :checked="form.hbxz===item.value"
            name="hbxz"
            :id="item.value"
            type="radio"
            :disabled="!isNew"
          >
          <label class="radio-label" :for="item.value">{{item.name}}</label>
        </span>
      </div>
      <div>
        <label for="ycdw" class="form-label">用船单位</label>
        <input name="ycdw" class="form-input" type="text" v-model="form.ycdw" :disabled="!isNew">
      </div>
      <div>
        <label for="cm" class="form-label">船名</label>
        <input name="cm" class="form-input" type="text" v-model="form.cm" :disabled="!isNew">
      </div>
      <div>
        <label for="rs" class="form-label">人数</label>
        <input name="rs" class="form-input" type="text" v-model="form.rs" :disabled="!isNew">
      </div>
      <div>
        <label for="sj" class="form-label">时间</label>
        <input name="sj" class="form-input" type="text" v-model="form.sj" :disabled="!isNew">
      </div>
      <div>
        <label for="hx" class="form-label">航线</label>
        <span v-for="item in radioDataHx" :key="item.value" class="form-radio">
          <input
            :value="item.value"
            :checked="form.hx===item.value"
            name="hx"
            :id="item.value"
            type="radio"
            @change="handleHxChange"
            :disabled="!isNew"
          >
          <label class="radio-label" :for="item.value">{{item.name}}</label>
        </span>
        <label for="qthx" class="form-label-s">其他航线:</label>
        <input type="text" class="form-input form-input-s" v-model="form.qthx" @input="handleQthxInput" :disabled="!isNew">
      </div>
      <div>
        <label for="tkmt" class="form-label">停靠码头</label>
        <input name="tkmt" class="form-input" type="text" v-model="form.tkmt" :disabled="!isNew">
      </div>
    </form>
    <div class="footer" v-if="!isNew">
      <span class="btn btn-1">审核通过</span>
      <span class="btn btn-0">审核不通过</span>
    </div>
    <div class="footer footer2" v-else>
      <span class="btn btn-1">提交</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LshbDialog',
}
</script>

<script setup>
  
  import { defineProps, onMounted, reactive, ref } from 'vue'
  import { useNow, useDateFormat } from '@vueuse/core'

  const props = defineProps(['lshb-data'])

  const isNew = ref(false)

  onMounted(() => {
    isNew.value = Object.keys(props.lshbData).length===0
    if(!isNew.value) {
      form.cm = props.lshbData.name
      form.sqdw = props.lshbData.ent
      form.ycdw = props.lshbData.ent
      form.hbxz = props.lshbData.type
    }
    
  })

  const form = reactive({
    sqdw: '',
    hbxz: '商务',
    ycdw: '',
    cm: '',
    rs: '120人',
    sj: useDateFormat(useNow(), 'YYYY-MM-DD').value + '  19:00-20:00',
    hx: 'jhyhx',
    qthx: '',
    tkmt: '十六铺一号码头3泊位'

  })

  const radioDataHbxz = [
    { value: '商务', name: '商务' },
    { value: '婚庆', name: '婚庆' },
    { value: '个人', name: '个人' },
    { value: '公务接待', name: '公务接待' },
  ]

  const radioDataHx = [
    { value: 'sbhx', name: '世博航线' },
    { value: 'jhyhx', name: '精华游航线' },
  ]

  function handleQthxInput() {
    form.hx = ''
   
  }
  function handleHxChange() {
    form.qthx = ''
  }


</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 30vh;
  left: 37vw;
  width: 476px;
  height: 414px;
  background: url('@/assets/imgs/lshb-bg.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 26px 0 22px 42px;
  z-index: 199;
  text-align: left;


  .close-btn {
    display: block;
    position: absolute;
    right: 12px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: url('@/assets/imgs/tool/toolbox-close.png') no-repeat;
    background-size: contain;
    cursor: pointer;
  }

  .dialog-title {
    display: block;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0px 3px 5px rgba(0,38,76,0.4);
  }

  .form {
    text-align: left;

    .disabled {
      cursor: not-allowed;
      opacity: 0.8;
    }

    input[type="radio"]:disabled:checked {
      appearance: none;
      background-color: #0075ff;
      border: 1px solid #ccc;
      width: 13px;
      height: 13px;
      border-radius: 50%;
    }

    &>div {
      margin-bottom: 10px;
    }

    .form-label {
      display: inline-block;
      width: 56px;
      height: 14px;
      font-size: 14px;
      text-shadow: 0px 3px 5px rgba(0,38,76,0.4);
      text-align-last: justify;
    }

    .form-label-s {
      display: inline-block;
      width: fit-content;
      height: 13px;
      font-size: 13px;
      margin-left: 20px;
    }

    .radio-label {
      font-size: 13px;
    }
    .form-input {
      box-sizing: border-box;
      width: 200px;
      height: 26px;
      outline: none;
      border: none;
      background-color: #1A5482;
      font-size: 13px;
      color: #e3e3e3;
      padding: 0 5px;
      margin-left: 12px;
    }

    .form-input-s {
      width: 81px;
    }

    .form-radio {
      margin-left: 12px;
      input {
        margin-right: 4px;
      }
    }
    
  }

  .footer {
    width: 100%;
    text-align: center;

    .btn {
      display: inline-block;
      box-sizing: border-box;
      width: 110px;
      height: 34px;
      padding: 5px 0;
      cursor: pointer;
      opacity: 0.9;
      &:hover {
        opacity: 1;
      }
    }
    .btn-1 {
      background: url('@/assets/imgs/btn-bg-green.png') no-repeat;
      background-size: contain;
      transform: translateX(-42px);
    }

    .btn-0 {
      background: url('@/assets/imgs/btn-bg-red.png') no-repeat;
      background-size: contain;
    }
  }

  .footer2 {
    .btn-1 {
      
      transform: translateX(-22px);
    }
  }
}
</style>