platform-vue/src/views/cursor/equipment/components/edit.vue

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:modelValue', 'submit']);

const formRef = ref();

const form = reactive({
  id: '',
  name: '',
  deviceNo: '',
  machineCode: '',
  licenseCode: '',
  os: '',
  version: '',
  account: '',
  owner: '',
  status: 'inactive',
  expiredAt: '',
  remark: '',
});

const rules = {
  name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  deviceNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
  machineCode: [{ required: true, message: '请输入机器码', trigger: 'blur' }],
  status: [{ required: true, message: '请选择设备状态', trigger: 'change' }],
};

function resetForm() {
  form.id = '';
  form.name = '';
  form.deviceNo = '';
  form.machineCode = '';
  form.licenseCode = '';
  form.os = '';
  form.version = '';
  form.account = '';
  form.owner = '';
  form.status = 'inactive';
  form.expiredAt = '';
  form.remark = '';
  formRef.value?.clearValidate?.();
}

function fillForm(row: any) {
  form.id = row?.id || '';
  form.name = row?.name || '';
  form.deviceNo = row?.deviceNo || '';
  form.machineCode = row?.machineCode || '';
  form.licenseCode = row?.licenseCode || '';
  form.os = row?.os || '';
  form.version = row?.version || '';
  form.account = row?.account || '';
  form.owner = row?.owner || '';
  form.status = row?.status || 'inactive';
  form.expiredAt = row?.expiredAt || '';
  form.remark = row?.remark || '';
}

watch(
  () => props.modelValue,
  (visible) => {
    if (!visible) return;
    resetForm();
    if (props.row) fillForm(props.row);
  },
);

async function handleSubmit() {
  await formRef.value?.validate?.();
  emit('submit', { ...form });
}
</script>

<template>
  <el-dialog
    class="equipment-edit-dialog"
    :model-value="modelValue"
    :title="row?.id ? '编辑设备' : '新增设备'"
    width="720px"
    destroy-on-close
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="96px">
      <el-row :gutter="14">
        <el-col :xs="24" :sm="12">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入设备名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="设备编号" prop="deviceNo">
            <el-input v-model="form.deviceNo" placeholder="请输入设备编号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="机器码" prop="machineCode">
            <el-input v-model="form.machineCode" placeholder="请输入设备机器码 / 指纹" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="授权码">
            <el-input v-model="form.licenseCode" placeholder="请输入授权码" clearable />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="系统平台">
            <el-select v-model="form.os" placeholder="请选择系统平台" clearable style="width: 100%">
              <el-option label="Windows" value="Windows" />
              <el-option label="macOS" value="macOS" />
              <el-option label="Linux" value="Linux" />
              <el-option label="其他" value="Other" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="版本">
            <el-input v-model="form.version" placeholder="请输入客户端版本" clearable />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="绑定账号">
            <el-input v-model="form.account" placeholder="请输入绑定账号" clearable />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="归属用户">
            <el-input v-model="form.owner" placeholder="请输入归属用户" clearable />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="设备状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
              <el-option label="未激活" value="inactive" />
              <el-option label="正常" value="active" />
              <el-option label="禁用" value="disabled" />
              <el-option label="已过期" value="expired" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="过期时间">
            <el-date-picker
              v-model="form.expiredAt"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择过期时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="emit('update:modelValue', false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
:deep(.equipment-edit-dialog) {
  max-width: calc(100vw - 24px);
}

@media (max-width: 768px) {
  :deep(.equipment-edit-dialog) {
    width: calc(100vw - 24px) !important;
    margin: 0 auto;
  }

  :deep(.equipment-edit-dialog .el-dialog__body) {
    padding: 12px;
    max-height: 70vh;
    overflow-y: auto;
  }
}
</style>