设备模型初版

src/api/model/device.js

@@ -99,4 +99,13 @@ export function cleanRedisCache() {
     url: '/model/dcBaseDeviceinfo/cleanRedisCache',
     method: 'post'
   });
+}
+
+//新增
+export function addAndSyncParamMap(data) {
+  return request({
+    url: '/model/dcBaseDeviceinfo/addAndSyncParamMap',
+    method: 'post',
+    data: data
+  });
 }

src/api/model/modelType.js

@@ -50,4 +50,13 @@ export function exportModelType(query) {
     method: 'get',
     params: query
   })
+}
+
+// 查询设备模型类别列表
+export function listModelTypeNoPage(query) {
+  return request({
+    url: '/model/dcModelType/listNoPage',
+    method: 'get',
+    params: query
+  })
 }

src/api/model/modelparam.js

@@ -50,4 +50,39 @@ export function exportModelparam(query) {
     method: 'get',
     params: query
   })
-}
+}
+
+// 查询设备模型参数明细列表
+export function listModelparamNoPage(query) {
+  return request({
+    url: '/model/dcModelDeviceParam/listNoPage',
+    method: 'get',
+    params: query
+  })
+}
+
+// 修改模型参数配置
+export function removeAndAdd(data) {
+  return request({
+    url: '/model/dcModelDeviceParam/removeAndAdd',
+    method: 'put',
+    data: data
+  })
+}
+
+// 批量新增
+export function addBatch(data) {
+  return request({
+    url: '/model/dcModelDeviceParam/addBatch',
+    method: 'post',
+    data: data
+  })
+}
+// 批量修改
+export function editBatch(data) {
+  return request({
+    url: '/model/dcModelDeviceParam/editBatch',
+    method: 'put',
+    data: data
+  })
+}

src/assets/styles/self-defined.scss

@@ -234,4 +234,7 @@
     width: 96%;
   }
    
+  .height600{
+    height: 600px;
+  }
 

src/components/TableColumnTreeSelect/index.vue

