dc-ui/src/views/model/devicemodel/addmodel.vue

<template>
    <div class="app-container">
      <!-- 添加或修改设备模型信息对话框 -->
      <template>
        <el-steps :space="200" :active="1" simple>
            <el-step title="Step 1" :icon="Edit" />
            <el-step title="Step 2" :icon="UploadFilled" />
            <el-step title="Step 3" :icon="Picture" />
        </el-steps>

        <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
            <el-step title="Step 1" />
            <el-step title="Step 2" />
            <el-step title="Step 3" />
        </el-steps>
      </template>


      <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="模型名称" prop="modelName">
        <el-input v-model="form.modelName" placeholder="请输入模型名称" />
        </el-form-item>
        <el-form-item label="模型编码" prop="modelCode">
        <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
        </el-form-item>
        <el-form-item label="排序;排序" prop="sort">
        <el-input v-model="form.sort" placeholder="请输入排序;排序" />
        </el-form-item>
        <el-form-item label="上级id;上级id" prop="pid">
        <el-tree-select
            v-model="form.pid"
            :data="devicemodelOptions"
            :props="{ value: 'id', label: 'modelName', children: 'children' }"
            value-key="id"
            placeholder="请选择上级id;上级id"
            check-strictly
        />
        </el-form-item>
        <el-form-item label="备注" prop="note">
        <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>  
    </div>
  </template>
  
  <script setup name="newdevicemodel">
  import { addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
  import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue'
  const { proxy } = getCurrentInstance();
  const router = useRouter();
  const devicemodelOptions = ref([]);
  const open = ref(false);
  const title = ref("");
  
  const data = reactive({
    form: {},
    queryParams: {
      modelName: null,
      modelCode: null,
      sort: null,
      modelTypeId: null,
      pid: null,
      note: null
    },
    rules: {
      modelTypeId: [
        { required: true, message: "模型类别Id不能为空", trigger: "change" }
      ],
    }
  });
  
  const { queryParams, form, rules } = toRefs(data);
     
  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }
  
  // 表单重置
  function reset() {
    form.value = {
      tentantId: null,
      version: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null,
      deptId: null,
      userId: null,
      deleteBy: null,
      deleteTime: null,
      id: null,
      modelName: null,
      modelCode: null,
      sort: null,
      modelTypeId: null,
      pid: null,
      note: null
    };
    proxy.resetForm("devicemodelRef");
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["devicemodelRef"].validate(valid => {
      if (valid) {
        if (form.value.id != null) {
          updateDevicemodel(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            router.go(-1);
          });
        } else {
          addDevicemodel(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            router.go(-1);
          });
        }
      }
    });
  }
  </script>