mky-vent-base/src/views/vent/deviceManager/comment/faultConfigTable/components/operationTable.vue

<template>
  <div class="operation-table">
    <a-form ref="formSta" :model="formState" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
      <a-form-item name="areaPercentThreshold" label="面积百分比阈值(%)">
        <a-input v-model:value="formState.areaPercentThreshold" type="number" allowClear placeholder="请输入面积百分比阈值"></a-input>
      </a-form-item>
      <a-form-item label="门板最大基准面积(cm²)" name="maxAreaBase">
        <a-input v-model:value="formState.maxAreaBase" type="number" allowClear placeholder="请输入门板最大基准面积"></a-input>
      </a-form-item>
      <a-form-item label="像素面积比" name="pixelAreaRatio">
        <a-input v-model:value="formState.pixelAreaRatio" type="number" placeholder="请输入像素面积比"></a-input>
      </a-form-item>
      <a-form-item label="检测时间(秒)" name="detectInterval">
        <a-input v-model:value="formState.detectInterval" type="number" placeholder="请输入检测时间"></a-input>
      </a-form-item>
      <a-form-item label="持续时间阈值(秒)" name="durationThreshold">
        <a-input v-model:value="formState.durationThreshold" type="number" placeholder="请输入持续时间阈值"></a-input>
      </a-form-item>

      <a-form-item label="模型路径" name="segModelPath">
        <a-input v-model:value="formState.segModelPath" placeholder="请输入模型路径"></a-input>
      </a-form-item>
      <a-form-item label="摄像头" name="cameraId">
        <a-select ref="select" v-model:value="formState.cameraId">
          <a-select-option v-for="(item, index) in cameraData" :key="index" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="任务状态" name="status">
        <a-select ref="select" v-model:value="formState.status">
          <a-select-option v-for="(item, index) in taskData" :key="index" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div style="display: flex; justify-content: flex-end; margin: 20px">
      <a-button style="margin-right: 10px" type="primary" @click="handleConfirm">确定</a-button>
      <a-button @click="handleCancel">取消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue';
  import { saveOrUpdate } from '../faultConfig.api';
  import { taskData } from '../faultConfig.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  let props = defineProps({
    gateId: {
      type: String,
      default: '',
    },
    recordData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    cameraData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  const { createMessage } = useMessage();
  let formSta = ref();
  let formState = reactive({
    id: null,
    gateId: null,
    areaPercentThreshold: null,
    cameraId: null,
    detectInterval: null,
    durationThreshold: null,
    maxAreaBase: null,
    pixelAreaRatio: null,
    segModelPath: null,
    status: null,
  });
  let $emit = defineEmits(['handleClose']);

  //确定
  async function handleConfirm() {
    let res;
    if (props.recordData.id) {
      res = await saveOrUpdate(formState, true);
    } else {
      formState.gateId = props.gateId;
      res = await saveOrUpdate(formState, false);
    }
    if (res.code == 200) {
      createMessage.success('操作成功!');
      formSta.value.resetFields();
      $emit('handleClose');
    } else {
      createMessage.error('操作失败!');
    }
  }
  //取消
  function handleCancel() {
    formSta.value.resetFields();
    $emit('handleClose');
  }

  watch(
    () => props.recordData,
    (newV, oldV) => {
      if (JSON.stringify(props.recordData) != '{}') {
        formState = Object.assign(formState, newV) as any;
      }
    },
    {
      immediate: true,
    }
  );
</script>

<style lang="less" scoped>
  .zxm-form {
    padding: 20px 100px 20px 80px !important;
  }
</style>