Browse Source

设备模型初版

develop
ljlong_2630 10 months ago
parent
commit
d811b0577f
  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

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

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

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

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

653
src/components/TableColumnTreeSelect/index.vue

@ -0,0 +1,653 @@
<template>
<vxe-grid
ref="tableRef"
v-bind="gridOptions"
:loading="props.loading"
:columns="props.columns"
:data="props.tableData"
@cell-dblclick="cellDBLClickEvent"
:row-style="getRowStyle"
@edit-actived="onEditActivated"
@page-change="pageChange"
>
<template #toolbar_buttons>
<vxe-button size="small" status="primary" icon="vxe-icon-add" @click="addRow()" v-if="hasAddRows">
{{ addRowsText }}
</vxe-button>
<vxe-button size="small" status="danger" icon="vxe-icon-delete-fill" @click="delSelect" v-if="hasDelSelect">
删除
</vxe-button>
<vxe-button size="small" status="success" icon="vxe-icon-save" @click="allSave" v-if="props.hasAllSave">
保存
</vxe-button>
</template>
<template #toolbar_buttons_new>
<vxe-button size="small" status="primary" icon="vxe-icon-add" @click="addRow()" v-if="hasAddRows">
{{ addRowsText }}
</vxe-button>
<vxe-button size="small" status="danger" icon="vxe-icon-delete-fill" @click="delSelect" v-if="hasDelSelect">
删除
</vxe-button>
</template>
<template #statusDef="{ row }">
<vxe-switch v-model="row.status" size="mini"></vxe-switch>
</template>
<template #text="{ row, column }">
<el-input
@mousedown.stop
v-model="row[column?.field]"
placeholder="请输入内容"
disabled
/>
</template>
<template #input="{ row, column }">
<el-input
@mousedown.stop
v-model="row[column?.field]"
placeholder="请输入内容"
/>
</template>
<template #treeSelect="{ row, column }">
<el-tree-select
@mousedown.stop
v-model="row[column?.field]"
:data="typeof column.slots.data === 'function' ? column.slots.data(row,column) : column.slots.data"
:props="column.slots.props"
check-strictly
:default-expand-all="true"
:value-key="column.slots.key"
:size="column.slots.size"
@change="($event) => { column.slots.change($event, row, column)}"
/>
</template>
<template #select="{ row, column }">
<el-select @mousedown.stop v-model="row[column?.field]" @change="column?.slots.change($event,row,column)" :disabled="column?.slots.disabled" :filterable="column?.slots.filterable" @visible-change="column?.slots.visibleChange($event,row,column)">
<el-option v-for="dict in column?.slots.options" :key="dict[column?.slots.key]" :label="dict[column?.slots.label]"
:value="dict[column?.slots.value]" />
</el-select>
</template>
<template #operate="{$table, row, column }">
<template v-if="hasEditRows(row)">
<vxe-button size="small" type="text" content="取消" icon="vxe-icon-close" @click="cancelRowClick"></vxe-button>
<vxe-button size="small" type="text" status="primary" content="保存" icon="vxe-icon-check"
@click="saveRowClick(row)"></vxe-button>
</template>
<template v-else>
<vxe-button v-if="getButtonShow($table,row,'newButton')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButton')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButton')"></vxe-button>
<vxe-button v-if="getButtonShow($table,row,'newButtonTwo')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButtonTwo')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButtonTwo')"></vxe-button>
<vxe-button size="small" type="text" content="编辑" icon="vxe-icon-edit" v-if="hasEditRow"
@click="editRowClick(row)"></vxe-button>
</template>
<vxe-button size="small" type="text" status="danger" content="删除" icon="vxe-icon-delete" v-if="hasdelRow"
@click="delRowClick(row)"></vxe-button>
</template>
<template #operateNew="{$table, row, column }">
<template v-if="hasEditRows(row)">
<vxe-button size="small" type="text" content="取消" icon="vxe-icon-close" @click="cancelRowClick"></vxe-button>
<vxe-button size="small" type="text" status="primary" content="保存" icon="vxe-icon-check"
@click="saveRowClick(row)"></vxe-button>
</template>
<template v-else>
<vxe-button v-if="getButtonShow($table,row,'newButton')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButton')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButton')"></vxe-button>
<vxe-button v-if="getButtonShow($table,row,'newButtonTwo')" size="small" type="text" :content="getButtonInfo($table,row,'name','newButtonTwo')" icon="vxe-icon-edit" @click="getButtonInfo($table,row,'btn','newButtonTwo')"></vxe-button>
<vxe-button size="small" type="text" content="编辑" icon="vxe-icon-edit" v-if="hasEditRow"
@click="editRowClick(row)"></vxe-button>
</template>
<vxe-button size="small" type="text" status="danger" content="删除" icon="vxe-icon-delete" v-if="hasdelRow"
@click="delRowClick(row)"></vxe-button>
</template>
</vxe-grid>
</template>
<script setup>
import { reactive,defineExpose } from "vue";
import { VXETable } from "vxe-table";
const { proxy } = getCurrentInstance();
const tableRef = ref();
const tableHeight = ref('0px');
const rowHeight = ref(44);
const headerHeight = ref(66);
const emit = defineEmits([
"insertRecords",
"updateRecords",
"delSelectData",
"allSaveRowData",
"saveRowData",
"delRowData",
"btnClick",
"cellDBLClick",
"pageChange",
"beforeEditRowsCallBack",
"validateFormMethod",
"beforeAddRowsCallBack",
"addRowsCallBack",
]);
const props = defineProps({
config: {
//
type: Object,
default: {
//
id: "table", //
height: "auto", //
align: "center", //
border: "none", //:false|default ,true|full ,outer ,inner ,none
round: true, //
stripe: true, //
size: "medium", //:medium, small, mini
// loading: false, //
showHeader: true, //
columnConfig: {
//
isCurrent: false, //
isHover: true, //
},
rowConfig: {
//
keyField: "id", //
isCurrent: false, //
isHover: true, //
},
editConfig: {
//
trigger: "dblclick", //click,dblclick
mode: "row", //cell,row
},
pagerConfig: {
//
enabled: true, //
currentPage: 1, //
pageSize: 10, //
total: 0, //
autoHidden: true, //
pageSizes: [10, 15, 20, 50, 100], //
},
toolbarConfig: {
//
refresh: true, //
import: false, //
export: false, //
zoom: true, //
custom: true, //
},
},
},
colField: {
//
type: String,
default: "",
},
additional: {
//
type: Object,
default: {},
},
columns: {
//
type: Array,
default: [],
},
tableData: {
//
type: Array,
default: [],
},
loading: {
type: Boolean,
default: false,
},
addRowsText: {
//
type: String,
default: "新增",
},
addRowsType: {
//12
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 });
//
//1rowHeight=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

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

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

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

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

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

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

@ -1,130 +1,107 @@
<template>
<div class="app-container"
v-loading="loading">
<div class="app-container" v-loading="loading">
<!-- 添加或修改设备模型信息对话框 -->
<div class="marginbottom50px">
<el-steps :active="currentStep">
<el-step title="模型信息" description="名称、编号、序号、备注等" />
<el-step title="参数类别配置" description="模型的参数类别" />
<el-step title="调控策略" description="模型的调控策略" />
<el-step title="模型信息" description="名称、编号、序号、备注等" />
<el-step title="参数类别配置" description="模型的参数类别" />
<el-step title="完成" description="操作成功" />
</el-steps>
</div>
<div class="overflowscroll">
<el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px">
<el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" >
<el-carousel-item :key="1" name="1" class="textaligncenter overflowscroll height300">
<div class="widthhalfinlineblock">
<el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel"
:height="tableHeight">
<el-carousel-item :key="1" name="1" class="textaligncenter overflowscroll height600">
<div class="widthhalfinlineblock">
<el-form-item label="模型名称" prop="modelName">
<el-input v-model="form.modelName" placeholder="请输入模型名称" />
<el-input v-model="form.modelName" placeholder="请输入模型名称" />
</el-form-item>
<el-form-item label="模型编码" prop="modelCode">
<el-input v-model="form.modelCode" placeholder="请输入模型编码" />
<el-input v-model="form.modelCode" placeholder="请输入模型编码" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序"/>
<el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="上级" prop="pid">
<el-tree-select
v-model="form.pid"
:data="devicemodelOptions"
:props="{ value: 'id', label: 'modelName', children: 'children' }"
value-key="id"
placeholder="请选择上级"
check-strictly
:default-expand-all="true"
:default-checked-keys="defaultCheckedKeys"
/>
<el-tree-select v-model="form.pid" :data="devicemodelOptions"
:props="{ value: 'id', label: 'modelName', children: 'children' }" value-key="id" placeholder="请选择上级"
check-strictly :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" />
</el-form-item>
<el-form-item label="模型类别" key="selectmodelType" prop="modelTypeId">
<el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable @change="modalTypeControllButton">
<!-- <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" /> -->
<el-option v-for="dict in dc_model_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
<el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable @change="modalTypeControllButton">
<el-option v-for="dict in modeltypeList" :key="dict.modelTypeCode" :label="dict.modelTypeName"
:value="dict.modelTypeCode" />
<!-- <el-option v-for="dict in dc_model_type" :key="dict.value" :label="dict.label" :value="dict.value" /> -->
</el-select>
</el-form-item>
<el-form-item label="是否可用" prop="vailable">
<el-switch
v-model="form.dc_available"
class="ml-2i"
style="--el-switch-on-color: #13ce66"
/>
<el-switch v-model="form.vailable" class="ml-2i" style="--el-switch-on-color: #13ce66" />
</el-form-item>
<el-form-item label="备注" prop="note">
<el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
</el-form-item>
</div>
<div class="width50percent textalignright">
<el-form-item class="inlineblock marginright6percent divsonmarginleft0">
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important" >上一步</el-button>
<el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button>
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button>
<el-form-item class="inlineblock marginright6percent divsonmarginleft0">
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep"
style="display: inline-block !important">上一步</el-button>
<el-button type="primary" v-if="submitButtonShow" @click="submitForm"
style="display: inline-block !important">提交</el-button>
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep"
style="display: inline-block !important">下一步</el-button>
<el-button @click="cancel" style="display: inline-block !important"> </el-button>
</el-form-item>
</div>
</el-carousel-item>
<el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll height300">
<div class="width75percentinlineblock">
<div class="textalignright marginbottom5">
<el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button>
</div>
<el-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing">
<el-table-column fixed label="序号" width="80" align="center" >
<template #default="scope">
<span>{{ scope.$index+1 }}</span>
</template>
</el-table-column>
<el-table-column label="参数名称" align="center" prop="paramClassName" />
<el-table-column label="参数编码" align="center" prop="paramClassCode" />
<el-table-column label="PLC地址位" align="center" prop="plcAdr" vali>
<template #default="scope">
<ValidationProvider :rules="plcAdr" v-slot="">
<span v-if="!scope.row.editing">{{ scope.row.plcAdr}}</span>
<el-input v-else v-model="scope.row.plcAdr" @blur="saveData(scope.row)"/>
</ValidationProvider>
</template>
</el-table-column>
<el-table-column label="是否可控" align="center" prop="controllab">
<template #default="scope">
<el-switch
v-model="scope.row.controllab"
@change="selectRadio(scope.row)"
class="ml-2i"
style="--el-switch-on-color: #13ce66"
/>
</template>
</el-table-column>
<el-table-column label="类别" align="center" prop="classType">
<template #default="scope">
<dict-tag :options="dc_class_type" :value="scope.row.classType" />
</template>
</el-table-column>
<el-table-column label="分区" align="center" prop="devicePartion">
<template #default="scope">
<dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="note" />
<el-table-column label="操作" align="center" width="200px">
<template #default="scope">
<el-button style="display:inline-block !important" type="primary" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="fixedbottomright width50percent textalignright">
<el-form-item class="inlineblock marginright6percent divsonmarginleft0">
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important">上一步</el-button>
<el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button>
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button>
<el-button @click="cancel" style="display: inline-block !important"> </el-button>
</el-form-item>
<el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll height600">
<div class="width75percentinlineblock vxeTableStyle">
<!-- <div class="textalignright marginbottom5">
<el-button type="primary" style="display: inline-block !important"
@click="addParamModel">添加参数模版</el-button>
</div> -->
<div class="table" height="auto">
<Table ref="paramModelTable" :config="config" :colField="colField" :columns="columns"
:tableData="selectedModelList" :loading="loading" :hasAddRows="true" :hasDelSelect="true"
:hasAllSave="true" @beforeEditRowsCallBack="beforeEditRowsCallBack"
@addRowsCallBack="addRowsCallBack" @beforeAddRowsCallBack="beforeAddRowsCallBack"
@insertRecords="insertRecords" @updateRecords="updateRecords" @delSelectData="delSelectData"
@delRowData="delRowData" addRowsText="添加参数模版" :addRowsType=2 @btnClick="addParamModel">
</Table>
</div>
</div>
<div class="fixedbottomright width50percent textalignright">
<el-form-item class="inlineblock marginright6percent divsonmarginleft0">
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep"
style="display: inline-block !important">上一步</el-button>
<el-button type="primary" v-if="submitButtonShow" @click="submitForm"
style="display: inline-block !important">提交</el-button>
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep"
style="display: inline-block !important">下一步</el-button>
<el-button @click="cancel" style="display: inline-block !important"> </el-button>
</el-form-item>
</div>
</el-carousel-item>
<el-carousel-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

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

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

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

Loading…
Cancel
Save