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

<template>
    <div class="app-container" 
      v-loading="loading">
      <!-- 添加或修改设备模型信息对话框 -->
      <div class="marginbottom50px">
        <el-steps :active="currentStep">
            <el-step title="模型信息" description="名称、编号、序号、备注等" />
            <el-step title="参数类别配置" description="模型的参数类别" />
            <el-step title="调控策略" description="模型的调控策略" />
        </el-steps>
      </div>
      <div>
        <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px">
          <el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" >
            <el-carousel-item :key="1"  name="1" class="textaligncenter">
              <div  class="widthhalfinlineblock">
                <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-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序"/>
                </el-form-item>
                <el-form-item label="上级" prop="pid">
                <el-tree-select
                    v-model="form.pid"
                    :data="devicemodelOptions"
                    :props="{ value: 'id', label: 'modelName', children: 'children' }"
                    value-key="id"
                    placeholder="请选择上级"
                    check-strictly
                    :default-expand-all="true" 
                    :default-checked-keys="defaultCheckedKeys"
                />
                </el-form-item>
                <el-form-item label="模型类别" prop="modelTypeId">
                    <el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable>
                        <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否是叶节点">
                  <el-switch
                    v-model="form.dc_is_leaf"
                    @change="switch_isLeaf"
                    class="ml-2i"
                    style="--el-switch-on-color: #13ce66"
                  />
                </el-form-item>
                <el-form-item label="是否可用">
                  <el-switch
                    v-model="form.dc_available"
                    class="ml-2i"
                    style="--el-switch-on-color: #13ce66"
                  />
                </el-form-item>
                <el-form-item label="备注" prop="note">
                  <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </div>
            </el-carousel-item>
            <el-carousel-item :key="2" name="2" class="textaligncenter">
                <div class="widthhalfinlineblock">
                  <div class="textalignright marginbottom5">
                    <el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button>
                  </div>
                  <el-table :data="tableData" style="width: 100%" max-height="250">
                    <el-table-column fixed label="序号" width="80">
                      <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="Name" width="120" />
                    <el-table-column prop="state" label="State" width="120" />
                    <el-table-column prop="city" label="City" width="120" />
                    <el-table-column prop="address" label="Address" width="600" />
                    <el-table-column prop="zip" label="Zip" width="120" />
                    <el-table-column fixed="right" label="Operations" width="120">
                      <template #default="scope">
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click.prevent="deleteRow(scope.$index)"
                        >
                          Remove
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-carousel-item>
          </el-carousel>  
          <div  class="textaligncenter">
            <el-form-item  class="widthhalfinlineblock">
              <el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" >上一步</el-button>
              <el-button type="primary" v-if="submitButtonShow" @click="submitForm" >提交</el-button>
              <el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" >下一步</el-button>
              <el-button @click="cancel">取 消</el-button>
            </el-form-item>
          </div>
        </el-form> 
      </div>
    </div>
  </template>
  <style lang="scss">
    @import "@/assets/styles/self-defined.scss";
    .customCarousel {
      div{
        button {
            display: none !important;
        }
      } 
      ul{
        display: none !important;
      }
    } 
  </style>
  <script setup name="newdevicemodel">
  import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
  import { listModelType} from "@/api/model/modelType";
  import { onMounted, ref } from 'vue';
  const { proxy } = getCurrentInstance();
  const { dc_available, dc_is_leaf } = proxy.useDict('dc_available', 'dc_is_leaf');
  const router = useRouter();
  const devicemodelOptions = ref([]);
  const open = ref(false);
  const loading = ref(false);
  const modeltypeList = ref([]);
  const currentStep = ref(1);
  const nextStepButtonShow = ref(false);
  const prevStepButtonShow = ref(false);
  const submitButtonShow = ref(true);
  const paramModelList = ref([]);
  const addParamModelShow = ref(false);
  console.log(router);
  console.log(proxy);
  const tempPid = router.currentRoute._value.query.pid;
  const data = reactive({
    form: {
      sort:1,
      dc_is_leaf:false,
      dc_available:false,
      // pid:tempPid,
    },
    queryParams: {
      modelName: null,
      modelCode: null,
      sort: null,
      modelTypeId: null,
      pid: null,
      note: null
    },
    rules: {
      modelTypeId: [
        { required: true, message: "模型类别不能为空", trigger: "change" }
      ],
      modelName: [
        { required: true, message: "模型名称不能为空", trigger: "change" }
      ],
      modelCode: [
        { required: true, message: "模型编码不能为空", trigger: "change" }
      ],
      pid: [
        { required: true, message: "上级不能为空", 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 => {
            router.go(-1);
            proxy.$modal.msgSuccess("修改成功");
          });
        } else {
          addDevicemodel(form.value).then(response => {
            router.go(-1);
            proxy.$modal.msgSuccess("新增成功");
          });
        }
      }
    });
  }
  /** 查询设备模型类型列表 */
    function getModelTypeList() {
        loading.value = true;
        listModelType(queryParams.value).then(response => {
            console.log(response);
            modeltypeList.value = response.rows;
            loading.value = false;
        });
    }
    function getTreeselect() {
      listDevicemodel().then(response => {
      devicemodelOptions.value = [];
      const data = { id: 0, modelName: '顶级节点', children: [] };
      const parentData = response.data.filter(item => {
        // 根据需要进行关键字匹配，可以使用 includes()、indexOf() 等方法
        return !item.isLeaf;
      });
      data.children = proxy.handleTree(parentData, "id", "pid");
      devicemodelOptions.value.push(data);
    });
  }
    onMounted(() => {
        console.log("-------------"+tempPid);
    // 在组件首次加载完成后执行的逻辑
    // 可以在这里给组件复制
      // form.value.pid=tempPid;
    });
    function switch_isLeaf(){
      if(form.value.dc_is_leaf){
        submitButtonShow.value = false;
        nextStepButtonShow.value = true;
      }else{
        submitButtonShow.value = true;
        nextStepButtonShow.value = false;
      }
    }
    function nextStep(){
      console.log("---------------");
      if(currentStep.value<2){
        currentStep.value = currentStep.value + 1;
        proxy.$refs.carousel.next(); 
        submitButtonShow.value = true;
        nextStepButtonShow.value = false;
        prevStepButtonShow.value = true;
      }
    }
    function prevStep(){
        currentStep.value = currentStep.value - 1;
        proxy.$refs.carousel.prev(); 
        submitButtonShow.value = false;
        nextStepButtonShow.value = true;
        prevStepButtonShow.value = false;
    }
    function addParamModel(){
      loading.value = true;
      listParamclass(queryParams.value).then(response => {
          console.log(response);
          paramModelList.value = response.rows;
          addParamModelShow.value = true;
          loading.value = false;
      });
    }
    getTreeselect();
    getModelTypeList();
  </script>