@@ -0,0 +1,653 @@
+<template>
+  <vxe-grid 
+    ref="tableRef" 
+    v-bind="gridOptions" 
+    :loading="props.loading" 
+    :columns="props.columns" 
+    :data="props.tableData"
+    @cell-dblclick="cellDBLClickEvent" 
+    :row-style="getRowStyle"
+    @edit-actived="onEditActivated"
+    @page-change="pageChange"
+    >
+    <template #toolbar_buttons>
+      <vxe-button size="small" status="primary" icon="vxe-icon-add" @click="addRow()" v-if="hasAddRows">
+        {{ addRowsText }}
+      </vxe-button>
+      <vxe-button size="small" status="danger" icon="vxe-icon-delete-fill" @click="delSelect" v-if="hasDelSelect">
+        删除
+      </vxe-button>
+      <vxe-button size="small" status="success" icon="vxe-icon-save" @click="allSave" v-if="props.hasAllSave">
+        保存
+      </vxe-button>
+    </template>
+    <template #toolbar_buttons_new>
+      <vxe-button size="small" status="primary" icon="vxe-icon-add" @click="addRow()" v-if="hasAddRows">
+        {{ addRowsText }}
+      </vxe-button>
+      <vxe-button size="small" status="danger" icon="vxe-icon-delete-fill" @click="delSelect" v-if="hasDelSelect">
+        删除
+      </vxe-button>
+    </template>
+    <template #statusDef="{ row }">
+      <vxe-switch v-model="row.status" size="mini"></vxe-switch>
+    </template>
+    <template #text="{ row, column }">
+      <el-input
+        @mousedown.stop 
+        v-model="row[column?.field]" 
+        placeholder="请输入内容"
+        disabled
+      />
+    </template>
+    <template #input="{ row, column }">
+      <el-input 
+        @mousedown.stop 
+        v-model="row[column?.field]" 
+        placeholder="请输入内容"
+      />
+    </template>
+    <template #treeSelect="{ row, column }">
+      <el-tree-select 
+        @mousedown.stop 
+        v-model="row[column?.field]" 
+        :data="typeof column.slots.data === 'function' ? column.slots.data(row,column) : column.slots.data"
+        :props="column.slots.props"
+        check-strictly 
+        :default-expand-all="true" 
+        :value-key="column.slots.key" 
+        :size="column.slots.size" 
+        @change="($event) => { column.slots.change($event, row, column)}" 
+      />
+    </template>
+    <template #select="{ row, column }">
+      <el-select @mousedown.stop v-model="row[column?.field]" @change="column?.slots.change($event,row,column)" :disabled="column?.slots.disabled" :filterable="column?.slots.filterable" @visible-change="column?.slots.visibleChange($event,row,column)">
+        <el-option v-for="dict in column?.slots.options" :key="dict[column?.slots.key]" :label="dict[column?.slots.label]"
+                :value="dict[column?.slots.value]" />
+      </el-select>
+    </template>
+    <template #operate="{$table, row, column }">
+      <template v-if="hasEditRows(row)">
+        <vxe-button size="small" type="text" content="取消" icon="vxe-icon-close" @click="cancelRowClick"></vxe-button>
+        <vxe-button size="small" type="text" status="primary" content="保存" icon="vxe-icon-check"
+          @click="saveRowClick(row)"></vxe-button>
+      </template>
+      <template v-else>
+        <vxe-button v-if="getButtonShow($table,row,'newButton')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButton')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButton')"></vxe-button>
+        <vxe-button v-if="getButtonShow($table,row,'newButtonTwo')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButtonTwo')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButtonTwo')"></vxe-button>
+        <vxe-button size="small" type="text" content="编辑" icon="vxe-icon-edit" v-if="hasEditRow"
+          @click="editRowClick(row)"></vxe-button>
+      </template>
+      <vxe-button size="small" type="text" status="danger" content="删除" icon="vxe-icon-delete" v-if="hasdelRow"
+        @click="delRowClick(row)"></vxe-button>
+    </template>
+    <template #operateNew="{$table, row, column }">
+      <template v-if="hasEditRows(row)">
+        <vxe-button size="small" type="text" content="取消" icon="vxe-icon-close" @click="cancelRowClick"></vxe-button>
+        <vxe-button size="small" type="text" status="primary" content="保存" icon="vxe-icon-check"
+          @click="saveRowClick(row)"></vxe-button>
+      </template>
+      <template v-else>
+        <vxe-button v-if="getButtonShow($table,row,'newButton')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButton')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButton')"></vxe-button>
+        <vxe-button v-if="getButtonShow($table,row,'newButtonTwo')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButtonTwo')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButtonTwo')"></vxe-button>
+        <vxe-button size="small" type="text" content="编辑" icon="vxe-icon-edit" v-if="hasEditRow"
+          @click="editRowClick(row)"></vxe-button>
+      </template>
+      <vxe-button size="small" type="text" status="danger" content="删除" icon="vxe-icon-delete" v-if="hasdelRow"
+        @click="delRowClick(row)"></vxe-button>
+    </template>
+  </vxe-grid>
+</template>
+
+<script setup>
+import { reactive,defineExpose } from "vue";
+import { VXETable } from "vxe-table";
+const { proxy } = getCurrentInstance();
+const tableRef = ref();
+const tableHeight = ref('0px');
+const rowHeight = ref(44);
+const headerHeight = ref(66);
+const emit = defineEmits([
+  "insertRecords",
+  "updateRecords",
+  "delSelectData",
+  "allSaveRowData",
+  "saveRowData",
+  "delRowData",
+  "btnClick",
+  "cellDBLClick",
+  "pageChange",
+  "beforeEditRowsCallBack",
+  "validateFormMethod",
+  "beforeAddRowsCallBack",
+  "addRowsCallBack",
+]);
+
+const props = defineProps({
+  config: {
+    //表格配置项
+    type: Object,
+    default: {
+      //表格配置项
+      id: "table", //唯一标识
+      height: "auto", //表格的高度；支持铺满父容器或者固定高度
+      align: "center", //所有的列对齐方式
+      border: "none", //是否带有边框:false|default 默认显示边框,true|full 显示完整边框,outer 显示外边框,inner 显示内边框,none
+      round: true, //是否为圆角边框
+      stripe: true, //是否带有斑马纹
+      size: "medium", //表格的尺寸:medium, small, mini
+      // loading: false, //表格是否显示加载中
+      showHeader: true, //是否显示表头
+      columnConfig: {
+        //列配置信息
+        isCurrent: false, //当鼠标点击列头时，是否要高亮当前列
+        isHover: true, //当鼠标移到列头时，是否要高亮当前头
+      },
+      rowConfig: {
+        //行配置信息
+        keyField: "id", //自定义行数据唯一主键的字段名
+        isCurrent: false, //当鼠标点击行时，是否要高亮当前行
+        isHover: true, //当鼠标移到行时，是否要高亮当前行
+      },
+      editConfig: {
+        //可编辑配置项
+        trigger: "dblclick", //触发方式click（点击触发编辑）,dblclick（双击触发编辑）
+        mode: "row", //编辑模式cell（单元格编辑模式）,row（行编辑模式）
+      },
+      pagerConfig: {
+        //分页配置项
+        enabled: true, //是否启用
+        currentPage: 1, //当前页
+        pageSize: 10, //每页大小
+        total: 0, //总条数
+        autoHidden: true, //当只有一页时自动隐藏
+        pageSizes: [10, 15, 20, 50, 100], //每页大小选项列表
+      },
+      toolbarConfig: {
+        //工具栏配置
+        refresh: true, // 显示刷新按钮
+        import: false, // 显示导入按钮
+        export: false, // 显示导出按钮
+        zoom: true, // 显示全屏按钮
+        custom: true, // 显示自定义列按钮
+      },
+    },
+  },
+  colField: {
+    //新增时默认可编辑字段
+    type: String,
+    default: "",
+  },
+  additional: {
+    //新增时增加默认显示字段
+    type: Object,
+    default: {},
+  },
+  columns: {
+    //表格表头数据
+    type: Array,
+    default: [],
+  },
+  tableData: {
+    //表格数据
+    type: Array,
+    default: [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  addRowsText: {
+    //新增按钮文字
+    type: String,
+    default: "新增",
+  },
+  addRowsType: {
+    //新增按钮类型，1新增功能，2纯按钮用于其他操作
+    type: Number,
+    default: 1,
+  },
+  hasAddRows: {
+    //是否显示新增按钮
+    type: Boolean,
+    default: true,
+  },
+  hasDelSelect: {
+    //是否显示删除按钮
+    type: Boolean,
+    default: true,
+  },
+  hasAllSave: {
+    //是否显示保存
+    type: Boolean,
+    default: true,
+  },
+  hasEditRow: {
+    //是否显示操作编辑按钮
+    type: Boolean,
+    default: true,
+  },
+  hasdelRow: {
+    //是否显示操作删除按钮
+    type: Boolean,
+    default: true,
+  },
+  pagination: {
+    //分页
+    type: Object,
+    default: {
+      total: 0,
+      currentPage: 1,
+      pageSize: 10,
+    },
+  },
+});
+const { config, colField, addRowsType, hasAddRows, hasDelSelect } = props;
+
+const gridOptions = reactive({
+  id: config.id, //唯一标识
+  height: tableHeight, //表格的高度；支持铺满父容器或者固定高度
+  maxHeight: config.maxHeight,
+  minHeight: 200, //最小高度
+  autoResize: true, //自动监听父元素的变化去重新计算表格
+  align: config.align, //所有的列对齐方式
+  border: config.border, //是否带有边框
+  round: config.round, //是否为圆角边框
+  stripe: config.stripe, //是否带有斑马纹
+  size: config.size, //表格的尺寸:medium, small, mini
+  // loading: config.loading, //表格是否显示加载中
+  showHeader: config.showHeader, //是否显示表头
+  showOverflow: true, //设置所有内容过长时显示为省略号
+  headerRowClassName: "headerRowClass", //表头的行附加 className
+  headerCellClassName: "headerCellClass", //头的单元格附加 className
+  rowClassName: "rowClass", //行附加 className
+  cellClassName: "cellClass", //单元格附加 className
+  keepSource: true, //保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等
+  columnConfig: {
+    //列配置信息
+    isCurrent: config.columnConfig.isCurrent, //当鼠标点击列头时，是否要高亮当前列
+    isHover: config.columnConfig.isHover, //当鼠标移到列头时，是否要高亮当前头
+    resizable: true, //每一列是否启用列宽调整
+  },
+  rowConfig: {
+    //行配置信息
+    keyField: config.rowConfig.keyField, //自定义行数据唯一主键的字段名
+    isCurrent: config.rowConfig.isCurrent, //当鼠标点击行时，是否要高亮当前行
+    isHover: config.rowConfig.isHover, //当鼠标移到行时，是否要高亮当前行
+  },
+  sortConfig: {
+    //排序配置项
+    trigger: "cell", //触发方式
+    multiple: false, //是否启用多列组合筛选
+    remote: false, //所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理
+  },
+  filterConfig: {
+    //筛选配置项
+    remote: true, //所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理
+  },
+  editConfig: {
+    //可编辑配置项
+    trigger: config.editConfig.trigger, //触发方式click（点击触发编辑）,dblclick（双击触发编辑）
+    mode: config.editConfig.mode, //编辑模式cell（单元格编辑模式）,row（行编辑模式）
+    showStatus: true, //只对 keep-source 开启有效，是否显示单元格新增与修改状态
+    beforeEditMethod(param) {
+      let shouldContinue;
+      emit("beforeEditRowsCallBack", param);
+      emit("validateFormMethod", param, val => {
+        shouldContinue = val
+      });
+      if (shouldContinue || shouldContinue === undefined) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
+  pagerConfig: {
+    //分页配置项
+    enabled: config.pagerConfig.enabled, //是否启用
+    currentPage: config.pagerConfig.currentPage, //当前页
+    pageSize: config.pagerConfig.pageSize, //每页大小
+    total: config.pagerConfig.total, //总条数
+    autoHidden: config.pagerConfig.autoHidden, //当只有一页时自动隐藏
+    pageSizes: config.pagerConfig.pageSizes, //每页大小选项列表
+  },
+  toolbarConfig: {
+    //工具栏配置
+    slots: {
+      //插槽
+      buttons: "toolbar_buttons",
+    },
+    refresh: config.toolbarConfig.refresh, // 显示刷新按钮
+    import: config.toolbarConfig.import, // 显示导入按钮
+    export: config.toolbarConfig.export, // 显示导出按钮
+    // print: true, // 显示打印按钮
+    zoom: config.toolbarConfig.zoom, // 显示全屏按钮
+    custom: config.toolbarConfig.custom, // 显示自定义列按钮
+  },
+  importConfig: {
+    //导入配置项
+    remote: false, //是否服务端导入
+    types: ["csv", "html", "xml", "txt"],
+    modes: ["covering", "insert"],
+  },
+  exportConfig: {
+    //导出配置项
+    remote: false, //是否服务端导出
+    types: ["csv", "html", "xml", "txt"], //可选文件类型列表
+    modes: ["current", "selected", "all"], //输出数据的方式列表
+  },
+  editRules: config.editRules, //校验规则配置项
+  // columns: config.columns,
+  // data: config.data,
+});
+
+const addRow = async (row) => {
+  const $table = tableRef.value;
+  //新增按钮
+  if (addRowsType === 1) {
+    //新增功能
+    if ($table) {
+      let shouldContinue = true;
+      emit("beforeAddRowsCallBack", $table, val => { shouldContinue = val });
+      if (shouldContinue || shouldContinue === undefined) {
+        const record = props.additional;
+        const { row: newRow } = await $table.insertAt(record, row);
+        await $table.setEditCell(newRow, colField);
+        emit("addRowsCallBack", newRow);
+        calculateTableHeight(null);
+      } else {
+        // 不继续执行下面的代码
+        return;
+      }
+      
+    }
+  } else if (addRowsType === 2) {
+    //新增功能
+    if ($table) {
+      let shouldContinue = true;
+
+      console.log("shouldContinue");
+      emit("beforeAddRowsCallBack", $table, val => { shouldContinue = val });
+      if (shouldContinue || shouldContinue === undefined) {debugger
+        //纯按钮功能
+        emit("btnClick", "")
+      }
+    }
+  }
+};
+
+const delSelect = async () => {
+  //多选删除
+  const $table = tableRef.value;
+  const selectRecords = $table.getCheckboxRecords();
+  if ($table && selectRecords.length != 0) {
+    const type = await VXETable.modal.confirm("您确定要删除该数据?");
+    if (type === "confirm") {
+      emit("delSelectData", selectRecords);
+      $table.removeCheckboxRow();
+    }
+  } else {
+    VXETable.modal.message({
+      content: "请选择要删除的数据！",
+      status: "warning",
+    });
+  }
+};
+const allSave = async () => {
+  //多行编辑保存
+  const $table = tableRef.value;
+  if ($table) {
+    const $grid = tableRef.value;
+    const errMap = await $grid.validate(true);
+    if (errMap) {
+      VXETable.modal.message({ status: "error", content: "请填写相关内容！" });
+    } else {
+      // const updateRecords = $table.getUpdateRecords();
+      const { insertRecords, removeRecords, updateRecords } =
+        $grid.getRecordset();
+      if (insertRecords.length != 0) {
+        console.log(insertRecords);
+        //新增
+        emit("insertRecords", insertRecords);
+      } else if (updateRecords.length != 0) {
+        //修改
+        emit("updateRecords", updateRecords);
+      }
+     
+    }
+  }
+};
+const hasEditRows = (row) => {
+  //显示编辑或保存按钮
+  const $grid = tableRef.value;
+  if ($grid) {
+    return $grid.isEditByRow(row);
+  }
+  return false;
+};
+const editRowClick = async (row) => {
+  //点击编辑
+  const $grid = tableRef.value;
+  if ($grid) {
+    const payload = {
+      grid: $grid,
+      row: row
+    };
+    $grid.setEditRow(row);
+  }
+};
+const cancelRowClick = () => {
+  //点击取消
+  const $grid = tableRef.value;
+  if ($grid) {
+    $grid.clearEdit();
+  }
+};
+const saveRowClick = async (row) => {
+  //编辑保存
+  const $grid = tableRef.value;
+  if ($grid) {
+    const errMap = await $grid.validate(true);
+    if (errMap) {
+      VXETable.modal.message({ status: "error", content: "请填写相关内容！" });
+    } else {
+      await $grid.clearEdit();
+      const { insertRecords, removeRecords, updateRecords } =
+        $grid.getRecordset();
+      if (insertRecords.length != 0) {
+        //新增
+        emit("insertRecords", insertRecords)
+      } else if (updateRecords.length != 0) {
+        //修改
+        emit("updateRecords", updateRecords)
+      }
+    }
+  }
+};
+const saveRowClickNew = async (row) => {
+  //编辑保存
+  const $grid = tableRef.value;
+  if ($grid) {
+    const errMap = await $grid.validate(true);
+    if (errMap) {
+      VXETable.modal.message({ status: "error", content: "请填写相关内容！" });
+    } else {
+      await $grid.clearEdit();
+    }
+  }
+};
+const delRowClick = async (row) => {
+  //单行删除
+  const type = await VXETable.modal.confirm("您确定要删除该数据?");
+  const $grid = tableRef.value;
+  if ($grid) {
+    if (type === "confirm") {
+      emit("delRowData", row);
+      await $grid.remove(row);
+    }
+  }
+};
+const cellDBLClickEvent = ({ row, column, $event }) => {
+  //双击单元格事件
+  emit("cellDBLClick", row, column, $event);
+};
+const pageChange = ({ currentPage, pageSize }) => {
+  //分页
+  emit("pageChange", currentPage, pageSize);
+};
+
+// 动态计算函数
+function calculateTableHeight(rowHeightNew) {
+  const $table = tableRef.value
+  let newRowNum = 0;
+  let pageHeight = 0;
+  if (rowHeightNew) {
+    rowHeight.value = rowHeightNew;
+  }
+  if ($table) {
+    const insertRecords = $table.getInsertRecords()
+    newRowNum = insertRecords.length;
+  }
+  if (props.pagination.total > 10) {
+    pageHeight = 44;
+  }
+  const rowCount = props.tableData?.length
+  headerHeight.value = tableRef.value.$el.querySelector('.vxe-header--row')?.offsetHeight
+  tableHeight.value = (newRowNum + rowCount) * (rowHeight.value + 1.8) + (48.8 + pageHeight + 5) + headerHeight.value + 'px'
+}
+
+//监控config的变化，目前重新计算了表格高度
+watch(config, (newConfig) => {
+  console.log('newConfig');
+  console.log(newConfig);
+  // 监听 config 变化的处理逻辑
+  gridOptions.minHeight = newConfig.minHeight;
+  gridOptions.maxHeight = newConfig.maxHeight;
+  rowHeight.value = newConfig.rowHeight;
+  gridOptions.pagerConfig.currentPage = newConfig.pagerConfig.currentPage;
+  gridOptions.pagerConfig.pageSize = newConfig.pagerConfig.pageSize;
+  gridOptions.pagerConfig.total = newConfig.pagerConfig.total;
+
+}, { deep: true });
+
+//自定义表格高度根据行数行高自动调节，监控props.tableData的变化
+watch(() => props.tableData, (newTableData) => {
+  calculateTableHeight(config.rowHeight);
+}, { deep: true });
+
+//动态行样式
+//1、获取响应式变量高度，其中rowHeight=ref(config.rowHeight);
+function getRowStyle() {
+  return { height: rowHeight.value + 'px' };
+}
+
+function onEditActivated(params) {
+  const { row, $table } = params;
+  // 遍历每一列
+  $table.getColumns().forEach(column => {
+    // 判断是否包含某属性 
+    if (column && column?.slots!==undefined) {
+      if(column.slots.hasOwnProperty('editActiveMethod')){
+        //当包含编辑激活回调函数时则调用该函数
+        column.slots.editActiveMethod(row,column);
+      }
+    }
+  });
+}
+
+function getButtonInfo($table, row, operate, buttonDom) {
+  const columns = $table.getColumns();
+  for (let i = 0; i < columns.length; i++) {
+    let column = columns[i];
+    if(column?.title !== '操作'){
+      continue;
+    }
+    if (column && column?.slots!==undefined) {
+      if(column.slots.hasOwnProperty(buttonDom)){
+        if (column.slots[buttonDom]) {
+          const template = column.slots[buttonDom];
+          if(operate === 'name'){
+            if(template.hasOwnProperty('name')){
+              return template.name;
+            }
+          }else if(operate === 'btn'){
+            if(template.hasOwnProperty('click')){
+              return template.click(row);
+            }
+          }
+        }
+      }
+    } 
+  }
+  return '';
+}
+
+function getButtonShow($table, row, buttonDom) {
+  const columns = $table.getColumns();
+  for (let i = 0; i < columns.length; i++) {
+    let column = columns[i];
+    if(column?.title !== '操作'){
+      continue;
+    }
+    if (column && column?.slots!==undefined) {
+      if(column.slots.hasOwnProperty(buttonDom)){
+        return true;
+      }
+    } 
+  }
+  return false;
+}
+
+async function addRows(num) {
+  const $table = tableRef.value;
+  const record = props.additional;
+  let records = new Array(num).fill(record);
+  emit("addRowsCallBack",records, results => records = results);
+  await $table.insertAt(records, null);
+  calculateTableHeight();
+}
+
+
+//自定义表格高度根据行数行高自动调节
+// watch(() => tableRef?.value?.getInsertRecords(), (newTableData) => {
+//   calculateTableHeight();
+// }, { deep: true });
+
+function getInsertRows() {
+  const $table = tableRef.value;
+  return $table.getInsertRecords();
+}
+
+const allSubmit = async (callback) => {
+  //多行编辑保存
+  const $table = tableRef.value;
+  if ($table) {
+    const $grid = tableRef.value;
+    const errMap = await $grid.validate(true);
+    if (errMap) {
+      VXETable.modal.message({ status: "error", content: "请填写相关内容！" });
+    } else {
+      // const updateRecords = $table.getUpdateRecords();
+      const { insertRecords, removeRecords, updateRecords } =
+        $grid.getRecordset();
+      if (insertRecords.length != 0) {
+        console.log(insertRecords);
+        //新增
+        emit("insertRecords", insertRecords);
+      } else if (updateRecords.length != 0) {
+        //修改
+        emit("updateRecords", updateRecords);
+      } 
+      await callback();
+    }
+    
+  }
+};
+
+// // 将方法暴露出去
+defineExpose({ addRows,getInsertRows,allSave,allSubmit });
+
+</script>
+
+<style lang="scss"></style>

src/main.js

@@ -4,8 +4,10 @@ import Cookies from 'js-cookie'
 
 import ElementPlus from 'element-plus'
 import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
+import { useTable } from "./plugins/vxe-table";
 
 import '@/assets/styles/index.scss' // global css
+import "vxe-table/lib/style.css";
 
 import App from './App'
 import store from './store'
@@ -94,4 +96,7 @@ app.use(ElementPlus, {
   // 支持 large、default、small
   size: Cookies.get('size') || 'default'
 })
+
+
+app.use(useTable);
 app.mount('#app')

src/plugins/vxe-table/index.js

@@ -0,0 +1,37 @@
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+// 自行按照，具体 echarts 看文档
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/grid'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/legend'
+import 'echarts/lib/component/legendScroll'
+
+// 引入 vxe-table pro
+import './pro/vxe-table-pro.es6.min'
+import './pro/vxe-table-pro.min.css'
+
+// 引入快捷菜单插件（可选）
+import VXETablePluginMenus from 'vxe-table-plugin-menus'
+// 引入图表插件（可选）
+import VXETablePluginCharts from 'vxe-table-plugin-charts'
+import 'vxe-table-plugin-charts/dist/style.css'
+
+// 全局默认参数
+VXETable.config({
+  authId: '1kedlpuyjow1v7ez', // Auth ID 在官网登录查看（必须，重要！！！）
+  version: 4, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
+  zIndex: 999 // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
+})
+
+// 安装快捷菜单插件（可选）
+VXETable.use(VXETablePluginMenus)
+// 安装图表插件（可选）
+VXETable.use(VXETablePluginCharts)
+
+export function useTable (app) {
+  app.use(VXETable)
+}

src/plugins/vxe-table/pro/vxe-table-pro.css

@@ -0,0 +1,170 @@
+.vxe-table--fnr.vxe-modal--wrapper .vxe-modal--content {
+  padding: 0;
+}
+.vxe-table--fnr.vxe-modal--wrapper .vxe-modal--content {
+  display: flex;
+  flex-direction: column;
+}
+
+.vxe-table--fnr .vxe-table--fnr-tabs {
+  flex-shrink: 0;
+  border-bottom: 1px solid #e8eaec;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-table--fnr .vxe-table--fnr-tabs > span {
+  position: relative;
+  display: inline-block;
+  padding: 0 1em;
+  height: 2.4em;
+  line-height: 2.4em;
+  text-align: center;
+  border-right: 1px solid #e8eaec;
+  background-color: #F8F8F9;
+  vertical-align: bottom;
+  cursor: pointer;
+}
+.vxe-table--fnr .vxe-table--fnr-tabs > span.is--active {
+  background-color: #fff;
+}
+.vxe-table--fnr .vxe-table--fnr-tabs > span.is--active:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  width: 100%;
+  height: 1px;
+  background-color: #fff;
+  z-index: 1;
+}
+.vxe-table--fnr .vxe-table--fnr-tabs > span:not(.is--active) {
+  color: #909399;
+}
+.vxe-table--fnr .vxe-table--fnr-body {
+  flex-shrink: 0;
+  padding: 0.3em 1em 0 1em;
+}
+.vxe-table--fnr .vxe-table--fnr-form {
+  width: 100%;
+  border: 0;
+  border-spacing: 0;
+  border-collapse: separate;
+}
+.vxe-table--fnr .vxe-table--fnr-form tr {
+  visibility: hidden;
+}
+.vxe-table--fnr .vxe-table--fnr-form tr.is--visible {
+  visibility: visible;
+}
+.vxe-table--fnr .vxe-table--fnr-form-title {
+  white-space: nowrap;
+  padding-right: 0.8em;
+}
+.vxe-table--fnr .vxe-table--fnr-form-content,
+.vxe-table--fnr .vxe-table--fnr-form-input {
+  width: 100%;
+}
+.vxe-table--fnr .vxe-table--fnr-form-content {
+  padding: 0.3em 0;
+}
+.vxe-table--fnr .vxe-table--fnr-form-filter {
+  padding-left: 1.8em;
+  vertical-align: top;
+}
+.vxe-table--fnr .vxe-table--fnr-form-filter > .vxe-checkbox {
+  display: block;
+  margin: 0.6em 0 0 0;
+}
+.vxe-table--fnr .vxe-table--fnr-footer {
+  flex-shrink: 0;
+  padding: 0.8em 1em;
+  overflow: hidden;
+  text-align: right;
+}
+.vxe-table--fnr .vxe-table--fnr-search {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  border-top: 1px solid #e8eaec;
+  border-bottom: 1px solid #e8eaec;
+  overflow: hidden;
+}
+.vxe-table--fnr .vxe-table--fnr-search .vxe-table--fnr-search-list,
+.vxe-table--fnr .vxe-table--fnr-search .vxe-list--virtual-wrapper {
+  height: 100%;
+}
+.vxe-table--fnr .vxe-table--fnr-search-header {
+  flex-shrink: 0;
+  height: 2.5em;
+  line-height: 2.5em;
+  padding: 0 0.8em;
+  font-weight: 700;
+  background-color: #f8f8f8;
+}
+.vxe-table--fnr .vxe-table--fnr-search-header,
+.vxe-table--fnr .vxe-table--fnr-find-item {
+  display: flex;
+}
+.vxe-table--fnr .vxe-table--fnr-search-header > div,
+.vxe-table--fnr .vxe-table--fnr-find-item > div {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vxe-table--fnr .vxe-table--fnr-search-header > div:nth-child(1),
+.vxe-table--fnr .vxe-table--fnr-find-item > div:nth-child(1) {
+  width: 100px;
+  flex-shrink: 0;
+}
+.vxe-table--fnr .vxe-table--fnr-search-header > div:nth-child(2),
+.vxe-table--fnr .vxe-table--fnr-find-item > div:nth-child(2) {
+  width: 160px;
+  flex-shrink: 0;
+}
+.vxe-table--fnr .vxe-table--fnr-search-header > div:nth-child(3),
+.vxe-table--fnr .vxe-table--fnr-find-item > div:nth-child(3) {
+  flex-grow: 1;
+}
+.vxe-table--fnr .vxe-table--fnr-search-body {
+  flex-grow: 1;
+  overflow: hidden;
+  border-top: 1px solid #e8eaec;
+  border-bottom: 1px solid #e8eaec;
+}
+.vxe-table--fnr .vxe-table--fnr-find-item {
+  height: 2em;
+  line-height: 2em;
+  padding: 0 0.8em;
+  cursor: pointer;
+}
+.vxe-table--fnr .vxe-table--fnr-find-item.is--active {
+  font-weight: 700;
+  color: #409eff;
+  background-color: #e6f7ff;
+}
+.vxe-table--fnr .vxe-table--fnr-find-item:hover {
+  color: #409eff;
+}
+.vxe-table--fnr .vxe-table--fnr-find-item:hover.is--active {
+  background-color: #d7effb;
+}
+.vxe-table--fnr .vxe-table--fnr-find-item:hover > div {
+  text-decoration: underline;
+}
+.vxe-table--fnr .vxe-table--fnr-search-footer {
+  flex-shrink: 0;
+  height: 2em;
+  line-height: 2em;
+  padding: 0 0.8em;
+  visibility: hidden;
+}
+.vxe-table--fnr .vxe-table--fnr-search-footer.is--error {
+  color: #f56c6c;
+}
+.vxe-table--fnr .vxe-table--fnr-search-footer.is--visible {
+  visibility: visible;
+}

src/plugins/vxe-table/pro/vxe-table-pro.es6.min.d.ts

@@ -0,0 +1,7 @@
+/**
+ * vxe-table pro v2.1.6
+ * Purchase authorization: https://vxetable.cn/plugins/
+ * @copyright x_extends@163.com
+ */
+export const VXETablePro: {}
+export default VXETablePro

src/plugins/vxe-table/pro/vxe-table-pro.min.css

@@ -0,0 +1 @@
+.vxe-table--fnr.vxe-modal--wrapper .vxe-modal--content{padding:0}.vxe-table--fnr.vxe-modal--wrapper .vxe-modal--content{display:flex;flex-direction:column}.vxe-table--fnr .vxe-table--fnr-tabs{flex-shrink:0;border-bottom:1px solid #e8eaec;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-table--fnr .vxe-table--fnr-tabs>span{position:relative;display:inline-block;padding:0 1em;height:2.4em;line-height:2.4em;text-align:center;border-right:1px solid #e8eaec;background-color:#f8f8f9;vertical-align:bottom;cursor:pointer}.vxe-table--fnr .vxe-table--fnr-tabs>span.is--active{background-color:#fff}.vxe-table--fnr .vxe-table--fnr-tabs>span.is--active:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background-color:#fff;z-index:1}.vxe-table--fnr .vxe-table--fnr-tabs>span:not(.is--active){color:#909399}.vxe-table--fnr .vxe-table--fnr-body{flex-shrink:0;padding:.3em 1em 0 1em}.vxe-table--fnr .vxe-table--fnr-form{width:100%;border:0;border-spacing:0;border-collapse:separate}.vxe-table--fnr .vxe-table--fnr-form tr{visibility:hidden}.vxe-table--fnr .vxe-table--fnr-form tr.is--visible{visibility:visible}.vxe-table--fnr .vxe-table--fnr-form-title{white-space:nowrap;padding-right:.8em}.vxe-table--fnr .vxe-table--fnr-form-content,.vxe-table--fnr .vxe-table--fnr-form-input{width:100%}.vxe-table--fnr .vxe-table--fnr-form-content{padding:.3em 0}.vxe-table--fnr .vxe-table--fnr-form-filter{padding-left:1.8em;vertical-align:top}.vxe-table--fnr .vxe-table--fnr-form-filter>.vxe-checkbox{display:block;margin:.6em 0 0 0}.vxe-table--fnr .vxe-table--fnr-footer{flex-shrink:0;padding:.8em 1em;overflow:hidden;text-align:right}.vxe-table--fnr .vxe-table--fnr-search{display:flex;flex-direction:column;flex-grow:1;border-top:1px solid #e8eaec;border-bottom:1px solid #e8eaec;overflow:hidden}.vxe-table--fnr .vxe-table--fnr-search .vxe-list--virtual-wrapper,.vxe-table--fnr .vxe-table--fnr-search .vxe-table--fnr-search-list{height:100%}.vxe-table--fnr .vxe-table--fnr-search-header{flex-shrink:0;height:2.5em;line-height:2.5em;padding:0 .8em;font-weight:700;background-color:#f8f8f8}.vxe-table--fnr .vxe-table--fnr-find-item,.vxe-table--fnr .vxe-table--fnr-search-header{display:flex}.vxe-table--fnr .vxe-table--fnr-find-item>div,.vxe-table--fnr .vxe-table--fnr-search-header>div{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-table--fnr .vxe-table--fnr-find-item>div:nth-child(1),.vxe-table--fnr .vxe-table--fnr-search-header>div:nth-child(1){width:100px;flex-shrink:0}.vxe-table--fnr .vxe-table--fnr-find-item>div:nth-child(2),.vxe-table--fnr .vxe-table--fnr-search-header>div:nth-child(2){width:160px;flex-shrink:0}.vxe-table--fnr .vxe-table--fnr-find-item>div:nth-child(3),.vxe-table--fnr .vxe-table--fnr-search-header>div:nth-child(3){flex-grow:1}.vxe-table--fnr .vxe-table--fnr-search-body{flex-grow:1;overflow:hidden;border-top:1px solid #e8eaec;border-bottom:1px solid #e8eaec}.vxe-table--fnr .vxe-table--fnr-find-item{height:2em;line-height:2em;padding:0 .8em;cursor:pointer}.vxe-table--fnr .vxe-table--fnr-find-item.is--active{font-weight:700;color:#409eff;background-color:#e6f7ff}.vxe-table--fnr .vxe-table--fnr-find-item:hover{color:#409eff}.vxe-table--fnr .vxe-table--fnr-find-item:hover.is--active{background-color:#d7effb}.vxe-table--fnr .vxe-table--fnr-find-item:hover>div{text-decoration:underline}.vxe-table--fnr .vxe-table--fnr-search-footer{flex-shrink:0;height:2em;line-height:2em;padding:0 .8em;visibility:hidden}.vxe-table--fnr .vxe-table--fnr-search-footer.is--error{color:#f56c6c}.vxe-table--fnr .vxe-table--fnr-search-footer.is--visible{visibility:visible}

src/plugins/vxe-table/pro/vxe-table-pro.scss

@@ -0,0 +1,168 @@
+.vxe-table--fnr {
+  &.vxe-modal--wrapper {
+    .vxe-modal--content {
+      padding: 0;
+    }
+    .vxe-modal--content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.vxe-table--fnr {
+  .vxe-table--fnr-tabs {
+    flex-shrink: 0;
+    border-bottom: 1px solid #e8eaec;
+    user-select: none;
+    & > span {
+      position: relative;
+      display: inline-block;
+      padding: 0 1em;
+      height: 2.4em;
+      line-height: 2.4em;
+      text-align: center;
+      border-right: 1px solid #e8eaec;
+      background-color: #F8F8F9;
+      vertical-align: bottom;
+      cursor: pointer;
+      &.is--active {
+        background-color: #fff;
+        &:after {
+          content: "";
+          position: absolute;
+          left: 0;
+          bottom: -1px;
+          width: 100%;
+          height: 1px;
+          background-color: #fff;
+          z-index: 1;
+        }
+      }
+      &:not(.is--active) {
+        color: #909399;
+      }
+    }
+  }
+  .vxe-table--fnr-body {
+    flex-shrink: 0;
+    padding: 0.3em 1em 0 1em;
+  }
+  .vxe-table--fnr-form {
+    width: 100%;
+    border: 0;
+    border-spacing: 0;
+    border-collapse: separate;
+    tr {
+      visibility: hidden;
+      &.is--visible {
+        visibility: visible;
+      }
+    }
+  }
+  .vxe-table--fnr-form-title {
+    white-space: nowrap;
+    padding-right: 0.8em;
+  }
+  .vxe-table--fnr-form-content,
+  .vxe-table--fnr-form-input {
+    width: 100%;
+  }
+  .vxe-table--fnr-form-content {
+    padding: 0.3em 0;
+  }
+  .vxe-table--fnr-form-filter {
+    padding-left: 1.8em;
+    vertical-align: top;
+    & > .vxe-checkbox {
+      display: block;
+      margin: 0.6em 0 0 0;
+    }
+  }
+  .vxe-table--fnr-footer {
+    flex-shrink: 0;
+    padding: 0.8em 1em;
+    overflow: hidden;
+    text-align: right;
+  }
+  .vxe-table--fnr-search {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    border-top: 1px solid #e8eaec;
+    border-bottom: 1px solid #e8eaec;
+    overflow: hidden;
+    .vxe-table--fnr-search-list,
+    .vxe-list--virtual-wrapper {
+      height: 100%;
+    }
+  }
+  .vxe-table--fnr-search-header {
+    flex-shrink: 0;
+    height: 2.5em;
+    line-height: 2.5em;
+    padding: 0 0.8em;
+    font-weight: 700;
+    background-color: #f8f8f8;
+  }
+  .vxe-table--fnr-search-header,
+  .vxe-table--fnr-find-item {
+    display: flex;
+    & > div {
+      user-select: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      &:nth-child(1) {
+        width: 100px;
+        flex-shrink: 0;
+      }
+      &:nth-child(2) {
+        width: 160px;
+        flex-shrink: 0;
+      }
+      &:nth-child(3) {
+        flex-grow: 1;
+      }
+    }
+  }
+  .vxe-table--fnr-search-body {
+    flex-grow: 1;
+    overflow: hidden;
+    border-top: 1px solid #e8eaec;
+    border-bottom: 1px solid #e8eaec;
+  }
+  .vxe-table--fnr-find-item {
+    height: 2em;
+    line-height: 2em;
+    padding: 0 0.8em;
+    cursor: pointer;
+    &.is--active {
+      font-weight: 700;
+      color: #409eff;
+      background-color: #e6f7ff;
+    }
+    &:hover {
+      color: #409eff;
+      &.is--active {
+        background-color: #d7effb;
+      }
+      & > div {
+        text-decoration: underline;
+      }
+    }
+  }
+  .vxe-table--fnr-search-footer {
+    flex-shrink: 0;
+    height: 2em;
+    line-height: 2em;
+    padding: 0 0.8em;
+    visibility: hidden;
+    &.is--error {
+      color: #f56c6c;
+    }
+    &.is--visible {
+      visibility: visible;
+    }
+  }
+}

src/views/model/device/index.vue

@@ -252,11 +252,21 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="12" v-show="false">
             <el-form-item label="通讯来源设备ID" prop="deviceSourceId">
               <el-input v-model="form.deviceSourceId" placeholder="请输入通讯来源设备ID" />
             </el-form-item>
           </el-col>
+          <el-col :span="12"  v-show="ioserverShow">
+            <el-form-item label="ISS工程名称" prop="issPrjName">
+              <el-input v-model="form.issPrjName" placeholder="请输入ISS工程名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-show="ioserverShow">
+            <el-form-item label="ISS组名称" prop="issGroupName">
+              <el-input v-model="form.issGroupName" placeholder="请输入通讯来源设备ID" />
+            </el-form-item>
+          </el-col>
           <el-col :span="12">
             <el-form-item label="是否可用" prop="enabledFlag">
               <el-select v-model="form.enabledFlag" placeholder="请选择是否可用">
@@ -333,9 +343,9 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="设备模型" prop="deviceModelId">
-              <el-select v-model="form.deviceModelId" placeholder="请选择设备模型id">
-                <el-option label="请选择字典生成" value="" />
-              </el-select>
+              <el-tree-select v-model="form.deviceModelId" :data="devicemodelOptions"
+                :props="{ value: 'modelCode', label: 'modelName', children: 'children', disabled: 'disabled' }" value-key="modelCode" placeholder="请选择设备模型"
+                check-strictly :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" @change="modelChange"/>
             </el-form-item>
           </el-col>
           <!-- <el-col :span="12">
@@ -402,7 +412,8 @@
  }
 </style>
 <script setup name="Device">
-import { getUuid, listDevice, getDevice, delDevice, addDevice, updateDevice, listWithFilterColumn, selectDcBaseDeviceinfoMaxSort,cleanRedisCache } from "@/api/model/device";
+import { getUuid, getDevice, delDevice, addDevice, updateDevice, listWithFilterColumn, selectDcBaseDeviceinfoMaxSort, cleanRedisCache, addAndSyncParamMap } from "@/api/model/device";
+import { listDevicemodel, } from "@/api/model/devicemodel";
 import { deptTreeSelect } from "@/api/system/user";
 import lock from "@/assets/icons/svg/lock.svg";
 import { ref, onMounted, onUnmounted } from "vue";
@@ -431,6 +442,8 @@ const sortItemMap = ref({});
 const queryParamFilter = ref({});
 const sortProps = ref([]);
 const deptName = ref(null);
+const devicemodelOptions = ref([]);
+const ioserverShow = ref(false);
 const enabledFlag = ref([
   { label: '可用', value: true, elTagType: 'default', elTagClass: null },
   { label: '不可用', value: false, elTagType: 'default', elTagClass: null }
@@ -489,6 +502,12 @@ const data = reactive({
     deviceSourceId: [
       { required: true, message: "通讯来源设备ID不能为空", trigger: "change" }
     ],
+    issPrjName: [
+      { required: ioserverShow, message: "ISS工程名不能为空", trigger: "change" }
+    ],
+    issGroupName: [
+      { required: ioserverShow, message: "ISS组名称不能为空", trigger: "change" }
+    ],
     deviceType: [
       { required: true, message: "设备类型不能为空", trigger: "change" }
     ],
@@ -678,10 +697,17 @@ function submitForm() {
                 })
                 return;
               } else {
-                addDevice(form.value).then(response => {
-                  proxy.$modal.msgSuccess("新增成功");
-                  open.value = false;
-                  getList();
+                addAndSyncParamMap(form.value).then(response => {
+                  console.log("deviceresponse");
+                  console.log(response);
+                  if (response.data?.status == true) {
+                    proxy.$modal.msgSuccess("新增成功");
+                    open.value = false;
+                    getList();
+                  } else {
+                    proxy.$modal.msgError(response.data?.msg);
+                  }
+                  
                 });
               }
             });
@@ -759,6 +785,11 @@ function deviceSourceChange(val) {
     if (item.value == val) {
       form.value.deviceSource = item.label;
     }
+    if (val == '002') {
+      ioserverShow.value = true;
+    } else {
+      ioserverShow.value = false;
+    }
   })
 }
 
@@ -954,7 +985,41 @@ function cleanRedis() {
   });
 }
 
+function getTreeselect() {
+  let param = {
+    "vailable": true,
+  }
+  listDevicemodel(param).then(response => {
+    devicemodelOptions.value = [];
+    const data = { id: 0, modelName: '顶级节点', children: [], disabled: true };
+    data.children = proxy.handleTree(response.data, "id", "pid");
+
+    // 遍历树节点，判断modelTypeId为'1'的节点，并添加disabled属性
+    traverseTree(data.children);
+
+    devicemodelOptions.value.push(data);
+  });
+ 
+}
+
+function traverseTree(nodes) {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.modelTypeId === '1') {
+      node.disabled = true;
+    }
+    if (node.children && node.children.length > 0) {
+      traverseTree(node.children);
+    }
+  }
+}
+
+function modelChange(val) {
+
+}
+
 
+getTreeselect();
 getDeptTree();
 getList();
 </script>

src/views/model/devicemodel/addmodel.vue

@@ -1,130 +1,107 @@
 <template>
-  <div class="app-container" 
-    v-loading="loading">
+  <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-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-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel"
+          :height="tableHeight">
+          <el-carousel-item :key="1" name="1" class="textaligncenter overflowscroll height600">
+            <div class="widthhalfinlineblock">
               <el-form-item label="模型名称" prop="modelName">
-                  <el-input v-model="form.modelName" placeholder="请输入模型名称" />
+                <el-input v-model="form.modelName" placeholder="请输入模型名称" />
               </el-form-item>
               <el-form-item label="模型编码" prop="modelCode">
-                  <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
+                <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-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-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-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable @change="modalTypeControllButton">
+                  <el-option v-for="dict in modeltypeList" :key="dict.modelTypeCode" :label="dict.modelTypeName"
+                    :value="dict.modelTypeCode" />
+                  <!-- <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-switch v-model="form.vailable" 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-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>
+          <el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll height600">
+            <div class="width75percentinlineblock vxeTableStyle">
+              <!-- <div class="textalignright marginbottom5">
+                <el-button type="primary" style="display: inline-block !important"
+                  @click="addParamModel">添加参数模版</el-button>
+              </div> -->
+              <div class="table" height="auto">
+                <Table ref="paramModelTable" :config="config" :colField="colField" :columns="columns"
+                  :tableData="selectedModelList" :loading="loading" :hasAddRows="true" :hasDelSelect="true"
+                  :hasAllSave="true"  @beforeEditRowsCallBack="beforeEditRowsCallBack"
+                  @addRowsCallBack="addRowsCallBack" @beforeAddRowsCallBack="beforeAddRowsCallBack"
+                  @insertRecords="insertRecords" @updateRecords="updateRecords" @delSelectData="delSelectData"
+                  @delRowData="delRowData" addRowsText="添加参数模版" :addRowsType=2 @btnClick="addParamModel">
+                </Table>
               </div>
+            </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-carousel-item :key="3" name="3" class="textaligncenter overflowscroll height600">
+            <div class="width75percentinlineblock vxeTableStyle" style="line-height: 600px;height:600px">
+              <h1 style="color: rgb(9, 161, 9);font-size: 36px;">操作成功!</h1>
+              <h2 style="font-size: 24px;color: #5555556f;">
+                倒计时:<span style="color: rgb(255, 77, 0); font-size: 36px;">{{ countdown }}</span> 秒返回首页
+              </h2>
+            </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" draggable>
-        <el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600">
-          <el-table-column type="selection" width="55" :selectable="ifselectable"/>
+      <el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body
+        :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type" draggable>
+        <el-label></el-label>
+        <el-select v-model="value" placeholder="请选择分区" clearable @change="partionChange">
+          <el-option v-for="dict in dc_device_partion" :value="dict.value" :label="dict.label" :key="dict.key" />
+        </el-select>
+        <el-table ref="dialogTable" v-show="paramClassTableShow" :data="paramModelListShow" 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">
@@ -132,42 +109,43 @@
               <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> 
+      </el-dialog>
     </div>
   </div>
 </template>
 <style lang="scss">
-  @import "@/assets/styles/self-defined.scss";
-  .customCarousel {
-    div{
-      button {
-          display: none !important;
-      }
-    } 
-    ul{
+@import "@/assets/styles/self-defined.scss";
+
+.customCarousel {
+  div {
+    button {
       display: none !important;
     }
-  } 
+  }
+
+  ul {
+    display: none !important;
+  }
+}
+
+.customCarousel .vxeTableStyle button {
+  display: inline-block !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";
+<script setup name="editdevicemodel">
+import { listDevicemodel, addDevicemodel, updateDevicemodel, getDevicemodel } from "@/api/model/devicemodel";
+import { listParamclass, listParamclassNoPage, } from "@/api/model/paramclass";
+import { listModelTypeNoPage } from "@/api/model/modelType";
 import { required } from "@vee-validate/rules";
-import { listModelparam, addModelparam, updateModelparam, delModelparam} from "@/api/model/modelparam";
+import { listModelparam, addModelparam, updateModelparam, delModelparam, listModelparamNoPage, removeAndAdd, addBatch, editBatch, } from "@/api/model/modelparam";
+import Table from "@/components/TableColumnTreeSelect/index.vue";
 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 { dc_class_type, dc_device_partion } = proxy.useDict('dc_class_type', 'dc_device_partion');
 const router = useRouter();
 const devicemodelOptions = ref([]);
 const open = ref(false);
@@ -178,30 +156,48 @@ const nextStepButtonShow = ref(false);
 const prevStepButtonShow = ref(false);
 const submitButtonShow = ref(true);
 const paramModelList = ref([]);
+const paramModelListShow = ref([]);
+const paramModelListTable = ref([]);
+const paramModelListVxetable = 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([]);
-const tempPid = router.currentRoute._value.query.pid;
+const tableHeight = ref("0px");
+const paramClassTableShow = ref(false);
+const insertRecordsCache = ref([]);
+const updateRecordsCache = ref([]);
+const delSelectDataCache = ref([]);
+const countdown = ref(5); // 倒计时初始值
+const modelId = router.currentRoute._value.query.pid;
 const data = reactive({
   form: {
-    sort:1,
+    sort: 1,
+    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,
+    modelTypeId: null,
+    pid: null,
+    note: null
   },
-  dc_available: [
-      {label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, 
-      {label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
-  ],
+
   queryParams: {
+    pageNum: 1,
+    pageSize: 10,
     modelName: null,
     modelCode: null,
     sort: null,
     modelTypeId: null,
     pid: null,
-    note: null
+    note: null,
   },
   rules: {
     modelTypeId: [
@@ -226,7 +222,11 @@ const data = reactive({
 });
 
 const { queryParams, form, rules } = toRefs(data);
-   
+
+const yes_or_no = [
+  { label: '可控', value: true },
+  { label: '不可控', value: false }
+]
 // 取消按钮
 function cancel() {
   open.value = false;
@@ -257,6 +257,138 @@ function reset() {
   proxy.resetForm("devicemodelRef");
 }
 
+
+const columns = ref([
+  { type: "checkbox", width: 50, fixed: "left" },
+  {
+    field: "paramClassId",
+    title: "参数名称",
+    width: 'auto',
+    minWidth: 120,
+    editRender: {
+      name: "$select",
+      options: paramModelListTable,
+      attrs: { placeholder: "请输入参数名称" },
+    },
+    slots: {
+      edit: "select",
+      options: paramModelListVxetable,
+      value: 'value',
+      label: 'label',
+      key: 'value',
+      visibleChange: beforeChangeParamClass
+    }
+  },
+  {
+    field: "paramClassId",
+    title: "参数编码",
+    width: 'auto',
+    minWidth: 120,
+    editRender: {
+      name: "$input",
+      attrs: { placeholder: "请输入参数编码" },
+    }
+  },
+  {
+    field: "plcAdr",
+    title: "PLC地址位",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$input", attrs: { placeholder: "请输入PLC地址位" } },
+  },
+  {
+    field: "controllab",
+    title: "是否可控",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$select", options: yes_or_no, attrs: { placeholder: "请选择是否可控" } },
+  },
+  {
+    field: "classType",
+    title: "类别",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$select", options: dc_class_type, attrs: { placeholder: "请输入角色内共享" } },
+  },
+  {
+    field: "devicePartion",
+    title: "分区",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$select", options: dc_device_partion, attrs: { placeholder: "请输入用户共享" } },
+  },
+  {
+    field: "note",
+    title: "备注",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$input", attrs: { placeholder: "请输入统计单元状态" } },
+  },
+  {
+    title: "操作",
+    width: 380,
+    slots: {
+      default: "operate",
+    }
+  },
+]);
+
+const tableData = ref([]);
+const config = ref({
+  //表格配置项
+  id: "table", //唯一标识
+  height: 'auto', //表格的高度；支持铺满父容器或者固定高度
+  // minHeight: '550px',
+  maxHeight: tableHeight,
+  rowHeight: 66,
+  align: "center", //所有的列对齐方式
+  border: "none", //是否带有边框:false|default 默认显示边框,true|full 显示完整边框,outer 显示外边框,inner 显示内边框,none
+  round: true, //是否为圆角边框
+  stripe: true, //是否带有斑马纹
+  size: "medium", //表格的尺寸:medium, small, mini
+  loading: false, //表格是否显示加载中
+  showHeader: true, //是否显示表头
+  columnConfig: {
+    //列配置信息
+    isCurrent: false, //当鼠标点击列头时，是否要高亮当前列
+    isHover: true, //当鼠标移到列头时，是否要高亮当前头
+  },
+  rowConfig: {
+    //行配置信息
+    keyField: "id", //自定义行数据唯一主键的字段名
+    isCurrent: false, //当鼠标点击行时，是否要高亮当前行
+    isHover: true, //当鼠标移到行时，是否要高亮当前行
+  },
+  editConfig: {
+    //可编辑配置项
+    trigger: "dblclick", //触发方式click（点击触发编辑）,dblclick（双击触发编辑）
+    mode: "row", //编辑模式cell（单元格编辑模式）,row（行编辑模式）
+  },
+  pagerConfig: {
+    //分页配置项
+    enabled: true, //是否启用
+    currentPage: queryParams.value.pageNum, //当前页
+    pageSize: queryParams.value.pageSize, //每页大小
+    total: selectedModelList.value.length, //总条数
+    autoHidden: false, //当只有一页时自动隐藏
+    pageSizes: [10, 15, 20, 50, 100], //每页大小选项列表
+  },
+  toolbarConfig: {
+    //工具栏配置
+    refresh: true, // 显示刷新按钮
+    import: false, // 显示导入按钮
+    export: false, // 显示导出按钮
+    zoom: true, // 显示全屏按钮
+    custom: true, // 显示自定义列按钮
+  },
+  editRules: {
+    devicePartion: [
+      { required: true, message: '分区不能为空' },
+    ],
+  }
+});
+
+
 /** 提交按钮 */
 function submitForm() {
   loading.value = false;
@@ -266,207 +398,300 @@ function submitForm() {
       //模型按钮主表维护
       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);
-           }
-        })
-      });
+      proxy.$refs.paramModelTable.allSave();
+      executeRequests();
+    }
+  });
+}
 
-      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 => {
-        });
+async function executeRequests() {
+ 
+  try {
+    if (insertRecordsCache.value?.length > 0) {
+      await addBatch(insertRecordsCache.value).then(response => {
+        console.log("addBatch");
+        console.log(response);
       });
-      
-      //修改
-      updateModelSubmit.value.forEach(item=>{
-        updateModelparam(item).then(response => { 
-        });
+    }
+
+    if (updateRecordsCache.value?.length > 0) {
+      await editBatch(updateRecordsCache.value).then(response => {
+        console.log("editBatch");
+        console.log(response);
       });
-      //删除
-      deleteModelIds.value.forEach(item=>{
-        delModelparam(item).then(response => {  
-        });
+    }
+
+    if (delSelectDataCache.value?.length > 0) {
+      await delModelparam(delSelectDataCache.value).then(response => {
+        console.log("delModelparam");
+        console.log(response);
       });
-      router.go(-1);
     }
-  });
+    nextStep();
+  } catch (error) {
+    // 前一个请求执行失败的处理逻辑
+    console.error(error);
+  }
 }
+
 /** 查询设备模型类型列表 */
-  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 => {
+function getModelTypeListNoPage() {
+  console.log('getModelTypeListNoPage');
+  loading.value = true;
+  listModelTypeNoPage(queryParams.value).then(response => {
+    modeltypeList.value = response.data;
+    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);
+      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;
-    }
+
+onMounted(() => {
+  calculateTableHeight();
+  window.addEventListener('resize', calculateTableHeight);
+  window.onresize = () => {
+    return (() => {
+      calculateTableHeight();
+    })
   }
-  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 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 prevStep(){
-      currentStep.value = currentStep.value - 1;
-      proxy.$refs.carousel.prev(); 
-      submitButtonShow.value = false;
-      nextStepButtonShow.value = true;
-      prevStepButtonShow.value = false;
+}
+function nextStep() {
+  proxy.$refs["devicemodelRef"].validate(valid => {
+    if (valid) {
+      if (currentStep.value < 2) {
+        currentStep.value = currentStep.value + 1;
+        proxy.$refs.carousel.next();
+        submitButtonShow.value = true;
+        nextStepButtonShow.value = false;
+        prevStepButtonShow.value = true;
+        if (currentStep.value == 2) {
+          let param = {
+            modelTypeId: form.value.modelTypeId,
+            modelId: form.value.modelCode,
+          }
+          getOldModelParams(param);
+        }
+      } else if (currentStep.value == 2) {
+        currentStep.value = currentStep.value + 1;
+        proxy.$refs.carousel.next();
+        submitButtonShow.value = false;
+        nextStepButtonShow.value = false;
+        prevStepButtonShow.value = false;
+        startCountdown();
+      }
+    }
+  });
+}
+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;
+  addParamModelShow.value = true;
+  loading.value = false;
+}
+
+function partionChange(val) {
+  let paramClassTableShowByPartion = ref();
+  let selectedModelListByPartion = ref();
+  paramClassTableShow.value = true;
+  paramClassTableShowByPartion.value = paramModelList.value;
+  selectedModelListByPartion.value = selectedModelList.value?.filter(element => {
+    return element.devicePartion == val;
+  });
+
+  paramModelListShow.value = paramClassTableShowByPartion.value?.filter(element => {
+    return !selectedModelListByPartion.value?.some(item => item.paramClassId === element.paramClassCode);
+  });
+  paramModelListShow.value?.map(item => {
+    item.paramClassId = item.paramClassCode;
+    item.modelId = form.value.modelCode;
+    item.controllab = false;
+    item.devicePartion = val;
+    item.id = "ABCDEFXYZ" + item.modelId + item.paramClassId;
+  });
+}
+
+
+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;
   }
+  config.value.pagerConfig.total = selectedModelList.value.length;
+  pageChange(queryParams.value.currentPage, queryParams.value.pageSize);
+  addParamModelShow.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 getOldModelParams(param) {
+  listModelparamNoPage(param).then(res => {
+    selectedModelList.value = res.data;
+    config.value.pagerConfig.total = selectedModelList.value.length;
+    pageChange(queryParams.value.currentPage, queryParams.value.pageSize);
+  });
+}
+
+const calculateTableHeight = () => {
+  nextTick(() => {
+    const windowHeight = window.innerHeight;
+    const remainingHeight = windowHeight - 273;
+    tableHeight.value = remainingHeight + 'px';
+  });
+};
+
+function getModelParamList() {
+  listParamclassNoPage(queryParams.value).then(response => {
+    paramModelList.value = response.data;
+    paramModelListTable.value = paramModelList.value.map(item => {
+      return {
+        value: item.paramClassCode,
+        label: item.paramClassName,
+      };
     });
-  }
+    paramModelListVxetable.value = paramModelListTable.value
+  });
+}
 
-  function handleDelete(element){
-    selectedModelList.value = selectedModelList.value.filter(item => item.id !== element.id);
-  }
+function insertRecords(rows) {
+  insertRecordsCache.value = [
+    ...insertRecordsCache.value,
+    ...rows
+  ];
+}
 
-  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 updateRecords(rows) {
+  rows = rows.filter(row => {
+    return !row.id?.includes("ABCDEFXYZ")
+  })
+  updateRecordsCache.value = [
+    ...updateRecordsCache.value,
+    ...rows
+  ];
+}
 
-  function startEditing(row, column, cell, event) {
-    if (!updateModelIds.value.includes(row.id)) {
-      updateModelIds.value.push(row.id);
-    }
-    row.editing = true; // 进入编辑模式
+function delSelectData(rows) {
+  rows = rows.filter(row => {
+    return !row.id?.includes("ABCDEFXYZ")
+  })
+  const params = rows.map((i) => i.id);
+  delSelectDataCache.value = [
+    ...delSelectDataCache.value,
+    ...params
+  ];
+}
+
+function delRowData(row) {
+  if (row.id?.includes("ABCDEFXYZ")) {
+    return;
   }
+  const params = [row.id];
+  delSelectDataCache.value = [
+    ...delSelectDataCache.value,
+    ...params
+  ];
+}
+
+function changeVailable({ row }, event) {
 
-  function saveData(row) {
-    // 保存数据的逻辑...
-    row.editing = false; // 保存完成后，切换回显示模式
+}
+
+function beforeChangeParamClass(envent, row, column) {
+  if (envent !== undefined && envent) {
+    let thePartionModelList = selectedModelList.value.filter(item => {
+      return row.devicePartion === item.devicePartion;
+    })
+    paramModelListVxetable.value = paramModelList.value.filter(element => {
+      return !thePartionModelList.some(item => {
+        return element.paramClassCode === item.paramClassId;
+      });
+    }).map(temp => {
+      {
+        return {
+          value: temp.paramClassCode,
+          label: temp.paramClassName,
+        };
+      }
+    });
+  } else {
+    paramModelListVxetable.value = paramModelListTable.value
   }
+}
+
+function startCountdown() {
+  const timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value === 0) {
+      clearInterval(timer);
+      // 在倒计时结束后导航到首页
+      router.push({
+        path: "devicemodel",
+        query: {
 
-  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;
-  }
+  }, 1000); // 每秒减少1秒
+}
 
-  function selectRadio(row){
-    if (!updateModelIds.value.includes(row.id)) {
-      updateModelIds.value.push(row.id);
-    }
-  }
+function beforeAddRowsCallBack() {
+  return true;
+}
 
-  function getOldModelParams(){
-    listModelparam(queryParams.value).then(response => {
+function pageChange(currentPage, pageSize) {
+  config.value.pagerConfig.currentPage = currentPage;
+  config.value.pagerConfig.pageSize = pageSize;
+  queryParams.value.currentPage = currentPage;
+  queryParams.value.pageSize = pageSize;
+  // 对selectedModelList.value进行分页处理
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  selectedModelListTable.value = selectedModelList.value.slice(startIndex, endIndex);
+}
 
-        // oldSelectedList.value = response.rows;
-    });
-  }
-  
-  getTreeselect();
-  getModelTypeList();
-  getOldModelParams();
+
+getTreeselect();
+getModelTypeListNoPage();
+getModelParamList();
 </script>
 
 

src/views/model/devicemodel/editModel.vue

@@ -5,13 +5,14 @@
       <el-steps :active="currentStep">
         <el-step title="模型信息" description="名称、编号、序号、备注等" />
         <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">
+        <el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel"
+          :height="tableHeightNew">
+          <el-carousel-item :key="1" name="1" class="textaligncenter overflowscroll" :style="{ height: tableHeightNew }">
             <div class="widthhalfinlineblock">
               <el-form-item label="模型名称" prop="modelName">
                 <el-input v-model="form.modelName" placeholder="请输入模型名称" />
@@ -29,12 +30,13 @@
               </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-option v-for="dict in modeltypeList" :key="dict.modelTypeCode" :label="dict.modelTypeName"
+                    :value="dict.modelTypeCode" />
+                  <!-- <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-switch v-model="form.vailable" class="ml-2i" />
               </el-form-item>
               <el-form-item label="备注" prop="note">
                 <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
@@ -52,54 +54,20 @@
               </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>
+          <el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll" :style="{ height: tableHeightNew }">
+            <div class="width75percentinlineblock vxeTableStyle">
+              <div class="table" height="auto">
+                <Table ref="paramModelTable" :config="config" :colField="colField" :columns="columns"
+                  :tableData="selectedModelListTable" :loading="loading" :hasAddRows="true" :hasDelSelect="true"
+                  :hasAllSave="true" @pageChange="pageChange" @addRowsCallBack="addRowsCallBack"
+                  @beforeAddRowsCallBack="beforeAddRowsCallBack" @insertRecords="insertRecords"
+                  @updateRecords="updateRecords" @delSelectData="removeRecords" @delRowData="delRowData"
+                  addRowsText="添加参数模版" :addRowsType=2 @btnClick="addParamModel">
+                </Table>
               </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">
+            <div class="fixedbottomright width50percent textalignleft">
               <el-form-item class="inlineblock marginright6percent divsonmarginleft0">
                 <el-button type="primary" v-if="prevStepButtonShow" @click="prevStep"
                   style="display: inline-block !important">上一步</el-button>
@@ -111,12 +79,26 @@
               </el-form-item>
             </div>
           </el-carousel-item>
+          <el-carousel-item :key="3" name="3" class="textaligncenter overflowscroll" :style="{ height: tableHeightNew }">
+            <div class="width75percentinlineblock vxeTableStyle"
+              :style="{ lineHeight: tableHeightNewSec, height: tableHeightNewSec }">
+              <h1 style="color: rgb(9, 161, 9);font-size: 36px;">操作成功!</h1>
+              <h2 style="font-size: 24px;color: #5555556f;">
+                倒计时:<span style="color: rgb(255, 77, 0); font-size: 36px;">{{ countdown }}</span> 秒返回首页
+              </h2>
+            </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" draggable>
-        <el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600">
+        <el-label></el-label>
+        <el-select v-model="value" placeholder="请选择分区" clearable @change="partionChange">
+          <el-option v-for="dict in dc_device_partion" :value="dict.value" :label="dict.label" :key="dict.key" />
+        </el-select>
+        <el-table ref="dialogTable" v-show="paramClassTableShow" :data="paramModelListShow" key="newTable"
+          style="width: 100%" :style="{ maxHeight: tableHeightNew }">
           <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" />
@@ -125,12 +107,6 @@
               <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>
@@ -153,19 +129,24 @@
     display: none !important;
   }
 }
+
+.customCarousel .vxeTableStyle button {
+  display: inline-block !important;
+}
 </style>
 <script setup name="editdevicemodel">
-import { listDevicemodel, addDevicemodel, updateDevicemodel, getDevicemodel} from "@/api/model/devicemodel";
-import { listParamclass } from "@/api/model/paramclass";
-import { listModelType } from "@/api/model/modelType";
+import { listDevicemodel, addDevicemodel, updateDevicemodel, getDevicemodel } from "@/api/model/devicemodel";
+import { listParamclassNoPage, } from "@/api/model/paramclass";
+import { listModelTypeNoPage } from "@/api/model/modelType";
 import { required } from "@vee-validate/rules";
-import { listModelparam, addModelparam, updateModelparam, delModelparam } from "@/api/model/modelparam";
+import { delModelparam, listModelparamNoPage, addBatch, editBatch, } from "@/api/model/modelparam";
+import Table from "@/components/TableColumnTreeSelect/index.vue";
+import { ElMessageBox } from 'element-plus';
 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 { dc_class_type, dc_device_partion } = proxy.useDict('dc_class_type', 'dc_device_partion');
 const router = useRouter();
 const devicemodelOptions = ref([]);
-const open = ref(false);
 const loading = ref(false);
 const modeltypeList = ref([]);
 const currentStep = ref(1);
@@ -173,32 +154,34 @@ const nextStepButtonShow = ref(false);
 const prevStepButtonShow = ref(false);
 const submitButtonShow = ref(true);
 const paramModelList = ref([]);
+const paramModelListShow = ref([]);
+const paramModelListTable = ref([]);
+const paramModelListVxetable = 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(deleteModelIds);
-console.log(proxy);
+const tableHeight = ref("0px");
+const paramClassTableShow = ref(false);
+const insertRecordsCache = ref([]);
+const updateRecordsCache = ref([]);
+const delSelectDataCache = ref([]);
+const countdown = ref(3); // 倒计时初始值
 const modelId = router.currentRoute._value.query.pid;
+const modelCode = router.currentRoute._value.query.modelCode;
+const selectedModelListTable = ref([]);
+const tableHeightNew = ref('0px');
+const tableHeightNewSec = ref('0px');
+const newSelectedList = ref([]);
+const model_group = ref("model_group");
+const model = ref("model");
 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
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
   },
   rules: {
     modelTypeId: [
@@ -224,10 +207,26 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data);
 
+const yes_or_no = [
+  { label: '可控', value: true },
+  { label: '不可控', value: false }
+]
 // 取消按钮
 function cancel() {
-  open.value = false;
-  reset();
+  ElMessageBox.confirm('您确定要取消吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 用户点击了确认按钮
+    router.push({
+      path: 'devicemodel',
+      query: {}
+    });
+  }).catch(() => {
+    // 用户点击了取消按钮
+    // 可以在这里执行其他操作
+  });
 }
 
 // 表单重置
@@ -254,86 +253,211 @@ function reset() {
   proxy.resetForm("devicemodelRef");
 }
 
+
+const columns = ref([
+  { type: "checkbox", width: 50, fixed: "left" },
+  {
+    field: "paramClassId",
+    title: "参数名称",
+    width: 'auto',
+    minWidth: 120,
+    editRender: {
+      name: "$select",
+      options: paramModelListTable,
+      attrs: { placeholder: "请输入参数名称" },
+    },
+    slots: {
+      edit: "select",
+      options: paramModelListVxetable,
+      value: 'value',
+      label: 'label',
+      key: 'value',
+      visibleChange: beforeChangeParamClass
+    }
+  },
+  {
+    field: "paramClassId",
+    title: "参数编码",
+    width: 'auto',
+    minWidth: 120,
+    editRender: {
+      name: "$input",
+      attrs: { placeholder: "请输入参数编码" },
+    }
+  },
+  {
+    field: "plcAdr",
+    title: "PLC地址位",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$input", attrs: { placeholder: "请输入PLC地址位" } },
+  },
+  {
+    field: "controllab",
+    title: "是否可控",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$select", options: yes_or_no, attrs: { placeholder: "请选择是否可控" } },
+  },
+  {
+    field: "classType",
+    title: "类别",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$select", options: dc_class_type, attrs: { placeholder: "请输入角色内共享" } },
+  },
+  {
+    field: "devicePartion",
+    title: "分区",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$select", options: dc_device_partion, attrs: { placeholder: "请输入用户共享" } },
+  },
+  {
+    field: "note",
+    title: "备注",
+    width: 'auto',
+    minWidth: 120,
+    editRender: { name: "$input", attrs: { placeholder: "请输入统计单元状态" } },
+  },
+  {
+    title: "操作",
+    width: 380,
+    slots: {
+      default: "operateNew",
+    }
+  },
+]);
+
+const tableData = ref([]);
+const config = ref({
+  //表格配置项
+  id: "table", //唯一标识
+  height: 'auto', //表格的高度；支持铺满父容器或者固定高度
+  minHeight: '200px',
+  maxHeight: tableHeight,
+  rowHeight: 66,
+  align: "center", //所有的列对齐方式
+  border: "none", //是否带有边框:false|default 默认显示边框,true|full 显示完整边框,outer 显示外边框,inner 显示内边框,none
+  round: true, //是否为圆角边框
+  stripe: true, //是否带有斑马纹
+  size: "medium", //表格的尺寸:medium, small, mini
+  loading: false, //表格是否显示加载中
+  showHeader: true, //是否显示表头
+  columnConfig: {
+    //列配置信息
+    isCurrent: false, //当鼠标点击列头时，是否要高亮当前列
+    isHover: true, //当鼠标移到列头时，是否要高亮当前头
+  },
+  rowConfig: {
+    //行配置信息
+    keyField: "id", //自定义行数据唯一主键的字段名
+    isCurrent: false, //当鼠标点击行时，是否要高亮当前行
+    isHover: true, //当鼠标移到行时，是否要高亮当前行
+  },
+  editConfig: {
+    //可编辑配置项
+    trigger: "dblclick", //触发方式click（点击触发编辑）,dblclick（双击触发编辑）
+    mode: "row", //编辑模式cell（单元格编辑模式）,row（行编辑模式）
+  },
+  pagerConfig: {
+    //分页配置项
+    enabled: true, //是否启用
+    currentPage: 1, //当前页
+    pageSize: 10, //每页大小
+    total: 0, //总条数
+    autoHidden: false, //当只有一页时自动隐藏
+    pageSizes: [10, 15, 20, 50, 100], //每页大小选项列表
+  },
+  toolbarConfig: {
+    //工具栏配置
+    refresh: true, // 显示刷新按钮
+    import: false, // 显示导入按钮
+    export: false, // 显示导出按钮
+    zoom: true, // 显示全屏按钮
+    custom: true, // 显示自定义列按钮
+  },
+  editRules: {
+    devicePartion: [
+      { required: true, message: '分区不能为空' },
+    ],
+  }
+});
+
+
 /** 提交按钮 */
 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("修改成功");
+          console.log("form.value.modelTypeId");
+          console.log(form.value.modelTypeId);
+          console.log("response.code == '200'");
+          console.log(response.code == '200');
+          console.log(form.value.modelTypeId == model_group.value && response.code == '200');
+          if (form.value.modelTypeId == model_group.value && response.code == '200') {
+            endStep();
+          }
         });
       } else {
         addDevicemodel(form.value).then(response => {
+          if (form.value.modelTypeId == model_group.value && response.code == '200') {
+            
+            endStep();
+          }
         });
       }
-      //模型参数表维护
-      //删除计算
-      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);
-          }
-        })
-      });
+      if (form.value.modelTypeId == model.value) {
+        proxy.$refs.paramModelTable.allSubmit(executeRequests);
+      } 
+    }
+  });
+}
 
