mky-vent-base/src/views/vent/gas/gasInspectNonfc/components/addressAdd2.vue

<template>
  <div class="inspectEdit">
    <a-form :model="formAddress" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
      <a-form-item label="巡检类型：">
        <JDictSelectTag v-model:value="formAddress.insType" placeholder="请选择巡检类型" dictCode="ins_type" style="width: 220px" />
      </a-form-item>
      <a-form-item label="巡检区域：">
        <a-input v-model:value="formAddress.strremark" style="width: 220px" />
      </a-form-item>
      <a-form-item label="巡检地址：">
        <a-input v-model:value="formAddress.strinstallpos" style="width: 220px" />
      </a-form-item>
      <a-form-item label="是否有传感器：">
        <a-checkbox v-model:checked="formAddress.isSensor" style="width: 220px" />
      </a-form-item>
      <a-form-item label="排序：">
        <a-input v-model:value="formAddress.orderNum" style="width: 220px" />
      </a-form-item>
    </a-form>
    <div class="edit-btn">
      <a-button @click="cancelAddress">取消</a-button>
      <a-button type="primary" @click="confirmAddress">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

  let formAddress = ref<any>({
    insType: '',
    strremark: '',
    strinstallpos: '',
    isSensor: false,
    orderNum: '',
  });
  let $emit = defineEmits(['confirmAddress', 'cancelAddress']);

  //确定
  let confirmAddress = () => {
    $emit('confirmAddress', {
      ...formAddress.value,
      isSensor: formAddress.value.isSensor ? '1' : '0',
    });
  };
  //取消
  let cancelAddress = () => {
    formAddress.value = {
      insType: '',
      strremark: '',
      strinstallpos: '',
      isSensor: false,
      orderNum: '',
    };
    $emit('cancelAddress');
  };

  onMounted(() => {});
</script>

<style lang="less" scoped>
  .inspectEdit {
    padding: 10px;
    box-sizing: border-box;

    .edit-btn {
      display: flex;
      justify-content: flex-end;

      .zxm-btn {
        margin: 0px 10px;
      }
    }
  }

  :deep(.zxm-input) {
    color: #fff;
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
  }
</style>