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