-      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 => {
-        });
+async function executeRequests() {
+  try {
+    if (insertRecordsCache.value?.length > 0) {
+      await addBatch(insertRecordsCache.value).then(response => {
+        console.log("addBatch");
+        console.log(insertRecordsCache.value);
+        console.log(response);
       });
-
-      //修改
-      updateModelSubmit.value.forEach(item => {
-        updateModelparam(item).then(response => {
-        });
+    }
+    if (updateRecordsCache.value?.length > 0) {
+      await editBatch(updateRecordsCache.value).then(response => {
+        console.log("editBatch");
+        console.log(updateRecordsCache.value);
+        console.log(response);
       });
-      //删除
-      deleteModelIds.value.forEach(item => {
-        delModelparam(item).then(response => {
-        });
+    }
+    if (delSelectDataCache.value?.length > 0) {
+      await delModelparam(delSelectDataCache.value).then(response => {
+        console.log("delModelparam");
+        console.log(delSelectDataCache.value);
+        console.log(response);
       });
-      router.go(-1);
     }
-  });
+    insertRecordsCache.value = [];
+    updateRecordsCache.value = [];
+    delSelectDataCache.value = [];
+    proxy.$modal.msgSuccess("操作成功");
+    nextStep();
+  } catch (error) {
+    // 前一个请求执行失败的处理逻辑
+    console.error(error);
+  }
 }
 
+
+
 /** 查询设备模型类型列表 */
-function getModelTypeList() {
+function getModelTypeListNoPage() {
   loading.value = true;
-  listModelType(queryParams.value).then(response => {
-    console.log(response);
-    modeltypeList.value = response.rows;
+  listModelTypeNoPage(queryParams.value).then(response => {
+    modeltypeList.value = response.data;
     loading.value = false;
   });
 }
@@ -343,7 +467,7 @@ function getTreeselect() {
     devicemodelOptions.value = [];
     const data = { id: 0, modelName: '顶级节点', children: [] };
     const parentData = response.data.filter(item => {
-      return (item.modelTypeId == 1);
+      return (item.modelTypeId == '1');
     });
     data.children = proxy.handleTree(parentData, "id", "pid");
     devicemodelOptions.value.push(data);
@@ -351,37 +475,84 @@ function getTreeselect() {
 }
 
 onMounted(() => {
-  getDevicemodel(modelId).then(response => {
-    form.value = response.data
-    console.log(response.data)
-    
-  })
+  let type = router.currentRoute._value.query.type;
+  if (type == 'edit') {
+    getDevicemodel(modelId).then(response => {
+      form.value = response.data;
+      modalTypeControllButton();
+    })
+  }
+  calculateTableHeight();
+  window.addEventListener('resize', calculateTableHeight);
+  window.onresize = () => {
+    return (() => {
+      calculateTableHeight();
+    })()
+  }
   // 在组件首次加载完成后执行的逻辑
   // 可以在这里给组件复制
   // form.value.pid=tempPid;
 });
-function modalTypeControllButton() {
-  if (form.value.modelTypeId == "2") {
+function modalTypeControllButton(val) {
+  console.log('modalTypeControllButton');
+  console.log(val);
+  if (form.value.modelTypeId == model.value) {
     submitButtonShow.value = false;
     nextStepButtonShow.value = true;
-  } else if (form.value.modelTypeId == "1") {
+  } else if (form.value.modelTypeId == model_group.value) {
     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;
+    if (valid) {
+      if (currentStep.value < 2) {
+        currentStep.value = currentStep.value + 1;
+        proxy.$refs.carousel.next();
+        submitButtonShow.value = true;
+        nextStepButtonShow.value = false;
+        prevStepButtonShow.value = true;
+        if (currentStep.value == 2) {
+          let param = {
+            modelTypeId: form.value.modelTypeId,
+            modelId: modelCode
+          }
+          getOldModelParams(param);
+        }
+      } else if (currentStep.value == 2) {
+        currentStep.value = currentStep.value + 1;
+        proxy.$refs.carousel.next();
+        submitButtonShow.value = false;
+        nextStepButtonShow.value = false;
+        prevStepButtonShow.value = false;
+        startCountdown();
+      }
+    }
+  });
+}
+
+function endStep() {
+  console.log("endStep");
+  console.log(currentStep.value);
+  proxy.$refs["devicemodelRef"].validate(valid => {
+    console.log("valid");
+    console.log(valid);
+    if (valid) {
+      console.log("form.value.modelTypeId == model_group");
+      console.log(form.value.modelTypeId == model_group.value);
+      if (form.value.modelTypeId == model_group.value) {
+        currentStep.value = 3;
+        proxy.$refs.carousel.next();
+        proxy.$refs.carousel.next();
+        submitButtonShow.value = false;
+        nextStepButtonShow.value = false;
+        prevStepButtonShow.value = false;
+        console.log("currentStep.value");
+        console.log(currentStep.value);
+        startCountdown();
+      }
     }
-    // }
   });
 }
 function prevStep() {
@@ -395,80 +566,179 @@ function prevStep() {
 /** 查询参数模型信息列表 */
 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;
-  });
+  addParamModelShow.value = true;
+  loading.value = false;
 }
 
-function handleDelete(element) {
-  selectedModelList.value = selectedModelList.value.filter(item => item.id !== element.id);
+function partionChange(val) {
+  let paramClassTableShowByPartion = ref();
+  let selectedModelListByPartion = ref();
+  paramClassTableShow.value = true;
+  paramClassTableShowByPartion.value = paramModelList.value;
+  selectedModelListByPartion.value = selectedModelList.value?.filter(element => {
+    return element.devicePartion == val;
+  });
+
+  paramModelListShow.value = paramClassTableShowByPartion.value?.filter(element => {
+    return !selectedModelListByPartion.value?.some(item => item.paramClassId === element.paramClassCode);
+  });
+  paramModelListShow.value?.map(item => {
+    item.paramClassId = item.paramClassCode;
+    item.modelId = form.value.modelCode;
+    item.controllab = false;
+    item.devicePartion = val;
+    item.id = "ABCDEFXYZ" + form.value.modelCode + item.paramClassCode;
+  });
 }
 
+
 function selectedSubmit() {
-  const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({
+  newSelectedList.value = 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;
-  }
+  proxy.$refs.paramModelTable.addRows(newSelectedList.value.length);
   addParamModelShow.value = false;
+
 }
 
-function startEditing(row, column, cell, event) {
-  if (!updateModelIds.value.includes(row.id)) {
-    updateModelIds.value.push(row.id);
-  }
-  row.editing = true; // 进入编辑模式
+function getOldModelParams(param) {
+  listModelparamNoPage(param).then(res => {
+    selectedModelList.value = res.data;
+    config.value.pagerConfig.total = selectedModelList.value.length;
+    pageChange(queryParams.value.currentPage, queryParams.value.pageSize);
+  });
+
+}
+
+const calculateTableHeight = () => {
+  nextTick(() => {
+    const windowHeight = window.innerHeight;
+    const remainingHeight = windowHeight - 523;
+    tableHeight.value = remainingHeight + 'px';
+    tableHeightNew.value = remainingHeight + 70 + 'px';
+    tableHeightNewSec.value = remainingHeight + 20 + 'px';
+  });
+};
+
+function getModelParamList() {
+  listParamclassNoPage(queryParams.value).then(response => {
+    paramModelList.value = response.data;
+    paramModelListTable.value = paramModelList.value.map(item => {
+      return {
+        value: item.paramClassCode,
+        label: item.paramClassName,
+      };
+    });
+    paramModelListVxetable.value = paramModelListTable.value
+  });
+}
+
+function insertRecords(rows) {
+  insertRecordsCache.value = [
+    ...rows,
+    ...insertRecordsCache.value,
+
+  ];
+}
+
+function updateRecords(rows) {
+  updateRecordsCache.value = [
+    ...rows,
+    ...updateRecordsCache.value,
+
+  ];
 }
 
-function saveData(row) {
-  // 保存数据的逻辑...
-  row.editing = false; // 保存完成后，切换回显示模式
+function removeRecords(rows) {
+
+  // 过滤掉ABCDEFXYZ开头的数据
+  const params = rows.map((i) => i.id);
+  delSelectDataCache.value = [
+    ...params.filter(item => {
+      if (typeof item === 'string' && item.includes('ABCDEFXYZ')) {
+        return false; // 过滤掉包含 'ABCDEFXYZ' 的字符串项
+      }
+      return true; // 保留非字符串项
+    }),
+    ...delSelectDataCache.value
+  ];
+
 }
 
-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;
+function delRowData(row) {
+  const params = [row.id];
+  delSelectDataCache.value = [
+    ...params.filter(item => {
+      if (typeof item === 'string' && item.includes('ABCDEFXYZ')) {
+        return false; // 过滤掉包含 'ABCDEFXYZ' 的字符串项
       }
-    });
-  }
-  return flag;
+      return true; // 保留非字符串项
+    }),
+    ...delSelectDataCache.value
+  ];
+
 }
 
-function selectRadio(row) {
-  if (!updateModelIds.value.includes(row.id)) {
-    updateModelIds.value.push(row.id);
+function pageChange(currentPage, pageSize) {
+  config.value.pagerConfig.currentPage = currentPage;
+  config.value.pagerConfig.pageSize = pageSize;
+  queryParams.value.currentPage = currentPage;
+  queryParams.value.pageSize = pageSize;
+  // 对selectedModelList.value进行分页处理
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  selectedModelListTable.value = selectedModelList.value.slice(startIndex, endIndex);
+}
+
+
+function beforeChangeParamClass(envent, row, column) {
+  if (envent !== undefined && envent) {
+    let thePartionModelList = selectedModelList.value.filter(item => {
+      return row.devicePartion === item.devicePartion;
+    })
+    paramModelListVxetable.value = paramModelList.value.filter(element => {
+      return !thePartionModelList.some(item => {
+        return element.paramClassCode === item.paramClassId;
+      });
+    }).map(temp => {
+      {
+        return {
+          value: temp.paramClassCode,
+          label: temp.paramClassName,
+        };
+      }
+    });
+  } else {
+    paramModelListVxetable.value = paramModelListTable.value
   }
 }
 
-function getOldModelParams() {
-  listModelparam(queryParams.value).then(response => {
+function startCountdown() {
+  const timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value === 0) {
+      clearInterval(timer);
+      // 在倒计时结束后导航到首页
+      router.push({
+        path: "devicemodel",
+        query: {
 
-    // oldSelectedList.value = response.rows;
-  });
+        }
+      });
+    }
+  }, 1000); // 每秒减少1秒
 }
 
+function addRowsCallBack(records, callback) {
+  callback([...newSelectedList.value])
+}
+
+
+
 getTreeselect();
-getModelTypeList();
+getModelTypeListNoPage();
+getModelParamList();
 getOldModelParams();
 </script>
 

src/views/model/devicemodel/index.vue

@@ -25,15 +25,15 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="模型类别Id" prop="modelTypeId">
+      <el-form-item label="模型类别" prop="modelTypeId">
         <el-select v-model="queryParams.modelTypeId" placeholder="请选择模型类别Id" clearable>
-          <el-option label="请选择字典生成" value="" />
+          <el-option v-for="dict in modeltypeList" :key="dict.modelTypeCode" :label="dict.modelTypeName" :value="dict.modelTypeCode" />
         </el-select>
       </el-form-item>
-      <el-form-item label="上级id" prop="pid">
+      <el-form-item label="上级" prop="pid">
         <el-input
           v-model="queryParams.pid"
-          placeholder="请输入上级id"
+          placeholder="请输入上级"
           clearable
           @keyup.enter="handleQuery"
         />
@@ -64,6 +64,15 @@
           v-hasPermi="['model:devicemodel:add']"
         >新增</el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleDeleteSelected"
+          v-hasPermi="['model:devicemodel:remove']"
+        >删除</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="info"
@@ -74,10 +83,8 @@
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-    <el-button
-          v-hasPermi="['model:devicemodel:add']"
-        >新增</el-button>
     <el-table
+      ref="devicemodelTableRef"
       v-if="refreshTable"
       v-loading="loading"
       :data="devicemodelList"
@@ -85,23 +92,24 @@
       :default-expand-all="isExpandAll"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
+      <el-table-column type="selection" width="55" />
       <el-table-column label="模型名称" align="center" prop="modelName" />
       <el-table-column label="模型编码" align="center" prop="modelCode" />
       <el-table-column label="模型id" align="center" prop="id" />
       <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="模型类别Id" align="center" prop="modelTypeId">
+      <el-table-column label="模型类别" align="center" prop="modelTypeId">
         <template #default="scope">
-          <dict-tag :options="dc_model_type" :value="scope.row.modelTypeId" />
+          <dict-tag :options="modeltypeListTable" :value="scope.row.modelTypeId" />
         </template>
       </el-table-column>
-      <el-table-column label="上级id" align="center" prop="pid" />
+      <el-table-column label="上级" align="center" prop="pid" />
       <el-table-column label="备注" align="center" prop="note" />
       <el-table-column label="是否可用" align="center" prop="vailable">
         <template #default="scope">
-          <dict-tag :options="available" :value="scope.row.vailable"/>
+          <dict-tag :options="availableTable" :value="scope.row.vailable"/>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" style="width:300px">
         <template #default="scope">
           <el-button
             type="text"
@@ -133,16 +141,16 @@
         </el-form-item>
         <el-form-item label="模型类别" prop="modelTypeId">
           <el-select v-model="form.modelTypeId" placeholder="请选择模型类别Id">
-            <el-option label="请选择字典生成" value="" />
+            <el-option v-for="dict in modeltypeList" :key="dict.modelTypeCode" :label="dict.modelTypeName" :value="dict.modelTypeCode" />
           </el-select>
         </el-form-item>
-        <el-form-item label="上级id" prop="pid">
+        <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="请选择上级id"
+            placeholder="请选择上级"
             check-strictly
           />
         </el-form-item>
@@ -180,7 +188,7 @@
 
 <script setup name="Devicemodel">
 import { listDevicemodel, getDevicemodel, delDevicemodel, addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
-
+import { listModelTypeNoPage } from "@/api/model/modelType";
 const { proxy } = getCurrentInstance();
 const { dc_model_type } = proxy.useDict('dc_model_type');
 
@@ -193,7 +201,13 @@ const title = ref("");
 const isExpandAll = ref(true);
 const refreshTable = ref(true);
 const router = useRouter();
+const modeltypeList = ref([]);
+const modeltypeListTable = ref([]);
 const available = [
+      {label: '可用', value: true, elTagType: 'default', elTagClass: null}, 
+      {label: '不可用', value: false, elTagType: 'default', elTagClass: null}
+];
+const availableTable = [
       {label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, 
       {label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
   ];
@@ -221,10 +235,10 @@ const data = reactive({
       { required: true, message: "排序不能为空", trigger: "blur" }
     ],
     modelTypeId: [
-      { required: true, message: "模型类别Id不能为空", trigger: "change" }
+      { required: true, message: "模型类别不能为空", trigger: "change" }
     ],
     pid: [
-      { required: true, message: "上级id不能为空", trigger: "blur" }
+      { required: true, message: "上级不能为空", trigger: "blur" }
     ],
     isLeaf: [
       { required: true, message: "是否是叶节点不能为空", trigger: "blur" }
@@ -301,7 +315,6 @@ function resetQuery() {
 
 /** 新增按钮操作 */
 function handleAdd(row) {
-  const path = "/newdevicemodel";
   let pid = 0;
   if(row.isLeaf){
     proxy.$message({
@@ -314,10 +327,9 @@ function handleAdd(row) {
     pid = row.id;
   }
   router.push({
-    name:path,
+    path: "editdevicemodel",
     query:{
-      pid:pid,
-      // devicemodelOptions:devicemodelOptions
+      type: 'add'
     }
   }); 
 }
@@ -333,10 +345,15 @@ function toggleExpandAll() {
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  const path = "/editdevicemodel"
+  console.log('row');
+  console.log(row);
   router.push({
-    name: path,
-    query: { pid: row.id }
+    path: "editdevicemodel",
+    query: {
+      pid: row.id,
+      modelCode: row.modelCode,
+      type: 'edit'
+    }
   })
 }
 
@@ -384,8 +401,46 @@ function handleDelete(row) {
   }).catch(() => {});
 }
 
+/** 删除按钮操作 */
+function handleDeleteSelected() {
+  let ids = ""
+  const selectedRows = proxy.$refs.devicemodelTableRef.getSelectionRows();
+  if (selectedRows.length === 0) {
+    return;
+  }
+  let childrenSelectedIds = selectedRows.map(item => {
+    return item.id
+  })
+  console.log("handleDeleteSelected2");
+  ids = childrenSelectedIds.join(",");
+  proxy.$modal.confirm('是否确认删除设备模型信息编号为"' + ids + '"的数据项？').then(function() {
+    return delDevicemodel(childrenSelectedIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+
+}
+
+/** 查询设备模型类型列表 */
+function getModelTypeListNoPage() {
+  loading.value = true;
+  listModelTypeNoPage(queryParams.value).then(response => {
+    console.log(response);
+    modeltypeList.value = response.data;
+    modeltypeListTable.value = response.data.map(item => {
+      return {
+        value: item.modelTypeCode,
+        label: item.modelTypeName,
+      }
+    });
+    loading.value = false;
+  });
+}
+
  /** 查询设备模型信息下拉树结构 */
 
 //  getTreeselect();
+getModelTypeListNoPage();
 getList();
 </script>

src/views/model/devicemodel/modelparams.vue

@@ -92,7 +92,7 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="modelparamList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="modelparamList" @selection-change="handleSelectionChange" :height="tableHeight">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" />
       <el-table-column label="参数模型ID" align="center" prop="paramClassId" />
@@ -288,6 +288,11 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data);
 
+function getInit() {
+  queryParams.value.modelId = localStorage.getItem("modelId");
+}
+
+
 /** 查询设备模型参数明细列表 */
 function getList() {
   loading.value = true;