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 class="overflowscroll">
      <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 overflowscroll height300">
            <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="模型类别" key="selectmodelType" prop="modelTypeId">
                  <el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable @change="modalTypeControllButton">
                      <!-- <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" /> -->
                      <el-option v-for="dict in dc_model_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
              </el-form-item>
              <el-form-item label="是否可用" prop="vailable">
                <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>
            <div class="width50percent textalignright">
              <el-form-item  class="inlineblock marginright6percent divsonmarginleft0">
                <el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important" >上一步</el-button>
                <el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button>
                <el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button>
                <el-button @click="cancel" style="display: inline-block !important">取 消</el-button>
              </el-form-item>
            </div>
          </el-carousel-item>
          <el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll height300">
              <div class="width75percentinlineblock">
                <div class="textalignright marginbottom5">
                  <el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button>
                </div>
                <el-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing">
                  <el-table-column fixed label="序号" width="80"  align="center" >
                    <template #default="scope">
                      <span>{{ scope.$index+1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="参数名称" align="center" prop="paramClassName" />
                  <el-table-column label="参数编码" align="center" prop="paramClassCode" />
                  <el-table-column label="PLC地址位" align="center" prop="plcAdr" vali>
                    <template #default="scope">
                      <ValidationProvider :rules="plcAdr" v-slot="">
                        <span v-if="!scope.row.editing">{{ scope.row.plcAdr}}</span>
                        <el-input v-else v-model="scope.row.plcAdr" @blur="saveData(scope.row)"/>
                      </ValidationProvider>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否可控" align="center" prop="controllab">
                    <template #default="scope">
                      <el-switch
                        v-model="scope.row.controllab"
                        @change="selectRadio(scope.row)"
                        class="ml-2i"
                        style="--el-switch-on-color: #13ce66"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="类别" align="center" prop="classType">
                    <template #default="scope">
                      <dict-tag :options="dc_class_type" :value="scope.row.classType" />
                    </template>
                  </el-table-column>
                  <el-table-column label="分区" align="center" prop="devicePartion">
                    <template #default="scope">
                      <dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" align="center" prop="note" />
                  <el-table-column label="操作" align="center" width="200px">
                    <template #default="scope">
                      <el-button style="display:inline-block !important" type="primary"  @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="fixedbottomright width50percent textalignright">
                <el-form-item  class="inlineblock marginright6percent divsonmarginleft0">
                  <el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important">上一步</el-button>
                  <el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button>
                  <el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button>
                  <el-button @click="cancel" style="display: inline-block !important">取 消</el-button>
                </el-form-item>
              </div>
          </el-carousel-item>
        </el-carousel>  
        
      </el-form>
      <el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type">
        <el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600">
          <el-table-column type="selection" width="55" :selectable="ifselectable"/>
          <el-table-column label="参数名称" align="center" prop="paramClassName" />
          <el-table-column label="参数编码" align="center" prop="paramClassCode" />
          <el-table-column label="类别" align="center" prop="classType">
            <template #default="scope">
              <dict-tag :options="dc_class_type" :value="scope.row.classType" />
            </template>
          </el-table-column>
          <el-table-column label="分区" align="center" prop="devicePartion">
            <template #default="scope">
              <dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="note" />
        </el-table>
        <div class="textalignright margintop10">
          <el-button type="primary" @click="selectedSubmit">提交</el-button>
        </div>
      </el-dialog> 
    </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 { listParamclass } from "@/api/model/paramclass";
import { listModelType} from "@/api/model/modelType";
import { required } from "@vee-validate/rules";
import { listModelparam, addModelparam, updateModelparam, delModelparam} from "@/api/model/modelparam";
import { onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance();
const {dc_class_type, dc_device_partion, dc_model_type} = proxy.useDict('dc_class_type', 'dc_device_partion','dc_model_type');
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);
const selectedModelList = ref([]);
const oldSelectedList = ref([]);
const addModelSubmit = ref([]);
const updateModelSubmit = ref([]);
const operateModelIds = ref([]);
const updateModelIds = ref([]);
const deleteModelIds = ref([]);
console.log(router);
console.log(proxy);
const tempPid = router.currentRoute._value.query.pid;
const data = reactive({
  form: {
    sort:1,
  },
  dc_available: [
      {label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, 
      {label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
  ],
  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" }
    ],
    plcAdr: [
      { required }
    ]
  },
  validations: {
    inputValue: { required }
  }
});

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() {
  loading.value = false;
  proxy.$refs["devicemodelRef"].validate(valid => {
    if (valid) {
      console.log("进入方法");
      //模型按钮主表维护
      if (form.value.id != null) {
        updateDevicemodel(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
        });
      } else {
        addDevicemodel(form.value).then(response => {
        });
      }
      //模型参数表维护
      //删除计算
      let delFlag = true;
      oldSelectedList.value.forEach((item)=>{
        selectedModelList.value.forEach(element=>{
           if(item.id == element.id){
              delFlag == false;
           }
        })
        if(delFlag){
          deleteModelIds.value.push(item.id);
        }
      });
      //修改计算
      operateModelIds.value.forEach(item=>{
        selectedModelList.value.forEach(element=>{
           if(item.id == element.id){
             updateModelSubmit.value.push(element);
           }
        })
      });

      console.log("新增计算");
      //新增计算
      let addFlag = true;
      selectedModelList.value.forEach(item=>{
          oldSelectedList.value.forEach(element=>{
           if(item.id == element.id){
             addFlag == false;
           }
        })
        if(addFlag){
          addModelSubmit.value.push(item);
        }
      });
      console.log("新增方法");
      console.log(addModelSubmit.value);
      //新增
      addModelSubmit.value.forEach(item=>{
        delete item.id;
        addModelparam(item).then(response => {
        });
      });
      
      //修改
      updateModelSubmit.value.forEach(item=>{
        updateModelparam(item).then(response => { 
        });
      });
      //删除
      deleteModelIds.value.forEach(item=>{
        delModelparam(item).then(response => {  
        });
      });
      router.go(-1);
    }
  });
}
/** 查询设备模型类型列表 */
  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 => {
      return (item.modelTypeId == 1);
    });
    data.children = proxy.handleTree(parentData, "id", "pid");
    devicemodelOptions.value.push(data);
  });
}
  onMounted(() => {
    debugger
    console.log("-------------"+tempPid);
    // 在组件首次加载完成后执行的逻辑
    // 可以在这里给组件复制
    // form.value.pid=tempPid;
  });
  function modalTypeControllButton(){
    if(form.value.modelTypeId == "2"){
      submitButtonShow.value = false;
      nextStepButtonShow.value = true;
    }else if(form.value.modelTypeId == "1"){
      submitButtonShow.value = true;
      nextStepButtonShow.value = false;
    }
  }
  function nextStep(){
    console.log("---------------");
    proxy.$refs["devicemodelRef"].validate(valid => {
      // if (valid) {
        selectedModelList.value = oldSelectedList.value;
        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;
        paramModelList.value.forEach(item=>{
          item.paramClassId = item.id;
          item.modelId = form.value.modelCode;
          item.controllab = false;
        });
        console.log(paramModelList);
        addParamModelShow.value = true;
        loading.value = false;
    });
  }

  function handleDelete(element){
    selectedModelList.value = selectedModelList.value.filter(item => item.id !== element.id);
  }

  function selectedSubmit(){
    const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({
        ...row,
        editing: false, // 添加 'editing' 属性并设置初始值为 false
      }));
    if(selectedModelList.value.length>0){
      selectedModelList.value = [
        ...selectedModelList.value,
        ...newSelectedList,
      ];
    }else{
      selectedModelList.value = newSelectedList;
    }
    addParamModelShow.value = false;
  }

  function startEditing(row, column, cell, event) {
    if (!updateModelIds.value.includes(row.id)) {
      updateModelIds.value.push(row.id);
    }
    row.editing = true; // 进入编辑模式
  }

  function saveData(row) {
    // 保存数据的逻辑...
    row.editing = false; // 保存完成后，切换回显示模式
  }

  function ifselectable(row, index){
    let flag = true;
    console.log(selectedModelList.value);
    if(selectedModelList.value.length > 0){
      selectedModelList.value.forEach(element => {
        if(element.id == row.id){
           flag = false;
        }
      });
    }
    return flag;
  }

  function selectRadio(row){
    if (!updateModelIds.value.includes(row.id)) {
      updateModelIds.value.push(row.id);
    }
  }

  function getOldModelParams(){
    listModelparam(queryParams.value).then(response => {

        // oldSelectedList.value = response.rows;
    });
  }
  
  getTreeselect();
  getModelTypeList();
  getOldModelParams();
</script>