kd-aiot-frontend-yms/src/views/‌doorSecurity‌/doorLedger/components/addOrEditDialog.vue

<template>
  <el-dialog
    :title="isEdit ? '修改设备' : '新增设备'"
    :visible.sync="dialogVisible"
    width="550px"
    @close="handleClose"
  >
    <el-form
      ref="editForm"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="formData.deviceName" placeholder="请输入设备名称" clearable />
      </el-form-item>
      <el-form-item label="设备IP地址" prop="ipAddress">
        <el-input v-model="formData.ipAddress" placeholder="请输入设备IP地址" clearable />
      </el-form-item>
      <el-form-item label="设备端口号" prop="port">
        <el-input v-model="formData.port" placeholder="请输入设备端口号" clearable />
      </el-form-item>
      <el-form-item label="设备型号" prop="model">
        <el-input v-model="formData.model" placeholder="请输入设备型号" clearable />
      </el-form-item>
      <el-form-item label="账号" prop="account">
        <el-input v-model="formData.account" placeholder="请输入账号" clearable />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password />
      </el-form-item>
      <el-form-item label="门数量" prop="doorCount">
        <el-input-number v-model="formData.doorCount" :min="0" :max="999" placeholder="请输入门数量" />
      </el-form-item>
      <el-form-item label="流名称" prop="stream">
        <el-input v-model="formData.stream" placeholder="请输入流名称" clearable />
      </el-form-item>
      <!-- <el-form-item label="启用禁用" prop="enable">
        <el-radio-group v-model="formData.enable">
          <el-radio :label="0">启用</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDeviceDetail, saveDevice } from '@/api/‌doorSecurity‌';

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      // 编辑时的行数据
      data: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isEdit: false,
        submitLoading: false,
        formData: {
          id: null,
          deviceName: '',
          ipAddress: '',
          port: '',
          model: '',
          account: '',
          password: '',
          doorCount: 0,
          stream: '',
          enable: 'true'
        },
        formRules: {
          deviceName: [
            { required: true, message: '请输入设备名称', trigger: 'blur' }
          ],
          ipAddress: [
            { required: true, message: '请输入设备IP地址', trigger: 'blur' }
          ],
          port: [
            { required: true, message: '请输入设备端口号', trigger: 'blur' }
          ],
          model: [
            { required: true, message: '请输入设备型号', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    computed: {
      dialogVisible: {
        get() {
          return this.visible;
        },
        set(val) {
          this.$emit('update:visible', val);
        }
      }
    },
    watch: {
      visible(val) {
        if (val) {
          // 确保 prop data 已经传入后再初始化表单
          this.$nextTick(() => {
            this.initForm();
          });
        }
      }
    },
    methods: {
      /* 初始化表单数据 */
      async initForm() {
        console.log('data~~~', this.data);
        const row = this.data;
        this.isEdit = !!row?.id;
        if (row?.id) {
          // this.formData = {
          //   id: row.id,
          //   deviceName: row.deviceName || '',
          //   ipAddress: row.ipAddress || '',
          //   port: row.port || '',
          //   model: row.model || '',
          //   account: row.account || '',
          //   password: row.password || '',
          //   doorCount: row.doorCount ?? 0,
          //   stream: row.stream || '',
          //   enable: row.enable || 'true'
          // };
          const res = await getDeviceDetail(row.id);
          console.log(res, 'res');
          this.formData = res;
        } else {
          this.formData = {
            id: null,
            deviceName: '',
            ipAddress: '',
            port: '',
            model: '',
            account: '',
            password: '',
            doorCount: 0,
            stream: '',
            enable: 'true'
          };
        }
        this.$nextTick(() => {
          this.$refs.editForm?.clearValidate();
        });
      },

      /* 弹窗关闭 */
      handleClose() {
        this.$refs.editForm?.clearValidate();
      },

      /* 提交表单 */
      handleSubmit() {
        this.$refs.editForm.validate((valid) => {
          if (!valid) return;
          this.submitLoading = true;
          // 提交接口 - 可根据实际接口调整
          const loading = this.$loading({ lock: true });
          // TODO: 替换为实际的保存接口
          saveDevice(this.formData).then((res) => {
            loading.close();
            this.submitLoading = false;
            this.$message.success(this.isEdit ? '修改成功' : '新增成功');
            this.dialogVisible = false;
            this.$emit('done');
          });
        });
      }
    }
  };
</script>