lianmei
/
dc-ui
mirror of https://gitee.com/lmlz_0/dc-ui.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

设备模型初版

develop
ljlong_2630 10 months ago
parent
8c1a425678
commit
d811b0577f
17 changed files with 2268 additions and 541 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/model/device.js
  2. 9
      src/api/model/modelType.js
  3. 35
      src/api/model/modelparam.js
  4. 3
      src/assets/styles/self-defined.scss
  5. 653
      src/components/TableColumnTreeSelect/index.vue
  6. 5
      src/main.js
  7. 37
      src/plugins/vxe-table/index.js
  8. 170
      src/plugins/vxe-table/pro/vxe-table-pro.css
  9. 7
      src/plugins/vxe-table/pro/vxe-table-pro.es6.min.d.ts
  10. 10
      src/plugins/vxe-table/pro/vxe-table-pro.es6.min.js
  11. 1
      src/plugins/vxe-table/pro/vxe-table-pro.min.css
  12. 168
      src/plugins/vxe-table/pro/vxe-table-pro.scss
  13. 83
      src/views/model/device/index.vue
  14. 799
      src/views/model/devicemodel/addmodel.vue
  15. 692
      src/views/model/devicemodel/editModel.vue
  16. 105
      src/views/model/devicemodel/index.vue
  17. 7
      src/views/model/devicemodel/modelparams.vue

9
src/api/model/device.js
View File

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

9
src/api/model/modelType.js
View File

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

35
src/api/model/modelparam.js
View File

@ -51,3 +51,38 @@ export function exportModelparam(query) {
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
})
}

3
src/assets/styles/self-defined.scss
View File

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

653
src/components/TableColumnTreeSelect/index.vue
View File

@ -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>

5
src/main.js
View File

@ -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')

37
src/plugins/vxe-table/index.js
View File

@ -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)
}

170
src/plugins/vxe-table/pro/vxe-table-pro.css
View File

@ -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;
}

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

@ -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

10
src/plugins/vxe-table/pro/vxe-table-pro.es6.min.js
View File

File diff suppressed because one or more lines are too long

1
src/plugins/vxe-table/pro/vxe-table-pro.min.css
View File

@ -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}

168
src/plugins/vxe-table/pro/vxe-table-pro.scss
View File

@ -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;
}
}
}

83
src/views/model/device/index.vue
View File

@ -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>

799
src/views/model/devicemodel/addmodel.vue
View File

@ -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-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,12 +109,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>
@ -147,27 +118,34 @@
</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: [
@ -227,6 +223,10 @@ 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>

692
src/views/model/devicemodel/editModel.vue
View File

@ -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 => {
});
}
//模型参数表维护
//删除计算
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_group.value && response.code == '200') {
console.log("新增计算");
//新增计算
let addFlag = true;
selectedModelList.value.forEach(item => {
oldSelectedList.value.forEach(element => {
if (item.id == element.id) {
addFlag == false;
endStep();
}
})
if (addFlag) {
addModelSubmit.value.push(item);
}
});
console.log("新增方法");
console.log(addModelSubmit.value);
//新增
addModelSubmit.value.forEach(item => {
delete item.id;
addModelparam(item).then(response => {
});
});
}
if (form.value.modelTypeId == model.value) {
proxy.$refs.paramModelTable.allSubmit(executeRequests);
}
}
});
}
//修改
updateModelSubmit.value.forEach(item => {
updateModelparam(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);
});
//删除
deleteModelIds.value.forEach(item => {
delModelparam(item).then(response => {
});
}
if (updateRecordsCache.value?.length > 0) {
await editBatch(updateRecordsCache.value).then(response => {
console.log("editBatch");
console.log(updateRecordsCache.value);
console.log(response);
});
router.go(-1);
}
});
if (delSelectDataCache.value?.length > 0) {
await delModelparam(delSelectDataCache.value).then(response => {
console.log("delModelparam");
console.log(delSelectDataCache.value);
console.log(response);
});
}
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);
});
}
function saveData(row) {
// 保存数据的逻辑...
row.editing = false; // 保存完成后，切换回显示模式
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 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 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 flag;
return true; // 保留非字符串项
}),
...delSelectDataCache.value
];
}
function delRowData(row) {
const params = [row.id];
delSelectDataCache.value = [
...params.filter(item => {
if (typeof item === 'string' && item.includes('ABCDEFXYZ')) {
return false; // 过滤掉包含 'ABCDEFXYZ' 的字符串项
}
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>

105
src/views/model/devicemodel/index.vue
View File

@ -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>

7
src/views/model/devicemodel/modelparams.vue
View File

@ -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;

Write Preview
Loading…
Cancel
Save